Как вам помочь ?

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

Статья актуальна для версии магазина: 10.0 | 8.5-8.0 | 7.0-6.5

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

 

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

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

Обложки в воронках - 5425
Рисунок 1.

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

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

Обложки в воронках - 2272
Рисунок 2.

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

Обложки в воронках - 2932
Рисунок 3.

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

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

Обложки в воронках - 9481
Рисунок 4.

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

Обложки в воронках - 8104
Рисунок 5.

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

Обложки в воронках - 2944
Рисунок 6.

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

Обложки в воронках - 1929
Рисунок 7.

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

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

Обложки в воронках - 5839
Рисунок 8.

Поведение:

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

 

 

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

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

Обложки в воронках - 1948
Рисунок 9.

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

Рекомендуем

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

Обложки в воронках - 2107
Рисунок 10.

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

Обложки в воронках - 3402
Рисунок 11.

Обложки в воронках - 8487
Рисунок 12.

 

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

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

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

Обложки в воронках - 9578
Рисунок 13.

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

Обложки в воронках - 5883
Рисунок 14.

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

Другие статьи по теме

Статья оказалась полезной?
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить свою тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: воронка, обложка, фоновое изображение, картинка

Мы используем cookies. Подробнее...