Chcete vytvoriť responzívne rozloženie mriežky obrázka pomocou DIVI ?
Staviteľ divi má fantastické vstavané moduly, ktoré využívajú zobrazenia mriežky,
Niekedy však možno budete chcieť vytvoriť vlastné rozloženie mriežky obrázkov s odkazmi na akciu. To vám dáva väčšiu kontrolu nad dizajnom a obsah ktoré chcete zobraziť pre každú položku mriežky bez toho, aby ste sa museli uchýliť k doplnku.
Dnes vám ukážeme, ako vytvoriť responzívne rozloženie mriežky obrázkov s odkazmi na akciu pomocou vstavaných možností dizajnu divi.
Začnime!
prehľad
Tu je stručný prehľad výsledku, ktorý dostaneme na konci tohto návodu.
Vytvorte si stránku pomocou Divi Theme Builder
Na hlavnom paneli WordPress vytvorte novú webovú stránku tak, že prejdete na Stránky >> Pridať
Pozri tiež: Ako vytvoriť posuvné a tlačné menu v DIVI?
Potom zadajte názov svojej stránky a kliknite na „ Použite nástroj Divi Builder „.
Potom kliknite na " začať stavať«
Vytvorenie rozloženia špeciálnej sekcie
Pridať novú sekciu "špecialita". rozloženie ľavého bočného panela jedna tretina dve tretiny.
Vyberte rozloženie stĺpcov, ako je znázornené na obrázku nižšie:
Odstráňte predvolenú sekciu, aby zostala iba nová špecializovaná sekcia.
Otvorte nastavenia sekcie a zmeňte farbu pozadia takto:
- Pozadie: #84dbda
Pod záložkou Štýl, aktualizujte nasledujúce možnosti:
- Vyrovnať výšky stĺpcov: ÁNO
- Použiť vlastnú šírku odkvapu: ÁNO
- Šírka žľabu: 1
- Vnútorná šírka: 100%
Čítajte tiež: Ako môžem umiestňovať blogové príspevky v DIVI?
- Maximálna vnútorná šírka: 1px (stolný počítač), 080px (tablet a telefón)
- Vnútorná marža (hore a dole): 12vh
- Odsadenie stĺpca 1 (horná a dolná časť): 0 pixelov
So štýlmi sekcií pridajte do sekcie riadok s jedným stĺpcom.
Nastavenie linky
Aktualizujte parametre linky takto:
- Použiť vlastnú šírku odkvapu: ÁNO
- Rozstup stĺpcov: 1
- Harmonizovať výšky stĺpcov: ÁNO
- Vnútorný okraj (hore a dole): 0px
Vytvorte druhý riadok duplikovaním prvého.
Potom zmeňte duplicitný riadok na rozloženie s dvoma stĺpcami.
Pridávanie obrázkov ako obrázkov na pozadí stĺpcov
Teraz, keď sú všetky riadky a stĺpce na svojom mieste, sme pripravení pridať naše obrázky do nášho rozloženia mriežky.
Aby sme zabezpečili, že obrázky budú reagovať v rozložení mriežky, pridáme každý z našich obrázkov ako obrázky na pozadí do každého zo štyroch stĺpcov v sekcii.
Pretože každý obrázok na pozadí bude mať veľkosť pozadia "kryt", obrázok pri úprave veľkosti prehliadača vždy vyplní celý stĺpec.
Obrázok na pozadí stĺpca v hornom riadku
Ak chcete začať, otvorte nastavenia stĺpca v hornom riadku.
Potom pridajte do stĺpca obrázok na pozadí.
Obrázky pozadia stĺpca v spodnom riadku
Ďalej otvorte nastavenia pre stĺpec 1 v druhom (spodnom) riadku a pridajte do tohto stĺpca aj obrázok na pozadí.
Potom pridajte obrázok na pozadí do stĺpca 2 toho istého riadku.
Obrázok na pozadí v stĺpci 1 sekcie
A nakoniec otvorte nastavenia sekcie "špecialita" a pridajte obrázok na pozadí do stĺpca 1.
Pridanie modulu „Výzva na akciu“ prekrytého obrázkami do každého stĺpca
Teraz, keď boli naše obrázky na pozadí pridané do každého stĺpca rozloženia mriežky, do každého stĺpca pridáme modul „Výzva na akciu“.
Použitie prekryvného modulu "Výzva na akciu" na obrázku na pozadí stĺpca vám umožní jednoducho pridať vlastné štýly prekrytia pozadia a efekty vznášania sa na obrázok na pozadí stĺpca.
V tomto príklade použijeme len prvok tlačidla z modulu Action Call, ale môžete ho jednoducho pridať obsah nadpisu alebo tela nad tlačidlom.
Prvý modul „Call to Action“ pridáme do stĺpca horného riadku.
Obsah
Aktualizujte nastavenia modulu „Výzva na akciu“ takto:
- odstrániť text nadpisu
- odstrániť text tela
- Adresa URL odkazu tlačidla: #
POZNÁMKA : Pridanie znaku „#“ pre adresu URL odkazu tlačidla je zatiaľ len výplňou, aby sa tlačidlo zobrazilo. Pridaním polopriehľadnej farby pozadia pri umiestnení kurzora myši získate peknú vlastnú farbu prekrytia, keď umiestnite kurzor myši nad modul (a obrázok za ním).
- Farba pozadia: transparentná (desktop), rgba (255,235,77,0.5) (umiestnenie)
Štýly tlačidiel
Prejdite na kartu Štýl a upravte nastavenia tlačidiel modulu „Výzva na akciu“ nasledovne:
- Použiť vlastné štýly pre tlačidlo: ÁNO
- Veľkosť textu tlačidla: 22px
- Farba textu tlačidla: #ffeb4d
- Tlačidlo pozadia: #000000 (pracovná plocha), #ec5f00 (umiestnenie kurzora myši)
Pozri tiež: Ako vytvoriť posuvné a tlačné menu v DIVI
- Šírka okraja tlačidla: 0 pixelov
- Polomer okraja tlačidla: 100 px
- Písmo tlačidla: Quicksand
- Tlačidlo stlmenia svetla: polotučné
- Tlačidlo čalúnenia: 0,5 em hore, 0,5 em dole, 2 m vľavo, 2 em vpravo
Veľkosť, výplň a lemovanie
Ďalej sa musíme uistiť, že náš modul má určitú výšku, aby sa zobrazil obrázok na pozadí stĺpca za ním.
Za týmto účelom pridáme do modulu vnútorné okraje (Horná a Spodná časť).
Modul tiež pridáme jemné ohraničenie, aby bol trochu oddelený od ostatných obrázkov v rozložení mriežky.
Použite nasledujúce nastavenia:
- Šírka: 100%
- Vnútorná marža (hore a dole): 15vh
- Šírka spodného okraja: 5px
- Šírka ľavého okraja: 5px
- Farba orámovania: rgba (255,255,255,0.5)
POZNÁMKA : Použitím jednotky dĺžky vh na výplň bude hodnota výplne relatívne k výške výrezu prehliadača. Takže vaše prvky mriežky obrázka budú rásť a zmenšovať sa na výšku v pomere k oknu prehliadača.
Vertikálne centrovanie obsahu modulu „Výzva na akciu“.
Aby sa zabezpečilo, že obsah modulu „Action Call“ zostáva vertikálne vycentrovaný, môžeme pridať malý úryvok vlastného CSS pomocou vlastnosti flex.
Na karte Rozšírené pridajte do hlavného prvku nasledujúci CSS:
display:flex;
flex-direction:column;
justify-content:center;
Do ostatných stĺpcov bolo pridané prekrytie s výzvou na akciu
Teraz, keď je prvý modul „Výzva na akciu“ prispôsobený, skopírujte a prilepte modul do ďalších 3 stĺpcov rozloženia vrátane 2 stĺpcov v spodnom riadku a stĺpca 1 v sekcii.
Aby ste zabezpečili, že modul „Call to Action“ pokryje celú výšku stĺpca 1 v špecializovanej časti, nastavte minimálnu výšku na 100 %.
- Minimálna výška: 100 %
Je koniec ! Pozrime sa na konečný výsledok.
Konečný výsledok
Tu je konečný výsledok rozloženia responzívneho rozloženia mriežky obrázkov na webovej stránke s efektmi vznášania.
A takto mriežka reaguje pri úprave veľkosti prehliadača.
Stiahnite si DIVI teraz!!!
záver
Responzívne rozloženia mriežky obrázkov sú naďalej obľúbeným aspektom mnohých webových stránok. Vizuálna príťažlivosť poskytovaná obrázkom na pozadí v kombinácii s prekrytím s výzvou na akciu môže skutočne zobraziť dôležité navigačné odkazy.
Taktiež responzívny charakter rozloženia mriežky obrazu bude vyzerať skvele na všetkých zariadeniach, čo je vždy nutnosťou.
Dúfame, že táto príručka bude pre vás užitočná pri vašich budúcich projektoch tvorby webové stránky. 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 dokončenie projektov tvorby webových stránok.
Môžete tiež postupovať podľa nášho sprievodcu na 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.
...
