info@amcreation.cz

+ 420 774 941 211

info@amcreation.cz

+420 774 941 211

Jak vertikálně zarovnat obsah ve sloupcích | Divi

od | CSS, Divi, Rady a tipy, Wordpress

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ů.

  • Facebook
  • Pinterest

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

  • Facebook
  • Pinterest

 

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:

  • Facebook
  • Pinterest

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ší nadšence!

Follows

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

Follows

2 Komentáře

  1. Ivo Heger

    Dobrý den, jak postupovat v případě, že mám jinou šablonu a pouze DIVI vuilder, prosím?

    Odpovědět
    • Monika

      Dobrý den, pane Hegere,

      v tomto případě by to mělo být takto:
      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. U každého sloupce zvlášť vložíme CSS (Main element):
      display: flex;
      flex-direction: column;
      justify-content: center;

      Zkuste a dejte vědět, zda se vám povedlo 🙂
      Monika

      Odpovědět

Přidat komentář

Vaše e-mailová adresa nebude zveřejněna.

Pin It on Pinterest