Что такое якорное меню
Перейти к содержимому

Что такое якорное меню

  • автор:

Добавление якорного меню

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

Такое решение отлично подойдет для создания удобной навигации на длинных лендингах или страницах с большим количеством контента.

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

Добавление якорного меню

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

Нажмите на Добавить новый пункт во вкладке Пункты меню и введите новое название пункта:

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

Выберите нужное якорное название из списка блоков на этой странице:

Примечание: якорное имя блока можно найти и изменить во вкладке Информация в его настройках:

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

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

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

Обновлено на: 19/02/2021

Была ли эта статья полезна?

Что такое якорное меню

Зарегистрирован:
2006-11-08
Сообщений: 40

Здравствуйте, необходимо в компоненте сделать небольшое меню.
Компонент состоит из объектов, на которых стоят якоря, а вначале страницы небольшое якорное меню, если можно так сказать, на эти объекты.
В системных настройках компонента пишу следующее:

Соответственно, Anchor — имя якоря объекта, Topic — заголовок объекта (из заголовков будет состоять меню).

Вывод в компоненте:

Не работает((( Так понимаю дело в синтаксисе (испробовала кучу вариантов), а вообще я верно действую? Могу я в навигации убирать %URL и %Name, и ставить другие значения?

28.01.2015, 14:34

Зарегистрирован:
2006-11-08
Сообщений: 40

Техподдержка ответила, что

Цитата:

Шаблон навигации — строка, там нельзя использовать скобки PHP и код в обычном виде, правильнее всего использовать макросы %URL и %Name.

Может кто знает как это реализовать по другому?

29.01.2015, 00:27

Зарегистрирован:
2011-11-20
Сообщений: 478

29.01.2015, 08:35

Зарегистрирован:
2006-11-08
Сообщений: 40

Игорь, а можете подсказать как это вообще выглядеть должно? я совсем начинающий товарищ

29.01.2015, 15:15

Зарегистрирован:
2011-04-05
Сообщений: 1037

Синтаксис такой.
Вот только навигация не знает ваших объектов и не выставит их хоть и напишет значение первого.
Навигация не ваш случай. Вам придется использовать выборку значений из базы данных
Пример
Вариант 1
Создайте шаблон компонент предположим его число 90
Далее в макете или где должны выводится ссылки вставляем либо s_list_class либо ее наследника 5 версии функцию nc_objects_list()

В таком виде будет работать если компонент с объектами стоит последним на странице при условии если их несколько (редкий случай) иначе укажите $sub,$cc
$cc — номер текушего инфоблока.

Вариант 2
Расположите этот код в месте где нужно вывести


    foreach($items as $item)< ?>
  • ‘>
    ?>
    ?>

В таком виде будет работать если компонент с объектами стоит последним на странице при условии если их несколько (редкий случай) иначе укажите $sub,$cc
$cc — номер текушего инфоблока.

Модуль «Почтовые уведомления» – настройка email уведомлений на вашем сайте без программирования. Бесплатно. http://netcat.ru/products/CatStore/solution_242.html

30.01.2015, 07:21

Зарегистрирован:
2006-11-08
Сообщений: 40

Александр, большое спасибо за такой подробный ответ
буду пробовать, а изучить мне еще очень много надо)))

30.01.2015, 09:18

Зарегистрирован:
2006-11-08
Сообщений: 40

