Как сделать якорь на сайте одностраничнике
Здравствуйте друзья! Сегодня мы узнаем, как сделать якорь на сайте одностраничнике в программе Kompozer, что это такое и зачем это делается. С помощью якоря Вы сможете направить посетителя на конкретное слово или картинку в любом месте страницы.
Что представляет собой якорь на сайте?
Еще год назад, я сам не знал, что представляет собой якорь на сайте, но нужда заставила узнать это и даже реализовать это на практике. Как оказалось, это классный инструмент и им нужно пользоваться. Сейчас мной используются якоря на сайтах одностраничниках для обеспечения удобства пользователей. Поскольку одностраничники создаются мной в программе Kompozer, то в данной статье мы рассмотрим, как сделать якорь на сайте одностраничнике. Якоря удобно использовать при создании лэндингов в Инфобизнесе и в вопросах заработка через Интернет.
Итак, представим себе, что у Вас есть длинная продающая страница, Вы хотите с помощью ссылки в статье блога направить читателя на какую-то фразу, которая находится, например, в конце страницы. Зачем посетителю листать всю страницу, до нужной фразы он может и не дойти. Реализовать эту задачу очень просто, делается это с помощью якоря.
В нужном месте продающей страницы Вы устанавливаете якорь, даёте ему имя и создаёте ссылку. При переходе по этой ссылке, Вы точно попадете в то место, где установлен якорь. Если не всё понятно, Вы можете посмотреть видео, которое находится ниже в статье — иногда визуально понятнее.
к оглавлению ↑Как сделать якорь на сайте?
Теперь, когда понятно, что такое якорь и зачем он нужен, рассмотрим, как сделать якорь на сайте одностраничнике в программе Kompozer. Весь процесс создания якоря подробно показан в прилагаемом видео, но в статье кратко опишу данную процедуру.
После того, как мы создали подписную или продающую страницу, её лучше залить на хостинг (на свой блог). Это нужно для того, чтобы уже была готовая на неё ссылка. Далее загружаем эту же страницу с компьютера в программу Композер, выбираем то место, где нужно установить якорь, ставим курсор и нажимаем на изображение якоря в верхней панели программы Kompozer (смотрите скрин).
Слева всплывает небольшое окно, в нём нужно придумать и прописать имя якоря, название должно быть на латинице, можно прописать и цифрами, далее жмём кнопку «Ок». Название якоря нужно сохранить также в отдельном документе для создания ссылки.
Вы можете на одной странице создать якорей сколько угодно. После окончания работы по созданию якорей, страницу обязательно нужно сохранить. Теперь обновлённый файл index html необходимо заменить (обновить) на хостинге, куда мы раньше закачали свой одностраничник.
Теперь приступаем к созданию ссылки. Например, после закачки одностраничника на хостинг (на сайт), мы получили ссылку в виде:
biz-iskun.ru/biblioteka_inforoduktov/sozdanie_site
Название якоря пусть будет primechanie. Теперь нужно к ссылке дописать решетку и название якоря – получится вот такая ссылка:
biz-iskun.ru/biblioteka_inforoduktov/sozdanie_site#primechanie
Нужно проследить, чтобы в ссылке не было пробелов. Наша ссылка готова. Теперь идём в редактор блога, выбираем нужную нам статью или пишем её. Выбираем нужное слово или фразу и делаем обычную ссылку. Открывается окно, куда мы и вставляем полученную ссылку на одностраничник с якорем. Обновляем запись, открываем страницу в браузере, находим созданную нам ссылку и нажимаем на неё. У Вас откроется одностраничник, в том месте, где установлен якорь. Подробнее о том, как сделать якорь на сайте показано в прилагаемом видео:
к оглавлению ↑Заключение
Итак, теперь Вы узнали, как сделать якорь на сайте, зачем это нужно и как это работает. При необходимости Вы сможете сделать это самостоятельно. Единственное, нужно быть внимательным, бывает так, что забыл обновить страницу, и якорь не работает, внимательно нужно делать и ссылку, не допуская пробелов.
Якоря можно использовать и в обычных статьях на блоге, Вы сможете отправлять читателя к нужному разделу статей или к нужному участку текста другой статьи или страницы. Правда делается это немного иначе. Если эта тема будет для Вас интересна, могу подготовить отдельную статью на блоге.
Если Вы еще не знаете, как работать в программе Kompozer, могу посоветовать Вам, скачать мой бесплатный курс «Как сделать подписную страницу новичку» или платный недорогой видео-курс «Как создать подписную и продающую страницу за три шага новичку», они дополняют друг друга.
С уважением, Иван Кунпан.
Просмотров: 1680
Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку «Подписаться»
Вы можете почитать:
Как правильно поставить якорь HTML 🚩 Веб-программирование
Якорь– это очень полезный инструмент, который позволяет организовать документ и сделать его более удобным для чтения пользователем. Как и все HTML инструменты, этот тег подчиняется стандартному синтаксису, и работа с ним не вызывает каких-либо затруднений.
В нужном месте документа создаётся ссылка, которая связывает две точки страницы. Это ссылки внутри одной странички. Переход по якорю внутри страницы производится даже без перезагрузки документа.
По этому принципу создаются активные списки, ссылки на точки с нужным описанием в тексте или закладки. Страница, структура которой снабжена якорями, создает приятное впечатление и легко читается.
Якорь делается очень просто. Первым делом нужно создать в теле документа нужную метку. Именно за эту метку будет цепляться ссылка на странице — и переносить читателя на эту точку.
Метка создаётся стандартным для языка HTML способом. Можно использовать инструмент name, а можно задатьid элемента и ссылаться на него.
Имя метки, указанное в кавычках, должно быть уникальным и отличаться от остальных имен на страничке. В противном случае алгоритм запутается.
Заполнение пространства между тегами в данном случае не обязательно, но приветствуется. Это упрощает ориентирование в коде.
Данный способ ещё более простой. Достаточно приписать конкретному элементу на странице id номер.
В этом случае, заголовок h2 стал для нас якорем.
Для того, чтобы указать ссылку в странице на выбранный якорь, в обоих случаях мы используем одинаковую конструкцию. Стандартный код ссылки дополняется инструментом #.
Необходимо сослаться на пукт 1. Код имеет следующий вид:
При клике на данную ссылку, произойдет переход к пункту 1. При этом следует понимать, что пункт 1 должен быть выделен согласно описанию, представленному выше. (размечен элементом name или id1).
Иногда получается такая ситуация, что требуется сослаться на конкретную точку на другой странице, содержащейся на данном сайте. Например, описывая особенности приготовления курицы в духовке, необходимо перейти на страницу сайта, где были описаны правила пользования духовкой. При этом, после клика по ссылке требуется перейти к конкретному правилу для ускорения восприятия текста. В таком случае, следует создать конструкцию следующего вида:
Здесь /adress-stranici – имя страницы на сервере, на которой описаны режимы работы и на которую следует отправить читателя.
Punkt1 – тот режим, который нужно изучить на этой странице.
При нажатии на эту ссылку, пользователь попадет на страницу adress-stranlci, в точку, где установлен якорь с названием punkt1.
HTML ссылка – или как «бросить якорь» в нужном месте…
HTML ссылка имеет два формата. Первый – это перенаправление на нужный пост. Этот формат известен всем.
Второй формат – перенаправление в определенную точку страницы. Такая ссылка называется – якорной.
То есть, мы отправляем посетителя, прошедшего по этому линку, к «якорю», который установлен либо на этой же странице либо на другой, нашего блога.
Содержание
Создание ссылки «вручную»
Перенаправление в рамках одного поста
Перенаправление посетителя в рамках блога
Видео
Создание ссылки с помощью плагина
Необходимость создания якорной ссылки
1. Конкретная отправка читателя к нужной точке статьи, которая имеет большие размеры.
Представьте, что Вы публикуете большой, информативный пост, с несколькими подпунктами, разбирающий какие-то последовательные моменты. Ваш читатель к концу публикации, хотел что-либо повторить или уточнить. (Здесь очень важно Вам, как автору, почувствовать возможные проблемы читательской аудитории). Созданная якорная перелинковка к конкретной точке статьи, очень будет полезна.
Либо Вы рассказываете о серии продуктов. Перечисляете их и даете описание. Некоторые продукты лучше работают в комбинации друг с другом. На такой публикации якорная перелинковка просто необходима, так как вы сможете сразу заинтересованного посетителя отправить к информации о нужном продукте.
2. Отправка читателя к определенному месту на другой странице.
Здесь совсем просто. Вам, например, необходимо отправить посетителя к конкретному месту прайс листа, который опубликован на другой странице. Нет ничего проще. Вы применяете ссылку – идентификатор или, как ее еще называют – якорную.
Разобрались . Теперь давайте приступим к практике.
Создание ссылки «вручную»
Случай 1. Перенаправление в рамках одного поста.
1.1 Заходим в редакцию поста и находим нужную точку, то место куда должен попасть читатель.
1.2 Устанавливаем «якорь». Его можно обозначить просто цифрой или буквами латиницы. Но вы должны понимать, что на блоге не могут быть два одинаковых идентификатора. Выглядеть это будет так:
1.3 Теперь создаем ссылку в том месте, откуда будет направлен посетитель на идентификатор. Соответственно ищем текст для релевантного анкора. И заключаем его в ссылку такого вида:
<a href=”#1”>АНКОР </a>
<a href=”#1”>АНКОР </a> |
Теперь давайте проверим. Я создала такую ссылку на пункт 1 моей статьи.
Случай 2. Перенаправление посетителя в рамках блога.
2.1 Устанавливаем «якорь». Принцип тот же. Только не забудьте поменять идентификатор.
2.2 Публикуем пост с идентификатором и копируем ссылку на эту страницу.
2.3 Создаем ссылку. Выбираем релевантный текст для анкора и заключаем его в ссылку следующего вида
<a href=”адрес_страницы#2”>АНКОР</a>
<a href=”адрес_страницы#2”>АНКОР</a> |
Вот такую ссылку я сделала на страницу «Правильно создаем анкор ссылки» п.1
А теперь давайте посмотрим короткое видео по этому вопросу
Создание якорной ссылки с помощью плагина
Используем плагин TinyMCE Advanced. Это известный плагин, который используется для расширения возможностей редактора. На сегодняшний день он работает как с классическим редактором, так и с Gutenberg. Устанавливается этот плагин обычным способом прямо из депозитория WordPress.
Сейчас не будем разбирать подробности этого плагина — настройки очень понятны. Нас, на данный момент, интересует настройка Якорной ссылки.
Для этого, заходим в настройки плагина, выбираем значок — флажок и перетаскиваем его на панель редактора из нижнего поля.
Сохраняем изменения. Теперь в редакторе и записей и страниц у нас появилась дополнительная опция — Якорная ссылка.
Теперь пройдем всю дорожку по созданию такой ссылки в данной статье. Буду создавать содержание статьи, ля удобства посетителя.
Поднимаюсь в начало статьи, пишу слово «Содержание»
Начинаю заполнять те пункты статьи, на которые по клику посетитель сможет перейти.
Теперь начинаю работать с каждым из перечисленных пунктов в статье
Выделяю заголовок и кликаю на «флажок»
Появляется всплывающее окно. Ввожу в него идентификатор. Он может быть любой. Самое главное, что бы не он больше не повторялся.
Кликаю «ok» и получаю рядом с заголовком значок, что якорь установился.Проделываю эту процедуру со всем спискомОбъединяем якорную ссылку содержания с заголовком внутри статьи
Для этого, выделяю соответствующую фразу в содержании ажимаю на значок «ссылка». То есть выполняю самое обычное действие — создаю ссылку.
Вот только в поле ссылки пишу тот идентификатор, который у меня обозначен на соответствующем заголовке. В данном случае h2.
НО! Перед ним обязательно надо поставить значок # «решетка».
Нажимаем клавишу — Enter. Все! Работа закончена.
То же самое делаем с остальным содержанием статьи.Все очень просто! только будьте внимательны! Не перепутайте идентификаторы!
Как всегда, предлагаю Вам свою рассылку — «Инструменты в помощь начинающему блогеру». Подписавшись на которую, будете получать всю последнюю информацию о настройках блога
Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной — делитесь ей со своими друзьями в социальных сетях
Урок 5.2: Создание ссылки на якорь
В языке HTML эта необходимость реализована с помощью тега гиперссылок <a>. Только вместо адреса, куда ведет ссылка, указывается id (идентификационный номер) со стоящим перед ним знаком решетки (<a href=»#id»>Текст ссылки на якорь</a>).
Еще один маленький момент: при ссылки на якорь на странице должен быть установлен этот якорь. Для этого необходимо в нужном теге указать атрибут id (например). Значение атрибута id может состоять из цифр и латинских букв.
Пример создания ссылки на якорь.
<html>
<head>
<title>Создание ссылки на якорь</title>
</head>
<body>
<h3>Содержание</h3>
<p><a href="#1">Раздел 1</a></p>
<p><a href="#2">Раздел 2</a></p>
<p><a href="#3">Раздел 3</a></p>
<p><a href="#4">Раздел 4</a></p>
<p><a href="#5">Раздел 5</a></p>
<h4>Раздел 1</h4>
<p>Текст раздела 1</p>
<h4>Раздел 2</h4>
<p>Текст раздела 2</p>
<h4>Раздел 3</h4>
<p>Текст раздела 3</p>
<h4>Раздел 4</h4>
<p>Текст раздела 4</p>
<h4>Раздел 5</h4>
<p>Текст раздела 5</p>
</body>
</html> Результат создания ссылки на якорь
Как видно из примера при нажатии на ссылку ведущую на якорь страница прокручивается до нужного якоря.
Еще одна возможность — это совмещения гиперссылки с ссылкой на якорь. Для этого необходимо в конце гиперссылки добавить знак решетки и идентификатор якоря. Например href=»/http://in-sites.ru/html/spravochnik-html#html«
<< Создание ссылки | Перечень уроков | Атрибуты ссылок >>