Chcete vytvořit sekci Reference ve formě mřížky na vaší webové stránce s modulem Testimonial of divi ?
Rozložení mřížky je ideální pro obsah které je třeba držet pohromadě. Ohlasy jsou toho skvělým příkladem. v divi, jsou vytvořeny posudky s novým modulem pro každý posudek. Ale naštěstí je jejich zobrazení v mřížce jednoduché.
V tomto článku uvidíme, jak uspořádat posudky ve formě mřížky s modulem Recenze de divi. Uvidíme dvě různá rozložení, takže si můžete vybrat to, které nejlépe vyhovuje vašim potřebám.
Začněme!
přehled
Zde je přehled toho, co budeme v tomto tutoriálu dělat.
Rozvržení mřížky
Alternativní uspořádání
Návrh prvního layoutu s Divi
Ukážeme podrobnosti obou rozložení, ale druhé rozložení bude používat moduly z prvního.
Vytvořte čáru
Nejprve vytvořte nový řádek a vyberte a 3 sloupcové rozložení.
Poté otevřete parametry linky kliknutím na ikonu ozubeného kola.
Vyberte kartu Design a aktivovat Použijte Custom Gutter Witdh a nastavte ji na 1.
- Použít vlastní šířku okapu: Ano
- Šířka žlabu: 1
Poté přejděte dolů na Vzdálenost a změňte nastavení mezer následovně. Zavřete řádek. Vytvoříme druhou řadu, ale nejprve dokončíme tuto a poté ji naklonujeme.
- Výplň (nahoře a dole): 0 pixelů
Přidejte modul „Posudek“.
Poté přidejte a modul svědectví v levém sloupci.
Nastavení obsahu modulu
Poté přidejte obsah svědectví. To zahrnuje jméno autora, pracovní pozici, název společnosti, obsah těla a fotografie osoby, která podává svědectví.
- Autor: jméno autora
- Pracovní pozice: Pozice ve společnosti
- Společnost: název společnosti
- Obsah těla: posudek
- Obrázek: vybraný obrázek
Parametry návrhu modulu
Poté vyberte kartu Design.
Ikona nabídky
Změňte nastavení ikon. Barva ikony bude také použita pro jméno osoby. Bude to stejné pro všechny moduly.
- Barva ikony nabídky: #fd335a
- Barva pozadí ikony nabídky: #ffffff
Obraz
Poté přejděte dolů na Obraz a změňte následující nastavení:
- Šířka okraje obrázku: 4 pixely
- Barva ohraničení obrázku: #000645
Hlavní text
Poté přejděte dolů na hlavní text a změnit písmo
- Písmo těla: Roboto Mono
Autor textu
Poté přejděte dolů na Autor textu.
- Autor Písmo: Oswald
- Tloušťka písma: Polotučné
- Styl písma: TT
- Barva textu: #fd335a
Poziční text
Poté přejděte dolů na Poziční text (název úlohy) a změňte písmo.
- Písmo pozice: Roboto Mono
Text společnosti
Poté přejděte dolů na Text společnosti a změnit také písmo.
- Písmo společnosti: Roboto Mono
Hranice
Nakonec přejděte dolů na Hranice a upravte ohraničení takto:
- Šířka okraje: 24 pixelů
- Barva ohraničení: #000645
Duplikujte modul Posudek
pak duplikujte modul dvakrát a přetáhněte dva klonované moduly do ostatních sloupců v řádku.
Přizpůsobte si druhý modul Testimonial
Otevřete je nastavení druhého modulu Testimonial a upravit obsah.
Obraz
Poté vyberte kartu Desing a přejděte na Obraz. Změňte barvu ohraničení.
- Barva ohraničení obrázku: #acf8f5
Hranice
Nakonec přejděte dolů na Hranice a změnit barvu.
- Barva ohraničení: #acf8f5
Přizpůsobte modul třetího posudku
Otevřete je nastavení třetího modulu Testimonial a upravit obsah.
Obraz
Poté přejděte na kartu Design, přejděte na Obraz a změnit barvu okraje.
- Barva ohraničení obrázku: #fccaa0
Hranice
Nakonec přejděte dolů na Hranice a změňte barvu ohraničení tak, aby odpovídala ohraničení obrázku. Zavřete nastavení modulu.
- Barva ohraničení: #fccaa0
Duplicitní řádek
pak duplikovat linku kliknutím na možnost duplikace, která se zobrazí, když najedete na čáru. Vzhledem k tomu, že jsme přidali 0px k hornímu a spodnímu odsazení, tento nový řádek se automaticky dotýká řádku nad ním. Každý modul otevřeme ve druhé sekci, abychom změnili jeho obsah a barvy.
Přizpůsobte si čtvrtý modul Testimonial
Otevřete je nastavení druhého modulu Testimonial a upravit obsah.
Obraz
Poté přejděte dolů na Obraz a změňte barvu ohraničení na #6eea9d.
- Barva ohraničení obrázku: #6eea9d
Hranice
Nakonec přejděte dolů na Hranice a změňte barvu ohraničení na #6eea9d, aby odpovídala ohraničení obrázku. Zavřete nastavení modulu.
- Barva ohraničení: #6eea9d
Přizpůsobte si pátý modul Testimonial
Otevřete je nastavení pátého modulu Testimonial a upravit jeho obsah.
Obraz
Poté přejděte dolů na Obraz a změňte barvu ohraničení na #fff67f.
- Barva ohraničení obrázku: #fff67f
Hranice
Nakonec přejděte dolů na Hranice a změňte barvu ohraničení tak, aby odpovídala ohraničení obrázku. Zavřete nastavení modulu.
- Barva ohraničení: #fff67f
Přizpůsobte modul šestého posudku
Nakonec otevřete nastavení šestého modulu Testimonial a nahradit obsah.
Obraz
Poté přejděte dolů na Obraz a změňte barvu ohraničení na #593a94.
- Barva ohraničení obrázku: #593a94
Hranice
Nakonec přejděte dolů na Hranice a změňte barvu tak, aby odpovídala okraji obrázku. Zavřete nastavení modulu.
- Barva ohraničení: #593a94
Výsledek
Zde je výsledek, který zatím máme.
Návrh druhého layoutu s Divi
Mřížka posudků, kterou jsme vytvořili, funguje skvěle, pokud jsou posudky zhruba stejné velikosti.
Co kdybyste měli krátké a dlouhé posudky? Za tímto účelem a Ideální je mřížka s různými velikostmi sloupců. Do velkých sloupců můžeme umístit posudky s nejvíce informacemi.
Pro tento příklad. vytvoříme nové sloupce se stejným nastavením mezer a použijeme stejné posudky jako dříve, ale s různým množstvím textu.
Vytvořte alternativní čáry
Za prvé, přidat řádek do 2 sloupců s sloupec 1/3 doleva a a sloupec 2/3 na pravé straně.
Poté otevřete nastavení linky, přejděte na kartu Design, přejděte na Rozměry a zvolte Použijte vlastní šířku okapu. Změňte šířku okapu na 1.
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
Poté přejděte dolů na Vzdálenost.
- Výplň (nahoře a dole): 0 pixelů
poté, duplikát čára.
Vyberte možnosti, rozložení druhého řádku a vyberte rozložení pomocí Zbývají 2/3 et 1/3 vpravo.
Přidejte čtyři moduly Testimonial
A konečně, vytvořte nebo přetáhněte své moduly Testimonial k linkám. Používáme stejné moduly jako v předchozím příkladu, ale obsah byl změněn tak, aby vytvořil různé velikosti.
Moduly se přizpůsobí šířce svých sloupců jako v předchozím příkladu, ale každý má jinou výšku kvůli obsahu těla. To vytváří nepříjemné rozestupy v mřížce. Naštěstí to jde snadno opravit.
Otevřete nastavení prvního modulu a přejděte na kartu Design. Přejděte na Rozměry a do pole „Výška“ zadejte 100 %.
Toto opakujte pro každý modul .
- Výška: 100 %
Konečné výsledky
Rozvržení mřížky
Zde je pohled na naše rozložení mřížky. To funguje skvěle, pokud jsou posudky stejné velikosti.
Alternativní uspořádání
Zde je alternativní rozložení. Je ideální pro posudky různých velikostí.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Toto je náš pohled na to, jak pomocí modulu vytvořit sekci s posudky ve formátu mřížky Recenze z Divi. Nastavení řádků a modulů Divi dokonale spolupracují a vytvářejí mřížku více řádků a sloupců.
Příklady, které jsme zde ukázali, lze snadno rozšířit a vytvořit tak ještě větší mřížky. Koncepty fungují i s jinými typy modulů Divi.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na 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.
...
