Как добавить содержимое таблицы в ваши сообщения в блоге в Ementoror

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

Соглашение (TOC) действует как карта, помогая читателям быстро найти то, что им нужно, прыгнуть в раздел и получить лучшее представление о вашей структуре контента. Кроме того, это может повысить ваш SEO, включив богатые фрагменты в результатах поиска.

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

В этом руководстве мы покажем вам, как добавить содержание в вашем блоге в Elementor, не добавляя какого -либо HTML -кода или CSS.

Почему вы должны добавить содержание

Прежде чем прыгнуть в практические сведения, давайте быстро поговорим о том, почему TOC является умным дополнением к вашему блогу.

• Улучшает пользовательский опыт: читатели могут мгновенно перейти к разделу, который их интересует.
• Повышение SEO: Поисковые системы часто отображают ссылки TOC в виде SiteLinks, что может улучшить скорость клики.
• Поощряет более длительное взаимодействие: давая пользователям контроль над навигацией, вы держите их на странице дольше.
• Уменьшает скорость отказов: посетители не чувствуют себя подавленными длинным содержанием, когда они могут легко его просмотреть.

Теперь давайте пойдем в то, как вы можете добавить полностью функциональный и стильный TOC в Elementor.

Как добавить содержимое таблицы в ваши сообщения в блоге в Ementoror

Шаг 1: Установите аддоны PowerPack для элементар

Прежде чем мы продолжим, убедитесь, что вы установили и активировали аддоны PowerPack для Elementor на вашем сайте. Чтобы узнать больше, ознакомьтесь с нашим руководством о том, как установить и активировать PowerPack Addons Pro.

Шаг 2: Включите виджет таблицы содержимого

Как только плагин активен, это хорошая идея, чтобы убедиться, что виджет TOC фактически включен.

Для этого перейдите в Elementor >> PowerPack >> элементы на вашей панели WordPress. Оттуда ищите виджет «таблица содержимого» и убедитесь, что переключатель рядом с ним включен (синий).

Теперь вы готовы использовать его в Elementor.

Шаг 3: Создайте один шаблон одного поста в Ementoror

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

Вот как:

• Перейдите в шаблоны >> добавить новый.
• В раскрывающемся меню выберите отдельный пост.
• Дайте своему шаблону имя, такое как « макет блога » или « Post Template », а затем нажмите « Создать шаблон ».

Elementor теперь спросит, хотите ли вы начать с чистого холста или использовать предварительно построенный макет.

Шаг 4: Используйте предварительно разработанный шаблон Post (необязательно)

Если вы не хотите создавать макет с нуля, Elementor позволяет легко вставить готовый шаблон. Выберите один из предварительно разработанных вариантов; Как правило, он будет включать в себя важные элементы, такие как заголовок Post, изображение, ящик для автора и контент Post.

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

Шаг 5: Добавьте виджет содержимого в свой шаблон

Далее нам нужно добавить виджет содержимого.

На панели Elementor ищите «Соглашение». Когда появляется виджет (ищите значок PP в углу), перетащите его в макет.

Общее место для размещения содержимого (TOC) находится прямо под заголовком Post или изображением, но вы можете разместить его везде, где это имеет смысл для вашего контента.

После того, как вы добавите виджет, он автоматически обнаружит и отобразит все заголовки (например, H2S и H3S) из вашего поста.

Шаг 6: Настройте настройки контента

С виджетом на странице вы увидите список всех заголовков из вашего пост -контента. Теперь давайте персонализируем содержимое.

На вкладке Content вы найдете несколько настроек:

Вы можете изменить название содержания (TOC) на что -то вроде «быстрой навигации» или «на этой странице». Если вы думаете о SEO и доступности, вы также можете настроить HTML -тег заголовка и установить его как H2 или H3 , в зависимости от того, как он подходит для вашей иерархии.

Затем есть настройки, чтобы включить или исключить определенные уровни заголовка . Например, вы должны показывать только H2S и H3S и пропустить H4S и ниже. И вы можете выбрать стиль списка, перейти с номерами для структурированного, пошагового ощущения или пуль для более минимального вида.

Шаг 7: Исследуйте дополнительные функции (необязательно, но полезны)

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

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

Есть также вариант иерархического представления . Это показывает взаимосвязь между H2S, H3S и H4S путем отступления под заголовком под их родительскими заголовками. Если у вас есть подробный пост, создание содержимого (TOC) делает его более организованным и проще сканировать.

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