Ура. Получилось. Только у меня список идет по порядку не правильно, с конца(((

Правда по ходу еще заметила, что хорошо бы было это меню делить на два столбца, в css все прописала, чтоб красиво выглядело. В html счас это выглядит так:

То есть мне нужно, чтобы количество «Anchor» в компоненте подсчитывалось, и делилось пополам с вариацией, грубо говоря, 5*5, 3*3, а если не делится на равное количество, то 5*4, 4*3.
После деления попалам записывалось бы так же:

И как это сделать?

30.01.2015, 15:30

Зарегистрирован:
2011-04-05
Сообщений: 1037

Строка 2 предыдущего кода

$items = $nc_core->db->get_results("SELECT * FROM Message2000 WHERE Checked=1 AND Sub_Class_ID=".$cc." ORDER BY Priority DESC", ARRAY_A );

К циклу добавьте счетчик (число которое увеличивается с каждым проходом цикла)

Модуль «Почтовые уведомления» – настройка email уведомлений на вашем сайте без программирования. Бесплатно. http://netcat.ru/products/CatStore/solution_242.html

02.02.2015, 07:26

Зарегистрирован:
2006-11-08
Сообщений: 40

Спасибо огромное, вы меня очень выручили, все получилось.

Как сделать якорную ссылку?

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

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

Виджеты, для которых можно установить якорь

  • Заголовок
  • Текст
  • Картинка
  • Галерея
  • Слайдер
  • Кнопка
  • Иконка
  • Разделитель
  • Пробел
  • Карточка
  • Прайс
  • Таблица
  • PRO таблица
  • Отзывы
  • Этапы
  • Таймлайн
  • Цитата
  • Таймер
  • HTML-код
  • Товар магазина
  • Калькулятор услуг
  • Файл
  • Видео
  • SoundCloud
  • Контакты
  • Обратная связь
  • Карта
  • Соцсети
  • Facebook
  • Twitter
  • Instagram
  • Pinterest
  • VK
  • OK
  • Disqus

Чтобы установить якорь для блока, кликните на «Действия» (три точки) в панели настроек и выберите «Настройка якорной ссылки».

Для виджетов за создание якорной ссылки отвечает соответствующая иконка в панели инструментов.

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

Совет

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

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

В разделе «На страницу» у названия страницы нажмите на символ «+» (плюс), чтобы увидеть список якорей, и выберите нужный. Теперь кнопка будет прокручивать страницу к якорю.

Виджет «Заголовок» появляется в списке якорей автоматически.

Для некоторых виджетов выбрать якорь вы можете во вкладке «Якорь» при назначении ссылки.

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

Попробуйте прямо сейчас!

Якорный текст

Якорный текст, с точки зрения SEO

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

Рассказываем, что это такое и как влияет на SEO.

Что такое якорь

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

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

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

Чтобы пользователь не ушел, а мог, например, просмотреть ассортимент, стоит создать закладку, или якорь (назовем его range). В качестве ссылки укажем название раздела.

В html это можно сделать так:

  • [p][a name=»range»][/a][/p]
  • [p]. [/p]
  • [p][a href=»#range»]Ассортимент[/a][/p]

Настройку аналогичных ссылок можно провести и для других разделов — скидок, оплаты и доставки.

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

Зачем нужны якоря

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

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

Якорный текст - что это, стоит ли его использовать

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

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

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

Как якоря влияют на SEO

Многие веб-мастера относятся к якорному тексту с недоверием. Считается, что поисковики могут неправильно распознать этот элемент, что чревато санкциями. Разберемся, так ли это.

Потенциальные риски

Поисковые системы не любят циклические ссылки. Так называют ссылки, которые ведут на ту же страницу, на которой размещены. Например, если на странице http://site.ru находится ссылка, которая ведет на http://site.ru, то она будет считаться циклической.

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

При чем здесь якорные ссылки? Дело в том, что они похожи на циклические.

Например, вы создаете оглавление при помощи якорных ссылок. В html это будет выглядеть так:

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

На самом деле нет. Поисковые системы — и Яндекс, и Google — давно научились распознавать якоря и понимать их назначение. Ни зацикливания, ни санкций опасаться не стоит.

Якорный текст

Польза для поискового продвижения

Якорный текст не влияет на SEO напрямую, но косвенно — да. Он помогает пользователям, упрощая навигацию по странице, что положительно сказывается на поведенческих факторах. ПФ, в свою очередь — один из главных факторов ранжирования в поисковых системах.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *