Записи в рубрике: Редактируем страницы

Один из важных элементов при в Tilda – это готовые дизайны, которые позволяют быстро и легко создавать красивые и удобные веб-сайты. В этой статье мы разберемся, где найти доступные в Tilda шаблоны, как использовать их, а также как создать свои собственные.

Где найти заготовки дизайна?

На платформе доступен широкий выбор готовых дизайнов, которые можно использовать для создания различных типов веб-сайтов. Чтобы найти в Tilda шаблоны, войдите в свою учетную запись и перейдите на страницу “Проекты”. Затем нажмите кнопку “Создать проект” и выберите пункт “Из шаблонов”.

На экране выбора вам будет предложено множество вариантов для различных веб-сайтов, таких как лендинги, магазины, блоги и другие. Прокрутите список и выберите наиболее подходящий вариант для вашего проекта.

Как воспользоваться готовыми дизайнами в Tilda?

После выбора понравившегося вам дизайна вы сможете начать им пользоваться для создания своего веб-сайта. Готовые дизайны в Тильде состоят из различных блоков, которые можно комбинировать и настраивать по своему усмотрению. Каждый блок имеет свои настройки и возможности для изменения содержимого, дизайна и расположения.

Чтобы добавить блок на страницу, просто перетащите его из панели инструментов на нужное место. Затем вы можете изменить содержимое блока, добавить изображения, тексты, видео и другие элементы, а также настроить его внешний вид и расположение.

Как создать свои Tilda шаблоны?

Платформа предоставляет возможность создавать собственные заготовки дизайна. Это полезно, если у вас есть уникальный дизайн или структура веб-сайта, которые вы хотите использовать в будущих проектах.

Чтобы создать свой Tilda шаблон, вам необходимо сначала создать в проекте страницу, которую вы хотите использовать в качестве основы. Затем откройте настройки страницы -> Дополнительные и установите флажок “Назначить страницу Шаблоном”. Сохраните настройки.

После этого вы сможете им пользоваться для новых страниц, выбрав его среди доступных готовых дизайнов.

Какие использовать свои Tilda шаблоны?

Использование своих собственных готовых дизайнов может быть полезно, если у вас есть стандартный дизайн или функциональность, которые вы хотите применить к нескольким веб-сайтам. Это позволяет сэкономить время и упростить процесс создания новых проектов.

Для этого просто выберите пункт “Мои шаблоны” при создании нового проекта. Затем выберите нужный вам из списка доступных.

Вывод

В Tilda шаблоны играют важную роль при работе с платформой, позволяют быстро и легко создавать красивые и удобные сайты. Вы можете найти доступные вам при создании новой страницы и выбрать их для создания своего веб-сайта. Кроме того, Тильда дает возможность создавать свои собственные шаблонные страницы, которые можно использовать в будущих проектах. Это удобно, если у вас есть уникальный дизайн или функциональность, которые вы хотите применить к нескольким веб-сайтам.

Для того чтобы разместить контент сайта на разных языках, можно воспользоваться следующими вариантами:

Создание языковых версий внутри одного веб-сайта

Если ваша цель – создание страниц на разных языках в рамках одного веб-сайта, рекомендуется добавить для каждой страницы отдельный блок меню. Для этого создайте отдельные страницы на разных языках и добавьте соответствующий блок меню: ME204, ME301, ME302, ME303 или блок меню “гамбургер” ME401-403. В содержимом блока нужно указать языки и опубликованные ссылки на страницы.

Создание языковых версий на отдельных веб-сайтах

Создайте несколько сайтов. Сделать это можно с помощью бизнес-тарифа, который позволяет размещать несколько проектов на одном аккаунте. Удобно будет сначала создать версию на одном языке, а затем скопировать страницы и перевести их на другой язык.

Для того чтобы скопировать страницы, перейдите в настройки страницы и выберите “Действия” и “Дублировать”. Чтобы переместить страницу на другой ваш сайт, перейдите в настройки страницы, выберите “Действия” и “Перенести страницу на другой ваш сайт”.

В настройках обоих проектов внесите изменения в “шапку” и добавьте соответствующие блоки меню: ME204, ME301, ME302, ME303, или меню “гамбургер” ME401-403. В добавленном блоке контента укажите доступные языки и ссылки на опубликованные веб-сайты.

