Виджет содержимого Elementor, не требуется Pro
Собственный виджет "Таблица содержимого" Elementor поставляется с Elementor Pro. виджет "Таблица содержимого" в "Мастер-аддонах" запускается на Elementor без Pro. Бросьте его на публикацию или страницу, и он прочитает заголовки там, затем строит из них связанный список в порядке заголовков. щелчок по любому элементу прокручивает читателя в этот раздел. Вы выбираете, какие теги заголовков включать и показывает ли список пули или цифры. Читатели могут сложить поле, стрелка назад вверх снова поднимает их, а короткое правило CSS сохраняет поле в поле зрения на боковой панели.
Как добавить оглавление в Elementor
Вам нужны Elementor и Master Addons.Elementor Pro не требуется. странице также нужны теги реальных заголовков (H2, H3 и так далее), потому что список построен из них.
- Установить и активировать Мастер-адреса от WordPress.org, и проверьте, включена ли таблица содержимого на панели управления главными дополнениями.
- Откройте свое сообщение или страницу с помощью Elementor и найдите панель виджетов Оглавление.
- Перетащите его туда, где должен находиться список, обычно над первым разделом или в столбец боковой панели.
- В Содержание, установите заголовок, выберите стиль списка и выберите теги заголовка, которые следует включить.
- Открытый Складной и Прокрутить чтобы добавить переключатель и стрелку сзади вверх.
- Стиль заголовка, разделителя и ссылок на вкладке Стиль, затем предварительный просмотр страницы и щелкните несколько элементов, чтобы проверить прыжки.
Каждая обстановка описана в Настройки виджета "Таблица содержимого" гид.
Краткий обзор содержания
Что делает виджет, читайте из Master Addons 3.2.3.
| Пункт | Виджет "Содержимое" |
|---|---|
| Где он находит заголовки | Сначала внутри .entry-content, затем .page-content, затем область содержимого Elementor. |
| Уровни заголовков | Любой из H1-H6, по умолчанию выбраны H2, H3 и H4 |
| Оставьте один заголовок | Добавьте в этот заголовок заголовок скрытого заголовка класса CSS jltma-toc |
| Стиль списка | По умолчанию (без маркера), Пули или числа |
| Гнездование | Всегда вложен по уровню заголовка |
| Складная коробка | Переключиться рядом с заголовком, с Keep Collapsed Изначально |
| Прокрутка | Плавная прокрутка, останавливающаяся примерно на 30 пикселей над заголовком |
| Назад вверх | Стрелка в правом нижнем углу после 250 пикселей прокрутки |
| Активный предмет | Товар, на который читатель щелкал в последний раз (без шпиона прокрутки) |
| Липкий | Нет переключателя; положение: липкое через пользовательский CSS или эффекты движения Elementor Pro |
| Потребности | Элементор и Мастер-аддоны, без Элементора Про |
Строит список из ваших заголовков
Выберите уровни в Заголовок Теги.H2, H3 и H4 выбираются по умолчанию, и любой из H1 в H6 может быть добавлен. когда страница загружается, виджет находит эти заголовки, дает каждому идентификатор, если он не имеет его, и вложен список по уровню заголовка. Переименовать или добавить заголовок, и список подхватывает его при следующей загрузке, поэтому нет якорных ссылок, чтобы не отставать от руки.
- Стиль списка: По умолчанию (без маркера), Пули или числа.
- Пропустить один заголовок: добавить класс CSS
jltma-toc-hide-headingво вкладке "Дополнительно" этого заголовка. - Показать разделитель: дополнительная линия под заголовком со своим стилем, цветом, толщиной и интервалом.
- Идентификаторы заголовков создаются из текста заголовка, поэтому вы также можете напрямую ссылаться на раздел из другого места.
Складная коробка для боковых и мобильных устройств
Включать Сделать контент складным и рядом с заголовком появляется значок переключения Читатели щелкают его, чтобы открыть или закрыть список, и он скользит, а не прыгает. включитесь Держите свернутым изначально если вы хотите, чтобы поле загружалось, отображающее только его заголовок, что помогает на длинных юридических страницах и в узких столбцах боковой панели.
- Элементы управления размером значка и цветом значка для переключателя.
- Разделитель складывается вместе со списком.
- Виджет не имеет собственного липкого переключателя Чтобы держать поле в поле зрения, пока люди читают, см. ниже "Сделать оглавление липким".
Плавные прыжки и стрелка "Наверх"
Щелчок по элементу плавно прокручивает страницу до заголовка и останавливается примерно на 30 px над ним, поэтому заголовок не располагается заподлицо с верхней частью экрана. если на вашем сайте есть высокий фиксированный заголовок, в часто задаваемых вопросах ниже есть двухстрочное исправление CSS, которое удерживает заголовки вдали от него.
- Прокрутите вверх добавляет небольшую стрелку в правом нижнем углу, которая показывает, как только посетитель прокручивается вниз.
- Стрелка возвращает читателей к оглавлению или к положению, которое вы установили в "Прокрутить до верхнего смещения".
- Контроли размера, цвета значков и цвета фона для стрелки.
- Элемент, на который щелкнул читатель, сохраняет цвет "Активно" из раздела "Стиль контента", чтобы он мог видеть, куда он прыгнул.
Сделайте оглавление липким
Виджет не имеет собственного липкого переключателя. Вы закрепляете его, делая виджет липким внутри столбца боковой панели, и Elementor без Pro может сделать это через главные аддоны Пользовательское расширение CSS.
- Поместите статью и оглавление в одну строку: широкий столбец для содержимого и узкий столбец для виджета Оглавления.Оставьте узкий столбец на его высоте по умолчанию, чтобы он растянулся до высоты строки.
- Выберите виджет "Содержание", откройте Продвинутыйзатем главные аддоны Пользовательские CSS раздел и вставить
selector { position: sticky; top: 32px; } - Повышайте верхнее значение, если ваш сайт имеет фиксированный заголовок, например 110px под заголовком 80px.
- Предварительный просмотр страницы и прокрутка. поле остается в поле зрения до конца строки.
С Elementor Pro вы можете использовать Продвинутый, Эффекты движения, Липкий: Верх вместо этого с включенным Stay In Column.
Две вещи останавливают липкость от работы: родительский контейнер с переполнением, установленный скрытым, и столбец боковой панели, который не выше коробки. На телефонах боковая панель опускается ниже статьи, поэтому включите "Сделать контент складным" там или спрячьте эту копию на мобильном телефоне и поместите свернутый оглавление над статьей.
выше липкая демо-версия боковой панели на полпути вниз по странице. поле остается в верхней части столбца, пока статья прокручивается.
Правило липкости в разделе "Настраиваемые CSS" виджета "Мастер-аддоны".
Оглавление Elementor Pro в сравнении с основными дополнениями. Оглавление
Виджет "Содержание" Elementor нуждается в лицензии Elementor Pro, и она дает больше контроля над тем, какие заголовки появляются и как ведет себя список при прокрутке, Master Addons справляется с повседневной работой без Pro и добавляет стрелку назад к верхней.
| Особенность | Элементор Про | Мастер Аддоны |
|---|---|---|
| Цена | Нужен Элементор Про | Входит в состав Master Addons, без Elementor Pro |
| Которые заголовки | Якоря по тегам (от H1 до H6) плюс селектор контейнеров для ограничения области поиска | Теги заголовков (от H1 до H6) из основного сообщения или содержимого страницы |
| Оставляя заголовки | Якоря по селектору, любой селектор CSS | Класс CSS jltma-toc-скрыть заголовок по каждому заголовку |
| Маркеры | Номера или пули с выбранным вами значком | По умолчанию, пули или числа |
| Гнездование | Иерархический вид переключает и сворачивает субтитры | Всегда вложен по уровню заголовка |
| Свернуть | Минимизируйте поле значками расширения и свертывания, а также точкой останова, при которой оно начинается с минимума | Сделайте контент сворачиваемым и сохраняйте сворачивание изначально |
| Активный предмет | Следует за разделом в представлении, пока читатель прокручивает | Отмечает элемент, на который нажал читатель |
| Настройки прокрутки | Никаких регуляторов скорости и смещения в виджете | Плавная прокрутка, останавливающаяся примерно на 30 пикселей над заголовком |
| Липкий | Нет настройки в виджете; используйте Motion Effects Sticky на виджете или его столбце | Нет настроек в виджете; добавьте позицию: липкая с помощью Custom CSS или используйте Motion Effects Sticky с Pro |
| Стрелка назад к началу | Нет | Прокрутите вверх с помощью элементов управления размером и цветом |
Если вы уже платите за Elementor Pro и хотите, чтобы список отслеживал читателя во время прокрутки, используйте его виджет. если вам нужен оглавление без Elementor Pro, со складным ящиком и стрелкой "наверх", используйте этот.
Хорошо сочетается с: Прогресс-бар чтения для бара, который заполняется так, как читают люди, Продвинутая гармонь и Вкладки складывать длинные участки, Внехолстовый контент (Pro) для выдвижного меню, и Блог в списках публикаций сидят эти длинные статьи.
Плагин оглавления или виджет Elementor?
В WordPress есть два вида оглавления: плагины, которые работают над содержимым публикации, и виджеты, которые вы размещаете в редакторе Elementor.Правильный зависит от того, как построена страница.
| Опция | Где это работает | Лучший для |
|---|---|---|
| Оглавление Master Addons | Где угодно вы размещаете его в Elementor, включая шаблоны | Сайты Elementor, которым нужна коробка в стиле дизайна и стрелки спиной кверху |
| Оглавление Elementor Pro | В любом месте в Elementor, с лицензией Elementor Pro | Сайты, уже находящиеся на Pro, которые хотят, чтобы активный элемент следовал за прокруткой |
| Легкая оглавление, LuckyWP | Публикуйте контент, вставленный автоматически или с помощью короткого кода | Блоги, написанные в редакторе блоков или классическом редакторе |
| Ранг Математика оглавление блок | Блокировать публикации редактора на сайтах, использующих Rank Math | Гутенберг публикует сообщения, которым нужен только простой список |
Наш обзор лучших плагинов с оглавлением для WordPress сравнивает восемь из них с количеством установок, короткими кодами и липкими опциями.
Оглавление Примеры
Четыре живых демо, построенных с помощью виджета.Откройте один, затем импортируйте тот же макет из средства просмотра шаблонов ниже.
- Липкая боковая панель: пронумерованный список в узком столбце, который остается в поле зрения, пока статья прокручивается, H3 вложены под их H2, и один заголовок исключен с заголовком jltma-toc-hide.
- Стили списка: По умолчанию, Пули и Номера рядом, построенные из одних и тех же заголовков.
- Страница "Условия использования": поле в правой боковой панели, в котором перечислены все разделы длинной юридической страницы.
- Страница политики конфиденциальности: поле слева, с щелчком в цвете "Активный".
Три списка стилей в одних и тех же заголовках.
Часто задаваемые вопросы для оглавления
Нужен ли мне Elementor Pro для этого оглавления?
№ Виджет "Содержание" является частью Master Addons и работает на Elementor без Pro. каждая настройка на этой странице включена. собственный виджет "Содержание" Elementor - тот, который нуждается в Elementor Pro.
Как исключить заголовок из оглавления?
Чтобы опустить целый уровень, удалите этот тег из тегов заголовка, например H4. Чтобы скрыть один заголовок, выберите его в Elementor, откройте вкладку "Дополнительно" и добавьте jltma-toc-hide-heading в поле CSS Классы. он остается на странице, но не входит в список.
Изменяется ли активный элемент по мере прокрутки считывателя?
Нет. Активный цвет в Стиль, Контент стилизует элемент читатель щелкает, и он перемещается, когда они щелкают другой элемент. список не отслеживает раздел на экране во время прокрутки. виджет таблицы содержания Elementor Pro делает это.
Могу ли я сделать оглавление липким?
Да, хотя и не от переключателя в виджете. Поместите его в столбец боковой панели, затем добавьте selector { position: sticky; top: 32px; } в Расширенный, Пользовательский CSS. с Элементором Pro вы можете использовать Эффекты движения, Sticky вместо.Повысить верхнее значение, если фиксированный заголовок находится над ним.
Как сохранить оглавление расширенным или свернутым при загрузке страницы?
Включите Сделать контент Складным С Keep Collapsed Первоначально выключен, коробка загружается открытым и читатели могут его сложить. с его включенным, коробка загружается показывая только его название. нет настройки для каждого устройства, поэтому для закрытого ящика на телефонах и открытого на рабочем столе, использовать две копии и скрыть каждую в Advanced, Responsive.
Будет ли стрелка "Прокрутить вверх" появляться на каждой странице?
Только на страницах, которые содержат этот виджет с включенным Прокрутить вверх Стрелка сидит в правом нижнем углу и показывает после того, как посетитель прокрутил около 250px вниз по странице.
Могу ли я использовать собственные значки для маркеров списка?
Не с панели виджета.Стиль списка предлагает по умолчанию, пули и числа, а раздел стиль контента задает шрифт и цвета. Пользовательские значки маркеров потребуют вашего собственного CSS. Виджет Elementor Pro имеет пикер значков для пуль.
Почему мое оглавление пусто или содержит неправильные заголовки?
Виджет ищет заголовки внутри .entry-content сначала, затем .page-content, затем область содержимого Elementor, и только для тегов, выбранных в Теги заголовка. пустое поле показывает “Добавить заголовок, чтобы начать генерировать оглавление” и обычно означает, что заголовки используют тег, который вы не выбрали или не сидели за пределами этой области. если плагин кэширования задерживает JavaScript до первой прокрутки или щелчка, список остается пустым до тех пор, поэтому исключите сценарии главных надстроек из задержки.
Фиксированный заголовок закрывает заголовок после прыжка. Как мне это исправить?
Прыжок останавливается примерно на 30 пикселей выше курса, чего недостаточно под высоким фиксированным заголовком. Добавьте это в Внешний вид, Настройте, Дополнительный CSS: .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } Затем каждый заголовок опускается на 90 пикселей ниже и выглядит так же на странице. Используйте высоту заголовка плюс немного места.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение 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)
Дубликатор сообщений/страниц
