> 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="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2FOTmbOq5OnC4VaK1P9A4e%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2011.19.26.png?alt=media&amp;token=d44ea5d0-8785-4779-ad71-fc52ef5fb889" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2FtvzfLQemsWytrowh3Yz0%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2011.22.05.png?alt=media&amp;token=75cd1948-0e19-40d2-b10f-55ce3b71b77c" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2F4HCckMpql5I6vE60aDVq%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2011.29.28.png?alt=media&amp;token=a49c5ab7-0af2-463d-874e-22d8db7e1395" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2Fv9yTcqveJbFPZRAbOK6V%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2011.32.27.png?alt=media&amp;token=8df61e15-e9c0-4667-9cc3-3f94b783adc3" alt=""><figcaption><p>Настройки оформления блока изображения</p></figcaption></figure>

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

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

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

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

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

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

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

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

<figure><img src="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2FB3CVFxwBLp6wp9H2qg61%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2011.40.34.png?alt=media&amp;token=8f74fc55-b47d-43d8-84cd-e1bdef8ce8f9" alt=""><figcaption><p>Настройки оформления текстового блока</p></figcaption></figure>

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

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

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

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

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

<figure><img src="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2Fhyq2Z5nFdmGbSm8tXEdg%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2012.36.27.png?alt=media&amp;token=4ea49298-7800-45b5-96e9-d641d6096441" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2F2YbuSOQpte9WfEX9P2lG%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2011.46.18.png?alt=media&amp;token=b4dd80ef-c185-4468-8677-c8c7665313bd" 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="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2FsaNmKxzko3KGvsZZnpJe%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2011.52.10.png?alt=media&amp;token=cf8356f0-0665-40da-b353-9733d1ed0067" alt=""><figcaption><p>Настройки содержимого кнопки</p></figcaption></figure>

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

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

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

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

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

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

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

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

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

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

<figure><img src="https://49415206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxxJzgLIMfD15nVewbHNz%2Fuploads%2F9foOo5aWCuAcYrux7oy4%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-11-24%20%D0%BE%2012.01.03.png?alt=media&amp;token=577c6ca0-39e8-44d0-bad6-619dc0bdb9e8" alt=""><figcaption></figcaption></figure>