Если вы хотите использовать три языка – русский, английский и немецкий – воспользуйтест такой схемой:

– На русскоязычном сайте разместите ссылки на языки EN | DE

– На англоязычном сайте разместите ссылки на языки RU | DE

На сайте, который использует немецкий язык, есть возможность выбрать языки RU | EN. Таким образом, если пользователь находится на русскоязычном сайте, ему доступно переключение на немецкий и английский языки. Если пользователь на англоязычном сайте, ему доступно переключение на русский и немецкий языки. Нельзя создать больше трех языковых версий стандартными способами. 

Мультилендинг 

Мультилендинг может помочь перенаправить пользователя на страницу с соответствующим языком, в зависимости от его языка браузера или геопозиции. Этот метод позволяет автоматически открывать страницы на подходящем языке для посетителя сайта. При этом учитывая настройки веб-браузера или его местоположение.

Для перенаправления в зависимости от языка браузера, создайте страницы на разных языках и разместите ссылки на них в меню. Затем, воспользуйтесь блоком T805 из категории “Другое”. Вставьте карточки для каждой языковой версии и заполните обязательные поля.

Для перенаправления в зависимости от геопозиции, создайте страницы на нужных вам языках и разместите ссылки на них в меню. После этого добавьте блок T808 из категории “Другое”. В блоке разместите ссылки на страницы, а также укажите страны, регионы или города. При запросе из них будет происходить автоматическое перенаправление на нужную страницу с соответствующим языком.

Для того чтобы при клике на номер телефона начинался звонок, а при клике на email открывался почтовый клиент, необходимо создать соответствующие ссылки.

Ссылки на номер телефона

Для создания ссылки на номер телефона нужно использовать следующий формат: tel:+71234567890 (без пробелов). Эта ссылка будет работать на мобильных устройствах, а на компьютерах откроется приложение для звонков, если оно установлено.

Ссылки на email

 Для создания ссылки на email пропишите в поле для ссылки адрес вашей электронной почты, например, [email protected]. При клике на эту ссылку откроется почтовый клиент, установленный на устройстве посетителя.

Если вы хотите создать кнопку с ссылкой на email, укажите адрес, начиная с mailto:, например, mailto:[email protected]. При клике на кнопку откроется почтовый клиент, установленный на устройстве посетителя.

Вы можете настроить появление всплывающих окон (pop-up) на вашей странице в зависимости от действий пользователя, таких как клик по ссылке, прокрутка, время нахождения на странице или закрытие страницы.

Появление блока при клике на ссылку

Чтобы показать окно с информацией или формой подписки при клике на кнопку, необходимо добавить специальную ссылку для этой кнопки. Ссылку можно создать в блоке с самим всплывающим окном.

1. Откройте Библиотеку блоков и перейдите в категорию “Форма”. Там вы найдете блоки pop-up (BF501N, BF502N, BF503, BF504), которые можно использовать.

2. Когда блок добавляется в текст, он будет иметь ссылку (линкхук).

3. Та же ссылка будет в содержимом этого блока, ее можно изменить на любое произвольное название, например, #popup:superpopup.

4. Теперь эту ссылку можно добавить к кнопке. Откройте меню “Контент” блока с кнопкой и введите ссылку в поле “Ссылка для кнопки” в формате: #popup:subscription.

Опубликуйте страницу или перейдите в режим предварительного просмотра, чтобы увидеть, как работает всплывающее окно. Оно будет появляться при нажатии на кнопку.

Ссылку можно разместить не только на кнопке, но и на любом слове в любом месте – механизм остается тем же.

1. Выделите слово, при нажатии на которое должен появиться всплывающий блок.

2. Через контекстное меню выберите опцию для добавления ссылки на всплывающее окно.

3. Добавьте блок всплывающего окна (категория «Форма»).

4. В меню «Контент», в поле «Ссылка» введите ту же самую ссылку – #popup:anyword

Появление блока при прокрутке

Добавьте всплывающий блок, который должен появиться при прокрутке страницы. Например, это может быть форма подписки или информация о специальном предложении.

1. В разделе «Контент» введите ссылку в формате: #popup:subscription (слово может быть на ваш выбор).

2. Добавьте специальный триггерный блок, который вызывает появление элемента при прокрутке страницы. Этот блок находится в категории «Другое» и называется T183.

