Как Divi может помочь вам направлять посетителей по длинным веб-страницам

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

В этой статье мы сначала объясним, почему вам следует рассмотреть возможность использования внутристраничной навигации, а затем покажем вам три способа ее реализации с помощью Divi. Давайте начнем!

Почему вам следует подумать об использовании навигации по странице

Верхние вкладки - это пример внутристраничной навигации. Каждая вкладка представляет собой ссылку на определенный раздел на странице.

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

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

3 способа предложить внутреннюю навигацию с помощью Divi

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

1. Включите точечную навигацию.

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

Вы можете легко включить точечную навигацию в любом сообщении или странице. Во-первых, убедитесь, что вы используете Divi Builder, а если нет, включите его, нажав фиолетовую кнопку « Использовать Divi Builder» .

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

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

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

2. Разделите контент с помощью модуля вкладок

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

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

Чтобы вставить модуль вкладок, в Divi Builder выберите « Вставить столбцы» и выберите, сколько столбцов вы хотите добавить. (Обратите внимание, что вам нужен только один модуль вкладок для создания набора расположенных рядом вкладок.)

Теперь нажмите « Вставить модули» и выберите « Вкладки» .

Вы попадете на экран настроек модуля, где можете нажать « Добавить новую вкладку» .

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

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

3. Вставьте гармошки или переключатели.

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

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

Эти элементы часто используются на страницах часто задаваемых вопросов. Они удобны, потому что люди могут просматривать сразу все вопросы и расширять только те ответы, которые к ним относятся. И аккордеоны, и переключатели можно легко добавить в Divi с помощью модулей Accordion и Toggle соответственно.

Вставка аккордеона в Divi похожа на добавление вкладок, поскольку вы можете добавить несколько элементов в каждый модуль. Следуйте инструкциям по вставке модуля, указанным выше, за исключением того, что на этот раз выберите « Гармошка» вместо вкладок .

На появившемся экране настроек нажмите « Добавить новый элемент» .

На следующем экране введите заголовок и содержимое и нажмите « Сохранить» . Затем вы можете повторить это для каждого элемента в вашем аккордеоне.

Создание набора переключателей в Divi также похоже на добавление вкладок, но основное отличие состоит в том, что вы будете создавать новый модуль Toggle для каждой строки контента. Чтобы вставить первый переключатель, после нажатия кнопки « Вставить модуль (ы)» выберите « Переключить» .

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

Чтобы добавить следующий модуль, нажмите « Вставить модули» под первым, а затем снова выберите «Переключить» и введите соответствующие данные. Продолжайте добавлять модули, пока не будет завершен набор переключателей.

Заключение

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

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

1. Включите точечную навигацию на своих сообщениях и страницах.
2. Разделите контент с помощью модуля вкладок.
3. Вставьте аккордеоны или переключатели с помощью модуля Accordion или модуля Toggle.

У вас есть какие-нибудь советы, как направлять посетителей по длинным веб-страницам? Поделитесь ими с нами в разделе комментариев ниже!

Миниатюра статьи: Graphic farm / shutterstock.com