Добавить и настроить Подробнее перерыв в блоге Weebly

Каждое сообщение в блоге вашего сайта Weebly также будет отображаться на странице индекса блога. Количество последних сообщений, отображаемых на странице индекса блога, контролируется от 1 до 25 в разделе «Настройки> Блог> Сообщений на странице». Предположим, у вас есть последние 10 сообщений, которые будут отображаться на странице блога, и каждое сообщение содержит более 600 слов более длинного содержания. В таком сценарии индексная страница блога будет очень длинной, и пользователи почти не смогут просматривать более старые сообщения.

Что такое Read More Break?

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

Как это добавить?

Когда вы нажимаете на сообщение в блоге, автоматически появляется «Узнать больше Перерыв“Элемент будет отображаться под”Базовый»Категория элементов. Как только вы перетащите элемент, появится текст-заполнитель Содержимое под этой строкой отображается только после нажатия «Подробнее» как показано на рисунке ниже.

Добавление элемента “Читать дальше” в сообщение в блоге Weebly

Например, добавьте «Узнать больше Перерыв»После первого абзаца всех ваших сообщений в блоге. Это помогает отображать только первый абзац сообщений на странице индекса с возможностью для пользователей нажать на «Читать больше», Чтобы прочитать дальнейшее содержание каждого сообщения. Это делает страницу индекса более привлекательной в пределах длины прокрутки и отображения введения всех отображаемых сообщений.

Ссылка

Ссылка “Читать дальше” по умолчанию в блоге Weebly

1. «Узнать больше Перерыв»Не повлияет ни на отдельные сообщения блога, ни на редактор, ни на публикуемый контент.

2. «Узнать больше Перерыв»Будет отображаться только на странице индекса блога как в редакторе, так и на опубликованном сайте.

3. Добавление «Узнать больше Перерыв”Элементы не будут иметь никакого влияния, и первый элемент будет использоваться для разрыва содержимого на странице индекса.

Настройка ссылки “Читать дальше” на странице индекса блога

Добавление «Узнать больше ПерерывЭлемент просто добавляет «Читать больше»Текстовая ссылка между сообщениями в блоге на странице индекса, которая по умолчанию непривлекательна. Так же “Читать больше»Ссылка не отображается должным образом в некоторых темах, из-за чего пользователи думают, что в публикации мало содержания. Когда вы заглядываете в редактор кода Weebly в разделе «Тема> Редактировать HTML / CSS> main_style.css»Weebly использует класс CSS«.blog-читать дальше»Для управления стилем«Узнать больше Перерыв”Элемент. Стиль просто содержит текст, выровненный по левому или правому краю, как показано на рисунке ниже (здесь «Читать большеСсылка выровнена по левому краю).

CSS Weebly Подробнее Break Element

CSS Weebly Подробнее Break Element

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

.blog-post .blog-read-more {
text-align: center;
font-size: 26px;
box-shadow: aqua;
border: 2px solid;
padding: 5px;
border-radius: 5px;
background: lightgrey;
}

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

Индивидуальная ссылка на дополнительную информацию в блоге Weebly

Индивидуальная ссылка на дополнительную информацию в блоге Weebly

Вы можете настроить CSS, чтобы изменить цвет фона, цвет ссылки, цвет наведения, ширину поля, поля, отступы и т. Д. В соответствии с макетом вашего блога.

Посмотреть демонстрацию блога Weebly

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

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

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