Длинные посты легче читать, когда посетители могут увидеть всю форму спереди и прыгнуть прямо к той части, которую они хотят. The Виджет "Содержимое" в Мастер-аддоны для Elementor читает заголовки на вашей странице и превращает их в связанный индекс. Нет ручного списка для сборки, и нет, чтобы сохранить его в синхронизации позже.
Вы опускаете виджет, выбираете, какие уровни заголовка включить, и он заполняет себя Оттуда вы можете сделать его складным, добавить кнопку прокрутки вверх, и стиль все это. это руководство охватывает каждый параметр в виджете.
Что делает виджет "Содержание" #
Виджет сканирует страницу на наличие заголовков и строит из них вложенный список ссылок Каждый элемент указывает на свой заголовок, поэтому щелчок перескакивает вниз к этому разделу Добавьте заголовок позже, и список подхватит его самостоятельно, что является частью, которая экономит больше всего времени.
Две вкладки запускают его. Содержание содержит заголовок, уровни заголовка, складную опцию и поведение прокрутки. Стиль управляет заполнением контейнера, заголовком, разделителем и элементами списка. Рядом с ними расположены обычные параметры Elementor Advanced.
Прежде чем начать #
- вордпресс с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Страница или сообщение с реальными заголовками (H2, H3 и т. д.) для чтения виджетом.
Как добавить виджет "Содержание" #
В редакторе Elementor откройте Элементы панель и поиск Оглавление, или прокрутить в раздел Master Addons (виджеты несут фиолетовый значок MA).Перетащите его в верхнюю часть вашего контента, или в боковую панель, и он сразу заполняется из заголовков страницы.
Установите заголовок и какие заголовки включить #
Открыть Содержание вкладка и Оглавление раздел. Здесь вы называете поле, выбираете стиль списка и выбираете, какие уровни заголовков отображаются.
- Введите текст заголовка: заголовок над списком, например "Оглавление" или TOC.
- Стиль списка: По умолчанию (без маркера), пули или числа.
- Включить/Исключить: на вкладке "Включить" хранятся теги заголовков, а на вкладке "Исключить" объясняется, как оставить отдельные заголовки.
- Заголовок Теги: выберите уровни, которые нужно ввести, например H2 и H3. Добавляйте или удаляйте теги, чтобы контролировать глубину списка.
Хотите пропустить один заголовок? Добавить jltma-toc-hide-heading класс на вкладку "Дополнительно" этого заголовка в поле "Классы CSS", и виджет его не включает. Удобно, когда один заголовок раздела просто загромождает список.
Сделайте список разборным #
выше Складной параметры позволяют посетителям сложить список до одного заголовка. Это помогает на мобильном телефоне или на боковой панели, где места мало.
- Сделать контент сворачиваемым: добавьте переключатель, чтобы список открывался и закрывался.
- Держите свернутым изначально: загрузите его закрытым, чтобы он показывал заголовок только до щелчка.
- Размер и цвет значка: взгляд переключателя коллапса.
Настройте поведение прокрутки #
Открыть Прокрутить раздел о том, как движется страница, когда кто-то использует индекс Вы можете добавить кнопку "Наверх" и включить плавную прокрутку.
- Прокрутить вверх: добавьте фиксированную стрелку в правом нижнем углу. Она появляется, как только посетитель прокручивает вниз и переносит их обратно в оглавление.
- Прокрутите до верхнего смещения: положение прокрутки для отправки читателей вместо оглавления.
- Плавная прокрутка, задержка прокрутки анимации и плавное смещение прокрутки (px): каждый прыжок прокручивается плавно и останавливается примерно на 30 px над заголовком. если значения задержки или смещения не влияют на ваш сайт, используйте фиксированный наконечник заголовка ниже.
Стиль контейнера и название #
Открыть Стиль вкладка. Контейнер секция устанавливает набивку вокруг всей коробки и Название раздел стилизует заголовок над списком.
- Контейнер: заполнение для поля Добавьте фон, границу или радиус из вкладки "Дополнительно".
- Название: выравнивание, цвет, типографика и расстояние между днами заголовка.
- Сепаратор: стиль, цвет, толщина, и расстояние до дна для линии под заголовком, прокрутка до верхней стрелки стилизована в разделе Прокрутка.
Стиль элементов списка #
выше Содержание раздел на вкладке Стиль обрабатывает сами ссылки Вы получаете типографику, интервал между элементами и отдельные цвета для состояний Нормальный, Ховер и Активный.
- Типографика и интервал: шрифт и зазор между рядами.
- Нормальный /Наведите курсор/Активный: цвет для каждого состояния. Active применяется к элементу, на который читатель щелкнул в последний раз.
- Цвет текста: цвет ссылки для выбранного вами состояния.
Обычные случаи использования #
- Длинные учебные пособия и руководства даем читателям карту и быстрые прыжки.
- Страницы документации где каждый заголовок - это раздел, который ищут люди.
- Боковые панели со складным индексом рядом со статьей.
- Раундапы и списки таким образом, посетители могут перейти к нужной им записи.
- Страницы по правовым вопросам и политике для этого необходимы четкие привязки к каждому пункту.
Советы по работе с виджетом "Содержание" #
- Используйте чистую структуру заголовка. Список хорош только так же, как ваши H2 и H3, поэтому пишите заголовки, которые хорошо читаются сами по себе.
- Включите всего два уровня. Н2 и Н3 обычно делают аккуратный индекс Тянуть в Н4 и дальше и он начинает шуметь.
- Сверните его на мобильном телефоне. Keep Collapsed Первоначально экономит много прокрутки на маленьких экранах.
- Очистить фиксированный заголовок. Если фиксированный заголовок закрывает заголовки после перехода, добавьте
.elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; }в Внешний вид, Настроить, Дополнительный CSS. каждый заголовок приземляется на 90 px ниже и выглядит одинаково. - Сделайте его липким. Поместите виджет в столбец боковой панели и добавьте
selector { position: sticky; top: 32px; }в расширенном, пользовательском CSS. The Оглавление страница продукта проходит через него. - Пропускать бродячие заголовки. Используйте класс скрытых заголовков jltma-toc для заголовков, которые вам не нужны в списке, например CTA или заголовок боковой панели.
Часто задаваемые вопросы #
Что такое виджет "Содержание" в Master Addons?
Это виджет Элементор, включенный в Главные Аддоны, который считывает заголовки на вашей странице и автоматически строит связанный индекс из них. каждый элемент переходит в свой раздел нажатием, и вы управляете, какие уровни заголовка появляются, свертывается ли список и как он выглядит, все из панели Элементор.
Откуда виджет знает, какие заголовки перечислять?
Вы выбираете теги заголовка на вкладке Содержимое, как H2 и H3, и виджет перечисляет каждый совпадающий заголовок на странице. чтобы пропустить целый уровень, оставьте этот тег. чтобы опустить один конкретный заголовок, добавьте к нему класс jltma-toc-hide-heading на вкладке Дополнительно.
Могу ли я сделать оглавление складным?
Да. складные параметры добавляют тумблер, чтобы посетители могли сложить список только в заголовок. Включите "Сохранить свернутым изначально", чтобы загрузить его закрытым, что хорошо работает на боковой панели или на мобильном телефоне, где вы хотите сэкономить вертикальное пространство.
Обновляется ли он, когда я добавляю новые заголовки?
Да. список формируется из заголовков страницы, поэтому, когда вы добавляете, удаляете или переименовываете заголовок, оглавление отражает изменение. нет ручного списка для синхронизации, что является основной причиной использования виджета поверх ручного.
Могу ли я добавить плавный свиток и кнопку "Назад-наверх"?
Да. щелчок по элементу плавно прокручивается до его сечения и останавливается примерно на 30 пикселей над заголовком. Прокрутка вверх добавляет стрелку в правом нижнем углу со своим смещением, размером и цветом.
Завершая #
Виджет "Содержимое" превращает ваши заголовки в связанный индекс без какого-либо ручного обслуживания: опустите его, выберите уровни заголовка, сделайте его складным, установите поведение прокрутки, а затем создайте стиль для соответствия.Обзор и сравнение с Elementor Pro см Виджет "Содержание Элементора" страница. связанные виджеты см Хронология и Меню навигации, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
