Если вы публикуете длинный контент, добавление оглавления помогает как поисковым системам, так и посетителей люди для навигации и понимания вашего контента.

С виджетом Виджет содержания для WordPress, вы можете легко добавить оглавление в свой сайт который автоматически генерирует свой контент на основе иерархии тегов заголовков в вашем контенте.

Например:

Как добавить содержимое таблицы wordpress elementor blogpascher tag

Если вы используете этот виджет с визуальным конструктором тем Elementor Pro, вы можете автоматически добавлять оглавление ко всему своему контенту, даже пальцем не пошевелив. Когда посетитель нажимает на ссылку в оглавлении, она действует как якорь и переводит его в этот раздел страницы.

В этом посте мы покажем вам, как именно настроить виджет. Виджет содержания для WordPress с Elementor Конструктор тем.

Но прежде, давайте узнаем вместе Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге.

Затем вернемся к тому, почему мы здесь.

Как добавить оглавление с помощью Elementor

Прежде всего, следует отметить, что вы также можете использовать этот виджет обычным способом. Однако в этом уроке мы сосредоточимся на автоматическом добавлении оглавления ко всему (или некоторым) вашему контенту с помощью Elementor Конструктор тем и уникальные шаблоны сообщений.

Вот как это сделать.

1. Создайте или измените отдельный шаблон сообщения.

Для начала используйте Elementor Theme Builder, чтобы создать новый уникальный шаблон сообщения или отредактировать любой из существующих уникальных шаблонов сообщений, в которые вы хотите добавить оглавление.

Вы можете применить свой шаблон к любому типу сообщения (блог, страница, пользовательский тип сообщения), но мы сосредоточимся на сообщениях в блогах.

2. Добавьте виджет "Оглавление".

После того, как вы открыли свой уникальный шаблон сообщения, добавьте виджет Содержание где вы хотите разместить оглавление. Он находится в категории "Уникальные" с виджетами для заголовка и содержания сообщения:

Как добавить содержимое таблицы wordpress elementor blogpascher 1

После того, как вы добавили виджет, вы должны автоматически увидеть список всех заголовков, присутствующих в сообщении.

Пришло время настроить параметры этого виджета.

3. Настройте таблицу виджетов.

Обязательно откройте настройки виджета «Таблица содержания». Затем используйте вкладку Содержание для настройки содержимого, отображаемого в вашем оглавлении.

Сначала добавьте заголовок - например, «Содержание». Это статический текст, который отображается над списком якорных ссылок, которые виджет автоматически генерирует.

Затем выберите контент, который нужно включить. Во вкладке Включают, вы можете войти:

  • HTML-тег. Например, вы можете включить а также, но не меньше. Вам необходимо определить теги заголовка в редакторе WordPress.
  • Контейнеры, Вы также можете добавить якорные ссылки на другие контейнеры вне содержимого вашего сообщения. Например, палец на ступне. Это расширенная функция.

Как добавить содержимое таблицы wordpress elementor blogpascher 2

Если вы перейдете на вкладку Исключить, вы можете исключить определенные заголовки из своего сообщения с помощью селектора CSS. Например, если вы хотите исключить один заголовок , вы можете добавить специальный класс CSS " игнорировать К этому заголовку с помощью редактора WordPress, затем исключите его с помощью правила  Якоря по селектору :

Как добавить содержимое таблицы wordpress elementor blogpascher 3

Затем вы можете использовать параметр Просмотр маркера выбирать между числами и маркерами в списке содержания. Если вы выберете " пули ", вы можете выбрать любой значок Font Awesome.

Наконец, вы можете использовать раздел Дополнительные параметры для управления другими параметрами:

Word Wrap - могут ли элементы занимать несколько строк или нет.

Свернуть окно - если посетителей может или не может сокращать оглавление. Если вы включите эту опцию, вы также сможете выбирать собственные значки и устанавливать адаптивное поведение. Например, вы можете автоматически свернуть это оглавление для посетителей на мобильном телефоне.

Иерархический вид - при включении подзаголовки будут располагаться под родительскими заголовками. Если отключено, все отображается в виде единого списка без отступов.

Как добавить содержимое таблицы wordpress elementor blogpascher 4

4. Настройте параметры стиля.

Затем перейдите на вкладку «Стиль», чтобы настроить дизайн оглавления. Вы можете изменить все цвета и типографику, чтобы создать удобный интерфейс и соответствовать остальному дизайну. сайт :

Как добавить содержимое таблицы wordpress elementor blogpascher 5

5. Настройте дополнительные параметры.

Чтобы закончить, перейдите на вкладку продвинутый чтобы настроить еще несколько параметров работы оглавления.

Например, если вы установите Ширина  равно На заказ et Позиция равно Исправлена в разделе Точность позиционирования, вы можете убедиться, что оглавление остается на том же месте, даже когда пользователи начинают прокручивать страницу.

Если вы используете Точность позиционирования чтобы отобразить оглавление поверх другого элемента (например, заголовка), вы также можете увеличить индекс Z, чтобы он отображался вверху:

Как добавить содержимое таблицы wordpress elementor blogpascher 6

И это все ! Вы только что узнали, как автоматически добавлять оглавление к своему контенту с помощью визуального конструктора тем Elementor и виджета «Оглавление».

Для начала купите Факир Pro сегодня и создайте свое оглавление в Конструктор тем Elementor.