Как добавить панировочные сухари на сайт Weebly?

Внутренняя структура сайта – один из важных факторов SEO, который помогает Google и другим поисковым системам легко понять ваш сайт. Помимо ссылок на другие страницы вашего сайта, добавление хлебных крошек может помочь пользователям переходить к различным разделам. Если вы не знаете о хлебных крошках, это дополнительные навигационные ссылки, обычно отображаемые в верхней части веб-страницы, содержащей структуру. Это помогает пользователям легко переходить к категориям или разделам верхнего уровня с текущей страницы.

Связанный: Как добавить хлебные крошки на сайт WordPress?

Примеры хлебных крошек

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

Примеры панировочных сухарей

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

Weebly и Breadcrumb

Weebly не предлагает элемент хлебной крошки по умолчанию для добавления его на ваш сайт. Однако вы можете использовать собственный CSS / HTML и вручную вставлять хлебные крошки на каждую страницу. Здесь мы покажем вам шесть различных хлебных крошек стилей CSS, которые вы можете добавить на свой сайт Weebly.

Заметка: Помните, что это простые и ручные панировочные сухари. Это не часть схемы, поэтому поисковые системы не будут отображать их в результатах поиска, как веб-сайты WordPress.

Необходимое условие для панировочных сухарей

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

Как добавить панировочные сухари на сайт Weebly?

В хлебных крошках используется простой код CSS и HTML, поэтому код CSS должен быть добавлен в таблицу стилей, а код HTML должен быть встроен на требуемую страницу. Поскольку вам может потребоваться разместить хлебные крошки более чем на одной странице, рекомендуется добавить код CSS в раздел «Тема> Редактировать HTML / CSS> Стили> main.less” как показано ниже:

Редактирование основного файла CSS в Weebly
Редактирование основного файла CSS в Weebly

HTML-код должен быть вставлен на страницу с помощью «Код для вставки”Элемент над содержимым.

Стиль 1 и 2

Ниже панировочные сухари для стилей 1 и 2 имеют общий класс CSS с незначительным добавлением кода для второго стиля.

CSS Breadcrumb Style 1

CSS Breadcrumb Style 2

Стиль 3, 4, 5 и бонус 6

CSS Breadcrumb Style 3

CSS Breadcrumb Style 4

CSS Breadcrumb Style 5

Бонусный стиль CSS Breadcrumb 6

Нажмите кнопку ниже, чтобы получить код CSS / HTML для всех вышеуказанных хлебных крошек, и код CSS выделен для каждого стиля.

Для этих хлебных крошек требуется четыре изображения, которые вы можете скачать ниже и загрузить на свой сайт Weebly. Не забудьте заменить URL-адреса изображений внутри CSS своими собственными URL-адресами.

Заметка: Стили хлебных крошек 1, 2, 3 и 4 в загруженном CSS представляют собой примеры 3, 4, 5 и 6 соответственно, как показано выше. Не забудьте заменить ссылки на изображения своими собственными URL.

Похожие записи

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

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