Обложка – это первое, что бросается в глаза человеку, когда он открывает страницу. Обложка несет информацию о содержании материала и возбуждает интерес читателя к его прочтению либо сообщает о уникальных достоинствах продукта, ярко объясняет, почему он стоит внимания. Часто обложка включает фоновое изображение – это может быть стильная фотография, атмосферное видео, просто цвет, иллюстрация или градиент, текстура.
Есть несколько вещей, которые необходимо знать, чтобы правильно работать с обложками и фоновыми изображениями и видео.
Видимая область браузера
В интернете, в отличие от печатной продукции, нет ограниченного размера видимой области браузера.
У всех у нас разные экраны и разные пропорции. Даже в разных браузерах видимая область варьируется. Например, панель закладок может занимать часть видимой области. Фоновое изображение для обложки кадрируется таким образом, чтобы всегда полностью отображаться на экране пользователя без полей.
Фоновое изображение загружается в Контенте блока → Фоновое изображение.
Для достижения оптимального визуального эффекта мы предлагаем рекомендации по оптимальным параметрам фонового изображения.
Рекомендуемый размер фонового изображения:
Тип файла: 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.
