Themify Builder

This documentation will guide you how to use the Themify Builder, a drag and drop layout tool with live edits and previews. The Themify Builder works with WordPress posts and pages, as well as custom post types. Shortcodes and HTML tags are supported with the Text module. The Builder can be used in both Backend Edit Mode and Frontend Edit Mode.

NOTE: Themify Builder is included in the framework of all themes. If you are using a Themify theme, you don't need to install the standalone Builder plugin additionally.

Backend Edit Mode

To use the Themify Builder in backend:

• First add or edit a post/page
• Below the content editor (make sure the post is saved/published), you will find the "Themify Custom Panel > Themify Builder" tab like the screenshot below

• Click on the Purple "+" icon found on the top left corner, or at the last row to open the module container
• Drag and drop the module to the column/grid to add modules

• Module Panel
  • Undo/redo any Builder modifications before saving or closing the Builder
  • To add modules:
    • drag module from the Module Panel to the Builder column
    • click on the module, + icon will also add the module

• Row/Column Options
  • All features available on the frontend are the same on the backend
  • To change the column arrangement: Hover the column option icon on the row and click on the desired arrangement icon. Each row can be arranged up to a maximum of 6 columns.
    • NOTE: The options below will appear when you select more than one column.
  • Responsive Grid: You can also set the column arrangement on mobile or tablet.
  • Column Alignment: Set modules on the entire to top, middle, or bottom alignment (Click here for more info).
  • Column Direction: Module direction position from left to right, or right to left.
  • Gutter Spacing: The vertical spacing between columns
  • Sub-columns: To make sub-columns, hover the column option icon on the module and click on the desired arrangement icon
    • NOTE: only one level of sub-columns is allowed (i.e. you can't do sub-columns within sub-columns).
• Module
  • Drag and drop module to re-position the module
  • All features available on the frontend are the same on the backend
• Builder Menu
• All features available on the frontend are the same on the backend
  • NOTE: Responsive styling works on backend, you'll see modules highlighted in blue when responsive styling is active.
• Switch to frontend = switch to frontend edit mode

Frontend Edit Mode

The frontend edit mode works similar to the backend mode except it provides live preview. The image below illustrates how the Builder frontend edit works.

To use the Themify Builder on frontend:

• View any post or page on the frontend (NOTE: WordPress default homepage is actually a blog archive page, you would need to create a static front page to use the Builder on homepage)
• On the frontend, from the top admin bar (make sure your Toolbar is enabled), select "Turn On Builder".
• You will see the Buidler toolbar overlap the top admin bar.
• Click on the Purple "+" icon found on the top left corner, or at the last row to open the module container
• Drag and drop the module to the column/grid to add modules

• Builder Toolbar
  • Save = Click to save all changes done using the Builder.
  • Revisions = This is the dropdown button beside the Save button. You can select to save or load a revision.
  • Close = Click this to close the Builder.
  • Help = Click to get redirected to the Builder documentation page.
  • Duplicate This Page = duplicate the page along with the Builder content
  • Layouts = Apply pre-built Builder Layouts to the current page
  • Import = Import Builder content from exiting posts or pages
  • Export = Export the Builder content (export will generate a ZIP file which be imported later using the import option)
  • Undo/Redo = Undo/redo any Builder modifications before saving or closing the Builder
  • Responsive Styling = Customize styling on desktop(), Tablet Landscape(), Tablet Portrait(), or Mobile()
  • Module Panel = Hover over to showcase module panel.
  • TIPS: if you don't see the top admin bar (Toolbar) on the frontend, it is likely disabled. To enable top admin bar, edit your user Profile and check the "Show Toolbar when viewing site" option.
  • NOTE: if you don't see the Builder grid after turning on the Builder (but the module panel presents), it is likely because the template does not have the required WordPress function, the_content() or the template is using the_excerpt(). In this case, try to add a new post or page.
• Module Panel
  • To add modules:
    • drag module from the Module Panel to the Builder column
    • click on the module, + icon will also add the module
• Row/Column
  • Hover over the row to see the row options icons:
    • Export = export Builder data
    • Import = import Builder data
    • Copy = copy Builder data
    • Paste = paste Builder data
    • Options = row options
    • Styling = row styling
    • Duplicate = duplicate row
    • Delete = delete row
    • Column Swap = (column only) swap all contents on one column to another on the same row
• Drag row top bar up/down to re-position the row
• Row/Column Option
  • To change the column arrangement: Hover the column option icon on the row and click on the desired arrangement icon. Each row can be arranged up to a maximum of 6 columns.
    • NOTE: The options below will appear when you select more than one column.
  • Responsive Grid: You can also set the column arrangement on mobile or tablet.
  • Column Alignment: Set modules on the entire to top, middle, or bottom alignment (Click here for more info).
  • Column Direction: Module direction position from left to right, or right to left.
  • Gutter Spacing: The vertical spacing between columns
  • Sub-columns: to make sub-columns, hover the column option icon on the module and click on the desired arrangement icon
    • NOTE: only one level of sub-columns is allowed (i.e. you can't do sub-columns within sub-columns).
• Module
  • Drag and drop module to re-position the module
  • Module options: (Refer to Row Options)
    • Edit = edit module options (TIPS: double-clicking on the module overlay area will bring up module options as well).

Using Builder on Homepage

The default WordPress homepage is actually a blog archive page which shows all your latest posts. Please note that the Builder does not work on archive pages. To use the Builder on the homepage, first you must create a static page (e.g. "Home") and then go to WP Settings > Reading and set that "Home" static page as the front page. To use the Themify Builder on homepage:

• First add a new page (e.g. Home)
• Publish the page and create the Builder layout as you like
• When you are done, go to WP Settings > Reading, on "Front page displays" option, select the "A static page" radio button and then select the "Home" page that you've created
• Leave the "Posts page" option empty (if you need to create a "Blog" page, please refer to this tutorial)

Sub Rows & Columns

The video below shows how to create sub-columns and specifying gutter spacing

Column Alignment and Direction

You can also set the column alignment or the order of your columns on any row with the column alignment and direction feature. This option can be found when you hover your cursor on the top left corner of your column panel. For column alignment, you can choose to set it to top, middle, or bottom. What this does is that it moves your module to have the same alignment across the row or sub row.For the column direction, you can also set the column direction whether to showcase your column from left-to-right or right-left.

NOTE: The column alignment and direction feature will not appear on your row if you've only set it to showcase one column. This feature will only appear if you've set it to show more than one column in your row. Both of these can also be customize during responsive styling.

Responsive Columns

Responsive columns feature allows you to set the number of columns that appears on desktop, tablet, and mobile.

Sample Usage:

1. On desktop set column layout to grid 4

   

2. Hover on the column option panel and select "Tablet" > Set to grid 2

   

3. Hover on the column option panel and select "Mobile" > Set to single column

   

Now when you view your site this row will show different numbers of columns:

1. Desktop = Grid 4
2. Tablet = Grid 2
3. Mobile = Single Column

Builder Shortcuts

Below are some Builder shortcuts that can improve your productivity time:

• Double-clicking on the dropped module will bring up the module option lightbox
• When the module lightbox is active:
  • Press Command+S (PC: Ctrl+S) will save the module (make sure your cursor is on any input field, textarea, and select dropdown)
  • Press Escape key will cancel/close the module lightbox
  • Double click on the semi-transparent black overlay (the background layer behind the lightbox window) to close the lightbox
• On frontend edit mode: press Command+S (PC: Ctrl+S) will save the Builder

Builder Layouts

Builder Layouts are the pre-designed layouts which you can apply to any page for quicker prototyping. You can use the pre-built layouts packed with the Builder or create your own custom layouts.

To apply Layouts

• From the frontend top admin bar > select Themify Builder > Layouts > Load Layouts
• Then click on the Layout thumbnail to apply (warning: your existing Builder content on the page will override with the Layout)
• The page will be refreshed and the selected Layout will be loaded to the page
• NOTE: the Builder Layouts is only available in single post or page, not available in blog archive pages such as categories, archives, search, tags pages, etc.

To create custom Layouts

There are three methods to create new Layouts:

1. Create a new custom Layout from scratch
2. Duplicate from an existing post/page created with the Builder
3. Save from an existing post/page created with the Builder

Method 1) To create new Layouts from scratch:

• Navigate to WordPress Admin > Themify/Builder menu > Builder Layouts
• Click on "Add New" button
• Enter the title, upload the Layout Thumbnail (option) and click "Publish"
• Use the Builder edit panel to create the Layout as desired and click "Save" when you are done
• The new Layouts will be available in the Layouts library lightbox

Method 2) To duplicate from an existing Layout:

