Работа с обложкой

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

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

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

Изображение для фона обложки загружается в Контенте блока → Фоновое изображение.

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

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

Перед тем, как начать выбор изображения, прочитайте нашу статью «Как сделать обложку» в Tilda Education. Она содержит советы по созданию своей обложки и ссылки на сервисы, в которых можно найти удачное изображение.

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

Наполнить обложки текстом можно двумя способами: с помощью панели «Контент» блока и при клике на текст на странице редактирования страницы.

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

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

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

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

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

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

Также можно увеличить высоту обложки в два раза и добиться сочетанием двух этих настроек, эффекта представленного ниже —

Загружаете или находите ролик на YouTube. Заходите во вкладку Контент и вставляете в нужное поле ссылку на ваш ролик. Получается обложка с видео.

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

Заходите во Контент обложки и вставляете в нужные поля ссылку на ваш ролик в обоих форматах.

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

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

Видео в обложке не работает в мобильной версии

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

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

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

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

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

В Контенте этих блоков вы можете установить дату, время и часовой пояс момента, до которого будет идти отсчет.

Если дата настроена верно, то в обложке появится таймер.

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

Многие блоки с обложками можно конвертировать в Zero Block для последующей доработки. Для этого нужно зайти в настройки блока, прокрутить вниз и нажать на кнопку «Конвертировать в Zero Block».

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