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

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

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

Автоякоря

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Смотрите также нашу инструкцию Как вставить счетчик обратного отчета
Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курса
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школы
Шаблон для портфолио
Шаблон лендинг для вебинаров
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Конструктор сайтов на русском
Сделать сайт для интернет магазина
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Создать сайт с нуля конструктор
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
Платформа для создания сайта
Разработка сайтов
Бесплатный сайт
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Помощь
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Инструкции для пользователей
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке