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

Обложки

Рассмотрим работу с фоновыми изображениями. А именно:

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

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

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

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

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

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

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

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