Doriți să personalizați linkul Citiți mai mult din modulul Blog al Divi ? Apoi urmați tutorialul nostru.
Linkurile „Citiți mai multe” ale unui blog pot fi o parte esențială a îmbunătățirii experiența utilizatorului. Prin urmare, este important să știm cum să le personalizăm corect.
În acest tutorial, vă vom arăta cum să personalizați linkul „Citiți mai multe” din modulul Blog. În acest articol, vă vom arăta cum să:
- Personalizați linkul „Citiți mai multe” folosind opțiunile încorporate ale Divi
- Aliniați linkul „Citiți mai multe” (stânga, centru, dreapta)
- Transformă linkul „Citește mai mult” într-un buton pe ecran complet
- Creați un buton personalizat Citiți mai multe cu efecte Hover
- Înlocuiește textul „Citește mai mult” cu altceva (cum ar fi „Citește articolul”).
studiu
Iată o privire rapidă asupra designului pe care îl vom crea în acest tutorial.
Încărcați un modul de blog pe o pagină utilizând Generatorul de teme Divi
Pentru a începe să personalizați linkurile Citiți mai multe, veți avea nevoie de acces la un modul Blog.
puteți încărcați un aspect predefinit cu orice modul Blog la alegere sau pur și simplu adăugați un nou modul Blog la o pagină.
Pentru a începe procesul, vom folosi pagina de blog din aspectul predefinit Inteligenta Artificiala.
Adăugați o pagină nouă din tabloul de bord WordPress
Apoi, dați un titlu paginii dvs., apoi faceți clic pe „ Utiliser Divi Constructor".
Apoi faceți clic pe " Alegeți aspectul«
Găsiți și alegeți " Artificial inteligență Pagina de blog«
În cele din urmă, alegeți aspectul Blog și faceți clic pe „ Alegeți aspectul«
Personalizați și aliniați textul linkului Citiți mai mult
Fiecare modul Blog oferă opțiunea de a afișa sau ascunde linkul „Citește mai mult” pentru fiecare articol din aspect. Pentru a afișa linkul „Citiți mai multe”, deschideți setările blogului și comutați butonul „ Afișați butonul Citiți mai multe la „DA” în lista de articole de blog pe care doriți să le afișați.
Sub fila Stil, puteți personaliza textul Citiți mai multe folosind una dintre opțiunile încorporate. Pentru acest exemplu, să actualizăm următoarele:
- Font Citește mai mult: Barlow
- Citește mai mult Dim Light: Semi Bold
- Citește mai mult Stil de copiere: majuscule (TT), subliniat (U)
- Culoarea textului Citiți mai multe: #db0eb7
- Citește mai mult Text subliniat Culoare: #3c5bff
- Spațiere între litere Citește mai mult: 1px
Iată rezultatul.
În prezent, linkul „Citește mai mult” este plasat implicit în stânga, cu excepția cazului în care modificați alinierea. Pentru a alinia linkul la centrul sau la dreapta postării, adăugați un fragment CSS după cum urmează:
Sub fila avansată setări blog, adăugați următorul CSS la butonul Citiți mai multe CSS:
display: block;
text-align: right;
„Display:block” va schimba legătura cu un element bloc care se întinde pe toată lățimea containerului său (în acest caz, corpul cuprins de publicare). Odată definit ca element bloc, putem alinia textul la dreapta folosind „text-align:right”.
Citiți și: Cum se creează un antet global lipicios în Divi
Iată rezultatul.
Pentru a centra legătura, înlocuiți pur și simplu „dreapta” cu „centru” pentru valoarea proprietății „text-align” după cum urmează:
Iată rezultatul.
Personalizați linkul „Citiți mai multe” pentru a arăta ca un buton
Pentru acest exemplu, vom crea un stil simplu de buton cu lățime completă pentru linkul „Citiți mai multe”. Înainte de a adăuga CSS-ul personalizat, deschideți setările blogului și actualizați textul linkului „Citiți mai multe” după cum urmează:
- Citește mai mult Stilul de copiere: majuscule (TT)
- Culoarea textului Citește mai mult: #ffffff
În exemplul anterior, am folosit „display:block” și „text-align:center” pentru a face legătura să se întindă pe toată lățimea containerului și să centreze textul.
Vezi și: Cum se creează un meniu glisant și push în Divi
Pentru a face să arate ca un buton, tot ce trebuie să facem este să adăugăm o culoare de fundal și o spațiere împreună cu câteva fragmente CSS suplimentare. Pentru a face acest lucru, accesați fila Avansat și actualizați CSS-ul butonului „Citiți mai multe” după cum urmează:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
rezultat
Iata rezultatul!
Crearea unui stil de buton avansat cu CSS
Dacă doriți să duceți stilul butonului la un alt nivel, putem adăuga un fundal și un efect de hover.
Pentru a face acest lucru, înlocuiți CSS pentru „Butonul Citiți mai multe” cu următorul:
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;
Pentru a schimba fundalul la trecerea cursorului, puteți lipi următorul CSS pe „Butonul Aflați mai multe” când treceți cu mouse-ul:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
rezultat
Iata rezultatul!
Schimbați textul „Citește mai mult” cu altceva
Pentru a schimba textul „Citește mai mult” cu altceva, cum ar fi „Citește articolul”, vom avea nevoie de puțin jQuery. Dar nu vă faceți griji, acestea sunt doar câteva rânduri.
Înainte de a adăuga codul nostru jQuery, adăugați o clasă CSS personalizată la modulul Blog, după cum urmează:
- Clasa CSS: et-custom-read-more-text
NOTĂ: Asigurați-vă că numele clasei este corect pentru ca jQuery să funcționeze.
Pentru a adăuga jQuery care modifică textul „Citiți mai multe”, adăugați un modul Cod sub modulul Blog.
Apoi lipiți următorul cod jQuery, asigurându-vă că includeți codul cu etichetele de script necesare:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Acest cod îi spune browserului să schimbe textul linkului „Citește mai mult” în „Citește articolul” odată ce pagina se încarcă.
rezultat
Iata rezultatul!
Rezultate finale
Iată o altă privire asupra personalizărilor linkului (sau butonului) Citiți mai multe pe care le-am făcut.
Descărcați DIVI acum!!!
Concluzie
Asa de ! Asta e pentru acest articol. Modulul Blog Divi vă permite să personalizați creativ linkul „Citește mai mult”. Și dacă doriți să experimentați cu câteva fragmente CSS, puteți crea chiar și mai multe modificări avansate.
Sperăm că acest tutorial vă va ajuta să duceți acele linkuri „Citiți mai multe” la nivelul următor. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