3. В разделе «Контент» укажите точно такую же ссылку, которую вы использовали в блоке pop-up.

Настройка времени запоминания посетителя

В разделе «Настройки» триггера в поле «Время жизни cookie» укажите количество дней, на которое необходимо запомнить посетителя, чтобы избежать частого показа ему вашего pop-up’а.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, установите значение 10.

Чтобы pop-up блок был показан один раз в год, установите значение 365 – после этого посетитель больше не увидит этот блок. Pop-up блок будет появляться каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.

4. Опубликуйте страницу. Блок появится, когда посетитель прокрутит до того места, где вы разместили pop-up блок.

Появление блока по времени 

Добавьте pop-up блок, который появится через определенное время. Например, форму подписки или важное напоминание.

1. В разделе “Контент” вставьте ссылку с использованием формата: #popup:subscription (слово может быть любым).

2. Создайте триггер, способный вызывать появление блока после определенного времени. Триггер находится в категории “Другое”. Используйте блок T188.

3. В разделе “Контент” укажите точно такую же ссылку, какую вы указали в блоке pop-up.

В разделе “Настройки” установите время через которое появится блок – “Тайме (в секундах)”. Это будет время, в течение которого посетитель запомнится.

В разделе “Настройки” триггера заполните поле “Срок жизни cookie” указывая время (в днях), в течение которого будет запоминаться посетитель, чтобы избежать многочисленного показа pop-up одному и тому же человеку.

Чтобы контролировать частоту появления pop-up окна и ограничить его появление не чаще, чем раз в 10 дней, установите значение 10.

Если Вы хотите, чтобы pop-up блок появлялся только один раз в течение года, то установите значение 365, и после этого посетитель не будет видеть данный блок в течение всего года.

Если же Вы хотите, чтобы pop-up блок появлялся каждый раз при заходе посетителя на Вашу страницу, оставьте поле пустым. Когда страница будет опубликована, через заданное время появится всплывающее окно.

При закрытии страницы

Для показа pop-up окна при закрытии страницы добавьте соответствующий блок, который будет появляться когда посетитель закрывает вкладку. Например, это может быть форма подписки или информация о специальном предложении.

1. В разделе “Контент” введите ссылку в формате #popup:subscription (слово может быть любым).

2. Добавьте триггер из категории “Другое”, который вызовет появление блока при закрытии вкладки. Блок T723 должен быть использован.

3. В разделе “Контент” укажите точно такую же ссылку, какую вы установили для pop-up блока.

4. Опубликуйте страницу. Поп-ап будет появляться, когда курсор приближается к верхней границе браузера.

Для того чтобы сайты загружались быстро, следует проводить оптимизацию изображений. Это можно сделать путем уменьшения ширины или высоты при помощи графического редактора (можно использовать бесплатные онлайн-редакторы), а затем сжать фото в сервисе TinyPNG.

Скорость загрузки картинки зависит от ее веса, который определяется двумя параметрами:

1. Размер в пикселях по ширине и высоте (фотография размером 3000х2000 пикселей будет тяжелее, чем фото 300х200 пикселей).

Наилучший подход заключается в изменении размера изображения перед удалением избыточной информации. Это позволяет дополнительно уменьшить вес без значительной потери качества. Размер изображения должен быть не больше 1680 px по большей стороне при загрузке на Тильду, чтобы изображение могло быть автоматически уменьшено программой. Картинки меньшего размера сохранят свой оригинальный размер. Однако, хотя это программное уменьшение размера помогает уменьшить вес, это также приводит к потере качества изображения.

Перед загрузкой фотографии большого размера на платформу Тильда рекомендуется привести ее размеры как минимум до 1680 px по самой длинной стороне. Лучше всего загружать изображения с такими размерами, какими они будут отображаться на веб-сайте. Если размер фотографии не совпадает с размером, указанным в макете, то браузер будет либо сжимать, либо растягивать ее. Оба этих способа ведут к ухудшению качества изображения. 

Для определения размера изображения на сайте, можно добавить блок на страницу и включить сетку (в настройках текстового блока), чтобы узнать, сколько колонок оно занимает. Одна колонка равна 60 px, а расстояние между колонками составляет 40 px.

