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

В данной статье мы рассмотрим работу с фоновыми изображениями. А именно, затронем три важных аспекта:

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

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

Переходим в конструктор воронок и добавляем новый блок, нас интересует блок “Обложки”. Здесь представлены варианты, выбираем один из них (рис.1)

Рисунок 1.

В зависимости от выбранного формата блок несет определенную функциональность. Здесь может быть размещен блок с текстом, кнопками, видео, форма захвата, обложка каруселью. Добавлены самые различные сценарии. Далее переходим к изменению фона обложки. Заходим в Настройки (рис. 2).

Рисунок 2.

Здесь можно изменить фоновое изображение, для этого нажимаем “Обновить изображение” (рис. 3)

Рисунок 3.

Нам представлены варианты:

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

Рисунок 4.

Обратим внимание на последний пункт, это новый функционал, который позволяет выбрать изображение, доступные в галереи. Данные изображения подгружаются из бесплатного сервиса www.pexels.com который предоставляет бесплатные клипарты, использовать можно без ограничений.

Доступна строка поиска, в которой Вы можете набрать запрос по Вашей тематике и будут выданы соответствующие варианты изображений, из которых Вы можете выбрать фоновое (рис. 5).

Рисунок 5.

Выбираем изображение. Далее мы можем редактировать, как оно будет выводиться, например обрезать, изменить размеры выводимой области. Нажимаем “Применить” (рис. 6).

Рисунок 6.

Итак, на заднем фоне картинка уже поменялась (рис. 7).

Рисунок 7.

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

Рисунок 8.

2) Поведение:

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

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

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

Рисунок 9.

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

Рисунок 10.

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

Рисунок 11.

Рисунок 12.

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

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

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

Рисунок 13.

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

Рисунок 14.