Длинные посты легче читать, когда посетители могут увидеть всю форму спереди и прыгнуть прямо к той части, которую они хотят. The Оглавление виджет в Мастер-аддоны для Elementor читает заголовки на вашей странице и превращает их в связанный индекс. Нет ручного списка для сборки, и нет, чтобы сохранить его в синхронизации позже.
Вы опускаете виджет, выбираете, какие уровни заголовка включить, и он заполняет себя Оттуда вы можете сделать его складным, добавить кнопку прокрутки вверх, и стиль все это. это руководство охватывает каждый параметр в виджете.
Что делает виджет "Содержание" #
Виджет сканирует страницу на наличие заголовков и строит из них вложенный список ссылок Каждый элемент указывает на свой заголовок, поэтому щелчок перескакивает вниз к этому разделу Добавьте заголовок позже, и список подхватит его самостоятельно, что является частью, которая экономит больше всего времени.
Две вкладки запускают его. Содержание содержит заголовок, уровни заголовка, складную опцию и поведение прокрутки. Стиль управляет контейнером, заголовком, элементами списка и маркером индекса. Рядом с ними расположены обычные параметры Elementor Advanced.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Страница или сообщение с реальными заголовками (H2, H3 и т. д.) для чтения виджетом.
Как добавить виджет "Содержание" #
В редакторе Elementor откройте Элементы панель и поиск Оглавление, или прокрутить в раздел Master Addons (виджеты несут фиолетовый значок MA).Перетащите его в верхнюю часть вашего контента, или в боковую панель, и он сразу заполняется из заголовков страницы.
Установите заголовок и какие заголовки включить #
Открыть Содержание вкладка и Оглавление раздел. Здесь вы называете поле, выбираете стиль списка и выбираете, какие уровни заголовков отображаются.
- Введите текст заголовка: заголовок над списком, например "Оглавление" или TOC.
- Стиль списка: нет, пули или номера для предметов.
- Включить/Исключить: переключайтесь между тегами заголовка списка, чтобы показать, или тегами, которые нужно пропустить.
- Заголовок Теги: выберите уровни, которые нужно ввести, например H2 и H3. Добавляйте или удаляйте теги, чтобы контролировать глубину списка.
Хотите пропустить один заголовок? Добавить ignore-this-tag класс на вкладку "Дополнительно" этого заголовка в поле "Классы CSS", и виджет его не включает. Удобно, когда один заголовок раздела просто загромождает список.
Сделайте список разборным #
The Складной параметры позволяют посетителям сложить список до одного заголовка. Это помогает на мобильном телефоне или на боковой панели, где места мало.
- Сделать контент сворачиваемым: добавьте переключатель, чтобы список открывался и закрывался.
- Держите свернутым изначально: загрузите его закрытым, чтобы он показывал заголовок только до щелчка.
- Размер и цвет значка: взгляд переключателя коллапса.
Настройте поведение прокрутки #
Открыть Прокрутить раздел о том, как движется страница, когда кто-то использует индекс Вы можете добавить кнопку "Наверх" и включить плавную прокрутку.
- Прокрутить вверх: добавьте стрелку внизу страницы, которая снова подпрыгивает вверх.
- Прокрутите до верхнего смещения: насколько далеко вниз по странице появляется стрелка.
- Плавная прокрутка и задержка: скользите к цели, а не прыгайте, и установите скорость.
Стиль контейнера и название #
Открыть Стиль вкладка. Контейнер раздел устанавливает прокладку, фон и границу вокруг всей коробки Название раздел стилизует заголовок над списком.
- Контейнер: набивка, фон, граница и радиус коробки.
- Название: цвет, типографика и интервал между заголовками.
- Индекс и кнопка: маркер перед каждым предметом и кнопка прокрутки вверх.
Стиль элементов списка #
The Содержание раздел на вкладке Стиль обрабатывает сами ссылки Вы получаете типографику, интервал между элементами и отдельные цвета для состояний Нормальный, Ховер и Активный.
- Типографика и интервал: шрифт и зазор между рядами.
- Нормальный /Наведите курсор/Активный: цвет для каждого состояния, поэтому текущий раздел может выделяться.
- Цвет текста: цвет ссылки для выбранного вами состояния.
Обычные случаи использования #
- Длинные учебные пособия и руководства даем читателям карту и быстрые прыжки.
- Страницы документации где каждый заголовок - это раздел, который ищут люди.
- Боковые панели со сворачиваемым индексом, который следует за статьей.
- Раундапы и списки таким образом, посетители могут перейти к нужной им записи.
- Страницы по правовым вопросам и политике для этого необходимы четкие привязки к каждому пункту.
Советы по работе с виджетом "Содержание" #
- Используйте чистую структуру заголовка. Список хорош только так же, как ваши H2 и H3, поэтому пишите заголовки, которые хорошо читаются сами по себе.
- Включите всего два уровня. Н2 и Н3 обычно делают аккуратный индекс Тянуть в Н4 и дальше и он начинает шуметь.
- Сверните его на мобильном телефоне. Keep Collapsed Первоначально экономит много прокрутки на маленьких экранах.
- Включите плавный свиток. Скольжение по разделу читается лучше, чем жесткий прыжок, а смещение удерживает заголовки вдали от липкого заголовка.
- Пропускать бродячие заголовки. Используйте класс "игнорировать этот тег" в заголовках, которые вам не нужны в списке, например CTA или заголовок боковой панели.
Часто задаваемые вопросы #
Что такое виджет "Содержание" в Master Addons?
Это виджет Elementor, который считывает заголовки на вашей странице и автоматически создает из них связанный индекс. каждый элемент переходит в свой раздел при щелчке мыши, и вы управляете, какие уровни заголовков появляются, свертывается ли список и как он выглядит, и все это с панели Elementor.
Откуда виджет знает, какие заголовки перечислять?
Вы выбираете теги заголовка на вкладке Содержимое, как H2 и H3, и виджет перечисляет каждый совпадающий заголовок на странице Переключитесь на вкладку Исключить, чтобы пропустить уровни вместо. чтобы опустить один конкретный заголовок, добавьте к нему класс игнорировать этот тег на вкладке Дополнительно.
Могу ли я сделать оглавление складным?
Да. складные параметры добавляют тумблер, чтобы посетители могли сложить список только в заголовок. Включите "Сохранить свернутым изначально", чтобы загрузить его закрытым, что хорошо работает на боковой панели или на мобильном телефоне, где вы хотите сэкономить вертикальное пространство.
Обновляется ли он, когда я добавляю новые заголовки?
Да. список формируется из заголовков страницы, поэтому, когда вы добавляете, удаляете или переименовываете заголовок, оглавление отражает изменение. нет ручного списка для синхронизации, что является основной причиной использования виджета поверх ручного.
Могу ли я добавить плавный свиток и кнопку "Назад-наверх"?
Да. в разделе "Прокрутка" есть переключатель "Плавная прокрутка", который скользит к целевому разделу с задержкой, которую вы можете установить. Он также имеет опцию "Прокрутка вверх", которая добавляет стрелку назад вверх внизу страницы со своим собственным смещением, размером и цветами.
Завершая #
Виджет "Содержимое" превращает ваши заголовки в связанный индекс без какого-либо ручного обслуживания: опустите его, выберите уровни заголовка, сделайте его складным, установите поведение прокрутки, а затем создайте стиль, соответствующий. Чтобы узнать о связанных виджетах, см Виджет временной шкалы и Виджет меню навигации, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