Как сократить вес изображения в максимальной степени?

 Существуют специализированные программы, которые сжимают изображения, объединяя схожие цвета. Они выполняют эту задачу интеллектуально, не заметно визуально, но значительно уменьшают размер файла фотографии – достигая до 70%.

Примеры таких сервисов: 

TinyPNG, Squoosh, Kraken, Compressor, Compressjpeg и ImageOptim (требует установки на Mac). Рассмотрим пример оптимизации изображения на примере скачанной с Unsplash фотографии Christoph Bengtsson Lissalde.

Исходные размеры файла составляют 4405×2478 px и 3,5 мб.

Если загрузить его на Тильду без изменений, фотография будет обрезана до размера 1680×945 px и ее размер уменьшится до 1,2 мб.

Однако, если открыть исходный файл в Photoshop, изменить его размеры на 1680×945 px и сохранить, полученный размер будет составлять 832 кб.

Если загрузить фото в TinyPNG, его размер уменьшится до 353 кб.

В Тильде есть возможность cоздать собственный макет страницы, сохраните его в качестве шаблона и применяйте его в будущей работе. 

Доступно более 200 готовых шаблонов страниц, которые можно использовать для создания своих страниц, заменив фотографии и тексты. Возможно изменить готовый шаблон так, чтобы он стал совершенно непохожим на исходный – это просто пример качественного дизайна и способа использования элементов. Вы также можете сохранить страницы с собственным дизайном в качестве шаблона и использовать их в будущей работе, например, если у вас многостраничный сайт и некоторые страницы имеют схожий вид. Или же вы создаете персонализированные лендинги для различных клиентов – основа одна и та же, но меняются только некоторые части страницы.

Если вы работаете в команде, то вам пригодятся собственные шаблоны. Например, дизайнер создает шаблон, а маркетолог меняет контент. Или центральный офис разрабатывает дизайн, а филиалы вносят коррективы в содержание.

Инструкция по сохранению страницы с вашим дизайном в качестве шаблона и передаче этого шаблона другому пользователю.

1. Чтобы создать шаблон, перейдите в настройки страницы → дополнительно и установите флажок “Назначить страницу Шаблоном”.

После этого шаблон станет доступным во вкладке “Мои шаблоны” при создании новой страницы.

Как передать шаблон для использования в другом аккаунте

Шаблон, который вы создали, может быть использован в другом аккаунте, если вы разрешаете это. Вот как передать шаблон коллеге:

На годовом плане Business доступна функция создания шаблона, которым могут пользоваться другие пользователи.

1. В разделе “Настройки страницы” → “Дополнительно” поставьте галочку “Разрешить другим пользователям создавать страницы на основе этого шаблона по номеру”.

2. Сообщите коллеге номер шаблона.

3. Коллега нажимает кнопку “Создать новую страницу”, пролистывает страницу до конца (на любой вкладке), нажимает на кнопку “Ввести ID шаблона” и указывает введенный вами номер.

4. На аккаунте вашего коллеги будет создана новая страница, используя ваш уникальный шаблон.

Возможность создать новую страницу с вашим дизайном доступна только при наличии знания соответствующего номера шаблона.

Ссылку, которая перенесет пользователя к определенному блоку на странице, можно создать двумя способами:

1. Вставьте специальный блок T173 – Якорная ссылка из категории “Другое” – в нужное место. В настройках блока T173 укажите желаемое название для якоря, например: “контакты”. Теперь можно создавать кнопки или меню со ссылкой вида “#контакты”, чтобы переходить к этому блоку. Сам блок будет невидимым.

2. Чтобы создать ссылку на любой блок, вам нужно вставить “#rec129000” в адрес ссылки. У каждого блока есть свой уникальный номер, который можно найти в настройках блока в контекстной панели “Настройки” (в самом низу). Обратите внимание, что при копировании страницы номера блоков изменятся и ссылки придется вставить заново.

Чтобы пользователь мог перейти к определенному месту на другой странице, поставьте ссылку вида: /адрес_страницы#название_якоря, где адрес_страницы – это адрес страницы, на которую нужно перейти, а название_якоря – это название якоря, указывающее на нужное место.

Если вы хотите, чтобы переход к блоку осуществлялся плавно, добавьте на страницу блок T178 – Плавный скролл до локальной ссылки – из категории “Другое” в библиотеке блоков.

