Global section settings

All blocks use the same global settings for fonts, backgrounds, and display, ensuring a consistent visual style across your site while allowing block content to differ.

To configure global settings for any block, hover your cursor over it and select the Settings button that appears.

Click the Settings button to open the global section settings menu on the right.

Font settings

You can change the following settings:

Font & style: The font family, style (Normal or Italic), and weight (boldness).
Spacing: The letter spacing, line height, and font size.

For blocks with both a Heading and a Text field, you have two styling options:

Apply a single font style to the entire block for uniformity.
Enable the Additional Font option to define separate styles for the Heading and Text, creating distinct visual roles within the same block.

How to add your own font

To add your own font, find the button of the same name and click on it:

You will be taken to a page with a huge variety of different fonts:

Step 1. Find the desired font

a) This can be done using the search bar:

Select the necessary criteria for the font:

Font category
sans-serif (sans-serif letters)
serif (sans-serif letters)
handwriting (a font that imitates handwriting)
monospace (monospaced or disproportionate font, a font in which all characters have the same width)
display (displayed bold font)
Language support
Cyrillic
Latin

b) To find a font manually, scroll through the list in the formatting ribbon.

Step 2. Click on the selected font:

You will see a modal window with font options:

Step 3. Select a font option by checking the box next to the one you need:

Step 4. Click the "Add" button:

Your custom font settings will be displayed here once they are saved.

Step 6. Click "Save":

The added fonts will be shown in the same list as the default fonts.

Background settings

Customize the section background with a solid color, gradient, image, or video.

You can layer a color or gradient over a background image.

The image can be added as a file or as a link to the image:

A video can be added from the storage

First, upload your video file to the file storage.

Image position

Image positioning within the section is controlled by two parameters: the first defines the horizontal alignment, and the second defines the vertical alignment.

Specify a positioning keyword or a combination of both:

top — aligns to the top

bottom — aligns to the bottom

center — aligns to the center

left — aligns to the left edge

right — aligns to the right edge

bottom left — positions at the bottom left (example 3), etc.

You can also specify precise values using percentages (example 4), pixels, or a combination of units.

Image size

You can change the image size:

set flexible settings of two values: the first is the width of the image, the second is the height in pixels (example 1 - 500 px) or in % (example 2 - 15%).

specify one of the parameters:

a) contain - place the image at the height of the section (example 3)
b) cover - the original image size (example 4, the original image size is 1268 x 1343 pixels)

Background image repeat

This option is disabled by default. Available settings include:

Pin an image

Turn on the switch to enable a fixed background image. When enabled, the image remains in place while scrolling, and content will scroll over it.

Background color and gradient

You can customize the section's background with a solid color or choose a gradient from the available options.

Display settings

You can specify where this section is visible (e.g., on which devices or platforms). By default, it is displayed on the website and on Facebook. Using the drop-down menu, you can select a display option for this block, such as making it visible only on the website.

Border Radius:

The border radius is indicated in pixels - px

This is an example of displaying a section with border radius settings:

Section height

The height of the section can be defined using the following units:

px: pixels (fixed value)
vh: viewport height (responsive to screen size)

Example: A section with height set to auto (default) will expand based on its content.

Example 2. Section height = 100 vh (the entire device screen). When scrolling down, the next section will become visible.

Example 3: A section height set to 40vh will initially occupy 40% of the viewport height. The section will expand to fit its content if it exceeds this height. If the content is smaller than 40vh, the section will remain at the specified height (40vh).

Section width

Width of 1 column = 106 px

By default, the section width is set to full screen, and the content is displayed within an 8-column layout.

Example 1: Content is centered within the section and spans 5 columns of the layout.

Example 2. A section spans 8 columns, with content covering the entire width of the section:

Scroll-triggered Appearance Effect

Activate this switch to enable scroll-triggered animations for your content. You can choose to make content appear from the bottom, top, left, or right.

Content Display

Content is displayed horizontally and centered by default. It can be shifted to the left or right edge of the page.

Vertically, content is aligned to the top by default. It can be moved downward or centered on the page.

To adapt text to narrow screens according to Mavibot styles, please enable this slider:

Margins (for the section)

External margins

You can use these fields to adjust the spacing between sections. By default, the inner padding (top/bottom/left/right) is set to 0 px.

Example 1. The default external margin of the section looks like this:

To apply equal margins on all sides, enter the value in the main field. The top, bottom, left, and right margins will be set automatically.

Example 2. Increasing the internal margin to 32 px:

To ensure visual consistency, margins must be configured individually for each section.

Internal margins

Use these fields to adjust the inner margin of the section. By default, the margin (top, bottom, left, right) is set to 32 px.

Example 1. The default internal margin of the section looks like this:

Example 2. Increasing the inner margin to 100 px:

Visibility range by device

The visibility range determines on which devices (e.g., desktop, tablet, mobile) this block will be displayed. This setting is configured individually for each block.

Why is this useful and how does it work?

If a block (e.g., a cover) displays well on desktop but not on mobile, you can configure it to appear only on devices with a screen width of 960 pixels or larger. This ensures the block is only visible in desktop views and hidden on mobile devices.

Then you need to copy this block and customize its appearance specifically for mobile devices (change the photo, font size, etc.). For this block, set the visibility in the range from 0 to 960 pixels. It will be the mobile version of the block.

As a result, the desktop version will be displayed on computers, while the mobile version will be shown on smartphones and tablets.

The range of visibility (different parameter values) is necessary to be able to customize the appearance of the unit for a specific device by selecting the resolution. For example, if the block does not display well on a tablet or on a specific phone model, you can customize its appearance based on the resolution of these devices.

By default, the section is displayed on devices of any size.

Example

Configure the first section for mobile devices and tablets

Create a section
Set its visibility range from 0 to 640 px
Upload an image optimized for small screens

The second section is for PCs (laptops). Set the visibility range from 641 pixels and above.

Save your changes and proceed to the edit page. For your convenience, the section visibility settings will be displayed there.

To test how the sections will appear on a specific device, go to the site preview page. Then go to Settings in the Browser, select "Advanced" — "Developer Tools".