#RESPONSIVE LAYOUT MAKER TUTORIAL 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).

#RESPONSIVE LAYOUT MAKER TUTORIAL 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.

#RESPONSIVE LAYOUT MAKER TUTORIAL 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.

If you want to move columns across the row, should set offset*.To use the Themify Builder in the backend: Its name is вЂњOFFSETвЂќ, easier to use columns. NEW FEATURE: Offseting for move columns - july 2013

#RESPONSIVE LAYOUT MAKER TUTORIAL FREE#

If you have any further questions about this layout, please feel free to send me an email.

Offseting for move columns вЂ“ v1.5 (updated july 2013).

This layout is based on percentage widths, you can set fixed layout or fluid layout very easily. This is highly compatible for displaying on smart devices. It can be used in websites or admin panels. This is a responsive layout implemented by HTML5 & CSS3.

Responsive layout maker tutorial