> 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="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FxSLCnMCdx2By6kGk1uMu%2FScreenshot%202024-12-20%20at%2012.13.51.png?alt=media&amp;token=17235d3c-d035-4891-aad2-e7fc7e03ce77" alt=""><figcaption><p>Нажмите на иконку "плюс" в всплывающем меню.</p></figcaption></figure>

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2Fvkodb66xb5LIKECJEhSa%2FScreenshot%202024-12-20%20at%2012.14.25.png?alt=media&amp;token=1fe11399-479e-4394-967d-18cf36310c9c" alt=""><figcaption><p>Пример пустого элемента.</p></figcaption></figure>

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

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

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FjK6xwRlAXOp9PeIztZS9%2FScreenshot%202024-12-20%20at%2012.14.41.png?alt=media&amp;token=a98d4030-ca08-45ae-9717-11a6da02441c" alt=""><figcaption><p>Пример изображения ао всю ширину: Ширина - 100%, Высота - 600 пикселей.</p></figcaption></figure>

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

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

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

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

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

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

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