How to use the Popup Builder by Zoloblocks

This documentation provides comprehensive insights into the Popup Builder developed by Zoloblocks.

Activate the Popup Builder

Go to Dashboard Zoloblock > Popup Builder

1. Popup Builder: Go to Zoloblocks Dashboard and select the Popup builder tab.
2. Create Popup: Click on the Create popup button to create new popup builder.

After creating the popup, It will appear on the list.

3. Enable the switcher to show the popup builder on the page.

Select Popup Builder and Controls

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Popup Builder block.
3. After on the right side, Click on the Block. Then the Popup Builder details appear.
4. Here shows all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

1. Popup Type: Select the type (e.g.: Popup Box, Info Bar).

Popup Box Section

Go to Basic > Popup box

Make the popup controls by following,

1. Position: Set the position for the pop box.
2. Width: Set the width for it.
3. Enable Overlay: Enable the switcher to show the popup box.
4. Fixed Background: Enable the swithce to fixed the background.

Repetition Section

Go to Basic > Repetition

1. Infinite Repeat: Enable the switcher to enable the popup builder repetition.

Close Button Section

Go to Basic > Close Button

Follow this to show the close button,

1. Dismissable: Enable the switcher to show the close button.
2. Position: Set the position for the button.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Popup Box Section

Go to Style > Popup Box

Enhance the popup box with a chic and modern design.

1. Border: Enable the switcher to show the border.
2. Border Radius: Make the border radius.
3. Padding: Set the padding for it.

4. Margin: Set the margin for it.
5. Background: Set the background for the popup box.

POPUP OVERLAY

6. Background: Set the background for the overlay.

Close Button Section

Go to Style > Close Button

Enhance the Close button with a chic and modern design.

1. Icon Size: Set the size for the button icon.
2. Border: Set the border of it.
3. Border Radius: Make the border radius.

4. Padding: Set the padding for the button.
5. Margin: Set margin for it.

Normal State for Close Button

6. Color: Set the color for the close button.
7. Background: Set the background.

Hover State for Close Button

The changes will appear on mouse hover,

8. Color: Set the color for the close button.
9. Background: Set the background.

Add blocks on the Popup Builder

1. Select the container to add blocks for the popup builder.
2. Click ont he “ + ” icon to add new block.

3. Search by the ” blocks ” name.
4. The searched appear on the block.

5. After added the icon it appear on the popup builder.

By following this it will appear on the popup builder.

Video Assist

You can also watch the video tutorial Learn more about the Popup Builder Block. Please visit the demo page for examples.

Thanks for being with us.