# Other site sections

## Title and text section

This block is used to add text to your website.

You can use an existing template or create your own (an empty one), and then customize it according to your preferences.

<figure><img src="/files/pLqebPjoFI3p6YZmjSOz" alt=""><figcaption></figcaption></figure>

You can fill in the Title field or leave it empty.

<figure><img src="/files/uPY5ahEQs7ublOGy1GQu" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The main fields for formatting the Title text and the Main text are the same as in the [Cover section.](/websites/sites/blocks/cover.md)
{% endhint %}

You can format the text by applying styles (**Bold**, *Italics*, \~\~Strikethrough\~\~, \<u>Underlined\</u>), changing the color of selected text, and adjusting alignment (left, center, right, or justified).

You can also add lists (numbered or bulleted) or insert hyperlinks into the text.

Additionally, variables can be inserted into both the **Heading** and **Text** fields.

<figure><img src="/files/WimCCVkGa5X9zdX4GBiT" alt=""><figcaption></figcaption></figure>

Clicking the button opens a menu showing available standard and project variables. You can copy and paste any variable into the selected field.

<figure><img src="/files/z1MpXRbhYohnfc90v8HE" alt=""><figcaption></figcaption></figure>

## HTML section

The section can be used to add elements to a created website using HTML and CSS codes.

<figure><img src="/files/LUv6n21kS8e5KrYQMJYH" alt=""><figcaption></figcaption></figure>

The CSS code works for the entire site, not just the current section!

It is not recommended to insert HTML codes with \<script> tags into the block.

This HTML code is executed immediately, here in the preview.

To add a \<script>, use the CSS and JS section in the site settings.

<figure><img src="/files/Du2VOlFn7nC2N3SaV0NL" alt=""><figcaption></figcaption></figure>

## Gallery section

The Gallery section allows you to significantly enhance your website's appeal and informativeness by adding images that visually showcase your products or services to customers. This helps create more engaging and compelling content, which can boost user trust and ultimately increase your site's conversion rate.

Typically, the Gallery section displays a collection of images in a slideshow or carousel format. These can include various types of visuals such as photographs, screenshots, charts, and more.

<figure><img src="/files/xZ8NnKaE8wV8WyEBRHOz" alt=""><figcaption></figcaption></figure>

**How to add images to Gallery section**

Go to the **Content** menu and upload your images there.

<figure><img src="/files/FLp21ocB4qY1sWt7HwST" alt=""><figcaption></figcaption></figure>

You can upload up to 20 images with a total size not exceeding 10 MB.

Once an image is selected, you can customize the text that appears when hovering over it.

<figure><img src="/files/2wKd98Hw8b7yaCXDQCC0" alt=""><figcaption></figcaption></figure>

To select the gallery style, go to settings:

<figure><img src="/files/xqzqOsDbSdK2Ax2aDwot" alt=""><figcaption></figcaption></figure>

By default, the gallery has a "Stripes" view. However, you can change it to the style of "Tiles", "Polygons (full width)" or "Tiles (full width)".

<figure><img src="/files/rR7YWgyz1IO80KKjQUPx" alt=""><figcaption></figcaption></figure>

## Media section

This section allows you to add any media file (image or video) to your website separately from the universal block. You can use a ready-made template or create your own, empty one, and then customize it as you need.

<figure><img src="/files/eKsr5mDidMUVtjLp3fXs" alt=""><figcaption></figcaption></figure>

The main difference between this block and the gallery is that the image/video added to the block remains static (i.e. it does not scroll like in the gallery):

<figure><img src="/files/ItPT61sFkbb6q5h7gPfK" alt=""><figcaption></figcaption></figure>

### How to upload an attachment

After you click the "Add Block" button, an additional window opens with the parameters for the selected media file. In this window, you can configure the file display settings on the website.

<figure><img src="/files/s4VqKagdzIVz7qkdEoF1" alt=""><figcaption></figcaption></figure>

You can add video files of any type by providing a link to them. You can also download images from your computer or also enter a link in the URL field.

