Chcete vytvořit responzivní rozvržení mřížky obrázku pomocí DIVI ?
Stavitel divi má fantastické vestavěné moduly, které využívají zobrazení mřížky,
Někdy však možná budete chtít vytvořit vlastní rozvržení mřížky obrázků s odkazy CTA. To vám dává větší kontrolu nad designem a obsah které chcete zobrazit pro každou položku mřížky, aniž byste museli používat plugin.
Dnes vám ukážeme, jak vytvořit responzivní rozvržení mřížky obrázků s odkazy CTA pomocí vestavěných možností návrhu divi.
Začněme!
přehled
Zde je stručný přehled výsledku, který dostaneme na konci tohoto tutoriálu.
Vytvořte stránku pomocí Divi Theme Builder
Z ovládacího panelu WordPress vytvořte novou webovou stránku tak, že přejdete na Stránky >> Přidat
Poté zadejte název své stránky a klikněte na „ Použijte nástroj Divi Builder ".
Poté klikněte na " začít stavět«
Vytvoření speciálního rozvržení řezu
Přidat novou sekci "specialita". rozvržení levého postranního panelu jedna třetina dvě třetiny.
Vyberte rozvržení sloupců, jak je znázorněno na obrázku níže:
Smažte výchozí sekci, aby zůstala pouze nová specializovaná sekce.
Otevřete nastavení sekce a změňte barvu pozadí následovně:
- Pozadí: #84dbda
Na kartě Styl, aktualizujte následující možnosti:
- Vyrovnat výšky sloupců: ANO
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Vnitřní šířka: 100%
Čtěte také: Jak převedu blogové příspěvky v DIVI?
- Maximální vnitřní šířka: 1px (počítač), 080px (tablet a telefon)
- Vnitřní rozpětí (nahoře a dole): 12vh
- Výplň sloupce 1 (nahoře a dole): 0px
S nastavenými styly oddílů přidejte do oddílu řádek s jedním sloupcem.
Nastavení linky
Aktualizujte parametry linky následovně:
- Použít vlastní šířku okapu: ANO
- Rozteč sloupců: 1
- Harmonizovat výšky sloupců: ANO
- Vnitřní okraj (nahoře a dole): 0px
Vytvořte druhý řádek duplikováním prvního.
Poté změňte duplicitní řádek na rozložení se dvěma sloupci.
Přidání obrázků jako obrázků na pozadí sloupců
Nyní, když jsou všechny řádky a sloupce na svém místě, jsme připraveni přidat naše obrázky do našeho rozvržení mřížky.
Abychom zajistili, že obrázky budou reagovat v rozložení mřížky, přidáme každý z našich obrázků jako obrázky na pozadí do každého ze čtyř sloupců v sekci.
Protože každý obrázek na pozadí bude mít velikost pozadí " Pokrýt ", obrázek při úpravě velikosti prohlížeče vždy vyplní celý sloupec.
Obrázek na pozadí sloupce horního řádku
Chcete-li začít, otevřete nastavení sloupce horního řádku.
Poté do sloupce přidejte obrázek na pozadí.
Obrázky na pozadí sloupce spodního řádku
Dále otevřete nastavení pro sloupec 1 ve druhém (spodním) řádku a také do tohoto sloupce přidejte obrázek na pozadí.
Dále přidejte obrázek na pozadí do sloupce 2 stejného řádku.
Obrázek na pozadí ve sloupci 1
A nakonec otevřete nastavení sekce "specialita" a přidejte obrázek na pozadí do sloupce 1.
Přidání modulu "Výzva k akci" překrývající obrázky do každého sloupce
Nyní, když byly naše obrázky na pozadí přidány do každého sloupce rozvržení mřížky, přidáme do každého sloupce modul „Výzva k akci“.
Použití překryvného modulu "Výzva k akci" na obrázku na pozadí sloupce vám umožní snadno přidat vlastní styly překrytí pozadí a efekty při najetí na obrázek na pozadí sloupce.
V tomto příkladu použijeme pouze prvek tlačítka z modulu Action Call, ale můžete jej snadno přidat obsah nadpisu nebo textu nad tlačítkem.
První modul „Call to Action“ přidáme do sloupce horního řádku.
Obsah
Aktualizujte nastavení modulu „Výzva k akci“ následovně:
- odstranit text titulku
- smazat hlavní text
- Adresa URL odkazu tlačítka: #
POZNÁMKA : Přidání znaku „#“ pro adresu URL odkazu tlačítka je prozatím pouze výplň, aby se tlačítko zobrazilo. Přidáním poloprůhledné barvy pozadí při umístění kurzoru získáte pěknou vlastní barvu překrytí, když umístíte ukazatel myši na modul (a obrázek za ním).
- Barva pozadí: transparentní (desktop), rgba (255,235,77,0.5) (přejetí myší)
Styly tlačítek
Přejděte na kartu Styl a upravte nastavení tlačítek modulu „Výzva k akci“ následovně:
- Použít vlastní styly pro tlačítko: ANO
- Velikost textu tlačítka: 22px
- Barva textu tlačítka: #ffeb4d
- Tlačítko pozadí: #000000 (desktop), #ec5f00 (umístění kurzoru)
- Šířka okraje tlačítka: 0 pixelů
- Poloměr okraje tlačítka: 100 px
- Písmo tlačítka: Quicksand
- Tlačítko ztlumení světla: polotučné
- Tlačítko výplně: 0,5 em nahoře, 0,5 em dole, 2 em vlevo, 2 em vpravo
Velikost, polstrování a lemování
Dále se musíme ujistit, že náš modul má určitou výšku, aby odkryl obrázek na pozadí sloupce za ním.
K tomu přidáme do modulu vnitřní okraje (Nahoře a Dole).
Modul také přidáme jemný okraj, aby byl trochu oddělen od ostatních obrázků v rozložení mřížky.
Použijte následující nastavení:
- Šířka: 100%
- Vnitřní rozpětí (nahoře a dole): 15vh
- Šířka spodního okraje: 5px
- Šířka levého okraje: 5px
- Barva ohraničení: rgba (255,255,255,0.5)
POZNÁMKA : Použitím jednotky délky vh pro výplň bude hodnota výplně relativní k výšce výřezu prohlížeče. Takže vaše prvky mřížky obrázku budou růst a zmenšovat se na výšku úměrně oknu prohlížeče.
Vertikální centrování obsahu modulu „Výzva k akci“.
Aby bylo zajištěno, že obsah modulu „Action Call“ zůstane vertikálně vycentrován, můžeme přidat malý úryvek vlastního CSS pomocí vlastnosti flex.
Na kartě Upřesnit přidejte do hlavního prvku následující CSS:
display:flex;
flex-direction:column;
justify-content:center;
Do ostatních sloupců přidána překryvná vrstva s výzvou k akci
Nyní, když je první modul „Výzva k akci“ přizpůsoben, zkopírujte a vložte modul do dalších 3 sloupců rozvržení, včetně 2 sloupců ve spodním řádku a sloupce 1 v sekci.
Abyste zajistili, že modul „Výzva k akci“ pokryje celou výšku sloupce 1 ve specializované sekci, nastavte minimální výšku na 100 %.
- Minimální výška: 100 %
Je konec ! Pojďme se podívat na konečný výsledek.
Konečný výsledek
Zde je konečný výsledek rozvržení responzivního rozvržení mřížky obrázku na webové stránce s efekty přechodu.
A takto mřížka reaguje při úpravě velikosti prohlížeče.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Responzivní rozvržení mřížky obrázků je i nadále oblíbeným aspektem mnoha webových stránek. Vizuální přitažlivost poskytovaná obrázkem na pozadí v kombinaci s překryvnou výzvou k akci může skutečně vyvolat důležité navigační odkazy.
Také responzivní charakter rozvržení mřížky obrazu bude vypadat skvěle na všech zařízeních, což je vždy nutnost.
Doufáme, že tento průvodce vám bude užitečný při vašich budoucích projektech tvorby Webové stránky. 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 dokončení projektů tvorby webových stránek.
Můžete také postupovat podle našeho průvodce na 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.
...
