Chceli by ste vytvoriť sekciu Referencie vo forme mriežky na vašej webovej stránke s modulom Testimonial of divi ?
Rozloženie mriežky je ideálne pre obsah ktoré treba držať spolu. Svedectvá sú toho skvelým príkladom. In divi, sú vytvorené posudky s novým modulom pre každý posudok. Ale našťastie ich zobrazenie v mriežke je jednoduché.
V tomto článku uvidíme, ako usporiadať posudky vo forme mriežky s modulom Recenzie de divi. Uvidíme dve rôzne rozloženia, takže si môžete vybrať to, ktoré najlepšie vyhovuje vašim potrebám.
Začnime!
prehľad
Tu je prehľad toho, čo budeme robiť v tomto návode.
Rozloženie mriežky
Alternatívne usporiadanie
Návrh prvého layoutu s Divi
Ukážeme detaily oboch rozložení, ale druhé rozloženie bude využívať moduly z prvého.
Vytvorte čiaru
Najprv vytvorte nový riadok a vyberte a 3 stĺpcové rozloženie.
Potom otvorte parametre linky kliknutím na ikonu ozubeného kolieska.
Vyberte kartu dizajn a aktivovať Použite Custom Gutter Witdh a nastavte ho na 1.
- Použiť vlastnú šírku odkvapu: Áno
- Šírka odkvapu: 1
Potom prejdite nadol na riadkovanie a zmeňte nastavenia rozstupov nasledovne. Zatvorte riadok. Vytvoríme druhý rad, ale najprv dokončíme tento a potom ho naklonujeme.
- Výplň (horná a dolná časť): 0 pixelov
Pridajte modul „Posudok“.
Potom pridajte a modul posudkov v ľavom stĺpci.
Nastavenia obsahu modulu
Potom pridajte obsah svedectva. To zahŕňa meno autora, pracovnú pozíciu, názov spoločnosti, obsah tela a fotografiu osoby, ktorá vypovedala.
- Autor: meno autora
- Pracovná pozícia: Pozícia v spoločnosti
- Spoločnosť: názov spoločnosti
- Obsah tela: svedectvo
- Obrázok: vybratý obrázok
Parametre konštrukcie modulu
Potom vyberte kartu dizajn.
Ikona ponuky
Zmeňte nastavenia ikon. Farba ikony sa použije aj pre meno osoby. Bude to rovnaké pre všetky moduly.
- Farba ikony ponuky: #fd335a
- Farba pozadia ikony ponuky: #ffffff
Obraz
Potom prejdite nadol na Obraz a zmeňte nasledujúce nastavenia:
- Šírka okraja obrázka: 4 pixely
- Farba okraja obrázka: #000645
BodyText
Potom prejdite nadol na text tela a zmeniť písmo
- Písmo tela: Roboto Mono
AutorText
Potom prejdite nadol na AutorText.
- Autor Písmo: Oswald
- Hmotnosť písma: polotučné
- Štýl písma: TT
- Farba textu: #fd335a
Text pozície
Potom prejdite nadol na Text pozície (názov úlohy) a zmeňte písmo.
- Písmo pozície: Roboto Mono
Text spoločnosti
Potom prejdite nadol na Text spoločnosti a zmeniť aj písmo.
- Písmo spoločnosti: Roboto Mono
Hranice
Nakoniec prejdite nadol na Hranice a upravte hranicu takto:
- Šírka okraja: 24 pixelov
- Farba orámovania: #000645
Duplikujte modul Posudok
potom duplikujte modul dvakrát a potiahnite dva klonované moduly do iných stĺpcov v riadku.
Prispôsobte si druhý modul Testimonial
Otvorte ich nastavenie druhého modulu Testimonial a upravte obsah.
Obraz
Potom vyberte kartu desing a prejdite na Obraz. Zmeňte farbu okraja.
- Farba okraja obrázka: #acf8f5
Hranice
Nakoniec prejdite nadol na Hranice a zmeniť farbu.
- Farba orámovania: #acf8f5
Prispôsobte si modul tretieho posudku
Otvorte ich nastavenie tretieho modulu Posudok a upravte obsah.
Obraz
Potom prejdite na kartu dizajn, prejdite na Obraz a zmeniť farbu okraja.
- Farba orámovania obrázka: #fccaa0
Hranice
Nakoniec prejdite nadol na Hranice a zmeňte farbu okraja tak, aby zodpovedala okraju obrázka. Zatvorte nastavenia modulu.
- Farba orámovania: #fccaa0
Duplicitný riadok
potom duplikovať čiaru kliknutím na možnosť duplikovať, ktorá sa zobrazí, keď umiestnite kurzor myši na čiaru. Keďže sme pridali 0px do horného a spodného odloženia, tento nový riadok sa automaticky dotýka riadku nad ním. Každý modul otvoríme v druhej časti, aby sme zmenili jeho obsah a farby.
Prispôsobte si štvrtý modul Testimonial
Otvorte ich nastavenie druhého modulu Testimonial a upravte obsah.
Obraz
Potom prejdite nadol na Obraz a zmeňte farbu okraja na #6eea9d.
- Farba okraja obrázka: #6eea9d
hraničné
Nakoniec prejdite nadol na Hranice a zmeňte farbu okraja na #6eea9d, aby zodpovedala okraju obrázka. Zatvorte nastavenia modulu.
- Farba orámovania: #6eea9d
Prispôsobte si piaty modul Testimonial
Otvorte ich nastavenie piateho modulu Posudok a upraviť jeho obsah.
Obraz
Potom prejdite nadol na Obraz a zmeňte farbu okraja na #fff67f.
- Farba okraja obrázka: #fff67f
Hranice
Nakoniec prejdite nadol na Hranice a zmeňte farbu okraja tak, aby zodpovedala okraju obrázka. Zatvorte nastavenia modulu.
- Farba orámovania: #fff67f
Prispôsobte modul Šiesteho posudku
Nakoniec otvorte nastavenie šiesteho modulu Testimonial a nahradiť obsah.
Obraz
Potom prejdite nadol na Obraz a zmeňte farbu okraja na #593a94.
- Farba orámovania: #593a94
Hranice
Nakoniec prejdite nadol na Hranice a zmeňte farbu tak, aby zodpovedala okraju obrázka. Zatvorte nastavenia modulu.
- Farba orámovania: #593a94
výsledok
Tu je výsledok, ktorý zatiaľ máme.
Návrh druhého layoutu s Divi
Mriežka posudkov, ktorú sme vytvorili, funguje skvele, ak majú posudky približne rovnakú veľkosť.
Čo keby ste mali krátke a dlhé posudky? Na tento účel a ideálna je mriežka s rôznymi veľkosťami stĺpikov. Do veľkých stĺpcov môžeme umiestniť posudky s najväčším množstvom informácií.
Pre tento príklad. vytvoríme nové stĺpce s rovnakým nastavením medzier a použijeme rovnaké referencie ako predtým, ale s rôznym množstvom textu.
Vytvorte alternatívne čiary
Po prvé, pridajte riadok do 2 stĺpcov s stĺpec 1/3 doľava a a stĺpec 2/3 napravo.
Potom otvorte nastavenia linky, prejdite na kartu dizajn, prejdite na Dimenzovanie a vyberte položku Použiť vlastnú šírku odkvapu. Zmeňte šírku odkvapu na 1.
- Použiť vlastnú šírku odkvapu: ÁNO
- Šírka odkvapu: 1
Potom prejdite nadol na riadkovanie.
- Výplň (horná a dolná časť): 0 pixelov
potom, duplikát riadok.
Vyberte možnosti rozloženie druhého riadku a vyberte rozloženie pomocou Zostávajú 2/3 et 1/3 vpravo.
Pridajte štyri moduly posudkov
Enfin, vytvorte alebo presuňte svoje moduly Testimonial k čiaram. Používame rovnaké moduly ako v predchádzajúcom príklade, ale obsah bol zmenený, aby sa vytvorili rôzne veľkosti.
Moduly sa prispôsobujú šírke svojich stĺpcov ako v predchádzajúcom príklade, ale každý má inú výšku kvôli obsahu tela. To vytvára nepohodlné medzery v mriežke. Našťastie sa to dá ľahko opraviť.
Otvorte nastavenia prvého modulu a prejdite na kartu dizajn. Prejdite na Dimenzovanie a do poľa „Výška“ zadajte 100 %.
Opakujte to pre každý modul .
- výška: 100%
Konečné výsledky
Rozloženie mriežky
Tu je pohľad na naše rozloženie mriežky. Funguje to skvele, ak sú posudky rovnakej veľkosti.
Alternatívne usporiadanie
Tu je alternatívne rozloženie. Je ideálny pre posudky rôznych veľkostí.
Stiahnite si DIVI teraz!!!
záver
Toto je náš pohľad na to, ako pomocou modulu vytvoriť sekciu posudkov vo formáte mriežky Recenzie z Divi. Nastavenia riadkov a modulov Divi dokonale spolupracujú a vytvárajú mriežku viacerých riadkov a stĺpcov.
Príklady, ktoré sme tu uviedli, možno jednoducho rozšíriť a vytvoriť tak ešte väčšie mriežky. Koncepty fungujú aj s inými typmi modulov Divi.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj 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.
...
