+420 736 173 009 info@amcreation.cz
Vyberte stránku

Divi šablona je defaultně nastavena tak, že pokud v rámci sekce vedle sebe vkládáme obsah (obrázky, upoutávky, textová pole, tlačítka, apod.), zarovnává se automaticky nahoru. Někdy je ale potřeba zarovnat obsah na střed. Typickým příkladem je portfolio klientů složené pouze z log (resp. obrázků), kde zarovnání všech položek k hornímu okraji sekce nevypadá zrovna nejlépe. Postupovat budeme následovně:

1. Vytvoříme zelenou sekci a rozdělíme na požadovaný počet sloupců – v našem případě 5. V nastavení této sekce dáme Návrh –> Změny velikosti –> zaškrtneme Vyrovnat výšku sloupců.

2. Naplníme sploupce obsahem – v našem případě jsou to obrázky, které jsou nyní nehezky zarovnány k hornímu okraji.

 

3. Vrátíme se do nastavení zelené sekce a každému sloupci, který chceme vertikálně zarovnat na střed, přidělíme CSS třídu ds-vertical-align.

4. Posledním krokem je trocha práce s CSS. V nastavení Divi šablony napíšeme do boxu přizpůsobení CSS krátký kód:

.ds-vertical-align { 
   display: flex; 
   flex-direction: column; 
   justify-content: center;
}

5. Nyní máme všechny obrázky hezky vertikálně zarovnány na střed:

Takto můžete pracovat s jakýmkoli obsahem v sekci. Stačí je za sebe řadit do sloupců.

Keep up the good work!

Monika

Pomohl Vám článek? Podělte se o něj – sledujte nás,         

sdílejte nás a posouvejte tipy mezi další Divi nadšence.

Sledujících

Pomohl Vám článek? Podělte se o něj – sledujte nássdílejte nás a posouvejte tipy mezi další Divi nadšence.

Sledujících

Pin It on Pinterest