Если у вас есть липкий заголовок на вашем сайте, рассмотрите возможность настройки Scroll Offse T, чтобы заголовки не были скрыты за ним, когда пользователь нажимает на ссылку TOC.

Шаг 8: Стиль TOC в соответствии с вашим сайтом

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

• Стиль коробки: Вы можете настроить цвет фона TOC, тип границы и радиус границы и даже добавить тень коробки, чтобы он выделялся. Если вы идете на чистую планировку, тонкая граница и легкий фон прекрасно работают.
• Стиль заголовка: Хотите настроить название TOC? Вы можете установить выравнивание текста, изменить заполнение и настраивать цвета, типографику и значки. Вы даже можете добавить линию сепаратора и настроить его ширину и цвет.
• Стилизация списка: Здесь вы настраиваете фактические элементы TOC, которые ссылаются на раздел. Отрегулируйте заполнение, измените типографию текста и заголовок, выберите вдали в подзаголовки и персонализируйте стиль маркера (например, цвет и размер пули).

С этими вариантами стиля вы можете заставить TOC почувствовать себя естественным расширением вашего веб -сайта, а не что -то, что было только что упало.

Шаг 9: Опубликовать и установить условия

Как только все выглядит так, как вы хотите, идите вперед и нажмите Publish. Elementor затем спросит вас, где отобразить этот шаблон.

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

Нажмите Save & Clos E, и все готово!

Ключевые основные моменты виджета содержимого PowerPack

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

Легко настроить заголовок таблицы

Вы можете персонализировать название вашего содержимого, чтобы лучше соответствовать тону или цели вашего поста. Независимо от того, хотите ли вы назвать это «быстрая навигация», «содержимое» или «прыжок в раздел», виджет PowerPack TOC позволяет вам обновить его всего за несколько щелчков.

Включить или исключить заголовки

Одной из выдающихся особенностей этого виджета является гибкость, которую он дает вам, когда дело доходит до управления уровнями заголовка. Вы можете выбрать, какие теги заголовка (H1, H2, H3 и т. Д.) должны появляться в TOC. Еще лучше, используя встроенную функциональность селектора CSS, вы можете специально включить или исключить конкретные разделы или заголовки из вашей таблицы, предоставляя вам полный контроль над тем, что появляется.

Выберите свой предпочтительный стиль списка

Хотите представить свой контент в чистом минималистском списке или пойти на более структурированный, пронумерованный формат? У вас есть варианты. Виджет позволяет вам установить стиль списка на «нет», «пули», или «числа», в зависимости от вашего предпочтения в дизайне.

Длинные заголовки? Без проблем

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

Свернуть TOC на основе типа устройства

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

Липкий содержимое для длинных постов

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

Лучшие практики использования содержимого в сообщениях в блоге

Чтобы максимально использовать свой TOC, помните об этих советах:

• Используйте правильную структуру заголовка: начните с H2S для основных секций, за которыми следует H3S и H4S по мере необходимости. Избегайте уровней прохождения, таких как переход от H2 до H4, так как это может сбить с толку как читателей, так и саму содержания (TOC).
• Держите свои заголовки ясными и лаконичными: помните, что ваши читатели будут использовать их для навигации по вашему сообщению. Держите содержимое (TOC) коротким и складным. Специально для мобильных пользователей, включение коллапса может поддерживать ваш макет в чистоте.
• Предварительный просмотр всех устройств: Убедитесь, что ваша таблица (TOC) появляется правильно и правильно функционирует на настольных компьютерах, планшетах и ​​мобильных телефонах.

Часто задаваемые вопросы

Квадрат Могу ли я скрыть содержание (TOC) на мобильных устройствах?

Ответ Да, вы можете использовать настройку «Couplapsse On», чтобы по умолчанию Mobile или планшет минимизировал TOC.

Квадрат Будет ли это автоматическое обновление, когда я добавляю новые разделы в свой пост?

Ответ Да! Виджет динамически вытаскивает заголовок из вашего контента, поэтому он обновляется автоматически.

Квадрат Могу ли я использовать этот виджет вне сообщений в блоге?

Ответ Абсолютно. Вы можете добавить его на любую страницу Mayout Elementor, пользовательский тип поста или даже описание продукта, если есть теги для забора.

Завершившись!

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

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

Вы можете сделать гораздо больше с аддонами PowerPack для Ementor. Существует более 70 творческих виджетов, которые вы можете использовать для настройки страниц Ementor. Если вы хотите узнать больше о аддонах PowerPack для элементар, проверьте здесь.