User interface of the page builder – Digibiz24 Help

When opening the page builder, its user interface completely covers that of Digibiz24.

The page builder works in the same way when it comes to creating and editing website pages, landing pages, and themes.

Individual details may vary, though.

Header bar

The header bar is used for navigation and contains buttons for various functions and settings.

Sidebar

The sidebar is displayed whenever you want to make settings for a page element. Different content and fields are displayed in the sidebar for each page element.

Page builder page

This is where you can edit your page.

On the Pagebuilder page, you can see the content of your page. It consists of different page elements, the sections, rows, and columns, as well as the components.

Header bar

Functions

Save

Click on Save.
Preview

Click on Preview.
Leave

Click on Done.
Settings

Edit the settings:
Pop-up

Take a look at the preview for the pop-up in the page builder:
- Create popups
- Create pop-up button
Sections > row > column> component
- Manage elements

SIDEBAR

1	All
2	Mobile only
3	Desktop only
4	Hide
5	# Call up CSS info

Page builder page

The page builder page is divided into sections, rows and columns, and components.

You can recognize them by the colored frame:

Sections are mint-colored
Rows are royal blue and may contain columns
Components are sandy yellow

SECTION

Sections form the basic structure of the page builder page.

You can use sections to divide the page into sections, e.g. header, body, and footer.

You can set the page width and a background image for each section.

1	Section The entire section is outlined when you select it.
2	Click on the plus icon to add new sections or sections saved as templates.
3	When a frame is selected, frame elements containing symbol buttons for various actions are displayed: Hold and drag the control pad icon to move the section. Clear on the gearwheel icon to configure the section in the side menu. Click on the copy icon to immediately insert a copy of the section with all settings and content below. Click on the delete icon to delete the element.
4	Click on the arrows to move the element up or down.

Rows and columns

When inserting a row, you select how many columns it has. Columns cannot be added individually or added later.

Rows divide the page into horizontal sections.

You can insert several rows one below the other and move them up or down with all their content.

This allows you to organize rows thematically, e.g. a row.
Columns allow you to display content next to each other within rows.

This allows you to place different offers next to each other.

1	Row Columns are separated by a slider. The entire row is outlined when you select it.
2	Click on the plus icon to add new rows or rows saved as templates.
3	When a frame is selected, frame elements containing symbol buttons for various actions are displayed: Hold and drag the control pad icon to move the row or column. Click on the gearwheel icon to configure the line in the side menu. Click on the copy icon to immediately insert a copy of the row or column with all settings and content below it. Click on the delete icon to delete the element.
4	Click on the arrows to move the element up or down.

COMPONENTS

With components, you can add specific content. Each component has its own properties and configuration options.

Component

The entire component is outlined when you select it.

Click on the plus icon

to add more components. The sidebar with all components will be displayed.

When a frame is selected, frame elements containing symbol buttons for various actions are displayed:

Hold and drag the control pad icon to move the section.
Click on the gear icon next to the component to configure the component in the side menu.
Click on the copy icon to create a copy of the component directly below it in the same column.
Click on the delete icon to delete the element.