Бесплатный виджет таблицы контента Elementor
Собственный виджет "Таблица содержимого" Elementor поставляется с Elementor Pro. виджет "Таблица содержимого" в "Мастер-аддонах" бесплатен. Бросьте его на публикацию или страницу, и он прочитает там заголовки, затем построите из них связанный список в порядке заголовков. щелчок по любому элементу прокручивает читателя в этот раздел. Вы выбираете, какие теги заголовков включать и отображает ли список пули или цифры. Вы можете позволить читателям сложить поле и добавить стрелку назад к верхней части, а заголовок, разделитель и ссылки имеют свои собственные элементы управления стилем.
Как добавить оглавление в Elementor
Вам нужен Elementor и бесплатный плагин Master Addons, больше ничего Странице также нужны теги реальных заголовков (H2, H3 и так далее), потому что список построен из них.
- Установить и активировать Мастер-адреса от WordPress.org, и проверьте, включена ли таблица содержимого на панели управления главными дополнениями.
- Откройте свое сообщение или страницу с помощью Elementor и найдите панель виджетов Оглавление.
- Перетащите его туда, где должен находиться список, обычно над первым разделом или в столбец боковой панели.
- В Содержание, установите заголовок, выберите стиль списка и выберите теги заголовка, которые следует включить.
- Открытый Складной и Прокрутить чтобы добавить переключатель, стрелку "назад вверх" и смещение прокрутки вашего заголовка.
- Стиль заголовка, разделителя и ссылок на вкладке Стиль, затем предварительный просмотр страницы и щелкните несколько элементов, чтобы проверить прыжки.
Каждая обстановка описана в Настройки виджета "Таблица содержимого" гид.
Строит список из ваших заголовков
Выберите уровни в Заголовок Теги.H2, H3 и H4 выбираются по умолчанию, и любой из H1 в H6 может быть добавлен. когда страница загружается, виджет находит эти заголовки, дает каждому идентификатор, если он не имеет его, и вложен список по уровню заголовка. Переименовать или добавить заголовок, и список подхватывает его при следующей загрузке, поэтому нет якорных ссылок, чтобы не отставать от руки.
- Стиль списка: По умолчанию (без маркера), Пули или числа.
- Пропустить один заголовок: добавить класс CSS
jltma-toc-hide-headingво вкладке "Дополнительно" этого заголовка. - Показать разделитель: дополнительная линия под заголовком со своим стилем, цветом, толщиной и интервалом.
- Идентификаторы заголовков создаются из текста заголовка, поэтому вы также можете напрямую ссылаться на раздел из другого места.
Складная коробка для боковых и мобильных устройств
Включать Сделать контент складным и рядом с заголовком появляется значок переключения Читатели щелкают его, чтобы открыть или закрыть список, и он скользит, а не прыгает. включитесь Держите свернутым изначально если вы хотите, чтобы поле загружалось, отображающее только его заголовок, что помогает на длинных юридических страницах и в узких столбцах боковой панели.
- Элементы управления размером значка и цветом значка для переключателя.
- Разделитель складывается вместе со списком.
- Виджет не имеет собственной липкой настройки, Чтобы держать поле в поле зрения, пока люди читают, сделать его столбец липким с вашей темой или с эффектами движения Elementor Pro.
Плавные прыжки и стрелка "Наверх"
Нажатие на элемент прокручивает страницу до заголовка. Задержка анимации прокрутки (мс) устанавливает, сколько времени занимает этот свиток, 500 по умолчанию и до 2000 г. С Гладкая прокрутка на тебя тоже получай Смещение плавной прокрутки (px), который останавливается не до заголовка, чтобы фиксированный заголовок не покрывал его. вы можете установить другое смещение для рабочего стола, планшета и мобильного телефона.
- Прокрутите вверх добавляет небольшую стрелку в правом нижнем углу, которая показывает, как только посетитель прокручивается вниз.
- Стрелка возвращает читателей к оглавлению или к положению, которое вы установили в "Прокрутить до верхнего смещения".
- Контроли размера, цвета значков и цвета фона для стрелки.
- Элемент, на который щелкнул читатель, сохраняет цвет "Активно" из раздела "Стиль контента", чтобы он мог видеть, куда он прыгнул.
Оглавление Elementor Pro в сравнении с основными дополнениями. Оглавление
Виджет "Содержание" Elementor нуждается в лицензии Elementor Pro, и она дает больше контроля над тем, какие заголовки появляются и как ведет себя список при прокрутке, Master Addons бесплатно справляется с повседневной работой и добавляет стрелку назад к началу.
| Особенность | Элементор Про | Мастер Аддоны |
|---|---|---|
| Цена | Нужен Элементор Про | Бесплатно с главными дополнениями |
| Которые заголовки | Якоря по тегам (от H1 до H6) плюс селектор контейнеров для ограничения области поиска | Теги заголовков (от H1 до H6) из основного сообщения или содержимого страницы |
| Оставляя заголовки | Якоря по селектору, любой селектор CSS | Класс CSS jltma-toc-скрыть заголовок по каждому заголовку |
| Маркеры | Номера или пули с выбранным вами значком | По умолчанию, пули или числа |
| Гнездование | Иерархический вид переключает и сворачивает субтитры | Всегда вложен по уровню заголовка |
| Свернуть | Минимизируйте поле значками расширения и свертывания, а также точкой останова, при которой оно начинается с минимума | Сделайте контент сворачиваемым и сохраняйте сворачивание изначально |
| Активный предмет | Следует за разделом в представлении, пока читатель прокручивает | Отмечает элемент, на который нажал читатель |
| Настройки прокрутки | Никаких регуляторов скорости и смещения в виджете | Задержка анимации прокрутки и смещение плавной прокрутки для каждого устройства |
| Стрелка назад к началу | Нет | Прокрутите вверх с помощью элементов управления размером и цветом |
Если вы уже платите за Elementor Pro и хотите, чтобы список отслеживал читателя во время прокрутки, используйте его виджет. если вам нужен бесплатный оглавление со складным ящиком и стрелкой "наверх", используйте этот. Связанный: Прогресс-бар чтения, Продвинутая гармонь и Внехолстовый контент (Pro).
Часто задаваемые вопросы для оглавления
Виджет "Содержание" бесплатный?
Да. является частью бесплатного плагина Master Addons на WordPress.org, и каждая настройка, описанная на этой странице, находится в бесплатной версии. собственный виджет "Таблица содержимого" Elementor нуждается в Elementor Pro.
Как исключить заголовок из оглавления?
Чтобы опустить целый уровень, удалите этот тег из тегов заголовка, например H4. Чтобы скрыть один заголовок, выберите его в Elementor, откройте вкладку "Дополнительно" и добавьте jltma-toc-hide-heading в поле CSS Классы. он остается на странице, но не входит в список.
Изменяется ли активный элемент по мере прокрутки считывателя?
Нет. Активный цвет в Стиль, Контент стилизует элемент читатель щелкает, и он перемещается, когда они щелкают другой элемент. список не отслеживает раздел на экране во время прокрутки. виджет таблицы содержания Elementor Pro делает это.
Будет ли стрелка "Прокрутить вверх" появляться на каждой странице?
Только на страницах, которые содержат этот виджет с включенным Прокрутить вверх Стрелка сидит в правом нижнем углу и показывает после того, как посетитель прокрутил около 250px вниз по странице.
Могу ли я использовать собственные значки для маркеров списка?
Не с панели виджета.Стиль списка предлагает по умолчанию, пули и числа, а раздел стиль контента задает шрифт и цвета. Пользовательские значки маркеров потребуют вашего собственного CSS. Виджет Elementor Pro имеет пикер значков для пуль.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
