Якорные ссылки

В данном видео-уроке мы научимся создавать якорные ссылки.

Тема урока: «Якорные ссылки».

Добрый день. Тема урока: «Якорные ссылки».

Что такое якорные ссылки?

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

Настройка якорной ссылки

Якорные ссылки устанавливаются для кнопок меню. Для того чтобы настроить якорную ссылку, нужно перейти в консоль, затем во вкладке «Внешний вид», выбрать вкладку «Меню». Для каждой кнопки меню есть возможность установить свою якорную ссылку, это облегчает использование сайта и повышает скорость поиска информации пользователями. Для того чтобы задать якорную ссылку для кнопки меню, необходимо выбрать нужную кнопку меню и после основного адреса ссылки в поле «URL» вписать «/yak1», как это показано на рисунке 1.

Далее, требуется обновить страницу (как? Они знают?) и нажать на кнопку «Перейти в Elementor» в консоли администратора. Затем необходимо пролистать страницу сайта до того места, где требуется вставить якорную ссылку. После этого нужно добавить элемент «Якорь меню» из левой панели Elementor в то место, до которого будет пролистываться страница при нажатии на соответствующую кнопку меню. После добавления элемента, требуется задать для него значение в поле «ID якоря меню». Туда нужно вписать то же самое значение, а именно «yak1», как это было сделано при настройке кнопки меню в консоли, рисунок 2.

Теперь, при нажатии на кнопку в меню «О компании», сайт автоматически будет пролистываться до заголовка «О нас». Так можно делать с любой кнопкой меню.

Что делать, если якорная ссылка не работает?

Если якорная ссылка не работает и при нажатии на нужную кнопку сайт не листается, а выдает ошибку, нужно сделать следующее:

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

Что делать, если якорная ссылка работает некорректно?

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

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

Спасибо за внимание. В следующем уроке будет разобрана тема: «Статистика посещения сайта».