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

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

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

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

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

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

Фоновое изображение

Изображение для фона обложки загружается в Контенте блока → Фоновое изображение.
Чтобы изображение выглядело хорошо, мы составили рекомендации по оптимальным параметрам фонового изображения.
Оптимальный размер изображения для фона:

Формат: jpg
Размер по ширине: 1680 px
Кол-во точек на дюйм: 72 dpi
Цветовая модель: RGB
Степень сжатия: 10
Если ваше изображение сильно отличается от оптимального, то его нужно заранее подготовить в графическом редакторе с помощью справочной статьи ниже.
Перед тем, как начать выбор изображения, прочитайте нашу статью «Как сделать обложку» в Tilda Education. Она содержит советы по созданию своей обложки и ссылки на сервисы, в которых можно найти удачное изображение.

Форматирование текста

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

Наполнить обложки текстом можно двумя способами: с помощью панели «Контент» блока и при клике на текст на странице редактирования страницы.
Редактирование текста при клике на блок
Редактирование текста в Контенте блока
Форматировать текст можно как с помощью панели сверху, так и изменив размер, цвет или другие параметры текста в Настройках блока → Типографика.
Форматирование текста с помощью верхней панели
Изменения форматирования в настройках блока
Чтобы сделать классную обложку, читайте статью «Как сделать обложку» с практическими примерами сочетания текста и фонового изображения и статью «Как сделать продающий оффер (УТП) для сайта» для того, чтобы ваша обложка помогла привлечь внимание в первые 10 секунд.
Изменение высоты обложки
Узкая обложка — это обложка по высоте не 100%, а около 60 или 70%. В этом случае у обложки скорее утилитарная, чем имиджевая функция, ведь акцент смещается на информацию, которая следует за ней.

Для создания таких обложек в настройках блока есть параметр «Высота». Задавать высоту можно либо в пикселях (например, 400px), либо в процентах от высоты экрана (vh, 1vh равен 1% области просмотра экрана). Задавать высоту в vh предпочтительнее.
Цвет обложки: настройка фильтров
Тонирование фонового изображения
Тонирование изображение нужно для того, чтобы хорошо читался текст на обложке.
Для этого в блоках категории «Обложка» предусмотрена настройка цвета фильтра. В приведенном примере выбран одинаковый цвет фильтра в начале и конце обложки.
Иногда для тонирования используют фирменный цвет или основной цвет сайта.
Настройки фильтров в Контенте блока
Пример обложки нашего справочного центра — фильтр постепенно переходит в сплошной оранжевый цвет
Переход в цвет следующего за обложкой блока
Иногда бывает нужно, чтобы обложка плавно переходила в следующий блок. Для этого нужно цвету фильтра в конце поставить 100% непрозрачности тона. А сам цвет сделать таким же, как и в следующем за обложкой блоке.
Также можно увеличить высоту обложки в два раза и добиться сочетанием двух этих настроек, эффекта представленного ниже —
Градиент и заливка цветом
В настройках тонирования существуют параметры прозрачности и цвета. Проставьте в 100% в значении прозрачность и выберите цвет — это будет цвет заливки вашей обложки.
Если выбрать разные цвета, то на обложке будет плавный переход из одного цвета в другой.
Видео в обложке
Вместо статичного фонового изображения обложки можно поставить видеоролик. Два  способа это сделать.
Ссылка на ролик YouTube
Загружаете или находите ролик на YouTube. Заходите во вкладку Контент и вставляете в нужное поле ссылку на ваш ролик. Получается обложка с видео.
Our Company
Experts in the art
Art Basel stages art shows for high quality modern and contemporary art and is sited annually in Basel, Miami Beach and Hong Kong
Ссылка на ролики в форматах webm и mpeg4
С помощью онлайн-конвертеров вы можете создать видео в формате webm и mpeg4 и разместить его либо у себя на хостинге, либо на хостинге конвертера.

Заходите во Контент обложки и вставляете в нужные поля ссылку на ваш ролик в обоих форматах.
Почему в обоих форматах?
Дело в том, что разные браузеры поддерживают разные форматы и универсального не существует. Поэтому, когда пользователь будет заходить на сайт, ему будет показываться видео в подходящем для его браузера формате. Иначе обложка будет пустой.
Важный момент: Cейчас загрузить свой видеофайл на Тильду не получится, но можно использовать сторонние сервисы, которые отдают прямую ссылку на файл.
Некоторые из популярных облачных сервисов тоже отдают прямую ссылку на файл, например, для получения прямой ссылки на файл на Dropbox нужно заменить в ссылке dropbox.com на dl.dropboxusercontent.com. Также вы можете загрузить файл на свой хостинг, например, на Selectel c помощью инструкции http://help-ru.tilda.ws/file-uploading#selectel.
Обложка в мобильной версии
На разных разрешениях экрана обложка будет отображаться по-разному. И если на самых популярных разрешениях внешний вид будет меняться не критично, то на мобильных устройствах обложка может выглядеть совсем не так, как вы ожидаете. Посмотрите подробную инструкцию, как создать мобильную версию обложки (и любого другого блока).
Видео в обложке не работает в мобильной версии

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

Вы можете заранее посмотреть, как будет выглядеть форма, зайдя в Библиотеку блоков → Обложка и выбрав наиболее подходящий вам вариант.
Формы в обложках ведут себя и настраиваются так же, как и обычные формы. Чтобы настроить форму, прочитайте нашу статью о настройке форм приема данных.
Добавление таймера обратного отсчета
В обложках CR34 и CR35 есть таймер обратного отсчета до определенного времени в будущем. Это удобно, если вы делаете страницу акции или события.

В Контенте этих блоков вы можете установить дату, время и часовой пояс момента, до которого будет идти отсчет.
Если дата настроена верно, то в обложке появится таймер.
Конвертация обложки в Zero Block
Блоки с обложками — это продуманные примеры хорошего дизайна, которые автоматически адаптируются под все устройства. Но иногда нужно добавить элемент или сделать свою собственную обложку. Это можно сделать с помощью редактора Zero Block.
Многие блоки с обложками можно конвертировать в Zero Block для последующей доработки. Для этого нужно зайти в настройки блока, прокрутить вниз и нажать на кнопку «Конвертировать в Zero Block».
После этого обложка конвертируется в Zero Block, сохранив правильную адаптацию. Если вы уже внесли изменения, то они не сохранятся, поэтому будьте внимательны при конвертации.
Пример: как обрезать изображение для обложки
Вертикальное изображение
Квадратное изображение
Узкое горизонтальное изображение
Горизонтальное изображение с соотношением сторон 16:9
Made on
Tilda