# Site pages

Any website — whether multi-page or a landing page — consists of one or more **pages**, each containing specific content.

As we've already discussed, the page content is divided into **blocks (sections)**, which define the structure and type of the content on the site.

{% hint style="success" %}
In the MaviBot builder, there are various types of blocks (sections), each of which is added to the site with its own individual settings.

* [**Zero block**](/websites/sites/blocks/zero.md)\
  This is a block without any predefined settings —  allowing you to place any content and a wide variety of site elements according to your unique design. Unlike other blocks, elements in a Zero Block can be arranged in any quantity and in any order. The Zero Block can serve as any section of the website — such as a menu, footer, lead capture form, gallery, and more.
* [**Cover**](/websites/sites/blocks/cover.md)\
  A block designed for adding an image or video along with a headline.\
  Traditionally, the cover block is used as the **visual introduction** or **business card** of the site—it's typically the first thing visitors see when they land on your website.
* [**Title and text**](/websites/sites/blocks/other.md#title-and-text-section)\
  A text block that includes a headline and body text. This block is commonly used to present key information, descriptions, or explanations on your site.
* [**Menu**](/websites/sites/blocks/menu.md)\
  Used to create a header or footer with navigation buttons (can also be set as a floating menu).
* [**Online booking**](/booking/settings.md)\
  Allows you to add an online booking form for clients (connected to pre-configured branches) with automatic integration into CRM.
* [**Timeline**](/websites/sites/blocks/other.md#stages-section)\
  A block for designing a unique site layout with a chronological sequence of events.
* [**Accordion**](/websites/sites/blocks/accordion.md)\
  Used to display information in a collapsible Q\&A or expandable content format.
* [**HTML**](/websites/sites/blocks/other.md#html-section)\
  This block allows you to insert custom HTML and CSS code directly onto the page.
* [**Form**](/websites/sites/blocks/forms.md)\
  A block for adding messenger buttons, questions, privacy policy agreements, and more.
* [**Quiz forms**](/websites/sites/blocks/quiz-form-section.md)\
  A block for creating multi-step quizzes or surveys on the website.
* [**Media**](/websites/sites/blocks/other.md#media-section)\
  Used to insert images or video content into your website.
* [**Buttons**](/websites/sites/blocks/buttons.md)\
  A block for adding buttons that link to URLs, phone numbers, emails, or payment pages.
* [**Quote**](/websites/sites/blocks/other.md#quote-section)\
  A block for highlighting a quote or testimonial.
* [**List**](/websites/sites/blocks/other.md#list-section)\
  Allows you to create ordered (numbered) and unordered (bulleted) lists.
* [**Dropdown text**](/websites/sites/blocks/other.md#drop-down-text-section)\
  A block for adding text that expands/collapses when clicked.
* [**Gallery**](/websites/sites/blocks/other.md#gallery-section)\
  Used to display a collection of images in a gallery format.
* [**Pop-up**](/websites/sites/blocks/popup.md)\
  Enables the creation of modal pop-up windows on the website.
* [**Custom cards**](/websites/sites/blocks/cards.md)\
  Great for showcasing customer testimonials or product information in a card format.
* [**Course cards**](/websites/sites/blocks/course.md#how-to-add-the-course-cards-section)\
  Used for selling online courses directly on your site — no need for manual setup, as course data is automatically pulled from the “Online Courses” section.
* [**Lesson list**](/websites/sites/blocks/course.md#how-to-add-the-lesson-lists-block)\
  Select a course in the block settings, and all lessons from that course will be displayed automatically.
* [**Countdown timer**](/websites/sites/blocks/other.md#timer-section)\
  A block for adding a countdown timer, useful for limited-time offers or launches.
* [**Tables**](/websites/sites/blocks/sheets.md)\
  Lets you organize and display structured data in table format.
* [**Cookie consent**](/websites/sites/blocks/cookies.md)\
  A compliance block that displays cookie policy information — informing users what data is stored and how it improves their experience.
  {% endhint %}

To enter the editing mode of a website page, click on the tile of the desired website to open its settings.

<div data-with-frame="true"><figure><img src="/files/gL0hDHInrOf6kNTTbGC9" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
If you’ve just created a new multipage website, there’s no need to navigate anywhere — you’ll already be in the tab with the website’s settings and pages.
{% endhint %}

Then click on the specific page of the website you want to edit.

<div data-with-frame="true"><figure><img src="/files/fD6p8hH9SvHmxgjFpAor" alt=""><figcaption></figcaption></figure></div>

Then the page editing form will open, where you can add or remove site blocks (sections), change fonts, page background, and more.

<div data-with-frame="true"><figure><img src="/files/vqFECOfBrkPEuR3OOzf1" alt=""><figcaption></figcaption></figure></div>

{% hint style="success" %}
Here are keyboard shortcuts for entering fullscreen editing mode:

`Ctrl+shift+X` or `Cmd+shit+X`
{% endhint %}

## How to add a new block

To add a new block, hover over any empty space in the working area. Click the **"+"** button that appears. A menu will then open on the right side of the screen where you can select the desired block type.

<div data-with-frame="true"><figure><img src="/files/cu9J30mXc1clQ0ga2VZT" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Detailed settings for each block are covered in the ["Site blocks"](/websites/sites/blocks.md) section.
{% endhint %}

## How to delete a block

To delete an unnecessary block, hover it and locate the corresponding **“Delete”** button.

<div data-with-frame="true"><figure><img src="/files/aZoW95huBOWAiPIo0q8N" alt=""><figcaption></figcaption></figure></div>

Click **“Delete”** to remove the section permanently.

{% hint style="danger" %}

#### **Please note!**

This action cannot be undone.
{% endhint %}

## How to hide a block

If you don’t want to delete a block or need to temporarily hide it, hover over the block and click the **“Off”** button.

<div data-with-frame="true"><figure><img src="/files/FUzUGovtZiu3z7ZlQPIG" alt=""><figcaption></figcaption></figure></div>

Click the button to hide the section. Click it again to show it.

## How to copy a block

To duplicate a section, hover over it and click the **"Copy"** button. The copy will be added to the same page automatically. This is useful for creating variations with different settings (e.g., for separate devices).

<div data-with-frame="true"><figure><img src="/files/ku4K4zFJTR5PCzvkk4hb" alt=""><figcaption></figcaption></figure></div>

Click the **"Copy"** button to duplicate the section. The copy will appear directly below the original.

## How to edit a block content

To edit a section, hover over it and click the **"Content"** button.

<div data-with-frame="true"><figure><img src="/files/2MaaCS8AqHBklIW9YDwj" alt=""><figcaption></figcaption></figure></div>

A content editing menu will open on the right for all block types except the Zero block.

<div data-with-frame="true"><figure><img src="/files/adQFahqkdbbIkRP4nGSc" alt=""><figcaption></figcaption></figure></div>

The Zero Block, however, is edited in a dedicated window.

<div data-with-frame="true"><figure><img src="/files/tw7FsuLYDUnhUga0f5xL" alt=""><figcaption></figcaption></figure></div>

{% hint style="success" %}
To learn how to edit any block and understand the purpose of different features and settings, please refer to the **“**[**Site blocks**](/websites/sites/blocks.md)**”** section.
{% endhint %}

## Block settings

<div data-with-frame="true"><figure><img src="/files/UvQLffzaaSisJ7s8oX5r" alt=""><figcaption></figcaption></figure></div>

Use the **"Edit"** button for content. For all other styling and visibility settings, click the **"Settings"** button (applies to all blocks except the Zero block).

<div data-with-frame="true"><figure><img src="/files/CD35bhwZXp6hkVlr2rlF" alt=""><figcaption></figcaption></figure></div>

Font, background, and display settings are universal and function similarly across all blocks.

{% hint style="success" %}
Learn more about these universal settings in the **"Site blocks"** article, in the relevant section.
{% endhint %}

### Display settings

This menu allows you to configure the block’s display for the current page and the Facebook subscription widget. You can also optimize its appearance for different devices by controlling visibility based on screen size.

<div data-with-frame="true"><figure><img src="/files/OWgoEOQtQrJNzAIWgnLK" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
The Facebook subscription block has fixed dimensions. Therefore, the **Section width** and **Content width** parameters are unavailable and any values set will not apply.
{% endhint %}

### Visibility range

You can set the block to be visible only within a specific screen size range using the display settings.

<div data-with-frame="true"><figure><img src="/files/CDDDmCwgEU0VXlaP2tTB" alt="" width="375"><figcaption></figcaption></figure></div>

Use this to build a mobile‑optimized version of the content, designed for smartphones and other handheld devices.

<div data-with-frame="true"><figure><img src="/files/2U0VegTzQUNwsckjleM8" alt="" width="375"><figcaption></figcaption></figure></div>

You can create one section, duplicate it, and adapt each copy for a different screen size.

<div data-with-frame="true"><figure><img src="/files/FixLoYwrwj6ZlavATn4J" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/websites/sites/pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.