Искате ли да персонализирате връзката Прочетете още на модула Блог на Divi ? След това следвайте нашия урок.
Връзките „Прочетете повече“ в блога могат да бъдат решаваща част от подобряването потребителското изживяване. Затова е важно да знаем как да ги персонализираме правилно.
В този урок ще ви покажем как да персонализирате връзката „Прочетете повече“ в модула на блога. В тази статия ще ви покажем как да:
- Персонализирайте връзката „Прочетете повече“, като използвате вградените опции на Divi
- Подравнете връзката „Прочетете повече“ (ляво, централно, дясно)
- Превърнете връзката „Прочетете повече“ в бутон на цял екран
- Създайте персонализиран бутон Прочетете повече с ефекти при задържане
- Заменете текста „Прочетете повече“ с нещо друго (например „Прочетете статията“).
изследване
Ето бърз поглед върху дизайна, който ще създадем в този урок.
Заредете блог модул на страница с помощта на Theme Builder на Divi
За да започнете да персонализирате връзките Прочетете повече, ще ви е необходим достъп до блог модул.
Можете да заредете предварително дефинирано оформление с произволен блог модул по ваш избор или просто добавете нов блог модул към страница.
За да започнем процеса, ще използваме страницата на блога от предварително зададеното оформление Изкуствен интелект.
Добавете нова страница от таблото за управление на WordPress
След това дайте заглавие на вашата страница, след което щракнете върху " употреба Divi Строител".
След това щракнете върху " Изберете оформление«
Намерете и изберете " изкуствен интелигентност Страница на блога«
Накрая изберете оформлението на блога и щракнете върху „ Изберете оформление«
Персонализирайте и подравнете текста на връзката Прочетете повече
Всеки блог модул предлага опция за показване или скриване на връзката „Прочетете повече“ за всяка статия в оформлението. За да покажете връзката „Прочетете повече“, отворете настройките на блога и превключете „ Показване на бутона Прочетете повече на „ДА“ в списъка с блог елементи, които искате да покажете.
В раздела Стил можете да персонализирате текста Прочетете повече, като използвате една от вградените опции. За този пример нека актуализираме следното:
- Шрифт Прочетете още: Barlow
- Прочетете още Dim Light: Semi Bold
- Прочетете повече Стил на копиране: главни букви (TT), подчертаване (U)
- Цвят на текста Прочетете повече: #db0eb7
- Прочетете повече Цвят на подчертания текст: #3c5bff
- Разстояние между буквите Прочетете още: 1px
Ето резултата.
В момента връзката „Прочетете повече“ е поставена отляво по подразбиране, освен ако не промените подравняването. За да подравните връзката към центъра или вдясно на публикацията, добавете CSS фрагмент, както следва:
В раздела за разширени настройки на блога добавете следния CSS към CSS бутона Прочетете повече:
display: block;
text-align: right;
"display:block" ще промени връзката към блоков елемент, който обхваща цялата ширина на неговия контейнер (в този случай тялото на съдържание на публикация). Веднъж дефиниран като блоков елемент, можем да подравним надясно текста с помощта на „text-align:right“.
Прочетете още: Как да създадете лепкава глобална заглавка в Divi
Ето резултата.
За да центрирате връзката, просто заменете "right" с "center" за стойността на свойството "text-align", както следва:
Ето резултата.
Персонализирайте връзката „Прочетете повече“, за да изглежда като бутон
За този пример ще създадем прост стил на бутон с пълна ширина за връзката „Прочетете повече“. Преди да добавите персонализирания CSS, отворете настройките на блога и актуализирайте текста на връзката „Прочетете повече“, както следва:
- Прочетете повече Стил на копиране: главни букви (TT)
- Цвят на текста Прочетете повече: #ffffff
В предишния пример използвахме „display:block“ и „text-align:center“, за да накараме връзката да обхваща цялата ширина на контейнера и да центрира текста.
Вижте също: Как да създадете плъзгащо се и натискащо меню в 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...