Использование элемента раздела Weebly в адаптивных, пользовательских и старых темах »WebNots
Weebly представила новый элемент «Секция» как часть обновления Weebly 4 четвертого поколения. Это была одна из самых ожидаемых функций для создания разделов полной ширины и параллакса в любом месте страницы. К сожалению, элемент раздела доступен только в новых адаптивных темах, и ни в одной из старых тем этот элемент не будет включен в редакторе. В этой статье давайте обсудим следующее:
- Использование элемента section в адаптивной теме.
- Использование элемента раздела в неадаптивной или настраиваемой теме.
Использование элемента раздела в адаптивной теме
По умолчанию элемент раздела будет доступен на вкладке «Сборка» редактора сайта и сгруппирован в разделе «Структура» вместе с элементами разделителя и разделителя. Вы можете увидеть элемент только в адаптивной теме и теме по умолчанию. Если вы изменили тему или приобрели тему у третьих лиц, элемент будет недоступен.
Перетащите элемент раздела в область содержимого, и вам будет предложено выбрать макет для добавления внутри раздела. Выберите один из доступных вариантов — Галерея, Команда, Интересное, Меню или Контакт и сохраните макет.
Выбор макета раздела
Щелкните раздел, и у вас появятся следующие параметры настройки.
Настройка параметров для элемента раздела Weebly
- Перетаскивайте элементы
Перетащите любые элементы в область раздела, аналогичную области содержимого. По умолчанию ширина элемента раздела будет занимать всю ширину экрана. Но элементы можно настраивать самостоятельно.
- Изменить размер области раздела
Перетащите нижнюю границу раздела, чтобы изменить высоту области раздела.
- Удалить
Нажмите на опцию удаления, чтобы удалить область раздела.
- Шаг
Переместите элемент вверх или вниз на той же странице или на любой другой странице вашего сайта. Точно так же вы можете скопировать раздел на другую страницу вашего сайта.
Перемещение и копирование элемента раздела Weebly
- Изменить фон
Как и гибкий заголовок, фон области раздела может быть изображением, цветом или видео. Пользователи бесплатного и начального тарифных планов могут установить изображение и цвет для фона. Пользователи Pro, Business и Performance Plan могут установить фоновое изображение, цвет и видео.
Фоновое изображение можно редактировать с помощью редактора изображений по умолчанию, а для фона можно установить эффекты параллакса или раскрытия прокрутки.
Содержимое области раздела можно выровнять по верхнему, среднему или нижнему краю с помощью дополнительных параметров.
Расширенная опция для элемента раздела
Использование элемента раздела в настраиваемой и неадаптируемой теме
У нас нет смысла вводить элемент по умолчанию только в адаптивных темах, поскольку это простая модификация типа заголовка (макеты страниц). Поскольку разделы и гибкий заголовок работают аналогично, добавление фрагмента кода из нового типа заголовка к вашим старым существующим типам заголовков перенесет элемент раздела в редактор. Давайте покажем вам, как это сделать шаг за шагом.
Шаг 1. Создайте новый сайт для проверки кода элемента раздела
Поскольку элемент раздела доступен только в адаптивной теме, сначала создайте новый фиктивный сайт. Отредактируйте исходный HTML, перейдя к «Тема> Редактировать HTML / CSS». Вы увидите три типа заголовков — header.html, no-header.html и splash.html.
Щелкните no-header.html и проверьте код «content-wrapper». Это должно быть примерно так:
<div id="content-wrapper">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
Код элемента раздела в макете HTML
Элемент раздела появляется в редакторе с использованием кода «{{#sections}}… {{/ разделы}}».
Шаг 2 — Измените свой действующий сайт с помощью настраиваемой темы
Теперь, когда вы знаете, что это простой код «{{#sections}}… {{/ section}}», который заполняет элемент раздела. Следующим шагом является открытие вашего действующего сайта с настраиваемой темой и добавление кода ко всем типам заголовков. Отредактируйте свой действующий сайт и перейдите в редактор кода в разделе «Тема> Редактировать HTML / CSS». Найдите тег div для раздела {content} основной оболочки и добавьте код раздела, как показано ниже:
Добавить код элемента раздела в настраиваемую тему
{{#sections}}
<div id="main-content" class="container">{content}</div>
{{/sections}}Убедитесь, что вы добавили код выше и ниже области основного содержимого, а не в области баннера. Сохраните изменения и проверьте редактор сайта. Вы должны увидеть элемент «Раздел», который можно использовать для создания разделов полной ширины в вашей пользовательской теме.
Элемент раздела появляется в редакторе сайта
Добавьте код раздела во все типы заголовков, чтобы включить элемент раздела полной ширины. Если вы не добавите код ни в один из типов заголовков и не выберете этот тип заголовка для своей страницы, при удалении элемента раздела отобразится следующая ошибка.
Ошибка неподдерживаемого элемента раздела
