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