• Navigate to WordPress Admin > Themify/Builder menu > Builder Layouts
• Hover the Layout item on the list and click "Duplicate"
• You will see the duplicated post after
• You may edit the duplicated Layout as desired

Method 3) To save from an existing post/page:

• Go to the page frontend (the page that you want to save as a Layout)
• From the top admin bar > Turn on Themify Builder > Select the Layouts Icon > Save as Layout
• Then upload the Layout Thumbnail and title, and click "Save" after

Layout Parts

The Layout Parts are re-usable layout parts that can be included into Builder content or anywhere in the post content and widget using its shortcode. When the Layout Part is updated, any post or page using that Layout Part will be also updated simultaneously. Layout Part is extremely useful for showing the same content in multiple areas/pages (e.g. client logos, contact info/map, banner ads, service list, etc.).

How to create Layout Parts

• Navigate to WordPress Admin > Themify/Builder menu > Layouts Parts
• Click on "Add New"
• Enter the title and click "Publish"
• Use the Builder edit panel to create the layout as desired and click "Save" when you are done
• The new Layout Part will be available to select in the option lightbox of the "Layout Part" module

How to show the Layout Parts

There are 2 methods to show the Layout Parts:

• Using the "Layout Part" module
• Using the [themify_layout_part] shortcode

