Zero block
In this article, we will explore how to use zero blocks to create websites with custom designs. We’ll examine how the block editor functions and demonstrate how to add and edit elements.
Creating a website using the Zero Block in the Mavibot constructor is a fast and convenient way to build a professional website without any programming knowledge. Don’t hesitate to experiment, customize the design, and add content to make your website unique and successful.
The Zero Block is a fully customizable web design editor within Mavibot. It enables you to create unique designs for individual blocks or the entire site without any restrictions.
How to add the block
To add the Zero Block to the page, click the "+" button on the editing toolbar.
After clicking the "+" button, the "Add a new block" menu will appear on the right.
Select the "Zero Block" and proceed to editing.
There is a block settings menu.
Content height
You can use this field to change the block size. The default value is 550px.
Example 1. Setting the content height to 750px.
Scaling the Grid area
It is used to adapt the website design to different screen sizes.
It is disabled by default, but you can also select "auto-scale by window width".
Background settings
You can choose the background color using an extensive color palette. Move the slider to the desired shade, click on the circle and select the desired color. You can also enter the shade code.
You can add a background file in SVG, PNG, JPG or GIF formats. The file size should not exceed 30 MB.
Example 1. Adding a JPG file.
The default image alignment is set to Center Center. You can select a different position from the list or select the position yourself by clicking on the icon on the right.
Example 1. Default image display in the Center Center position.
Example 2. Image display in the Top Left position.
The default position of "behavior" is set to “scroll", you can select the "fixed" position. When you change the position, the background shifts.
Adding elements
Click on the "Add element" button on the left. There are layers at the bottom of the button, and you can change them with each other by superimposing one element on another.
The Add Element button creates a new layer with the selected element:
Each item opens its own settings menu.
Click the "Save" button after setting up the item.
Text
You can add an element with text content.
Example of adding text to a block
You can use standard fonts or choose your own. You can also change the color of the text, its line spacing, the size of the letters and their distance from each other, the position of the text on the block, adjust the case of the text, and more:
Image
To add the desired image, download the file from the system. To do this, click on the download icon. You can also add an image by inserting a link to it in the appropriate field. Paste the URL of the desired image and choose how it will open: in a new window or on a new page.
You can adjust its position on the page after inserting the image. Choose how it will be positioned relative to the left or right edge, or place it in the center. You can also adjust the transparency of the image and other display settings, such as blurring or rounding.
Example of adding an image to a block
The background can be changed at any time.
Figure
You can add a shape to the block (by default, it is a rectangle). In the settings, you can select another shape: circle or line. You can also customize the shape as you wish: align, add effects, change color, background, style, etc.
Figure settings:
Example of adding a shape to a block
Button
To add a button, click "Add item" and select "Button":
In the settings section, you can customize the appearance of the button to your liking. Choose a style, color, background, blur level, and other options. You can also change the font, color, and size of the text in the button.
In order for the button to be active, you need to add a link to the page you need in the item settings in the Button section. When you click on the button, the link will be clicked.
In order to see if the button is working, you need to save the changes, close the block settings and go to the site preview.
Video
You can use this tool to add any video and configure its display in the block.
You can add videos from various resources to the zero block:
To do this, just select exactly where the video is located (Youtube, Kinescope, etc.), and then paste the URL into the links field.
You can also add videos from the file storage. To do this, copy the link to the video in the file storage:
Then select the MP4 video type in the settings of the "Video" item:
And paste the link to the video from the file storage.
Hint
This element allows you to add a tooltip with any content. You can edit the item to your liking in the settings.
You can make the hint semi-transparent and place it on top of the text, background, or image:
When you hover over the hint (on the site page, NOT in editing mode), some text will be displayed:
Do not forget to save the completed actions in the settings using the "Save" function.
Gallery
You can add a new element to the zero block in the same way as the previous ones:
iMavibot adds two images by default. But you can also upload the images you need for the gallery yourself. To do this, go to the gallery layer (the layer button is located on the left of the screen or click directly on the image).
In the element settings, using the available functions, you can, if necessary, align the gallery relative to the left or right edge or center. You can also move an item by holding down the left mouse button and clicking on the item.
Moreover you can adjust transparency, rotation, and other effects for images to make the gallery display in the block more interesting.
There are two image size options in the gallery: "cover" — the full width of the image and "contain" — with borders.
Example 1. Image size - "cover"
Example 2. Image size - "contain".
The looping feature allows you to automatically move from the last image in the gallery to the first one without having to scroll through the previous ones. If the looping feature is disabled, we have to manually use the arrow keys to return to the first image.
You can also select the scrolling speed of images and auto-play to automatically scroll through the gallery.
In the settings of the gallery buttons, you can change their color, shape (make them triangular or in the form of arrows), location, size, and other parameters.
In the settings, you can also adjust the frame for the gallery, its style, rounding, as well as add shadows and other effects.
Accordeon
The universal Accordion block element is a convenient graphical solution for a website in the form of a list of text notes with drop-down elements:
Accordion is easy to integrate into your website and customize according to your needs: it can be adapted to any requirements.
To add an item to the block, open the universal block settings. You will see "Accordion" in the list of available items.
To apply the desired style parameters to an element, you need to click on it. After that, the "Accordion" parameter constructor will appear on the right, as well as for other elements of the zero block.
After you click on the arrow, a pop-up window with information will appear on the screen, for example, with the answer to a question:
To make changes to the text of an element, double-left-click on an existing element in the created template. You can change the text in the drop-down list in the same way.
After selecting the text to edit, the text settings will appear at the top of the screen, similar to those used in any text editor.
In this additional text menu, you can change font settings such as thickness, tilt, height, and others.
Now let's go to the right menu of the basic settings of the item. You can also change the font here: choose color, saturation, case, transparency, as well as add your own font and other options.
In the Accordion settings, you can add more of your questions, answers, etc. You need to click Add:
You can also change the design of the question and answer, make them more rounded, make the background transparent, adjust the background change when hovering over the question or answer, arrange the frame in a certain style and other parameters — it all depends on your imagination and preferences.
In Zero block, you can combine various elements to create a unique and memorable website style. This will allow you to surprise your clients with original design solutions.
After completing the work on the page, you need to adapt it to different screen sizes.
Form
The Zero block element "Form" allows you to use the application collection form where it is really needed. You will be able to collect applications and contacts precisely where the user is most involved, without having to display it on a separate form.
To add a form to the zero block, click on "+Add item", and then select "Form" in the drop-down list that opens.
The "Form" block will appear as buttons on messengers to which you can add questions and change the buttons:
To add questions to the form, for example, in the form of "Enter email", "Describe your question" and the like, you need to click on the "Set up questions" button in the right settings menu:
Then create your questions in the form:
The result can be the following:
You can add the checkbox "I agree with the personal data processing policy":
You can also edit social media buttons:
And customize the title and subtitle of the form.
Double-click on the text field, after which you can enter the necessary text, as well as change the font, bold, text color, etc.:
For more information about the types of question fields, see the article "Forum Answers".
reCAPTCHA
To install reCAPTCHA, you need to specify a key pair (public and secret keys) in the general settings of the site and enable recaptcha verification in the zero block in the data collection form.
You can choose any service that provides website protection using a captcha. In this section, we'll look at how to install a Google captcha.
Step 1. Getting the keys
First, you need to fill in the basic information to receive the keys: select the types of captcha; add the domain of the site where you plan to install protection. Next, click "send".
Step 2. Entering keys
Then you will see a pair of keys that you need to copy and paste in the settings of the website page in the Salebot. For this:
1) Find the site page settings button in the top panel:
2) Go to the basic information settings:
3) In the basic information settings, enter the values of the key pair that you received earlier:
Step 3. Enable reCAPTCHA in the zero block.
Go to the zero block where you have a data collection form installed, or to the zero block where you plan to create a reCAPTCHA form:
Click on the "Form" item in the zero block to open the right menu bar.
We described how to create a data collection form and edit it in the "Form" section above.
Next, find the buttons to enable reCAPTCHA:
Enable reCAPTCHA (if necessary, you can enable warnings in English):
Then save the settings:
Done! Now you know how to enable reCAPTCHA in the universal block.
Last updated