> For the complete documentation index, see [llms.txt](https://help.onebot.tech/onebot-help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.onebot.tech/onebot-help/mini-lendingi/oformlenie-vneshnego-vida.md).

# Оформление внешнего вида

После создания мини-лендинга откроется визуальный конструктор страницы:

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

{% hint style="info" %}
Как добавить новые элементы?
{% endhint %}

Для добавление любых визуальных элементов на страницу нажми на кнопку "**+**" и в открывшемся меню выбери нужный элемент.

На данный момент можно добавить:

* Текст
* Изображение
* Кнопки
* Также доступна HTML-разметка страницы

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

{% hint style="info" %}
Добавление и настройка изображения:
{% endhint %}

После нажатия кнопки "**+**" и выборе пункта "**Картинка**" нужно загрузить изображение нажав на "**Выбрать фото**" на появившейся кнопке.

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

После успешной загрузки изображения справа откроется меню настройки элемента.

<figure><img src="/files/M2B3Z0eMk5UKmXOM1OwE" alt=""><figcaption><p>Настройки оформления блока изображения</p></figcaption></figure>

1 - Выбор расположения и формы&#x20;

2 - Закругление углов&#x20;

3 - Настройка размера&#x20;

4 - Масштаб изображения

5 - Настройка отступов сверху и снизу&#x20;

6 - Настройка отступов слева и справа

{% hint style="info" %}
Добавление и настройка текста:
{% endhint %}

После нажатия кнопки "**+**" и выборе пункта "**Текст**" на странице появится блок для ввода текста и меню для настройки его оформления.

<figure><img src="/files/VDTKeW8dT0GaNBS1NwOX" alt=""><figcaption><p>Настройки оформления текстового блока</p></figcaption></figure>

1 - Отцентровка текста и выбор цвета букв

2 - Настройка размера текста

3 - Выбор шрифта

4 и 5 - Настройка отступов по краям блока

Также, при выделенние текста открывается дополнительное меню настройки его оформления (жирный, курсив и т.д.)

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

{% hint style="info" %}
Добавление и настройка кнопок:
{% endhint %}

После нажатия кнопки "**+**" и выборе пункта "**Кнопки**" на странице появится кнопка и откроется меню ее настройки.

<figure><img src="/files/UEo8iLHtyvjVVE0Nnfb4" alt=""><figcaption><p>Настройка оформления кнопки</p></figcaption></figure>

1 - Открытие меню настройки содержимого кнопки (добавить ссылку, выбрать иконку и т.д.)

2 - Выбор размера&#x20;

3 - Настройка закругления углов&#x20;

4 - Выбор шрифта&#x20;

5 - Оформление текста на кнопке

6 и 7 - Настройка отступов по краям блока

{% hint style="info" %}
Настройка содержимого кнопки *(открывается* *при нажатии п.1 прошлого скриншота)*:
{% endhint %}

&#x20;

<figure><img src="/files/r2ablBo322MExYDNQjJ2" alt=""><figcaption><p>Настройки содержимого кнопки</p></figcaption></figure>

1 - Возможность сохранить и использовать в дальнейшем настроеный стиль кнопки (цвет, шрифт и т.д.)

2 - Настройка имени (текст, который виден на кнопке)

3 - Выбор типа кнопки (вести по ссылке или открыть определенный мессенджер)

4 - Указание URL-адреса ссылки/ Выбор сценария для подписки *(при выборе открытия мессенджера)*

5 - Выбор иконки мессенджера&#x20;

6 - Настройки цвета

7 - Настройки градиента

8 - Оформление границ кнопки

9 - Настройки внешнего вида тени

{% hint style="danger" %}
После всех настроек мини-лендинга обязательно нажми "**Опубликовать**" в правом верхнем углу.
{% endhint %}

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