The page builder is utilized to generate content across our pages, courses, site, marketing funnels, and live events. Learning how to use the page builder will empower you to apply it in various locations on your Zenler site.

In this instance, we will select 'Site Pages' and click on any of the pages to edit them using the page builder. For this example, we have utilized the default homepage because these pages are already configured with pre-existing content. Nonetheless, we can remove and modify all of that content on the page or craft an entirely new page and integrate our content into it.

Let's walk through the key elements of the page builder dashboard. The first element is 'Blocks.'

Zenler includes pre-designed blocks integrated into the system. You can choose from various block types such as titles, testimonials, teams, subscribe, slideshow, sign up, process pricing, navigation, header gallery, footer features, divider, FAQs, content core, call to action, webinars, live classes, life calendar courses, empty blocks, and all blocks.

Please note that Zenler operates as a fully 'Drag & Drop' System. When you select any of these blocks, you can visualize what you'll obtain when you drag them.

You'll also notice that the blocks may not appear identical to the default ones in the system due to branding being activated. To achieve an exact match with the block you've dragged over, navigate to 'Settings' > Disable 'Applied Branding.'

For more comprehensive information on branding, please refer to the Branding support documentation.

Within the blocks, there are numerous different types to select from. For instance, certain headers and menu areas are 'Dynamic', implying that if you employ the same block on other pages, they will automatically update on those pages.

For additional information regarding dynamic blocks, refer to the support documentation.

Next, we have 'Elements' which are individual components within the blocks. To understand the distinction, let's construct a block from the ground up. Select an empty block from the menu, and after dragging it over, you'll notice that the blue color signifies a block. Blocks serve as containers for rows and the elements within those rows

The subsequent step is to 'Add Row'.

Let's choose one row with two columns. Once you click on it, you'll notice that you now have this green row block. So, we started with an empty blue block, then added a green row block, and finally, we'll 'Add Element' inside these rows

There are various types of elements you can select from, including heading, image, text, video, audio, and more. Let's add a 'Heading 1'.

If you click on the heading element, you'll notice that it's highlighted in red. Thus, we have green for the row and blue for the block.

Clicking on 'Settings' will provide you access to alter options such as spacing, padding, font style, font size, color, letter spacing, line height, background color, background image, text transformation, text-shadow, and alignment.

Modifying the settings will promptly reflect the alterations on the screen.

Add another element on the right-hand side.

This time, go to 'Images'. You can 'Upload Image' from your computer or select an image from 'My Library'.

And this is the result.

To change the 'Background Colour' of the whole block, go to 'Settings' > 'Background Colour'.

You can also add a 'Background Image.' Turning 'ON' the 'Background Overlay' allows you to choose the 'Overlay Colour' and set the 'Opacity'

This is just an example of what it might look like when you apply the above settings.

Now, let's move "My Title Here" from the middle to the top. 'Settings' > 'Vertical Alignment' >'Top'.

The title is now moved to the top.

By moving this little divider, you can drag & drop it to create different sizes to these rows.

To 'Add New Element' to the row, click here.

The new element that we added is 'Text'. To modify this text, go to 'Settings'. You can change the changes to Alignment, Font Size, Font Colour, etc.

To 'Add Button', click 'Add New Element'.

Click 'Buttons'.

To design the button go to 'Settings' > 'Design' > i.e. 'rounded button'.

To change the button text, go to 'Settings' > 'Settings'. Type your 'Text & Sub Text' here or 'Choose an Action'.

To style the button & button text, go to 'Settings' >'Style'.

This grants you total control over the appearance of buttons within the system.

To duplicate this block, click the 'Clone' icon. It will completely create a duplicate of the first block below.

To delete any of the blocks, just click the 'Delete' icon.

You can also 'Save Block as Template' if you are on the 'Pro & Premium Plan'. Just click the 'Save' Icon.

Give 'Title' to this Template & click 'Save'.

This custom block will be saved in 'Blocks > Custom Blocks' and can be dragged and dropped onto the page.

To delete a column in the row, right-click and the menu will appear with additional options. Click 'Delete This Column'.

To add a column, right-click over the row will open up the menu. Click 'Add New Column'.

To activate Pop Up, go to the 'Pop Up' tab, then 'Settings' > 'Active ~ ON'.

You can also 'Trigger' the activation 'On Landing', 'On Exit', 'On Scroll', or 'After Delay'.

To assign a button to activate your popup, go to Button 'Settings' > 'Action' > 'Open Popup'.

To design pop up itself, go to 'Settings' > 'Design' > choose one of the pre-made templates.

To add 'Form' as an Element, you have lots of different options:

How to access your pages?

The 'Page Builder' dropdown menu enables you to immediately navigate to any of your pages on your site.

Or you can access your pages via 'Site' > 'Pages' > 'Edit'.

You can also 'Undo' & 'Redo' changes you made to the page.

'Enabled Grid View' allows you to see all of the rows and columns as guides on your page.

You have the capability to preview your page and observe how it would be displayed on desktop, tablet, and mobile devices.

You have complete control over selecting the devices – desktop, tablet, or mobile – which enables you to manage how pages are displayed. For more details please refer to 'Support Documents'.

Go to 'Setting' > 'Settings' > 'Hide On' > 'Select Devices'.

After making any changes to your pages you must 'Save' them before leaving the page.

We can also 'Preview' the page by clicking the 'eye' icon. Please note that as an admin, when logged in, you'll have the capability to preview any page, regardless of whether it's published or meant for public or registered users.

Next, we have a dropdown menu that provides access to 'Page Settings', 'SEO Settings', and 'Tracking Code' (which enables you to include JavaScript or analytics into your header, body, or footer section).

There is also a 'Version History' feature, allowing you to revert to previous versions of your page or delete versions you no longer need.

We also provide 'Editor Preferences'. If you prefer not to 'Apply Branding Styles' that you've configured in the 'Branding' section, you can deactivate it here. Additionally, you can disable the 'Show Confirmation for Deletion' option. However, we recommend keeping this option enabled. And with that, we conclude the guide on how to utilize the page builder.