Quick Start Guide for Using Builder
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.
- 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 the backend, you’ll see modules highlighted in blue when responsive styling is active.
- All features available on the frontend are the same on the backend
- Switch to frontend = switch to frontend edit mode
Frontend Edit Mode
The frontend edit mode works similar to the backend mode except it provides a 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 Builder toolbar overlap the top admin bar.
- Click on the Purple “+” icon found in 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 drop-down button beside the Save button. You can select to save or load a revision.
- Close = Click this to close the Builder.
- Edit in Backend = Click this to edit the Builder on the backend
- 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 is 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()
- Preview = See how it looks when users view your site. Also, when you select mobile or tablet on responsive styling.
- Zoom Out = Scale to view in 75% or 50%.
- 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
- To add modules:
- Row/Column
- Hover over the row to see the row options icons:
- Options = row options
- Styling = row styling
- Duplicate = duplicate row
- More = Hover to view more row options.
- Export = export Builder data
- Import = import Builder data
- Copy = copy Builder data
- Paste = paste Builder data
- Visibility = set rows whether to be visible on specific device viewing (desktop, tablet, and mobile).
- Delete = delete row
- Column Swap = (column only) swap all contents on one column to another on the same row
- Hover over the row to see the row options icons:
- 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).
- 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.
- 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:
- On desktop set column layout to grid 4
- Hover over the column option panel and select “Tablet” > Set to grid 2
- Hover over 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:
- Desktop = Grid 4
- Tablet = Grid 2
- 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:
- Create a new custom Layout from scratch
- Duplicate from an existing post/page created with the Builder
- 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
- 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 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 shortcode You can also display Layout Parts using the following shortcodes in the post content, Text widget, and inject it into the page using the Hook Content.
The Layout Part can be queried by its slug name or post ID.
- = this means show the layout part with slug name ‘client-logos’
- = this means show the layout part ID# 12
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”
Full-Width Layout
Full-width 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 = full-width
- 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 too full width and leaves the content by default.
- Full-Width Content = This sets both the container and content to full-width.
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).
- Color gradient Bar: The color selector bar gives a preview of how your color gradient will look on your row or column.
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.
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.
- Scroll Speed: Produce parallax scrolling effect by selecting different scroll speed. 1 = slow and 10 = very fast.
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 Visibility: 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 feature 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 customize the styling and the module data.
Notes: When you edit the styling in both tablet or mobile view, you can add or edit the Builder content. But when you do this note that it will apply to desktop version as well. Only the styling is applied specifically to the device you’re viewing (ie. mobile styling only applies to mobile).
Preview
You can also preview how it’ll look on mobile and on tablet by clicking on the preview button.
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
- Tap = 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.
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 Minification/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)
Builder Static Content
Builder Content Placeholder: In the previous version, the Builder content is always appended after the content in the WordPress editor. Now you will see a badge in the editor called “Builder Content Placeholder”, which represents where exactly the Builder content will be displayed. You can add content before or after the content placeholder. If you don’t see the Builder Content Placeholder, make sure you are using the latest version and the old post’s data is migrated.
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.
