Хотите настроить ссылку «Подробнее» в модуле «Блог» Divi? Тогда следуйте нашему руководству.
Ссылки «Читать далее» в блоге могут стать важным элементом для его улучшения. Пользовательский опыт. Поэтому важно, чтобы мы знали, как правильно их настроить.
В этом руководстве мы покажем вам, как настроить ссылку «Читать далее» в модуле «Блог». В этой статье мы покажем вам, как:
- Настройте ссылку «Подробнее» с помощью встроенных опций Divi
- Выровняйте ссылку «Подробнее» (слева, по центру, справа)
- Превратите ссылку «Подробнее» в полноэкранную кнопку
- Создайте пользовательскую кнопку «Читать далее» с эффектами при наведении курсора.
- Замените текст «Читать далее» на что-нибудь другое (например, «Прочитать статью»).
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Загрузите модуль блога на страницу с помощью конструктора тем Divi.
Для начала настройки ссылок «Читать далее» вам потребуется доступ к модулю «Блог».
вы можете загрузить предустановленный макет с любым модулем блога на ваш выбор или просто добавьте новый модуль блога на страницу.
Чтобы начать процесс, мы будем использовать страницу блога из предопределенного макета. Искусственный интеллект.
Добавить новую страницу из панели управления WordPress
Далее, дайте вашей странице заголовок, а затем нажмите на кнопку "Использовать Divi Builder".
Затем нажмите "Выберите макет"
Найдите и выберите "Страница блога об искусственном интеллекте"
Наконец, выберите макет блога и нажмите на кнопку "Выберите макет"
Настройте и выровняйте текст ссылки Подробнее
Каждый модуль блога предоставляет возможность отображать или скрывать ссылку «Читать далее» для каждой статьи в макете. Чтобы отобразить ссылку «Читать далее», откройте настройки блога и переключите соответствующий параметр.Показать кнопку «Подробнее»Включите параметр "ДА" в список элементов блога, которые вы хотите отобразить.
На вкладке «Стиль» вы можете настроить текст «Читать далее», используя один из встроенных параметров. В этом примере давайте обновим следующее:
- Шрифт Подробнее: Барлоу
- Читать дальше Тусклый свет: полужирный
- Подробнее Стиль копирования: верхний регистр (TT), подчеркнутый (U)
- Цвет текста Подробнее: #db0eb7
- Подробнее Подчеркнутый текст Цвет: #3c5bff
- Расстояние между буквами Подробнее: 1px
Voici le résultat.
В настоящее время ссылка «Читать далее» по умолчанию располагается слева, если вы не измените выравнивание. Чтобы выровнять ссылку по центру или справа от публикации, добавьте следующий фрагмент CSS-кода:
На вкладке «Дополнительно» в настройках блога добавьте следующий CSS-код к кнопке «Читать далее»:
display: block;
text-align: right;
Свойство `display:block` преобразует ссылку в блочный элемент, занимающий всю ширину своего контейнера (в данном случае, содержимого поста). После определения в качестве блочного элемента мы можем выровнять текст по правому краю, используя `text-align:right`.
Читайте также: Как создать липкий глобальный заголовок в Divi
Voici le résultat.
Чтобы центрировать ссылку, просто замените значение свойства "text-align" на "center" следующим образом:
Voici le résultat.
Настройте ссылку «Читать далее» так, чтобы она выглядела как кнопка.
В этом примере мы создадим простой стиль кнопки во всю ширину для ссылки «Читать далее». Прежде чем добавлять пользовательский CSS, откройте настройки блога и обновите текст ссылки «Читать далее» следующим образом:
- Подробнее Стиль копирования: верхний регистр (TT)
- Цвет текста Подробнее: #ffffff
В предыдущем примере мы использовали свойства "display:block" и "text-align:center", чтобы ссылка занимала всю ширину контейнера и центрировала текст.
См. Также: Как создать скользящее и push-меню в Divi
Чтобы кнопка выглядела как кнопка, достаточно добавить цвет фона и отступы с помощью нескольких дополнительных фрагментов CSS. Для этого перейдите на вкладку «Дополнительно» и обновите CSS кнопки «Читать далее» следующим образом:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Результат
Вот результат!
Создание продвинутого стиля кнопки с помощью CSS
Если вы хотите поднять стиль кнопки на новый уровень, мы можем добавить фон и эффект наведения.
Для этого замените CSS-код кнопки "Читать далее" следующим:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
Чтобы изменить фон при наведении курсора, вы можете вставить следующий CSS-код в кнопку «Узнать больше», когда на нее наводится курсор мыши:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Результат
Вот результат!
Замените текст «Читать далее» на что-нибудь другое.
Чтобы изменить текст «Читать далее» на что-то другое, например, «Прочитать статью», нам понадобится немного jQuery. Но не волнуйтесь, это всего несколько строк кода.
Перед добавлением кода jQuery добавьте пользовательский CSS-класс к модулю «Блог» следующим образом:
- Класс CSS: et-custom-read-more-text
ПРИМЕЧАНИЕ. Убедитесь, что имя класса правильно для работы jQuery.
Чтобы добавить код jQuery, изменяющий текст "Читать далее", добавьте модуль Code в модуль Blog.
Далее вставьте следующий код jQuery, убедившись, что он заключен в необходимые теги <script>:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Этот код, по сути, указывает браузеру заменить текст ссылки «Читать далее» на «Прочитать статью» после загрузки страницы.
Результат
Вот результат!
Конечные результаты
Вот еще один пример изменений, внесенных нами в ссылку (или кнопку) «Читать далее».
Скачайте DIVI прямо сейчас!!!
Заключение
Вот и всё! На этом статья заканчивается. Модуль «Блог» в Divi позволяет творчески настраивать ссылку «Читать далее». А если вы хотите поэкспериментировать с фрагментами CSS, вы можете самостоятельно создать ещё более сложные модификации.
Мы надеемся, что это руководство поможет вам вывести ссылки «Читать далее» на новый уровень. Если у вас возникнут какие-либо проблемы или предложения, давайте свяжемся. раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...