Обложки в воронках

В данной статье мы рассмотрим работу с фоновыми изображениями (обложками) в воронках.

• Добавление фонового изображения
• Переход фона к следующему блоку
• Высота блока с фоном

Добавление фонового изображения

На странице воронки добавьте новый блок с типом "Обложки", кликнув на понравившийся вариант обложки (рис. 1).

Рисунок 1.

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

Перейдите в настройки блока (рис. 2).

Рисунок 2.

Для того, чтобы сменить изображение обложки, нажмите "Обновить изображение" (рис. 3).

Рисунок 3.

Вам будут доступны следующие варианты:

• Загрузить изображение с компьютера
• Загрузить по ссылке
• Загрузить изображение из галереи (рис. 4)

Рисунок 4.

Отдельно отметим загрузку изображения из галереи: данная функция позволяет загружать изображения с ресурса pexels.com. Все изображения из данного источника являются полностью бесплатными для коммерческого использования (рис. 5).

Рисунок 5.

Выберите изображение. Далее вы можете редактировать его - например, обрезать или изменить размеры выводимой области. После этого нажмите "Применить" (рис. 6).

Рисунок 6.

После этого картинка на заднем фоне сразу же поменяется (рис. 7).

Рисунок 7.

Также вам станут доступны некоторые опции:

Затемнение фона - можно регулировать при помощи ползунка и сразу же видеть на фоне, как меняется картинка (рис.8). Обычно затемнение используется для того, чтобы текст был лучше виден на фоне изображения.

Рисунок 8.

Поведение:

• Не выбрано
• Фиксированный фон (при скроле изображение не двигается)
• Параллакс (картинка растягивается по размеру блока)

Переход фона к следующему блоку

Рассмотрим, как реализовать переход фона обложки в другой блок - например, в шапку (пример - на рис. 9).

Рисунок 9.

Для этого в настройках блока шапки включите настройку "Наезжать на соседний блок" (рис. 10).

Рекомендуем

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

Рисунок 10.

Также в настройках обложки можно включить опцию "Переход к следующему блоку" (рис. 11). В этом случае в самом низу блока добавляется стрелка, при нажатии на которую происходит переход к следующему блоку страницы (рис. 12).

Рисунок 11.

Рисунок 12.

Высота блока с фоном

По умолчанию, блок с фоном занимает около 2/3 всего экрана по высоте. Однако, иногда возникает необходимость сделать так, чтобы блок с фоном занимал по высоте весь экран.

Для решения этой задачи у блоков вида "Обложка" есть настройка "Высотка блока 100%" (рис. 13).

Рисунок 13.

С такой настройкой блок с фоном выглядит следующим образом (рис. 14):

Рисунок 14.

Готово. Мы рассмотрели, как произвести настройку обложек в воронках.