Обложка – это первое, что бросается в глаза человеку, когда он открывает страницу. Обложка несет информацию о содержании материала и возбуждает интерес читателя к его прочтению либо сообщает о уникальных достоинствах продукта, ярко объясняет, почему он стоит внимания. Часто обложка включает фоновое изображение – это может быть стильная фотография, атмосферное видео, просто цвет, иллюстрация или градиент, текстура.

Есть несколько вещей, которые необходимо знать, чтобы правильно работать с обложками и фоновыми изображениями и видео.

Видимая область браузера

В интернете, в отличие от печатной продукции, нет ограниченного размера видимой области браузера.

У всех у нас разные экраны и разные пропорции. Даже в разных браузерах видимая область варьируется. Например, панель закладок может занимать часть видимой области. Фоновое изображение для обложки кадрируется таким образом, чтобы всегда полностью отображаться на экране пользователя без полей.

Фоновое изображение загружается в Контенте блока → Фоновое изображение.
Для достижения оптимального визуального эффекта мы предлагаем рекомендации по оптимальным параметрам фонового изображения.

Рекомендуемый размер фонового изображения:
Тип файла: jpg
Ширина: 1680 пикселей
Плотность пикселей: 72 dpi
Цветовая схема: RGB
Уровень сжатия: 10

Если ваше фото значительно отличается от идеального, то вам необходимо заранее подготовить его в программе для редактирования изображений, согласно статье, которую мы предоставляем ниже.

Статья о том, как оптимизировать изображения для сайта
Перед выбором изображения, пожалуйста, прочитайте нашу статью “Как создать обложку” на Tilda Education. В ней вы найдете советы по созданию собственной обложки и ссылки на сервисы, где можно найти подходящее изображение.

Изменение формата текста

Текст – это ключевая составляющая обложки, поскольку он является первым сообщением, которое замечает пользователь сайта. Чтобы передать сообщение и установить акценты на обложках, используются заголовок, подзаголовок, описание и надзаголовок.
Наполнить текстом обложки можно двумя способами: с помощью блока “Контент” и при редактировании страницы, нажимая на текст.

Редактирование текста путем нажатия на блок

Редактирование текста в блоке “Контент”

Форматирование текста можно осуществлять как с помощью панели в верхней части, так и изменяя размер, цвет или прочие параметры текста в разделе “Настройки блока” -> “Типографика”.

Используя верхнюю панель, вы можете форматировать текст.

Внесите изменения в настройки блока для изменения форматирования.

Если вам нужна стильная обложка, ознакомьтесь с практическими примерами сочетания текста и фонового изображения в статье “Как создать обложку”, а также в статье “Уникальное предложение продажи (УТП) для вашего сайта”, чтобы ваша обложка привлекала внимание уже в первые 10 секунд.

Измените высоту обложки

Узкая обложка — это обложка, не занимающая 100% по высоте, а около 60 или 70%. В таком случае она выполняет скорее утилитарную, чем имиджевую функцию, так как акцент переходит на информацию, следующую за ней.

Для формирования таких обложек имеется функция «Высота» в настройках блока. Выбор высоты может осуществляться в пикселях (например, 400px) или в процентах от высоты экрана (vh, где 1vh равно 1% области просмотра экрана). Предпочтительнее указывать высоту в vh.

Цвет обложки настраивается с помощью фильтров. Они применяются для тонирования фонового изображения, чтобы текст на обложке был читаемым.

Именно для этой цели в блоках категории «Обложка» предусмотрена настройка цвета фильтра. В данном примере был выбран одинаковый цвет фильтра для начала и конца обложки.
Иногда для полутонировки используют фирменный оттенок или основной цвет страницы.

Настройки фильтров в Разделе контента

К примеру, обложка нашего информационного центра – уровень полутонировки постепенно переходит в сплошной оранжевый оттенок.

Переход в оттенок следующего блока после обложки

Иногда необходимо, чтобы обложка плавно переходила в следующий блок. Для достижения этого эффекта необходимо установить цвету полутонировки на максимальном уровне непрозрачности. Притом само оттенение должно быть таким же, как в следующем блоке после обложки.
Также можно увеличить высоту обложки в два раза и создать комбинацию этих двух настроек, представленную ниже

