Dëshironi të personalizoni lidhjen Lexo më shumë të modulit Blog të Divi ? Pastaj ndiqni tutorialin tonë.
Lidhjet "Lexo më shumë" të një blogu mund të jenë një pjesë thelbësore e përmirësimit përvoja e përdoruesit. Prandaj është e rëndësishme që ne të dimë se si t'i personalizojmë ato në mënyrë korrekte.
Në këtë tutorial, ne do t'ju tregojmë se si të personalizoni lidhjen "Lexo më shumë" në modulin Blog. Në këtë artikull, ne do t'ju tregojmë se si të:
- Personalizojeni lidhjen "Lexo më shumë" duke përdorur opsionet e integruara të Divi
- Lidhni lidhjen "Lexo më shumë" (majtas, qendër, djathtas)
- Kthejeni lidhjen "Lexo më shumë" në një buton me ekran të plotë
- Krijo një buton të personalizuar për Lexo më shumë me "Efektet Hover".
- Zëvendësoni tekstin "Lexo më shumë" me diçka tjetër (si "Lexo artikullin").
studim
Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.
Ngarko një modul blogu në një faqe duke përdorur ndërtuesin e temave të Divi
Për të filluar personalizimin e lidhjeve Lexo më shumë, do t'ju duhet akses në një modul Blog.
Ju mund ngarkoni një plan urbanistik të paracaktuar me çdo modul Blog sipas zgjedhjes suaj ose thjesht shtoni një modul të ri Blog në një faqe.
Për të filluar procesin, ne do të përdorim faqen e blogut nga faqosja e paracaktuar Inteligjenca artificiale.
Shtoni një faqe të re nga Paneli i WordPress
Më pas, jepni një titull faqes tuaj dhe klikoni në " shfrytëzuesi Divi Ndërtues".
Pastaj klikoni në " Zgjidhni paraqitjen«
Gjeni dhe zgjidhni " artificial inteligjencës Blog Faqe«
Së fundi, zgjidhni paraqitjen e blogut dhe klikoni në " Zgjidhni paraqitjen«
Personalizojeni dhe rreshtoni tekstin e lidhjes Lexo më shumë
Çdo modul Blog ofron opsionin për të shfaqur ose fshehur lidhjen "Lexo më shumë" për çdo artikull në paraqitje. Për të shfaqur lidhjen "Lexo më shumë", hapni cilësimet e blogut dhe ndryshoni " Shfaq butonin Lexo më shumë në "PO" në listën e artikujve të blogut që dëshironi të shfaqni.
Nën skedën Stil, mund të personalizoni tekstin Lexo më shumë duke përdorur një nga opsionet e integruara. Për këtë shembull, le të përditësojmë sa vijon:
- Fonti Lexo më shumë: Barlow
- Lexo më shumë Dim Light: Semi Bold
- Lexo më shumë Stili i kopjimit: shkronja të mëdha (TT), nënvizuar (U)
- Ngjyra e tekstit Lexo më shumë: #db0eb7
- Lexo më shumë Teksti i nënvizuar Ngjyra: #3c5bff
- Hapësira e shkronjave Lexo më shumë: 1px
Këtu është rezultati.
Aktualisht, lidhja "Lexo më shumë" është vendosur në të majtë si parazgjedhje, përveç nëse ndryshoni shtrirjen. Për të lidhur lidhjen në qendër ose në të djathtë të postimit, shtoni një fragment CSS si më poshtë:
Nën skedën e avancuar të cilësimeve të blogut, shtoni CSS-në e mëposhtme në butonin "Lexo më shumë" CSS:
display: block;
text-align: right;
"Display:block" do të ndryshojë lidhjen me një element blloku që përfshin gjerësinë e plotë të kontejnerit të tij (në këtë rast, trupi i përmbajtje të botimit). Pasi të përcaktohet si një element blloku, ne mund ta rreshtojmë tekstin djathtas duke përdorur "text-align:right".
Lexo gjithashtu: Si të krijoni një kokë ngjitëse globale në Divi
Këtu është rezultati.
Për të vendosur në qendër lidhjen, thjesht zëvendësoni "djathtas" me "center" për vlerën e vetive "text-align" si më poshtë:
Këtu është rezultati.
Personalizojeni lidhjen "Lexo më shumë" që të duket si një buton
Për këtë shembull, ne do të krijojmë një stil të thjeshtë butoni me gjerësi të plotë për lidhjen "Lexo më shumë". Përpara se të shtoni CSS-në e personalizuar, hapni cilësimet e blogut dhe përditësoni tekstin e lidhjes "Lexo më shumë" si më poshtë:
- Lexo më shumë Stili i kopjimit: shkronja të mëdha (TT)
- Ngjyra e tekstit Lexo më shumë: #ffffff
Në shembullin e mëparshëm, ne përdorëm "display:block" dhe "text-align:center" për ta bërë lidhjen të shtrijë gjerësinë e plotë të kontejnerit dhe në qendër të tekstit.
Shih gjithashtu: Si të krijoni një menu rrëshqitëse dhe shtytëse në Divi
Për ta bërë atë të duket si një buton, gjithçka që duhet të bëjmë është të shtojmë një ngjyrë të sfondit dhe hapësirë së bashku me disa copa shtesë CSS. Për ta bërë këtë, shkoni te skedari Advanced dhe përditësoni CSS të butonit "Lexo më shumë" si më poshtë:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Rezultat
Këtu është rezultati!
Krijimi i një stili të avancuar të butonit me CSS
Nëse dëshironi ta çoni stilimin e butonit në një nivel tjetër, ne mund të shtojmë një sfond dhe një efekt hover.
Për ta bërë këtë, zëvendësoni CSS për butonin "Lexo më shumë" me sa vijon:
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;
Për të ndryshuar sfondin në lëvizje, mund të ngjisni CSS-në e mëposhtme në butonin "Mëso më shumë" kur rri pezull kursorin e miut:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Rezultat
Këtu është rezultati!
Ndrysho tekstin "Lexo më shumë" në diçka tjetër
Për të ndryshuar tekstin "Lexo më shumë" në diçka tjetër, si "Lexo artikullin", do të na duhet pak jQuery. Por mos u shqetësoni, këto janë vetëm disa rreshta.
Përpara se të shtoni kodin tonë jQuery, shtoni një klasë të personalizuar CSS në modulin Blog si më poshtë:
- Klasa CSS: et-custom-read-more-text
SHËNIM: Sigurohuni që emri i klasës të jetë i saktë që jQuery të funksionojë.
Për të shtuar jQuery që modifikon tekstin "Lexo më shumë", shtoni një modul Kodi nën modulin Blog.
Pastaj ngjitni kodin e mëposhtëm jQuery, duke u siguruar që ta mbështillni kodin me etiketat e nevojshme të skriptit:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Ky kod në thelb i thotë shfletuesit të ndryshojë tekstin e lidhjes "Lexo më shumë" në "Lexo artikullin" sapo të ngarkohet faqja.
Rezultat
Këtu është rezultati!
Rezultatet përfundimtare
Ja një vështrim tjetër i personalizimeve të lidhjes (ose butonit) Lexo më shumë që kemi bërë.
Shkarkoni DIVI Tani!!!
Përfundim
Kështu që ! Kaq për këtë artikull. Moduli Divi's Blog ju lejon të personalizoni në mënyrë krijuese lidhjen "Lexo më shumë". Dhe nëse doni të eksperimentoni me disa fragmente CSS, mund të krijoni vetë modifikime edhe më të avancuara.
Shpresojmë që ky tutorial t'ju ndihmojë t'i çoni ato lidhje "Lexo më shumë" në nivelin tjetër. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
