Přejete si upravit odkaz Číst více v modulu Blog z divi ? Pak postupujte podle našeho návodu.
Odkazy na blog „Přečtěte si více“ mohou být zásadní součástí zlepšování User Experience. Je proto důležité, abychom věděli, jak je správně upravit.
V tomto tutoriálu vám ukážeme, jak upravit odkaz „Přečíst více“ v modulu Blog. V tomto článku vám ukážeme, jak:
- Přizpůsobte odkaz "Přečíst více" pomocí vestavěných možností divi
- Zarovnejte odkaz „Přečíst více“ (vlevo, uprostřed, vpravo)
- Proměňte odkaz „Přečíst více“ na tlačítko na celou obrazovku
- Vytvořte si vlastní tlačítko Číst více s efekty přechodu
- Nahraďte text „Přečíst více“ něčím jiným (např. „Přečíst článek“).
přehled
Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.
Načtěte modul blogu na stránku pomocí Divi's Theme Builder
Chcete-li začít s přizpůsobením odkazů Číst více, budete potřebovat přístup k modulu Blog.
Můžete načíst předdefinované rozvržení s libovolným modulem Blog podle vašeho výběru nebo jednoduše přidejte na stránku nový modul Blog.
K zahájení procesu použijeme stránku blogu z předdefinovaného rozložení Umělá inteligence.
Přidejte novou stránku z ovládacího panelu WordPress
Poté zadejte název své stránky a klikněte na „ použití divi Stavitel".
Poté klikněte na " Vyberte rozložení«
Najděte a vyberte " Umělý inteligence Stránka blogu«
Nakonec vyberte rozložení blogu a klikněte na „ Vyberte rozložení«
Přizpůsobte a zarovnejte text odkazu Číst více
Každý modul Blog nabízí možnost zobrazit nebo skrýt odkaz "Přečíst více" pro každý článek v rozložení. Chcete-li zobrazit odkaz „Přečíst více“, otevřete nastavení blogu a přepněte „ Zobrazit tlačítko Číst více na "ANO" v seznamu položek blogu, které chcete zobrazit.
Na kartě Styl můžete upravit text Číst více pomocí jedné z integrovaných možností. Pro tento příklad aktualizujme následující:
- Písmo Číst více: Barlow
- Přečtěte si více Tlumené světlo: Polotučné
- Přečtěte si více Styl kopírování: velká písmena (TT), podtržení (U)
- Barva textu Přečtěte si více: #db0eb7
- Přečtěte si více Podtržený text Barva: #3c5bff
- Mezery mezi písmeny Číst dále: 1px
Zde je výsledek.
V současné době je odkaz "Přečíst více" ve výchozím nastavení umístěn vlevo, pokud nezměníte zarovnání. Chcete-li odkaz zarovnat na střed nebo napravo od příspěvku, přidejte fragment CSS následovně:
Na kartě Upřesnit nastavení blogu přidejte do CSS tlačítka Číst více následující CSS:
display: block;
text-align: right;
"display:block" změní odkaz na prvek bloku, který zabírá celou šířku jeho kontejneru (v tomto případě tělo obsah zveřejnění). Jakmile je definován jako blokový prvek, můžeme text zarovnat vpravo pomocí „text-align:right“.
Čtěte také: Jak vytvořit Sticky Global Header v Divi
Zde je výsledek.
Chcete-li odkaz vycentrovat, jednoduše nahraďte „vpravo“ za „střed“ pro hodnotu vlastnosti „text-align“ následovně:
Zde je výsledek.
Upravte odkaz „Přečíst více“ tak, aby vypadal jako tlačítko
Pro tento příklad vytvoříme jednoduchý styl tlačítka s plnou šířkou pro odkaz „Přečíst více“. Před přidáním vlastního CSS otevřete nastavení blogu a aktualizujte text odkazu „Přečíst více“ následovně:
- Přečtěte si více Styl kopírování: velká písmena (TT)
- Barva textu Přečtěte si více: #ffffff
V předchozím příkladu jsme použili „display:block“ a „text-align:center“, aby odkaz zasahoval po celé šířce kontejneru a vycentroval text.
Viz též: Jak vytvořit posuvné a tlačné menu v Divi
Aby to vypadalo jako tlačítko, vše, co musíme udělat, je přidat nějakou barvu pozadí a mezery spolu s dalšími úryvky CSS. Chcete-li to provést, přejděte na kartu Upřesnit a aktualizujte CSS tlačítka „Přečíst více“ následovně:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Výsledek
Tady je výsledek!
Vytvoření pokročilého stylu tlačítek pomocí CSS
Pokud chcete posunout styling tlačítka na jinou úroveň, můžeme přidat pozadí a efekt vznesení.
Chcete-li to provést, nahraďte CSS pro tlačítko „Přečíst více“ následujícím:
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;
Chcete-li změnit pozadí při najetí myší, můžete při najetí kurzorem myši na tlačítko Další informace vložit následující CSS:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Výsledek
Tady je výsledek!
Změňte text „Přečíst více“ na něco jiného
Abychom změnili text „Přečíst více“ na něco jiného, například „Přečíst článek“, budeme potřebovat trochu jQuery. Ale nebojte, je to jen pár řádků.
Před přidáním našeho kódu jQuery přidejte vlastní třídu CSS do modulu Blog takto:
- Třída CSS: et-custom-read-more-text
POZNÁMKA: Ujistěte se, že název třídy je správný, aby jQuery fungoval.
Chcete-li přidat jQuery, který upravuje text „Přečíst více“, přidejte modul Kód pod modul Blog.
Poté vložte následující kód jQuery a ujistěte se, že jste kód obalili potřebný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 podstatě říká prohlížeči, aby po načtení stránky změnil text odkazu „Přečíst více“ na „Přečíst článek“.
Výsledek
Tady je výsledek!
Konečné výsledky
Zde je další pohled na přizpůsobení odkazu (nebo tlačítka) Číst více, které jsme provedli.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Tak ! To je pro tento článek vše. Modul Divi's Blog vám umožňuje kreativně upravit odkaz „Přečíst více“. A pokud chcete experimentovat s pár úryvky CSS, můžete sami vytvořit ještě pokročilejší úpravy.
Doufáme, že vám tento tutoriál pomůže posunout tyto odkazy „Přečíst více“ na další úroveň. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
