Chtěli byste uvádět blogové příspěvky v Divi?
Dnes vám ukážeme kreativní způsob, jak prezentovat blogové příspěvky jako plovoucí karty v Divi. Každý blog resp Webové stránky by měl mít za cíl mít vynikající obsah atraktivní a možná stejně důležité nebo dostupné.
Jedním ze způsobů, jak zajistit, že obsah zůstane uživatelům přístupný je, aby se na stránce pohyboval.
A pro blogery si ukážeme, jak prezentovat články z váš blog jako plovoucí karty, aby zůstaly viditelné při posouvání stránky.
Pojďme.
přehled
Zde je stručný přehled výsledku, který získáme na konci tohoto tutoriálu.
Co potřebujete, abyste mohli začít
Než začnete vytvářet tento design v Divi, budete muset udělat následující:
- Vytvořte novou stránku, zadejte odpovídající název a klikněte na „Použít Divi Builder“
- Vyberte možnost Vyberte rozložení".
- Najít a vybrat rozložení 'vstupní stránka bloggera".
- Klikněte na tlačítko Vyberte rozložení k načtení na stránku.
Poté budete mít připravené rozvržení připravené k použití pro tento tutoriál.
Jak vytvořit plovoucí karty blogového příspěvku pomocí modulu Divi's Blog Module
Nyní, když je rozvržení načteno na stránce, jsme připraveni vytvořit plovoucí karty našeho blogu.
Čtěte také: Jak vytvořit Sticky Global Header v Divi
Vytvořte novou sekci úplně dole v rozvržení.
Poté do sekce přidejte nový řádek s jedním sloupcem.
Přidejte modul Blog a název do řádku/sloupce
Namísto vytváření nového modulu Blog zde přejděte nahoru a najděte existující modul Blog zobrazující tři blogové příspěvky (je ve třetí sekci blízko středu stránky). OTEVŘENO " Další parametry modulu »A vyberte« Kopírování modulu".
Poté vložte modul do nového řádku s jedním sloupcem, který jsme vytvořili v dolní části stránky kliknutím pravým tlačítkem na šedou ikonu plus a výběrem „ Vložit modul".
Dále přidáme nadpis nad naše blogové příspěvky, který se bude také vznášet nad blogovými kartami. Chcete-li to provést, zkopírujte stávající modul Text s malým textem názvu " Životní styl".
Poté vložte modul těsně nad nový modul Blog, který jsme právě přidali.
Dále upravte text nadpisu tak, aby popisoval typ blogových příspěvků, které chcete uvádět. V tomto příkladu použijeme pouze " Top Story".
Přizpůsobení čáry s pevnou pozicí a vlastní šířkou
Chceme zmenšit velikost plovoucích blogových příspěvků, aby nezabíraly příliš mnoho místa na stránce, když mají pevnou pozici. Bylo by to zábavné. Chcete-li to provést, otevřete nastavení linky a aktualizujte následující:
Aby předměty plavaly, musíme dát vlasci pevnou polohu. Na kartě Upřesnit aktualizujte následující:
- Poloha: Pevná
- Umístění: vpravo dole
- Vertikální posun: 20px
- Horizontální posun: 20px
- Index Z: 12
Aktualizovaný modul Blog s minimálním obsahem a stínováním
Obecně platí, že modul Blog již má třísloupcové rozvržení mřížky a pěkný styl, který přichází s balíčkem rozvržení, který jsme vybrali. Ale je tu pár věcí, které musíme udělat.
Viz též: Jak vytvořit globální hlavičku s přihlašovacím formulářem v Divi
Nejprve musíme zmenšit velikost map (vertikálně) a odstranit z nich některé prvky obsah.
Chcete-li to provést, otevřete nastavení blogu a skryjte všechny prvky kromě doporučeného obrázku. Díky tomu bude příspěvek zobrazovat pouze doporučený obrázek a název.
Na kartě Styl nakonfigurujte stín rámečku následovně:
- Shadow box: Viz snímek obrazovky
- Síla rozostření rámečku: 28 pixelů
- Barva písma titulků: rgba(0,0,0,0.19)
přehled
Zde je náhled dosavadního výsledku.
Zajistěte, aby se řádek článků zobrazil při umístění kurzoru myši
Nakonec můžeme přidat pěkný efekt hoveru, který vybízí uživatele k interakci s plovoucími články.
Čtěte také: Jak vytvořit stránku blogu s modulem Blog v Divi
Otevřít nastavení linky a možnosti aktualizace:
Pro kancelář
- Transformace: 50 %
Pro stav vznášení
- Transformace: 0 %
To zpočátku o 50 % přesune celý řádek mimo výřez prohlížeče. Jakmile uživatel najede na čáru, čára se zcela vrátí zpět do pohledu.
Skrýt řádek na mobilu
Pokud nechcete publikovat jeden blogový příspěvek, nemá smysl tyto blogové příspěvky přenášet na mobilu. Pravděpodobně by to zabíralo příliš mnoho místa a způsobovalo problémy při pokusu o rolování.
Viz též: Jak přidat kontaktní formulář do globální hlavičky v Divi
Chcete-li skrýt mapy na mobilu, otevřete nastavení sekce a vypněte viditelnost sekce na telefonu a tabletu.
Konečný výsledek
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Tak ! V tomto tutoriálu jsme vám ukázali kreativní a originální způsob, jak prezentovat blogové příspěvky, které chcete zvýraznit.
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.
...