Опции для настройки тонирования включают прозрачность и цвет. Установите значение прозрачности на максимум – 100% и выберите цвет, который будет использован в качестве заливки обложки. Если выбрать разные цвета, то на обложке будет гармоничный переход от одного цвета к другому.

Видео формат

Вместо статичного фонового изображения можно использовать видеоролик в качестве обложки. Есть два способа сделать это. Первый способ – добавить ссылку на ролик на YouTube в соответствующее поле раздела “Контент”. Это позволит создать обложку с видео.

Непременно нужно учесть, что видео, отображаемое на обложке, не содержит звука.
Вы можете вставить ссылки на видео в форматах webm и mpeg4, используя онлайн-конвертеры, и разместить их на своем хостинге или на хостинге конвертера.

Перейдите в раздел “Контент обложки” и введите ссылки на две версии видео в обоих форматах.
Возможно, у вас возникнет вопрос, почему нужно предоставить два формата.

Различные браузеры поддерживают разные форматы видео, и нет универсального формата, который подошел бы всем. Поэтому, когда пользователь посещает сайт, ему показывается видео, воспроизводимое в формате, совместимом с его браузером. В противном случае обложка останется пустой.

Загрузка видео

Сейчас нельзя загрузить свой видеофайл на Тильду, но можно воспользоваться сторонними сервисами, которые предоставляют прямую ссылку на файл. Некоторые популярные облачные сервисы также предлагают прямые ссылки на файлы. Например, чтобы получить прямую ссылку на файл в Dropbox, нужно заменить “dropbox.com” на “dl.dropboxusercontent.com” в ссылке. Вы также можете загрузить файл на свой собственный хостинг.

Обложка будет отображаться по-разному на разных разрешениях экрана. На популярных разрешениях изменения будут незначительными, но на мобильных устройствах обложка может выглядеть не так, как вы ожидаете. Чтобы создать мобильную версию обложки (и других блоков), ознакомьтесь с подробной инструкцией.

Мобильная версия

Подготовка мобильной версии требует внимания к проблеме работоспособности видео на обложке. Необходимо учесть, что в мобильных браузерах из-за ограничений операционных систем видео не будет проигрываться автоматически. Если ваш сайт содержит фоновое видео на обложке, не забудьте загрузить изображение вкладки Контент. Оно будет отображаться в случае, если видео невозможно воспроизвести, например, при просмотре на телефонах или планшетах.

Форма на обложке

Дизайн обложек CR26 (одно поле подписки), CR26AN (форма с несколькими полями в строку), CR32 (вертикальная форма справа), CR34 (форма записи на обложке с таймером), CR36 (обложка с видео/изображением с одной стороны и формой с другой) включает в себя форму для ввода данных.

Для предварительного просмотра вида формы можно зайти в Библиотеку блоков и выбрать наиболее подходящий вариант на Обложке.

Обложки с формами работают и настраиваются также, как и обычные формы. Чтобы настроить форму, ознакомьтесь с нашей статьей о настройке процесса сбора данных.

Статья-справочник о настройке процесса сбора данных

В обложках CR34 и CR35 есть встроенный таймер обратного отсчета до определенного момента в будущем. Это особенно удобно, если вы создаете страницу для акции или мероприятия.
Вы имеете возможность установить дату, время и часовой пояс, до которого произойдет обратный отсчет, в контенте этих блоков. Если дата установлена правильно, таймер появится на обложке. Конвертация обложки в Zero Block Блоки с обложками представляют собой примеры хорошего дизайна, которые автоматически адаптируются под любые устройства. Однако иногда возникает необходимость добавить элемент или создать собственную обложку. Для этого можно использовать редактор Zero Block. Справочная статья о Zero Block Многие блоки с обложками можно преобразовать в Zero Block для дальнейшей настройки. Для этого необходимо перейти в настройки блока, прокрутить вниз и нажать на кнопку “Конвертировать в Zero Block”.

Следующим шагом является преобразование обложки в Zero Block, где сохраняется правильная адаптация. В случае, если вы уже внесли изменения, они не будут сохранены, поэтому нужно быть внимательным при выполнении конвертации.

Например, можно изменить размер изображения сверху для обложки. Для этого можно использовать вертикальное изображение, квадратное, узкое горизонтальное или горизонтальное изображение с соотношением сторон 16:9.