Как добавить разделы параллакса на сайт Weebly?

Разделы с параллаксом добавляют красоту страницам и привлекают пользователей, нажимающих на кнопку или ссылки в разделе. Элементы параллакса очень подходят для тем со 100% шириной, и Weebly сделал это возможным с помощью элемента «Раздел». Элемент раздела можно использовать во всех адаптивных темах, предлагаемых Weebly. В этой статье мы обсудим пошаговое руководство о том, как добавить разделы параллакса на сайт Weebly. Последовательно добавляя несколько секций параллакса, вы также можете легко создать макет страницы параллакса полной ширины.

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

Как добавить секции параллакса в Weebly?

Есть два места, где вы можете включить секции параллакса:

  1. Использование макета страницы заголовка в области заголовка
  2. Использование элемента раздела в области содержимого

Раздел параллакса заголовка

Перейдите на вкладку страниц и выберите страницу, на которую вы хотите добавить раздел заголовка параллакса. В разделе «Тип заголовка» выберите вариант «Заголовок» в первом раскрывающемся списке.

Выберите тип заголовка для страницы Weebly

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

Щелкните раздел заголовка, чтобы увидеть два всплывающих окна – «Изменить фон» и «Заменить макет заголовка».

Параметры раздела заголовка в Weebly

Параметры раздела заголовка в Weebly

Нажмите на опцию «Редактировать фон». Вам будет предложено выбрать один из трех вариантов:

  1. Изображение – применимо для всех пользователей
  2. Цвет – применим для всех пользователей
  3. Видео – только для премиум-пользователей
Параметры фона заголовка Weebly

Параметры фона заголовка Weebly

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

Настройка фонового изображения для заголовка Weebly

Настройка фонового изображения для заголовка Weebly

Нажмите на опцию «Эффект прокрутки», и вы увидите три эффекта – нет, параллакс и раскрытие.

Эффекты прокрутки заголовка Weebly

Эффекты прокрутки заголовка Weebly

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

Добавить раздел параллакса в область содержимого

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

Параметры элемента раздела Weebly

Параметры элемента раздела Weebly

Нажмите «Редактировать фон» и выполните аналогичные шаги, описанные в предыдущем разделе для изображения заголовка. Вы можете разместить несколько элементов раздела один под другим, чтобы создать макет с параллаксом на всю страницу с красивым эффектом прокрутки.

Регулировка фона изображения

Фоновое изображение элементов заголовка и раздела можно редактировать с помощью редактора изображений Weebly. Редактор позволяет добавлять эффекты масштабирования, затемнения, размытия и фильтрации для фонового изображения.

Редактор изображений Weebly

Редактор изображений Weebly

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *