Виджет оглавления для Elementor
Замечали ли вы оглавление на длинных страницах или в сообщениях, дающее представление о содержании документа при посещении веб-сайта? Вы задумывались о том, чтобы добавить то же самое на свой сайт?
Используя этот виджет, вы сможете легко и удобно добавлять оглавление на свой сайт.
Вот скриншот того, как это будет выглядеть:
Давайте добавим то же самое на ваш сайт, выполнив быстрые и простые шаги, как и любые другие виджеты Elementor.
Найдите виджет «Оглавление» и перетащите его в редактор Elementor.
Теперь по умолчанию, вы увидите сообщение по умолчанию с просьбой ввести заголовок на странице ниже.
ИЛИ
Вы сможете увидеть заголовки H2 в оглавлении в зависимости от содержимого страницы, на которую вы поместили виджет.
Вы можете отображать заголовки разных уровней на основе тегов заголовков от h1 до h6.
Мы увидим их подробно, но перед этим давайте взглянем на ключевые особенности виджета :
- Полностью настраиваемый заголовок и содержимое таблицы
- Складная кнопка, позволяющая скрыть содержимое таблицы
- Стиль значков списка – Маркер/Цифры/Нет
- Исключить определенный заголовок
- Плавная прокрутка и прокрутка вверх
Полностью настраиваемый заголовок и содержимое таблицы
Каждый раздел виджета стал настраиваемым, чтобы вы могли придать ему ощущение вашего веб-сайта. Это означает, что вы сможете настроить заголовок таблицы и ее содержание. Фон, граница, ширина, выравнивание, складная кнопка, отзывчивость и цвет.
Складная кнопка, позволяющая скрыть содержимое таблицы
Вы когда-нибудь замечали длинное оглавление и хотите сразу перейти к содержимому сообщения или страницы? Эта опция включена по умолчанию и отображает стрелку вниз. Эта складная кнопка расположена в правом верхнем углу оглавления.
Вам просто нужно создать такой же стиль, как и ваши требования. Кроме того, вы можете заменить значок текстом и выделить отдельный текст для «Скрыть и показать».
Стиль значков списка – Маркер/Цифры/Нет
Список содержимого можно стилизовать с использованием некоторых основных стилей значков, таких как «Марки», «Цифры» или «Нет».
Это позволит легко прочитать содержимое с первого взгляда. И хотя у вас есть иерархические заголовки, например, один заголовок с тегом h3, а остальные под ним имеют теги h4, тогда список тегов h4 будет отображаться в иерархической структуре.
Вот пример того же:
Исключить определенные заголовки
В некоторых случаях вам может потребоваться исключить определенный заголовок вашего сообщения или страницы из оглавления. Допустим, вы отображаете похожие публикации на странице «Сообщения» с помощью виджета «Сообщения».
Здесь нам может потребоваться исключить заголовки из виджета «Сообщения». Вам просто нужно добавить следующий класс в виджет «Сообщения» в разделе «Дополнительно» > «Расширенный раздел» > «Классы CSS» — uae-toc-hide-heading.
Вот и все! Теперь заголовки виджетов сообщений не будут отображаться в виджете «Оглавление».
Плавная прокрутка и прокрутка вверх
При нажатии пользователем на содержимое таблицы, вы плавно переходите в соответствующий раздел.
Вы также сможете управлять анимацией задержки при прокрутке к разделу, на который вы нажали.
А «Прокрутка вверх» — это кнопка, которую вы можете включить, и нажатие на нее вернет вас к оглавлению.
С помощью Smooth Scroll и Scroll to Top мы увидели все функции виджета «Оглавление». И ничто не мешает вам добавить хорошо продуманный индекс к длинным страницам или сообщениям вашего сайта!
Комментарии
Найдите свой шаблон для сайта среди 300+ вариантов
Все шаблонные сайты
Один ответ на “Виджет оглавления для Elementor”
Спасибо за просмотр! Оставляйте свои комментарии и вопросы!