Sections Management in Mobile Editor

What Are Sections?

A section is a pre-designed building block for your website layout, serving as a ready-made template for common website components such as headers, footers, pricing tables, or contact forms. Using sections saves you time and effort compared to building every element individually.

Adding Sections

To add a section to your website in the Mobile Editor:

Hover over the desired section, and click the Add Section:

Select the section from the list, Once you find the one that best suits what you are looking to accomplish, simply click on that option and then click on the Select button:

Resizing Sections

To resize a section:

Hover over the bottom of the section and click the resizing control:

Drag the control up or down to adjust the height.
Release the control to save the changes.

Accessing Section Settings

To access Section Settings, hover over the section to display the Settings options in the bottom toolbar:

Layout Tab

Use the Layout tab to modify the section's layout. To open the Layout settings:

Hover over the section, and click the Layout button in the bottom toolbar:

Layout settings allow you to:

Adjust the range selector to set the Number of Columns; the section will be divided into the same number of parts.
Align the layout elements vertically (maps, buttons, text, and headers).
Stretch content to full-screen width with the Fluid Container.
Enable the toggle to display the section in 100vh Full Height.

Background Tab

Use the Background tab to modify the section's design. The Background tab allows you to set the Photo, Video, Map, or Slider as a background for the section and adjust its design. To access the Background tab:

Hover over the section, and click the Background button in the bottom toolbar:

Select a background type: Photo, Video, Slider, or Map.

Background Photo

Background Photo type is usually set by default for the added section. Proceed to the Photo tab to be able to:

Drag and drop the background image into the Background Photo placeholder. Alternatively, you can click the Background Photo placeholder to open the Upload Photo dialog or use Free Stock Photos.
Drag the control to set the Opacity level for the Background Photo.
To add Effects, turn the switch on to enable the image effects: Parallax, Fixed, and Animate.

Please Note: Effects can only be applied if an image has been added as a section background.

Click the square of the Background Color to open the color picker and select the color. Then select Apply to save the change and close the color picker.

Background Video

Hover over the Video tab to set a Background Video for your section, and be able to:

Add a Link to Video from Vimeo, or Dailymotion.
Drag the control to set the Opacity level for the Background Video.
Click the Background Color square to open the color picker and select the color. Then select Apply to save changes.

Background Slider

Hover over the Slider tab, and click Edit Slider to be able to modify Settings and Navigation of a Slider:

Settings Tab

Loop Slides: Select to loop the slides for the autoplay. The slideshow will keep replaying until the visitor stops it.
Autoplay: Drag the Autoplay timing control to set the transition time between slides (in seconds). The autoplay stops whenever a visitor hovers over a Slider. When the cursor is removed, the autoplay resumes.
Slider Effect: Choose between Smooth, Bouncy, Overshoot.

Navigation Tab

Theme: Select a dark or light theme for displaying slider arrows and bullets.
Show Dots: Display or hide the slide indicators and set the position - Bottom or Top.
Show Arrows: Select the arrows position: Default, Left, or Right. Deselect the control to hide arrows from the Slider.

Background Map

Hover over the Map tab, and click Edit Map to be able to modify its Settings:

Enter your address, select a map type (Road Map or Satellite Map), and set up zoom:

Return to the Map tab to:

Drag the control to set the Opacity level for the Background Map.
Click the Background Color square to open the color picker and select the color. Then select Apply to save changes.

Moving Sections Tab

To move a section:

Click on the section:

Click Move in the bottom floating toolbar that appears:

In the modal window, click on the arrow to move the block up or down:

Close the modal window after the block has been moved:

Changes will be applied immediately:

Duplicating Sections Tab

To duplicate a section:

Select a block you want to duplicate by clicking on it:

Click Duplicate in the bottom toolbar that appears:

A copy of the section will appear below the original.

Saving Sections Tab

The Section Creator functionality allows you to save favorite blocks and re-use them as many times as you need across all your websites. To be able to save section, you need to enable the Section Creator functionality in the Site Editor Settings.