Как сделать якорь?

Время выполнения: 5 минут

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

Автоякоря

1

У блоков Кнопка и Картинка в редакторе сайта уже есть вшитая функция якорной ссылки.

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

2

Выберите действие

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

панель редактирования кнопки
панель редактирования кнопки

панель редактирования картинки
панель редактирования картинки

3

Выберите секцию, к которой будет вести кнопка

Нажмите появившуюся на панели редактора кнопку "Выбрать секцию" и в открывшемся меню выбора кликните по той секции сайта, куда нужно прокрутить страницу при клике на вашу кнопку.

Выбрав секцию, кликните по ней (она выделится зеленым) и нажмите Сохранить.

выбор секции, куда будет вести якорь
выбор секции, куда будет вести якорь

Готово! Теперь при клике на добавленную вами таким образом кнопку, посетитель вашего сайта будет попадать на выбранную вами секцию!

Однако, данный способ подходит только для кнопок. Ниже мы описали классический способ создания якорей и создания ссылок на них в редакторе, с помощью HTML кода и простых якорных ссылок.

Создание HTML якоря

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

1

Добавление кода

Перейдите в редактор сайта добавьте на страницу блок "HTML-код" в том месте, куда будет осуществляться переход.

Откройте код на редактирование

Окно редактирования html блока в редакторе

Вставьте следующий код: <a name="xxxx"></a>

Пример html-кода для настройки якорей

где xxxx - это имя якоря английскими буквами. Замените xxxx на свое имя якоря.
Нажмите кнопку "Применить".

2

Создайте ссылку

Вариант 1
В любом текстовом блоке выделите текст, который надо сделать ссылкой. Нажмите в панели редактирования текста кнопку с цепочкой. Введите в поле ссылки текст:
#xxxx
где xxxx - это имя якоря из п.1 (замените xxxx на имя своего якоря!)
После этого клик по ссылке в тексте будет переходить на якорь.

Панель редактирования текстового блока в редакторе

Вариант 2
Создайте блок "Кнопка", нажмите на него для начала редактирования.
Выберите действие "Ссылка" и введите в поле ниже текст:
#xxxx
где xxxx - это имя якоря из п.1 (замените xxxx на имя своего якоря!)
После этого клик по кнопке будет переходить на якорь.

Панель редактирования блока

Вариант 3
Вставьте блок "Картинка" и нажмите на вставленный блок. В нижней панели редактирования в поле "Ссылка" введите текст:
#xxxx
где xxxx - это имя якоря из п.1 (замените xxxx на имя своего якоря!).
После этого клик по картинке будет переходить на якорь.

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

Панель редактирования блока Картинка

3

Плавный переход к якорю

Перейдите в раздел "Общие" настроек сайта и передвиньте переключатель.

Раздел Настроек сайта в сервисе LPmotor

ВНИМАНИЕ! Если настройка "плавные якоря" выключена, то в предпросмотре сайта якоря не будут работать - они будут работать только на опубликованном сайте.

Смотрите также нашу инструкцию по установке счетчика обратного отсчета.

ИНН 590421414992
ОГРН 313590414000013
ИП Старолат А.Ю., 614000 г. Пермь

8 800 250 5337

*Настоящая информация о тарифах не является офертой, публичной офертой и предоставляется исключительно в информационно-ознакомительных целях.
При поддержке Фонда Развития Интернет Инициатив