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
  • Drag and drop the module to the column/grid to add modules

themify-builder-enable

  • 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
    • All features available on the frontend are the same on the backend
    • Drag row top bar up/down to re-position the 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
    • Equal Column Height: When enabled, this option ensures that all the column on the same row has the same height column container
    • Gutter Spacing: is 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
    • Duplicate this page = duplicate the current page and its Builder content
    • Import From = import Builder content from existing posts or pages
    • Import / Export = import or export the Builder content (export will generate a ZIP file which can be imported later using the import option)
    • Layouts = apply pre-built Builder Layouts to the current page
  • 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 Themify Builder > Turn On Builder
  • You will see a module panel slide up and a grid on the page
  • Drag and drop the module to the grid to add modules

builder frontend overview

  • Builder Menu
    • Turn On/Off Builder = turn the Builder on/off
    • Duplicate This Page = duplicate the page along with the Builder content
    • Import From = import Builder content from exiting posts or pages
    • Import/Export = import or export the Builder content (export will generate a ZIP file which be imported later using the import option)
    • Layouts = apply pre-built Builder Layouts to the current page
    • 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
    • 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
    • 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 and 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
  • 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
    • Equal Column Height: When enabled, this option ensures that all the column on the same row has the same height column container
    • Gutter Spacing: is 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

You can also set the column alignment on any row with the column alignment feature. This option can be found when you hover your cursor on the top left corner of your column panel. 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.

NOTE: The column alignment 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.

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

builder 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:

how to add a builder layout

  • 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:

screenshot

  • 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:

screenshot

  • Go to the page frontend (the page that you want to save as a Layout)
  • From the top admin bar > select Themify Builder > Layouts > 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

screenshot

  • 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:

screenshot

  • 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") where to add the anchor text on the Builder
  • Step 2) Then in the WordPress menu link, insert the anchor name as link URL = "#portfolio" (basically add # in front of the anchor name)scroll to row anchor menu
  • 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.

screenshot

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)"

screenshot

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
  • Builder documentation video background row option guide

  • 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

Builder background video

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

Builder image background

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)
  • 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.

Builder background slider

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
  • Builder documentation gradient background row option guide

  • 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).
    • Builder documentation gradient background color bar

  • 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 > Options > Styling tab:

  • Row Width = This option is used to set the width of the row, either select the default page width or Fullwidth.
    • NOTE: Fullwidth row is only available using Themify themes when the Content Width option in Themify Custom Panel is set to Fullwidth.
    • The Builder Plugin version does not have this option because the width is inherit from the theme styling.
  • Row Height = This option is used to set the height of the row.
    • Fullheight = 100% viewport (browser viewing area) height.
  • Background Mode
    • Parallax Scrolling = This option is used to add a parallax scrolling effect to the background image.
  • Background Video = This option is used to to add a background video to the row.
    • NOTE: video background does not support on mobile; background image will be used as fallback.
  • Background Slider = This option is used to to add an image slider to the background of the row.
    • Best Fit = slider images will be fit within the row.
    • Fullcover = slider images will scale to fully cover the row.
  • 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.

Builder row overlay feature

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 Mode
    • 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.

Builder animation tab

  • 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.

Builder parallax module parallax scrolling feature

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.

Builder revisions feature

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 module panel, above the "Save Now", hover your cursor over the desktop icon. There, you can toggle various options on how you would like to view and style in various devices.

Builder documentation responsive styling icon

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.

Builder documentation responsive styling tablet view

Default Modules

These are the default modules that come wtth 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

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.

Builder settings options

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.

screenshot

Builder Cache

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

Builder cache image guide

The Builder Cache is enabled for faster performance.

The Builder Cache options:

  • Disable Builder Caching (NOTE: We recommend only doing this if you already have another cache plugin activated)
  • Clear the Builder Cache (NOTE: Do this if you're encountering any layout issues. Clearing the old Builder cache should fix the issue)

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.

screenshot

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.

    
    .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).