<figure><img src="/files/N88f116Ft1NQzMtjtuXF" alt=""><figcaption></figcaption></figure>

You can add a link to the image that will allow the user to follow it when clicking on the image. You can add variables and adjust the file width and height.

<figure><img src="/files/KrnU2NFwLWncepol4O8r" alt=""><figcaption></figcaption></figure>

After you have selected the media file, you can display the text and title in the block:

<figure><img src="/files/gs1LDF7qdiExcJR7GUbj" alt=""><figcaption></figcaption></figure>

You can format text using standard editor tools as in other blocks. You can apply **bold**, *italics*, \<u>underline\</u>, change font size, color, and more.

## Quote section

This type of block is needed if you want to highlight a quote separately on the site. You can use a ready-made template or create your own, and then customize it as you need.

<figure><img src="/files/sQufwHoIX7JUKr0l3Lpu" alt=""><figcaption></figcaption></figure>

Type #1

<figure><img src="/files/y2LF1RQkLIOw1w2KAum0" alt=""><figcaption></figcaption></figure>

Type #2

<figure><img src="/files/faZATZEM3QgqrGkXLyPL" alt=""><figcaption></figcaption></figure>

This block is quite easy to set up and contains one text field for a quote:

<figure><img src="/files/fF6X5ySSnEbW4XyzsBf3" alt=""><figcaption></figcaption></figure>

The text field includes all standard formatting features: case switching, *italics*, **bold**, \<u>underline\</u>, and more. You can also customize the text color and highlighting.

In the **Content settings**, you can choose a quote display styl, select a different font for the block, adjust the background, and modify its appearance.

<figure><img src="/files/rGOLZ9b4jVL5XT7JffbN" alt=""><figcaption></figcaption></figure>

## Timer section

The Timer block is the most interesting solution for your website from and until the required date in animation mode:

<figure><img src="/files/nO7A8XQVqQ4IhBcfaQGi" alt=""><figcaption></figcaption></figure>

There are two types of timer in the block:

* Real time

<figure><img src="/files/VnD1wMhT8lUDsZLN4QVn" alt=""><figcaption></figcaption></figure>

As the name suggests, a timer with the "real" type starts counting down to a given date and time of a certain event.

For example, today is 12/22/2025 (Tuesday)and the event is a conference on December 30 at 15:00.

We set the date in the calendar - April 30th and in the time field - 15:00.

<figure><img src="/files/Iz3DE54M0hV8jqYmzYCa" alt=""><figcaption></figcaption></figure>

This way, the timer will start counting down the time remaining before the event:

<figure><img src="/files/zVmyU6bM9KJB4g02XvRc" alt=""><figcaption></figcaption></figure>

* Cyclical

A timer with the cyclic type does not automatically calculate the time: so, you set the days and hours in the available fields yourself and the timer starts counting down:

<figure><img src="/files/SZqxyyqtklfp583dJRBK" alt=""><figcaption></figcaption></figure>

For example, your subscription discount is valid for a week: you can set the end date of the promotion in 7 days in the timer. The system will automatically count down the time to this date, starting from the moment of setting.

Also, in this type of timer, it is possible to restart the timer after the time has elapsed:

<figure><img src="/files/L0CmhneAd661FmFNQPTF" alt=""><figcaption></figcaption></figure>

The difference between timers with the "real" and "cyclic" types is that in the first case, the time is counted until a certain date and time (until 04/30/2025 15:00), and in the second — according to the set time values (expires after 7 days).

Moreover, you can select the color settings for the numbers and the background for the timer. To do this, go to the settings:

<figure><img src="/files/hSmqrtxoZAxAAgHXtiLf" alt=""><figcaption></figcaption></figure>

Here you can adjust the display of milliseconds, adjust the color of numbers, text and timer background.

<figure><img src="/files/i5kteuUFULbwY2wGvjaa" alt=""><figcaption></figcaption></figure>

## List section

This block will help you display the necessary information in the form of a numbered or other list.

To do this, click "Add list item" in the settings of the block:

<figure><img src="/files/2FN3JmGz0Z53OLOnO5nS" alt=""><figcaption></figcaption></figure>

