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 a custom font
To add a custom 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.
Background image settings
Image positioning control
An image within a section is positioned using two independent parameters:
Horizontal alignment (X-axis)
Vertical alignment (Y-axis)
Specify the position using a keyword or a combination:
Keyword
Effect
top, bottom, center
Vertical alignment
left, right, center
Horizontal alignment
bottom left, top right, center center
Combined position
For precise control, you can also use numeric values:
Percentages (e.g.,
30% 75%)Pixels (e.g.,
20px 100px)Or mixed units
Image sizing options
You can control an image's dimensions using the following methods:
1. Set custom dimensions
Define both width and height using flexible values.
Format:
[width] [height]Example 1 (Pixels):
500px 300pxExample 2 (Percentage):
15% 10%
2. Use a preset keyword
Specify a single parameter to apply a specific scaling behavior:
contain— Scales the image to fit entirely within the section's height while maintaining its aspect ratio (Example 3).cover— Displays the image at its original pixel dimensions (Example 4: original size 1268 × 1343 px).
Image repeat
This option is disabled by default. Available settings include:
How to pin an image
Enable this switch to set a fixed background image. When active, the image stays stationary during scroll, allowing content to move 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.
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)
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.
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.
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.
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. Click on the right mouse button and click "View code".
Select the device on which you want to see what the site will look like.
Appearance timing
You can use this field to define the delay before a section appears, specified in seconds (s) or minutes (m).
Last updated