Как использовать элемент Section на сайте Weebly? –

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

• Использование элемента section в адаптивной теме.
• Использование элемента section в неадаптивной или пользовательской теме.

Узнайте больше об использовании адаптивных и неадаптивных тем в Weebly.

1. Использование элемента Section в адаптивных темах

По умолчанию элемент section доступен на вкладке «Build» редактора сайта Weebly и сгруппирован в категории «Structure» вместе с элементами Divider и Spacer. Вы можете увидеть элемент только в адаптивных темах. Если вы изменили тему или приобрели тему у третьих лиц, то элемент будет недоступен.

Вставить элемент раздела

• Перетащите элемент «Раздел» или нажмите «Добавить раздел» в области содержимого.
• Вам будет предложено выбрать макет, который будет добавлен в раздел. Выберите один из доступных вариантов: Галерея, Команда, Избранное, Меню или Контакты.

Выбор макета раздела

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

Предварительный просмотр и сохранение секционной компоновки

Настройка макета раздела

Щелкните по вставленному макету, и вам будут доступны следующие параметры настройки.

Настройка параметров для элементов раздела Weebly Drag & Drop

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

Изменить размер области раздела

Перетащите нижнюю границу раздела, чтобы изменить высоту области раздела.

Удалить

Нажмите кнопку «Удалить», чтобы удалить всю область раздела, включая все внутренние элементы.

Двигаться

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

Перемещение и копирование элемента раздела Weebly

Редактирование раздела Фон

Как и гибкий заголовок, фон области раздела может быть изображением, цветом, градиентом или видео. Вы можете редактировать фон до или после добавления макета.

Параметры фона раздела

Пользователи тарифных планов Free и Personal могут устанавливать изображение, градиент и цвет для фона. Пользователи тарифных планов Professional, Performance и Premium могут устанавливать видеофоны в дополнение к другим опциям.

Тарифный план для фоновых видео Weebly

Вы можете редактировать фоновое изображение с помощью редактора изображений Weebly по умолчанию, чтобы изменить масштаб, размытие, затемнение и применить фильтры. Также можно добавить эффект параллакса или прокрутки к фону. Видеофон будет иметь возможность установить режим воспроизведения в цикле. Содержимое в области раздела можно выровнять по верху, середине или низу с помощью параметра «Дополнительно».

Выравнивание элемента раздела

2. Использование элемента Section в пользовательских и неадаптивных темах

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

Шаг 1 — Создайте новый сайт для проверки кода элемента раздела

Так как элемент section доступен только в адаптивных темах, сначала создайте новый фиктивный сайт. Отредактируйте исходный HTML, перейдя в «Тема > Изменить HTML / CSS». Вы увидите три типа заголовков — header.html, no-header.html и splash.html (в некоторых темах splash не будет)

Редактирование исходного HTML и CSS в Weebly

Нажмите на no-header.html и проверьте код «content-wrapper». Он должен быть примерно таким:

Код элемента раздела в HTML-макете

Элемент раздела отображается в редакторе с использованием кода {{#sections}}…{{/sections}}.

Шаг 2 — Измените свой работающий сайт с помощью пользовательской темы

Теперь, когда вы знаете, что это простой код {{#sections}}…{{/sections}}, который заполняет элемент section. Следующий шаг — открыть ваш работающий сайт с пользовательской или неадаптивной темой и добавить код во все типы заголовков. Отредактируйте ваш работающий сайт и перейдите в редактор кода в разделе «Тема > Изменить HTML / CSS». Найдите тег div для раздела {content} основной оболочки и добавьте код элемента section, как показано ниже:

Добавить код элемента раздела в пользовательскую тему {{#sections}}

{{/sections}}

Обязательно добавьте код выше и ниже основной области контента, а не в область баннера. Сохраните изменения и проверьте редактор сайта. Если вы впервые изменяете исходный код, вам нужно указать имя и сохранить как пользовательскую тему. Теперь вы должны увидеть элемент «Раздел», который можно использовать для создания разделов полной ширины в вашей пользовательской теме.

Элемент раздела отображается в редакторе сайта

Добавьте код разделов во все типы заголовков, чтобы включить элемент Section полной ширины для всех макетов страниц. Если вы не добавите код ни в один из типов заголовков и выберете этот тип заголовка для своей страницы, при удалении элемента section будет показана следующая ошибка.

Раздел Элемент Неподдерживаемая Ошибка (тегиПеревести) Фон