Как добавить и настроить Подробнее Перерыв в блоге Weebly? –

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

Что такое Подробнее Перерыв?

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

Как добавить Read More Break в Weebly?

Редактор Weebly показывает элементы перетаскивания на боковой панели, которые вы можете вставить в любое место на своем сайте. Однако, когда вы редактируете сообщение блога в редакторе блогов Weebly, элементы боковой панели автоматически меняются. Вы найдете дополнительные элементы блога, которые можно использовать только на странице блога Weebly или в публикации. Вы можете увидеть «Читать дальше” показано под “Базовый» категория элементов. После того, как вы перетащите элемент, появится текст-заполнитель с упоминанием «Содержимое ниже этой строки отображается только после нажатия «Подробнее».», как показано на рисунке ниже.

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

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

Кнопка «Подробнее» на странице блога

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

Полный просмотр сообщения в блоге

На что следует обратить внимание при использовании перерыва для чтения

Хотя в блоге Weebly легко использовать перерыв для чтения, помните следующие моменты, чтобы избежать путаницы.

• “Читать дальше” не повлияет на отображение отдельных сообщений блога на опубликованном вами сайте.
• Фактическая кнопка или ссылка «Читать дальше» будет отображаться только на странице блога как в редакторе, так и на опубликованном сайте.
• Добавление более одного “Читать дальше” не окажет никакого влияния, а первый элемент будет использоваться для разбиения контента на странице блога.
• Weebly также позволяет добавить паузу для чтения на боковую панель блога. Однако это никак не повлияет на опубликованный сайт.
• У Weebly нет стандартного способа отображения ссылки «Подробнее» на странице блога. Как вы видите на снимке экрана выше, он отображается как кнопка, в то время как во многих темах он просто добавляет «Читать далееТекстовая ссылка между сообщениями в блоге. Некоторые темы Weebly показывают ссылки «Подробности» и «Читать сейчас» и игнорируют разрыв «Подробнее», который вы вставляете в запись блога.

Подробности и ссылки для чтения

Настройка ссылки «Подробнее» на странице блога Weebly

Если ваша тема игнорирует элемент разрыва «подробнее», тогда единственный вариант — изменить тему, которая показывает кнопку или текстовую ссылку. Для текстовых и кнопочных ссылок Weebly не предлагает никаких настроек по умолчанию для настройки внешнего вида. Это не хорошо, как «Читать далее«Ссылка не видна должным образом в некоторых темах, из-за чего пользователи думают, что в посте мало содержания. Хорошая часть заключается в том, что вы можете настроить цвет и выравнивание элемента, отредактировав файлы темы Weebly.

Сначала откройте страницу своего блога в новом окне браузера. Щелкните правой кнопкой мыши страницу и выберите параметр «Проверить», чтобы открыть инструменты разработчика. Проверьте исходный код, чтобы найти имя класса CSS, используемого для вашей ссылки «Подробнее».

Проверьте исходный стиль, чтобы узнать больше. Ссылка

Как вы видите на приведенном выше экране, Weebly использует следующий код, чтобы выровнять ссылку «Читать дальше» с правой стороны. В вашем случае это может быть слева с помощью «text-align:left;» Что вам нужно, так это изменить стили этого класса CSS, чтобы настроить ссылку «Читать далее» на странице вашего блога Weebly.

.blog-post .blog-read-more { text-align: right; }

Добавление пользовательского CSS-кода «Подробнее» в Weebly

Перейдите на вкладку «Темы» и нажмите кнопку «Редактировать HTML / CSS», чтобы открыть редактор кода Weebly.

Перейти к редактору кода Weebly

Каждая тема Weebly использует различный набор исходных кодов, поэтому найти .blog-подробнее Класс CSS будет сложной задачей. Например, некоторые темы используют _blog.less в то время как несколько других тем используют блог.less или частичные. Если вы найдете код, легко изменить выравнивание по левому или правому краю по центру и добавить дополнительные стили. Однако не беспокойтесь, если вы не смогли найти класс CSS. Просто перейдите на основной.без в разделе «Стили» и добавьте код CSS в конце редактора.

Добавить кнопку «Подробнее» CSS

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

.blog-post .blog-read-more { text-align: center; размер шрифта: 26px; box-shadow: 5px 5px 5px светло-серый; граница: сплошная 2px; отступ: 5px; радиус границы: 5px; фон: RGB(255 235 59); }

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

Пользовательская кнопка «Подробнее»

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