> For the complete documentation index, see [llms.txt](https://help.lynda.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.lynda.ru/how-to/kak-sozdat-idealnyi-shablon-s-izobrazheniem.md).

# Как создать идеальный шаблон с Изображением

**Шаг 1. Создайте шаблон изображения**

1. Выберите **шаблон Пустой блок** в модальном окне выбора шаблона.
2. Перейдите **в Про- режим**: выберите колонку и добавьте внутрь элемент изображения.

<figure><img src="/files/zXwHDvIesSkKMElxUmvF" alt=""><figcaption><p>Нажмите на иконку "плюс" в всплывающем меню.</p></figcaption></figure>

<figure><img src="/files/cFkuDKNQRqZmjVHNsbmW" alt=""><figcaption><p>Пример пустого элемента.</p></figcaption></figure>

**Шаг 2. Отрегулируйте размеры изображения**

1. Нажмите на вкладку **«Сетка»**.
2. Настройте **ширину и высоту**: отрегулируйте размеры компонента изображения в соответствии с вашими потребностями.

<figure><img src="/files/ZKiN6xe8o8T2YToIMyqz" alt=""><figcaption><p>Пример изображения ао всю ширину: Ширина - 100%, Высота - 600 пикселей.</p></figcaption></figure>

**Шаг 3: Добавьте изображение**

1. Нажмите на вкладку **«Данные»** : выберите изображение из вашей библиотеки.
2. Поэкспериментируйте с настройкой масштабирования, чтобы отрегулировать изображение:

**Заполнить:** Заполняет всю площадь, при необходимости обрезая изображение.

**Вписать:** Изображение масштабируется с сохранением пропорций.

**Растянуть:** Изображение растягивается по всей площади, без сохранения пропорций

{% embed url="<https://drive.google.com/file/d/1aeNWmopnnz1Ye4JRAPkoTOSKCsPCrYy0/view?usp=sharing>" %}

**Шаг 4. Сохраните блок как шаблон, чтобы повторно использовать его в своем проекте или сделать доступным для своей команды.**\
\
Готово! Ваш идеальный шаблон с изображением теперь готов к использованию.