Method 1) Using the "Layout Part" module The "Layout Part" module works exactly the same as all other modules. Simply drop in the "Layout Part" module and you will see the following lightbox options:

• Module Title = title of your module
• Select Layout Part = select the Layout Part from the dropdown

Method 2) Using the [themify_layout_part] shortcode You can also display Layout Parts using the following shortcodes in the post content, Text widget, and inject it in the page using the Hook Content.

The Layout Part can be queried by its slug name or post ID.

• [themify_layout_part slug="client-logos"] = this means show the layout part with slug name 'client-logos'
• [themify_layout_part id="12"] = this means show the layout part ID# 12 (here is how to the post ID number)

Builder Import/Export

The Builder Import/Export tool can be used to share Builder page layouts with clients or use it as a backup to create different versions of your layouts (i.e. export the Builder content for backup purposes which can roll back in the future).

• To Export: from the frontend top admin bar, select Themify Builder > Import / Export > Export (it will prompt you to download a zip)
• To Import: from the frontend top admin bar, select Themify Builder > Import / Export > Import (upload the exported zip)

ScrollTo Row Anchor Menu (Single Page Menu)

To achieve scrollTo row anchor:

• Step 1) First enter the Row Anchor name in Builder > Row > Options (e.g. "portfolio")
• Step 2) Then in the WordPress menu link, insert the anchor name as link URL = "#portfolio" (basically add # in front of the anchor name)
• Result: When the #portfolio link is clicked, or when users go the URL with the #portfolio anchor (e.g. http://yoursite.com#portfolio), it will scroll to the row where it specified Row Anchor = "portfolio"

Fullwidth Layout

Fullwidth layout is only available in Themify themes. If you are using the Builder with on a third party theme, the layout width is inherit from the theme styling. However, you may use the .has-builder body class to write Custom CSS to make the theme layout containers fullwidth (read FAQ #3 below for the sample code). Our support team can help you with this custom CSS if you are not sure, please post on our support forums. To set fullwidth layout (available in Themify themes only):

• When adding/editing a post or page, in the Themify Custom Panel, select:
  • Sidebar Option = no sidebar icon
  • Content Width = fullwidth
  • Hide Page title = Yes (optional: this will hide the page title so everything can be built with the Builder)
• Then the Builder row background will expand fullwidth, but the row content will remain within the page width container. To make the row content fullwidth as well, in Row > Options, select Row Width = Fullwidth.

Full Height Row

Full height row will set the height of the row in 100% viewport height and the row content will automatically align in the middle vertically.

To set full height row in Builder:

• With the Builder turned on > Row > Options
• Select Row Height = "Fullheight (100% viewport height)"

Full Width Row

There are 2 full width row options:

• Full Width Row Container = This sets the container to full width and leaves the content as default.
• Full Width Content = This sets the both the container and content to ful lwidth.

To set to full width row:

• With the Builder turned on > Row > Options
• Select Row Width= "Fullwidth row container" or "Fullwidth content"

Video Background

NOTE: For Safari browsers, video URLs from WP multisite path doesn't play. To avoid this, insert the direct video URL.

To display a fullcover background video in Builder rows:

• With the Builder turned on, select the row where you want to show the video background > select Styling icon > Styling Tab

• Background Type: Select "Video"
• Background Video: Choose to upload an mp4 video, or insert a YouTube/Vimeo link
  • NOTE: Inserting a YouTube/Vimeo link won't allow users to toggle the video (i.e. play, pause, or mute). It will just auto play the video when users visit your site.
• Background Image: This is a fallback background image. You'll need to insert an image because video background does not work on mobile

Parallax Scrolling Background Image

To display a parallax scrolling background image in Builder rows:

• With Builder turned on, select Row > Options > Styling Tab, upload a "Background Image" and select "Parallax Scrolling" in the "Background Mode"
• (Optional) Select a "Background Position" for the image.

Slider Background

To display an image background slider in Builder rows:

• With Builder turned on, select Row > Options > Styling Tab
• Click "Insert Gallery" and insert a gallery by selecting library images or upload images (it will then insert a [[gallery]]shortcode in the textarea)
• Image size = Select the size of the image that you would like the images to appear
• Under "Background Slider Mode", you can select:
  • Best Fit = slider images will be fit within the row
  • Fullcover = slider images will scale to fully cover the row
• Tips: if you are using a Themify theme, you can set the Content Width = fullwidth in Themify Custom Panel to display the row background in fullwidth.

Gradient Background

NOTE: Gradient background is only available on both row and columns. They cannot be applied to module backgrounds.

To display a gradient background in Builder rows:

• With the Builder turned on, select the row where you want to show the gradient background > select Styling icon > Styling Tab

• Background Type: Select "Gradient".
• Background Gradient: Here you can select to showcase the gradient effect as linear or radial, and also adjust the rotation on how you would like the color gradient to appear.
  • Color gradient Bar: The color selector bar gives a preview of how your color gradient will look on your row or column.
    • Click on the color bar to add a new color to the gradient color scheme.
    • Drag the color circles to adjust how the color is shown.
    • The color picker can also adjust the opacity of the color that you select (NOTE: You can input an unlimited number of colors).

  

• Row Overlay: (Optional)
  • Overlay Color and Hover Color: Similar to the above options you can also add a gradient overlay color.

Row, Column, and Module Styling

Row Styling

The following options are available in Row > Styling:

• Background Type: You can select 4 different types of background options: (1) Image, (2) Gradient, (3) Video, and (4) Slider
• Row Overlay = This allows users to create a color overlay on top of their background image/slider/video. The following options are available on the row overlay options:
  • Overlay Color The base color that users see on top of your background image.
  • Overlay Hover Color - The color that appears when user cursor hovers over the row.
  • When clicked, the following options will appear on both these options:
    • Color Picker - This allows you to choose any color you would like to appear on the row.
    • Opacity - This gives you to the ability to choose the level of transparency of the color you choose.

Row & Module Styling

The following options are available in both Row and Module > Styling tab:

• Background = As the name suggests, this feature allows you to add backgrounds to the element.
• Background Image = This option is used to set the URL of the background, you can either upload or add background using the media library.
• Background Repeat
  • Repeat All = The background image will be tiled (repeat all).
  • Repeat Horizontally = The background image will repeat horizontally.
  • Repeat Vertically = The background image will repeat vertically.
  • Do not repeat = This background image is as it is (without repeating).
  • Fullcover = The background image will fill and fit in the container completely.
• Background color= This option is used you to add a flat color to the background of the row.
• Font= This option is used to change the font styling.
• Link= This option is used to add text decoration and to change the color of the links in the row.
• Padding = Padding refers to the inner space of the container.
• Margin = Margin refers to the outer space of the container.
• Border = This option is used add border around the element.
• Additional CSS Class = This option is used to add any custom CSS classes you wish to be output with the row (refer to "Custom CSS Class").

Column Styling

The following options are available in Column Styling (refer to the notes above for details of each option):

• Background
• Font
• Padding
• Border

NOTE:  The styling options available for the individual Modules works similarly to the Row styling options.

Animation

Animation is the transition effect that triggers when the elements present in the viewing area. It can be set to rows and modules individually. There are over 60+ animation effects. To apply animation:

• Row: select Row > Options > Animation Tab, then select the "Effect" dropdown. You can also set the animation speed in seconds, and the number of times you would like the animation to repeat.

• Module: All modules comes with 2 animation options.
  • Appearance Animation: Similar to the row animation, simply select the desired effect from the dropdown list. The element will then animate as soon as it hits the viewing area.
  • Parallax Scrolling:
    • Scroll Speed: Produce parallax scrolling effect by selecting different scroll speed. 1 = slow and 10 = very fast.
      • NOTE: The faster you set the speed the higher the module will scroll up.
    • Z-index: Module with greater stack order is always in front of an module with a lower stack order. This option allows you create an overlapping effect with all your modules.

Visibility Control

You can set the rows and modules whether to be visible on specific device viewing (desktop, tablet, and mobile). By default, all device viewing are visible.

• To set Visbility: edit any row or module, click on the Styling tab, select "Hide" to hide the object
  • Desktop = Hide desktop will hide object when viewport is larger than 1024px
  • Tablet = Hide tablet will hide object when viewport is between 680px and 1024px
  • Mobile = Hide mobile will hide object when viewport is less than 680px

Revisions

Builder Revisions gives you a "save as" like feature, allowing you to save your Builder layout with unlimited versions. The Builder will log this revision and allow you to revert it back, if you'd like. This is great for users who suddenly make a mistake when changing something from their site and don't know how to fix it.

• To save Revisions: on the frontend Builder, next to the Save button, hover the arrow and select "Save as Revision"
• To load Revisions: select "Load Revision" and it will prompt you whether to save the current state before loading a revision.
  • NOTE: If the revision list on the option lightbox shows gray color and the revision link is not clickable, it means the revision does not have Builder layout, thus it won't allow you to load empty Builder revision.

Responsive Styling

This features allows you to style how your site looks on a tablet, mobile, or desktop. To access this feature, first turn on the Builder > on the Builder toolbar select to view your site in desktop(), Tablet Landscape(), Tablet Portrait(), or Mobile(). When these icons are selected you'll see a live preview where you can style customize the styling. You can also select column arrangment and direction.

Notes: When you edit the styling in both tablet or mobile view, you'll notice that the Builder module panel will shrink and lose access to all the modules. This means that when you're editing the styling in tablet or mobile view, you cannot add or edit the Builder content. You can only change the styling of the row, column, and module.

Default Modules

These are the default modules that come with the Builder:

• Accordion = Displays expandable/collapsible content
• Box = Displays text content in a box
• Callout = Displays a "call for action" box (heading with a link button)
• Divider = Displays a divider between modules
• Feature = Displays an animated circle with a large icon
• Gallery = Displays a gallery with image lightbox/zoom
• Image = Displays an image with title and caption
• Map = Displays a Google Map
• Menu = Displays WordPress custom menus created in Appearance > Menus
• Post = Displays posts from any category
• Slider = Displays a slider of posts, images, videos, or text content
• Tab = Displays tabbed content
• Text = Visual text editor with shortcodes and HTML support
• Video = Embeds videos from YouTube, Vimeo, etc.
• Widget = Displays any WordPress widget
• Widgetized = Displays a widget area
• Button = Displays a custom button

Themify Builder Settings

Builder Settings (Themify theme version)

If you are using a Themify theme, the Builder settings can be found in the Themify panel > Settings > Themify Builder.

The Builder settings are the same on all Themify themes and the Builder plugin version

In the Builder setting panel, you can:

• Enable/disable the Builder completely (NOTE: when the Builder is disabled, the entire Builder content will not appear on all pages)
• Clear/disable the Builder Cache
• Disable Builder animation on mobile and tablet only, or on all devices
• Disable Builder parallax on mobile and tablet only, or on all devices
• Exclude the modules individually (NOTE: when a module is excluded, only the excluded module will not appear on the page).

Builder Settings (Builder plugin version)

If you are using the Themify Builder plugin, the Builder settings can be found on the WordPress admin sidebar > Themify Builder > Settings.

Builder Script Minifcation/Cache

NOTE: If you don't see the Builder Script Minification option in the Theme Settings option, it means caching is not supported with your server (either due to old PHP version or server not permitting to write cache files).

Enable to minify scripts for faster Builder performance.

Minify Scripts:

• Enable Minification = This is for faster page load speed. It also comes with suboptions:
  • Enable Builder Cache = This will cache the Builder. You can clear this anytime or set the time in which the cache will expire.
  • NOTE: Do this if you're encountering any layout issues. Clearing the old Builder cache should fix the issue
  • Enable gzip = This will add gzip code in htaccess file
• Disable Minification (NOTE: We recommend only doing this if you already have another cache plugin activated)

Additional CSS Classes

You can add custom CSS classes to any module by entering a class name in the "Additional CSS Class" option field on the module options panel. Custom CSS is for developers who need to style the module appearance at an advanced level (it requires CSS knowledge to do so). Due to the complexity of CSS, it is not documented here. You may find all CSS related tutorials on the W3Schools site.

To add Custom CSS:

• For Themify theme: Custom CSS can be added in Appearance > Customize > Custom CSS
• For Builder plugin: Custom CSS can be added in the Themify Builder settings page > Custom CSS tab

Builder Addons

The Builder is extendable with Addons. Installing Builder Addons is the same as installing standard WordPress plugins. Here is a detail tutorial on how to install addons.

FAQs

1. Does the Builder work on the homepage?
   The Builder works with all posts, pages, and any post type that has the_content enabled.  The default WordPress homepage is actually an archive page that shows the latest posts. To use the Builder on the homepage, first create a new Page and then assign that page as the Front Page in WP > Settings > Reading.
2. The Builder won't turn on the frontend. Why?
   - First, make sure that you are viewing a single post or page, not an archive page (examples of archive page: search, tag, category, taxonomy archive, etc.).
   
   - Second, make sure the top admin toolbar is enabled in your WordPress site.
   
   - Lastly, it is likely due to plugin conflicts. Try to disable all plugins and check again.
3. I'm using the Builder plugin version and fullwidth row doesn't work with my theme.
   If you are using a third party theme and the fullwidth row option doesn't work with your theme, it is most likely due to the layout container width specified in your theme stylesheet. You can reset the container width to fullwidth with custom CSS. Let's say your theme has a container wrapper with 1224px width, you can reset it with the custom CSS below. The CSS below will only adjust the container if Builder content exists and it won't affect your theme and responsive design. UPDATE: The latest Builder plugin will display fullwidth row on all third themes as long the row content has fullwidth selected.

   
   .has-builder .container {
   	width: 100%;
   	max-width: 100%;
   }
   .has-builder .row_inner {
   	width: 1224px;
   	margin-left: auto;
   	margin-right: auto;
   }
   @media only screen and (max-width: 1230px) {
   	.has-builder .row_inner {
   		max-width: 94%;
   	}
   }
   

4. Can I use the Builder to edit the header, sidebar, and footer?
   No, the Builder is for building layouts for content. It does not have the capability to edit the header, sidebar, and footer area. However, you can use the Builder to create Template Parts and then display the Template Parts in the header, sidebar, and footer using the shortcode provided (e.g. drop in a Text widget on sidebar and then insert the Template Parts shortcode). If you are using a Themify theme, you may use the Hook Content to insert shortcodes anywhere as you like without having to edit any template file or drop in widgets. Alternatively, you can use Themify Flow (our drag and drop theme Builder) along with the Builder plugin to achieve this.
5. I don't use the Builder. Can I disable it?
   Yes, you can disable the Builder in Themify > Settings > Themify Builder. If you are using the standalone Builder Plugin, deactivate the plugin will disable the Builder.
6. Once I disable the Builder, will the layouts created with the Builder show?
   No, the Builder is required to render the layouts that are created with the Builder.
7. Where are the old custom post types (Slide, Highlight, Portfolio, and Testimonial)?
   Note: The updated Themify framework 2.1.2 and Builder plugin 1.3.1. has deprecated the following custom post types: Slide, Highlight, Portfolio, and  Testimonial. To provide backward compatibility, the Highlight posts will remain functional if your site has existing Highlight posts. If you would like to continue using these custom post types, we've created a free plugin called Builder Deprecated CPT. This plugin will unlock the deprecated custom post types.
8. When I try to import/upload Builder layouts zip or txt file, it says "Sorry, this file type is not permitted for security reason"?
   This is because the file format is not allowed in your WordPress network setting. To allow more file extension, please go to your WP Network Admin > Settings > "Upload File Type" > Add file format extensions (i.e. txt zip).
9. My WP Admin is HTTPS, when I switch to frontend that is HTTP, the Builder doesn't work.
   When you login in admin that is secured (HTTPS), the login session is captured as HTTPS domain. If your frontend URL is not HTTPS, the frontend Builder will not work because the browser treats HTTPS as a different domain. To fix this: go to WP Admin > Settings, change the "WordPress Address" and "Site Address" to HTTPS URL.
10. How do I trigger an active tab by using URL hash?
    First drop in a Tab module and create the tabs as you like. View the page on the frontend with Google Chrome, right-click on the tab navigation (https://cl.ly/2g2n183x2n3c) and select "Inspect", double click on the hash ID (https://cl.ly/0W3I3D42443I) and copy it, paste the hash ID at the end of the URL where you dropped in the Tab module (eg. it would be something like http://yoursite.com/page-url/#tab-tab-6925-0-0-0-6925-2).