25 июля, 2021

Якорные ссылки в Elementor и Elementor Pro. Создаем якорь-меню

Создаем якорь-меню

Давайте разберемся в том, что же такое якорные ссылки в Elementor и Elementor Pro, а по-простому якоря?

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

По своей сути, якорь — это своего рода закладка в на странице, к которой можно сделать переход.

Якорная ссылка представляет из себя обычную ссылку <a></a>с уникальным атрибутом «name». Текст между тегами якорной ссылки необязателен, так как нам необходимо лишь указание определенного места для перехода.

Немного кода для понимания:

<a name="название_якоря"></a>

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

Разберемся, как правильно использовать якорные ссылки в Elementor.

Для наглядности придумаем задачу, которую нужно реализовать средствами Elementor.

Дано: 3 секции с длинным текстом.

yakornye ssylki 001

Задача: сделать переход к каждой секции на странице средствами Elementor.

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

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

Для этих целей воспользуемся общим виджетом Elementor «Якорь меню».

vidzhet yakormenyu elementor

Добавим по виджету перед каждой из секций на нашей странице.

yakornye ssylki 003
Далее заходим в настройки виджета и вводим ID якоря меню в соответствующее поле.

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

Для примера, ID для якорей будут такими:

  • block1 (для первой секции с текстом);
  • block2 (для второй секции с текстом);
  • block3 (для третьей секции с текстом)
yakornye ssylki 004

2) Далее создадим меню навигации, по клику на пункт которого будет осуществляться переход к секциям с текстом по якорям. Как сделать меню Elementor мы рассмотрели в данной статье.

yakornye ssylki 002
Создаем меню в WordPress

3) Теперь нам необходимо добавить пункты меню в созданное меню навигации. Обычно пункты добавляют из списка элементов меню слева, где автоматически появляются все созданные нами страницы, записи и рубрики. По клику на эти пункты у нас открывается новая страница сайта, ссылкой на которую пункт меню и является. Но как быть, если нам нужно осуществить переход от одного блока к другому в пределах одной страницы? Для этого в WordPress есть, так называемые, произвольные ссылки.

4) Выбираем в списке элементов меню раздел «Произвольные ссылки».

yakornye ssylki 005

5) Создаем 3 произвольные ссылки (про числу секций)

В поле «URL» вводим название якоря, только со знаком #

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

Обязательно нажимаем кнопку «Добавить в меню».

6) Сохраняем меню.

7) Далее добавим виджет «Меню навигации» на страницу редактора Elementor. Выбираем в настройках нужное меню, в нашем случае anchor-nav.

8) Наслаждаемся результатом. Теперь, по клику на пункт меню мы будем переходить к соответствующей секции страницы.

Пример Якорного меню Elementor.

Привязываем якорь к кнопке

Для того, чтобы привязать якорную ссылку к кнопке, необходимо в настройках виджета кнопки в поле «Ссылка» после знака решетки # добавить название якоря. Мы подразумеваем, что виджет «Якорное меню» вы уже добавили.

yakornye ssylki 007

Таким простым способ вы добавите переход по якорной ссылке по клику на кнопку.

Вот для примера, кнопка с переходом по якорной ссылке в начало этой статьи.

Код ссылки для кнопки:

<a class="wp-block-button__link" href="#up_post">Переход в начало статьи</a> 

где #up - id якоря, который располагается в начале страницы

Переход по якорю к блоку на другой странице.

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

Давайте добавим такую якорную ссылку.

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

Добавим якорную ссылку.

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

Чтобы перейти к нужному блоку на другой странице, к url-ссылке странице необходимо добавить имя якоря следующего формата:

https://ваш_сайт/ссылка-на-страницу/#имя_якоря

То есть, к ссылке на страницу, к блоку которой нужно осуществить переход, добавляется якорь этого блока, перед именем которого нужно обязательно поставить / и знак решетки #

Перейдите на страницу с примером и кликните по заголовку на ней. Вы перейдете к Секции 2 на другой странице. Если посмотреть в инспекторе кода адрес ссылки, мы увидим следующее:

https://elguide.ru/yakornye-ssylki-primer/#block2

Где,

perehod po yakoryu k bloku na drugoj stranicze

Пример перехода к якорю на другой странице.

Якорь в тексте.

Создаем якорь в текстовом виджете

Напомним еще раз, что якорная ссылка представляет из себя обычную ссылку <a></a>с уникальным атрибутом «name». Следовательно, в нужное нам место в тексте необходимо добавить тег ссылки с атрибутом «name». Как это сделать в текстовом виджете? Ведь если поставить тег <a></a> прямо в текст, то он отобразиться на странице как есть.

Добавим несколько блоков с текстовыми виджетами на страницу. Сгенерировать произвольный текст можно на сайте fishtext.ru. Мы добавим 10 абзацев, чтобы текст был большим.

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

Пример.

якорные ссылки в тексте_001

Теперь посмотрим, как ссылка будет выглядеть при просмотре страницы.

yakornye ssylki v tekste 000

Мы увидим, что теги ссылки появились в тексте как есть, а нам нужно, чтобы они встроились на страницу как html-код.

Для того, чтобы ссылка интегрировалась в html-код страницы, в текстовом редакторе виджета нужно выйти из визуального редактора и зайти на вкладку «Текст»:

yakornye ssylki v tekste 002

Теперь все теги, которые вы будете прописывать, будут встраиваться в код страницы.

Добавим нашу якорную ссылку в текстовый редактор по-новому:

yakornye ssylki v tekste 003

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

Разместим кнопку в начале статьи и пропишем в поле «Ссылка» имя нашего якоря с обязательным знаком «#» перед ним.

yakornye ssylki v tekste 004

Вот и все. По клику по кнопке мы перейдем к пятому абзацу по якорной ссылке.

0

Интересные статьи

Секция. Вкладка Стиль.

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

Читать полностью »
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.