Chceli by ste prispôsobiť odkaz Čítať viac v module Blog z divi ? Potom postupujte podľa nášho návodu.
Odkazy na blog „Prečítaj si viac“ môžu byť kľúčovou súčasťou zlepšovania užívateľskú skúsenosť. Je preto dôležité, aby sme si ich vedeli správne prispôsobiť.
V tomto návode vám ukážeme, ako prispôsobiť odkaz „Čítať viac“ v module Blog. V tomto článku vám ukážeme, ako:
- Prispôsobte si odkaz „Čítať viac“ pomocou vstavaných možností divi
- Zarovnajte odkaz „Prečítať viac“ (vľavo, na stred, vpravo)
- Premeňte odkaz „Čítať viac“ na tlačidlo na celú obrazovku
- Vytvorte si vlastné tlačidlo Čítať viac s efektmi pri umiestnení kurzora myši
- Nahraďte text „Prečítať viac“ niečím iným (napríklad „Prečítajte si článok“).
prehľad
Tu je rýchly pohľad na dizajn, ktorý vytvoríme v tomto návode.
Nahrajte modul blogu na stránku pomocou Divi's Theme Builder
Ak chcete začať prispôsobovať odkazy Čítať viac, budete potrebovať prístup k modulu Blog.
Môžete načítať preddefinované rozloženie s ľubovoľným modulom Blog podľa vášho výberu alebo jednoducho pridajte nový modul Blog na stránku.
Na spustenie procesu použijeme stránku blogu z preddefinovaného rozloženia Umelá inteligencia.
Pridajte novú stránku z hlavného panela WordPress
Potom zadajte názov svojej stránky a kliknite na „ použitie divi Staviteľ„.
Potom kliknite na " Vyberte rozloženie«
Nájdite a vyberte " umelý inteligencie Stránka blogu«
Nakoniec vyberte rozloženie blogu a kliknite na „ Vyberte rozloženie«
Prispôsobte a zarovnajte text odkazu Čítať viac
Každý modul Blog ponúka možnosť zobraziť alebo skryť odkaz „Prečítať viac“ pre každý článok v rozložení. Ak chcete zobraziť odkaz „Čítať viac“, otvorte nastavenia blogu a prepnite „ Zobraziť tlačidlo Čítať viac na "ÁNO" v zozname položiek blogu, ktoré chcete zobraziť.
Na karte Štýl môžete prispôsobiť text Čítať viac pomocou jednej zo vstavaných možností. Pre tento príklad aktualizujme nasledovné:
- Písmo Prečítajte si viac: Barlow
- Čítať viac Tlmené svetlo: Polotučné
- Čítať viac Štýl kopírovania: veľké písmená (TT), podčiarknuté (U)
- Farba textu Prečítajte si viac: #db0eb7
- Čítať viac Podčiarknutý text Farba: #3c5bff
- Medzery medzi písmenami Čítať viac: 1px
Tu je výsledok.
V súčasnosti je odkaz „Čítať viac“ štandardne umiestnený vľavo, pokiaľ nezmeníte zarovnanie. Ak chcete zarovnať odkaz do stredu alebo napravo od príspevku, pridajte útržok CSS takto:
Na karte Rozšírené nastavenia blogu pridajte nasledujúci CSS do CSS tlačidla Čítať viac:
display: block;
text-align: right;
"display:block" zmení odkaz na prvok bloku, ktorý presahuje celú šírku jeho kontajnera (v tomto prípade telo obsah zverejnenia). Po definovaní ako element bloku môžeme text zarovnať doprava pomocou „text-align:right“.
Čítajte tiež: Ako vytvoriť lepiacu globálnu hlavičku v Divi
Tu je výsledok.
Ak chcete odkaz vycentrovať, jednoducho nahraďte „vpravo“ za „stred“ pre hodnotu vlastnosti „text-align“ takto:
Tu je výsledok.
Prispôsobte odkaz „Čítať viac“ tak, aby vyzeral ako tlačidlo
V tomto príklade vytvoríme jednoduchý štýl tlačidla s plnou šírkou pre odkaz „Prečítať viac“. Pred pridaním vlastného CSS otvorte nastavenia blogu a aktualizujte text odkazu „Prečítať viac“ nasledovne:
- Čítať viac Štýl kopírovania: veľké písmená (TT)
- Farba textu Prečítajte si viac: #ffffff
V predchádzajúcom príklade sme použili „display:block“ a „text-align:center“, aby sa odkaz rozprestieral na celú šírku kontajnera a text bol vycentrovaný.
Pozri tiež: Ako vytvoriť posuvné a tlačné menu v Divi
Aby to vyzeralo ako tlačidlo, všetko, čo musíme urobiť, je pridať nejakú farbu pozadia a medzery spolu s ďalšími úryvkami CSS. Ak to chcete urobiť, prejdite na kartu Rozšírené a aktualizujte CSS tlačidla „Čítať viac“ takto:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
výsledok
Tu je výsledok!
Vytvorenie pokročilého štýlu tlačidiel pomocou CSS
Ak chcete posunúť štýl tlačidla na inú úroveň, môžeme pridať pozadie a efekt vznášania.
Ak to chcete urobiť, nahraďte CSS pre „tlačidlo Čítať viac“ nasledujúcim:
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;
Ak chcete zmeniť pozadie pri umiestnení kurzora myši, môžete pri umiestnení kurzora myši na tlačidlo Ďalšie informácie prilepiť nasledujúci CSS:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
výsledok
Tu je výsledok!
Zmeňte text „Prečítať viac“ na niečo iné
Aby sme zmenili text „Prečítať viac“ na niečo iné, napríklad „Prečítať článok“, budeme potrebovať trochu jQuery. Ale nebojte sa, toto je len pár riadkov.
Pred pridaním nášho kódu jQuery pridajte vlastnú triedu CSS do modulu Blog takto:
- CSS trieda: et-custom-read-more-text
POZNÁMKA: Uistite sa, že názov triedy je správny, aby jQuery fungoval.
Ak chcete pridať jQuery, ktorý upravuje text „Čítať viac“, pridajte modul Kód pod modul Blog.
Potom prilepte nasledujúci kód jQuery a uistite sa, že ste kód obalili potrebnými značkami skriptu:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Tento kód v podstate hovorí prehliadaču, aby po načítaní stránky zmenil text odkazu „Prečítaj si viac“ na „Prečítaj si článok“.
výsledok
Tu je výsledok!
Konečné výsledky
Tu je ďalší pohľad na prispôsobenia odkazu (alebo tlačidla) Čítať viac, ktoré sme vykonali.
Stiahnite si DIVI teraz!!!
záver
Takže ! To je pre tento článok všetko. Modul Divi's Blog vám umožňuje kreatívne prispôsobiť odkaz „Prečítaj si viac“. A ak chcete experimentovať s niekoľkými úryvkami CSS, môžete si sami vytvoriť ešte pokročilejšie úpravy.
Dúfame, že tento tutoriál vám pomôže posunúť tieto odkazy „Prečítajte si viac“ na ďalšiu úroveň. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
