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

Обложки

Актуально для версии магазина: 6.5-7.0

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

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

Переходим в конструктор воронок и добавляем новый блок, нас интересует блок “Обложки”. Здесь представлены варианты, выбираем один из них (рис.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.

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

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

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

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

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

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

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