5 интересных вещей, которые вы можете делать в Divi с якорными ссылками

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

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

Пойдем!

Вы узнаете, как:

1. Прокрутите и откройте переключатель с якорной ссылкой в ​​Divi
2. Создайте одностраничное навигационное меню
3. Перейти к разделу страницы с другой страницы
4. Используйте Divi Dot Navigation
5. Добавляйте якорные ссылки в свои заголовки

5 интересных вещей, которые вы можете делать в Divi с якорными ссылками

Подпишитесь на наш канал Youtube

Прокрутите и откройте переключатель с якорной ссылкой в ​​Divi

Переключатели - это один из тех элементов, которые могут улучшить взаимодействие с пользователем. Называйте меня ленивым (я бы использовал слово «эффективный»), но чем легче мне получить информацию, тем лучше. Я большой поклонник переключателей для определенных типов контента.

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

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

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

Для этого сначала откройте настройки кнопки и добавьте следующий URL-адрес ссылки для вашей кнопки:

URL ссылки на кнопку: # toggle3

Я присвоил этой якорной ссылке идентификатор «toggle3», чтобы запомнить, что я хочу установить ссылку на третий переключатель на странице. Это имя идентификатора будет соответствовать идентификатору CSS-переключателя, который мы добавим позже, чтобы кнопка знала, какой переключатель нужно прокручивать.

Затем добавьте уникальный CSS-класс в модуль кнопки:

Класс CSS: открытый переключатель

Затем сохраните свои настройки.

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

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

На вкладке Advance добавьте следующий идентификатор CSS:

Идентификатор CSS: toggle3

Важно, чтобы это точно соответствовало URL-адресу ссылки кнопки, который использовался ранее. Единственное отличие состоит в том, что вы должны опустить символ «#».

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

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Не забудьте заключить код в соответствующий тег скрипта.

Теперь вы можете протестировать свою страницу, чтобы убедиться, что она работает.

Чтобы немного понять, что делает этот код. Давайте рассмотрим подробнее. И снова фрагмент:

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

В коде селектор «a.open-toggle» относится к кнопке с нашим настраиваемым классом. Селектор «# toggle3.et_pb_toggle_2 .et_pb_toggle_title» относится к заголовку переключателя с идентификатором «toggle3» и классом «et_pb_toggle_2».

Класс «et_pb_toggle_2» на самом деле является классом, связанным с третьим переключателем. Это потому, что Divi дает первому переключателю класс «et-pb_toggle_0», второму переключателю «et-pb_toggle_1» и так далее.

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

Это важно знать, чтобы вы могли соответствующим образом обновить свой код. Например, если бы я хотел, чтобы моя кнопка открывала второй переключатель на странице, я бы заменил «# toggle3.et_pb_toggle_2 .et_pb_toggle_title» на «# toggle3.et_pb_toggle_1 .et_pb_toggle_title».

Этот фрагмент кода представляет собой вариант следующей концепции. Я старался сделать это как можно проще.

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

Создайте одностраничное навигационное меню

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

Вот краткий обзор того, как это сделать.

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

Теперь вам нужно добавить идентификаторы CSS в каждый раздел, который вы хотите связать (или прокрутить). Найдите раздел «Мои услуги». Откройте настройки раздела, щелкните вкладку «Дополнительно» и добавьте следующий идентификатор CSS:

CSS ID: услуги

Затем найдите раздел «Избранные работы» и присвойте этому разделу идентификатор CSS следующим образом:

CSS ID: работа

И также добавьте следующий идентификатор CSS в раздел «О нас»:

CSS ID: о нас

Правильно настроив эти три раздела с их уникальными идентификаторами CSS, мы можем создавать ссылки привязки меню.

На панели управления перейдите к « Внешний вид»> «Меню» и создайте новое основное меню . Затем создайте три настраиваемые ссылки со следующим URL-адресом и текстом ссылки:

Пользовательская ссылка 1
URL: #services
Текст ссылки: Услуги

Пользовательская ссылка 2
URL: #work
Текст ссылки: Работа

Пользовательская ссылка 3
URL: #about
Текст ссылки: О компании

Не забудьте выбрать «Установить место отображения» в «Основное меню». Затем сохраните свое меню.

Теперь, когда вы заходите на свою страницу, вы можете попробовать это. Вы можете заметить плавную прокрутку. Это связано с тем, что тема Divi автоматически добавляет плавную прокрутку - эта функция была добавлена ​​в Divi версии 2.4.

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

• Как создать адаптивную фиксированную боковую панель с якорными ссылками
• Как создать полноэкранные разделы со ссылками верхней и нижней прокрутки с помощью Divi
• Как создавать активные ссылки в прокрутке для одностраничных сайтов Divi

Перейти к разделу страницы с другой страницы

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

Все, что вам нужно сделать, это использовать URL-адрес ссылки привязки при создании ссылки на другой странице. Если вы хотите разместить ссылку на раздел услуг с идентификатором «services», это будет выглядеть примерно так: www.yourdomain.com/page/#services .

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

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

Используйте Divi Dot Navigation

Технически это встроенные якорные ссылки. Вам не нужно добавлять собственные идентификаторы разделов CSS. Функция точечной навигации автоматически создает якорные ссылки из ваших разделов. Чтобы включить точечную навигацию для вашей страницы, просто установите для параметра Dot Navigation значение «ON» в настройках страницы Divi в правом верхнем углу экрана при редактировании страницы. Как только вы включите точечную навигацию, Divi автоматически добавит прозрачное меню сбоку на вашей странице. Каждая точка при нажатии прокручивается к разделам на вашей странице.

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

Добавляйте якорные ссылки в свои заголовки

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

Чтобы добавить CSS ID к вашим заголовкам с помощью Divi Builder, откройте модуль, содержащий текст заголовка. Убедитесь, что у вас открыта текстовая вкладка. Найдите тег заголовка (h1, h2, h3 и т. Д.), А затем введите идентификатор в скобках начального тега заголовка. Вот пример заголовка h3 с идентификатором webdesign:

<h3 id="webdesign">Website Design</h3>

Теперь я могу ссылаться на этот заголовок из любого места, если использую правильный URL-адрес ссылки привязки. Что в этом примере должно выглядеть примерно так:

www.yourdomain.com/page/#webdesign

Это также пригодится для страниц или сообщений, которые не используют конструктор Divi. Чтобы добавить якорные ссылки в заголовки этих страниц или сообщений, откройте вкладку «Текст» в текстовом редакторе WordPress. Просто найдите нужный заголовок и добавьте идентификатор внутри тега заголовка, как показано ниже.

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

Довольно крутая штука.

Заключение

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

У вас есть какие-либо советы или вопросы по якорным ссылкам? Сообщите нам о своем опыте в разделе комментариев ниже.