You can add any number of lines to the list here, and you can also add a variable instead of text by clicking on the curly brackets on the left:

<figure><img src="/files/nbYydKgcWsBMzL9KViOU" alt=""><figcaption></figcaption></figure>

The style of the text and the list can be changed in the settings:

<figure><img src="/files/jdFr3ZBsGkfAI2qIyy7x" alt=""><figcaption></figcaption></figure>

The list style can be selected from the suggested ones: “No style", “Dot", “Circle", “Square", “Numbered list”.

<figure><img src="/files/xBeR8z66fl0Q3YVpxjzB" alt=""><figcaption></figcaption></figure>

You can change the text style in the font settings:

<figure><img src="/files/e87kp79zdL23xpRwRhXt" alt=""><figcaption></figcaption></figure>

## Drop-down text section

The drop-down text block will save space on the site and, if your client wants to read more detailed information, he will be able to expand and look it over:

<figure><img src="/files/h2Um16ccfJdiynUPpwrD" alt=""><figcaption></figcaption></figure>

You can specify a title and hints, and the full text will be opened only after clicking the button:

<figure><img src="/files/dls5sXsW1frYkP8QHEoo" alt=""><figcaption></figcaption></figure>

There are fields for the title, text, hint, and full text in the builder, where for each field you can provide a font outline, color, and other settings similar to a text editor:

<figure><img src="/files/3GMwoJQzwS2of4xAXj1y" alt=""><figcaption></figcaption></figure>

Then you should choose an animation for the text: instant or smooth. To do this, go to the settings:

<figure><img src="/files/SDgDqDovdcwMgxPDocQI" alt=""><figcaption></figcaption></figure>

After that, you can adjust the font style in the font settings.

<figure><img src="/files/kaYljY6BkH9uusPERDev" alt=""><figcaption></figcaption></figure>

## Timeline section

This section allows you to clearly display sequential steps on your site, whether for an online course or any other process.

<figure><img src="/files/GveAO9tNBfTe4JSeRf4I" alt=""><figcaption></figcaption></figure>

To add a block to the page, click the **"+"** button. Then, select **"Timeline"** from the section list. You can create a block from scratch or use a ready-made template.

<figure><img src="/files/dJpewh4LvcvEuijXXJBe" alt=""><figcaption></figcaption></figure>

To add a stage point in the block settings, click on the button with the same name:

<figure><img src="/files/Ja9I03WTK0PpZ0gpgcqt" alt=""><figcaption></figcaption></figure>

Then, clicking on a stage point itself will open fields for entering the point’s **name**, **title**, and **description** for that stage.

<figure><img src="/files/jvKqaJFFDeblkuHfQceP" alt=""><figcaption></figcaption></figure>

Here, you can apply individual formatting settings to each text element, just like in a standard text editor (italics, underlining, text color, alignment, etc.).

Next, select a style (with or without a border). To do this, go to the settings:

<figure><img src="/files/1dgBV32nVmhLcizwIkCG" alt=""><figcaption></figcaption></figure>

You can also customize the color for each individual element within the timeline section.

<figure><img src="/files/lnuUWwMvHs7VYuZ76x0g" alt=""><figcaption></figcaption></figure>

## Files section

You will need this block to share relevant data with users.

<figure><img src="/files/pWMHIsFJo7QYfbmEN1CN" alt=""><figcaption></figcaption></figure>

You can allow users to download files, with the following limits: no more than 5 files in total, with a combined size not exceeding 20 megabytes.

Go to the settings and select the files you want to make available for download.

<figure><img src="/files/mcVlVnH5OXlAumJVo0ca" alt=""><figcaption></figcaption></figure>

Once the audio file is uploaded, you can enable the **"Play audio"** function if desired. This will make the audio play automatically when a user visits the page. You may also turn on the **"Disable audio download"** and **"Show preview"** options.

<figure><img src="/files/Ig3oLbnQMJ7cW4X6MWZB" alt=""><figcaption></figcaption></figure>


---

# 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/blocks/other.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.