#Build your own animation light box zip file#
#Build your own animation light box archive#
#Build your own animation light box full#
#Build your own animation light box plus#

Publish the page and create the Builder layout as you like.To use the Themify Builder on the homepage: 'Home') and then go to WP Settings > Reading and set that 'Home' static page as the front page. To use the Builder on the homepage, first you must create a static page (e.g.

#Build your own animation light box archive#

Please note that the Builder does not work on archive pages. The default WordPress homepage is actually a blog archive page which shows all of your latest posts.

On the frontend, you can dock the panel to either left or right side by dragging the panel to the left/right edge of the screen.

Drag and drop, or click the green (+) button, to add a module to the column/grid.

Click on the green (+) icon found on the top left corner, or in the last row to open the module container.

You will see the Builder toolbar at the top.

On the frontend, from the top admin bar (make sure your WP Admin Toolbar is enabled), click 'Turn On Builder'.

View any post or page on the frontend ( NOTE: WordPress' default homepage is actually a blog archive page, so you would need to create a static front page to use the Builder on a homepage).

To use the Themify Builder on the frontend: The frontend edit mode works similar to the backend mode except it provides a live preview.

ID Name: Add ID name for Sticky Scrolling feature.

Row Anchor: Add row anchor for scrollTo anchor feature.

CSS Class: Add additional custom CSS classes.

#Build your own animation light box full#

Full Height = Row will be 100vh (viewport height) and the content inside will be by default middle aligned vertically.

Default = Row height varies depending on the content inside the row.

Fullwidth = Both row background and row content area will be fullwidth completely.

Boxed = Row background will be fullwidth, but the row content area will be within the container width.

Default = Row background and row content area is within the container width.

On the row option dropdown menu, click the 'Row Options' tab to see more options: You can change it to auto height which means the height of the column will vary depending on the content inside the column.

Column Height: By default, all columns within the row are full height.

Column Gutter: The spacing/gap between columns.

Column Direction: Set column float direction either from left-to-right or right-to-left.

Column Alignment: Set modules in the entire row to top, middle, or bottom alignment (Click here for more info).

Row Grids: You can also set the column arrangement on mobile or tablet.

Responsive Grids: To have a different grid on desktop, tablet, and mobile: first click the device icon, then click the row grid icon.

The row option dropdown has these options: On the row action, click on the gear icon to trigger the row option dropdown menu.

If you have hover mode disabled, click the row action button or click any where on the row, then click the row button on the action breadcrumb.

To enable/disable hover mode, go to the top toolbar > Interface Options, then toggle the 'Hover Mode' switch off.

If you have hover mode enabled, just hover over the row action button (the small purple dot).

#Build your own animation light box plus#

To add modules, you can drag & drop module to the canvas area or click on the green plus (+) button in the top right corner.

Click on the plus (+) icon found on either the top left of the toolbar or in the last row, to open the module panel.

You can select to save or load a revision. To access revisions, click on the arrow button beside the Save button.

Revisions = Revisions allow you backup and restore your previous layout.

Help = Click to open the Builder Tutorial video lightbox and view the keyboard shortcuts.

Interface Options = Choose your interface options such as enable hover mode and right-click menu.

Page Custom CSS = Allows you to add custom CSS to the specific page.

Duplicate This Page = duplicate the page along with the Builder content.

Save as layout = Save current layout to use on another page.

Load Layout = Import pre-designed Builder Layouts to the current page.

#Build your own animation light box zip file#

Export = Export the Builder content (export will generate a ZIP file which can be imported later using the import option).Import = Import Builder content from a data file, existing posts, or pages.Undo/Redo = Undo/redo (you can use keyboard shortcuts Cmd+Z and Cmd+Shift+Z).Responsive Styling = Customize styling on Desktop, Tablet Landscape, Tablet Portrait, or Mobile.On the Builder Toolbar, you will find these buttons: If Gutenberg is disabled, you will find the 'Themify Builder' tab below the WordPress classic editor.If you are using WordPress 5+ with Gutenberg enabled (default), you should see a Builder Block like the screenshot below.To use the Themify Builder in the backend: