Хотите настроить ссылку «Подробнее» в модуле «Блог» Divi ? Тогда следуйте нашему руководству.
Ссылки «Подробнее» в блоге могут стать важной частью улучшения пользовательский опыт. Поэтому важно, чтобы мы знали, как правильно их настроить.
В этом уроке мы покажем вам, как настроить ссылку «Подробнее» в модуле «Блог». В этой статье мы покажем вам, как:
- Настройте ссылку «Подробнее», используя встроенные параметры Divi
- Выровняйте ссылку «Подробнее» (слева, по центру, справа)
- Превратите ссылку «Подробнее» в полноэкранную кнопку
- Создайте пользовательскую кнопку «Подробнее» с эффектами наведения
- Замените текст «Подробнее» на что-то другое (например, «Прочитать статью»).
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Загрузите модуль блога на страницу с помощью конструктора тем Divi
Чтобы начать настройку ссылок «Подробнее», вам потребуется доступ к модулю «Блог».
вы можете загрузить предустановленный макет с любым модулем блога по вашему выбору или просто добавьте новый модуль блога на страницу.
Чтобы начать процесс, мы будем использовать страницу блога из предопределенного макета. Artificial Intelligence.
Добавить новую страницу из панели управления WordPress
Затем дайте название своей странице, затем нажмите « Utiliser Divi строитель".
Затем нажмите " Выберите макет«
Найди и выбери» Искусственный интеллект Блог Page«
Наконец, выберите макет блога и нажмите « Выберите макет«
Настройте и выровняйте текст ссылки Подробнее
Каждый модуль блога предлагает возможность показать или скрыть ссылку «Подробнее» для каждой статьи в макете. Чтобы отобразить ссылку «Подробнее», откройте настройки блога и установите переключатель « Показать кнопку «Подробнее» на "ДА" в списке элементов блога, которые вы хотите отобразить.
На вкладке «Стиль» вы можете настроить текст «Подробнее», используя один из встроенных параметров. Для этого примера обновим следующее:
- Шрифт Подробнее: Барлоу
- Читать дальше Тусклый свет: полужирный
- Подробнее Стиль копирования: верхний регистр (TT), подчеркнутый (U)
- Цвет текста Подробнее: #db0eb7
- Подробнее Подчеркнутый текст Цвет: #3c5bff
- Расстояние между буквами Подробнее: 1px
Voici le résultat.
В настоящее время ссылка «Подробнее» по умолчанию размещается слева, если вы не измените выравнивание. Чтобы выровнять ссылку по центру или справа от сообщения, добавьте фрагмент кода CSS, например:
На вкладке «Дополнительные настройки блога» добавьте следующий CSS в CSS кнопки «Подробнее»:
display: block;
text-align: right;
«display:block» изменит ссылку на элемент блока, который охватывает всю ширину контейнера (в данном случае тело содержание публикации). После определения как блочного элемента мы можем выровнять текст по правому краю, используя «text-align:right».
Читайте также: Как создать липкий глобальный заголовок в Divi
Voici le résultat.
Чтобы расположить ссылку по центру, просто замените «right» на «center» для значения свойства «text-align» следующим образом:
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, который изменяет текст «Подробнее», добавьте модуль «Код» в модуль «Блог».
Затем вставьте следующий код jQuery, завернув код необходимыми тегами скрипта:
(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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
