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.

1	Header bar
2	Sidebar
3	Page builder page

Functions in the header bar

Close the page builder and return to the standard Digibiz24 user interface.

Click on Exit in the header bar.

Note
Save your changes before clicking on Exit .
Switch between the mobile view and the desktop view.

You can then check at a glance whether your page works for different display sizes (see also Mobile and desktop).

Click on the icon in the header bar to activate the mobile view.

Click on the icon in the header bar to activate the desktop view.
Undo or restore changes that have been made.

Click on the icon in the header bar to undo any changes you have made.

Click on the icon in the header bar to restore any changes you have undone.
Open a new tab with a preview of the page.

Click on Preview in the header bar.
Save the page with all changes.

Click on Save in the header bar.

Functions in the sidebar

My Page

In the My Page section, you can easily manage the sections and rows of the page, allowing you to efficiently build and customize the basic structure of your page.

What are sections, rows, columns, and components?

Sections form the basic structure of the page. You can use sections to divide the page into areas, for example, header, body, and footer. You can set the page width and a background image for each section.
You insert rows into a section. Rows divide the page into horizontal sections. You can also insert several rows one below the other.
When you insert a row, you specify the row's columns (e.g. 1 column, 2 columns, 3 columns, etc.). This allows you to display content next to each other within a row, e.g. different offers or text blocks.
You can then insert content into a column using components . Digibiz24 offers you a wide range of components, from e.g. text and images to buttons, forms, and testimonials.

The following functions are available in the My Page area:

You can add new sections and rows.

You have the following options:
- Click on + Add section under the existing sections.
- Click on + Add row under the existing rows.
- Click on the three-dot menu for a section or row and then on Add section below or Add row below.
You can edit existing sections and rows to adjust spacing or position.
1. Open the edit view.
  - Click on + Add section under the existing sections.
  - Click on + Add row under the existing rows.
2. Switch to the Manage tab.
3. Click on the edit icon next to a column or row to edit it.
You can duplicate existing sections and rows to reuse content that you have already created or to use it as a basis for new content.

Click on the three-dot menu for a section or row and then on Duplicate.
You can move sections and rows to a different position on the page using the icon.
You can give sections and rows a name to make it easier to assign the individual elements. The name is only visible to you.

Click on the three-dot menu for a section or row. Then click in the text field and change the name.
You can hide or delete sections or rows. With the Hide function, you can prepare components of your page and hide them from your page visitors until they are ready.

Click on the three-dot menu for a section or row and then on Hide or Delete.

Tip
You can also use many of these functions directly in the page builder page. The benefit of My Page, however, is that you can use the functions very quickly and easily.

Columns

You can manage existing columns in the Columns area.

What are sections, rows, columns, and components?

Sections form the basic structure of the page. You can use sections to divide the page into areas, for example, header, body, and footer. You can set the page width and a background image for each section.
You insert rows into a section. Rows divide the page into horizontal sections. You can also insert several rows one below the other.
When you insert a row, you specify the row's columns (e.g. 1 column, 2 columns, 3 columns, etc.). This allows you to display content next to each other within a row, e.g. different offers or text blocks.
You can then insert content into a column using components . Digibiz24 offers you a wide range of components, from e.g. text and images to buttons, forms, and testimonials.

Note
You can edit existing columns in this menu item.

However, if you want to change the number of columns, you have to add a new row with the appropriate number of columns. You can do this either in the My Page area or in the page builder page.

The Columns area offers the following functions:

You can edit columns by changing the position and spacing, for example, or by adding a background color.

Click on the icon next to a column to edit it.
You can hide columns. For example, you can use the Hide function to prepare components of your page and hide them from your page visitors until you are finished.

Click on the icon to hide a column.

Components

In the Components section, you can add new components or manage existing ones.

What are sections, rows, columns, and components?

Sections form the basic structure of the page. You can use sections to divide the page into areas, for example, header, body, and footer. You can set the page width and a background image for each section.
You insert rows into a section. Rows divide the page into horizontal sections. You can also insert several rows one below the other.
When you insert a row, you specify the row's columns (e.g. 1 column, 2 columns, 3 columns, etc.). This allows you to display content next to each other within a row, e.g. different offers or text blocks.
You can then insert content into a column using components . Digibiz24 offers you a wide range of components, from e.g. text and images to buttons, forms, and testimonials.

The Component section offers the following functions:

You can drag & drop new components into your page in the New tab.

You can discover more about components here.
You can manage existing components in the Manage tab.
- Click on the icon for a component to edit it.
- Click on the icon or the icon to move a component to a different position on the page.
- Click on the icon to hide a component. For example, you can use the Hide function to prepare components of your page and hide them from your page visitors until you are finished.
- Click on the icon for a component to duplicate it. This allows you to reuse content you have created or use it as a basis for new content.
- Click on the icon for a component to delete it.

Tip
You can also use many of these functions directly in the page builder page. The benefit of the Components area, however, is that you can use the functions very quickly and easily.

If you click on the icon in the Manage tab to edit a component, the component's settings will open in the sidebar.

Tip
You can also access a component's settings directly from the page builder page.

The individual setting options differ depending on the component. However, you can specify the following settings for each component:

1	All The component is displayed for mobile and desktop (see also Mobile and desktop).
2	Mobile only The component is only displayed for mobile.
3	Desktop only The component is only displayed for desktop.
4	Hide The component is hidden. With the Hide function, you can prepare components of your page and hide them from your page visitors until they are ready.
5	# Call up CSS info You need the CSS info for advanced use cases, e.g. if you want to integrate and use your own fonts.

Popup

The Popup area offers the following functions:

Settings

The Settings section offers the following functions:

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.