K

Facebooková stránka  Příjmám zakázky

Divi: Jak na mobilu dát kolonky vedle sebe místo pod sebe

Hedviga Nosáľová | 3. 2. 2020

Divi nemá jednoduché nastavení ikonek, tlačítek, obrázků a dalších modulů pro pohodlné mobilní zobrazení. Ale nevadí, s kousíčkem CSS se to dá napravit.

Nejen, že zobrazení například upoutávek pod sebe na mobilních zařízeních je UX anti-friendly, ale zbytečně roztahují stránku, když to opravdu není nutné. Většina jiných – běžných – šablon (Divi spíše vnímám jako framework, než šablonu) mají tohle nastavení automatické. Jako například Flatsome šablona, se kterou momentálně pracuji na jednom projektu.

Pokud stále nevíte, o čem je řeč, bez CSS vypadá sekce kolonek na mobilu takto:

Tento obrázek nemá vyplněný atribut alt; název souboru je klasicke-blurbs.jpg.

Tohle my ale nechceme. Chceme, aby se na mobilu ikonky zobrazovaly vedle sebe.

Takže z deskopové verze, která vypadá takhle:

Tento obrázek nemá vyplněný atribut alt; název souboru je blurbs-deskop-980x237-1.jpg.

Chceme, aby se ikonky zobrazovaly na mobilu takhle:

Tento obrázek nemá vyplněný atribut alt; název souboru je blurbs-mobil.jpg.

K tomu nám poslouží tohle jednoduché nastavení:

Vytvoříme si upoutávky.
Klikneme na Nastavení řádku (řádek je v Divi označený zeleně).
Půjdeme do Pokročilé
Klikneme na ID a třídy CSS
Do kolonky Třída CSS napíšeme například, jako mám já – dve-kolonky (označila jsem si to takhle, protože mám CSSka na tom webu i na tři kolonky).

Tento obrázek nemá vyplněný atribut alt; název souboru je divi-nastaveni-ikonek.jpg.

Poté ukončíme Visual Builder a půjdeme do Přizpůsobit
Úplně dole máme CSS, kde se nám otevře editor pro vlastní CSSka.
A do něj vložíme následující kód:

Tento obrázek nemá vyplněný atribut alt; název souboru je divi-css-dve-kolonky-vedle-sebe.jpg.

Pokud chcete mít vedle sebe tři kolonky, tak width se změní na 30 %, anebo pokud chcete, aby například prostřední kolonka byla nejširší, vložíte za width například 30 % 40 % 30 %.

Samozřejmě si můžete změnit i max-width. V kódu je 980px, ale můžete si jej změnit na velikost, jakou chcete.

Zde je kód ke zkopírování:

Rubriky v blogu

Vše, co souvisí s podnikáním. Občas sdílím zajimavý příběh a zkušenosti.

Divi využívám pro 99 % projektů mých klientů a mohu ji doporučit každému. Píšu o zajímavých tématech ohledně této šablony.

Články na různá témata týkající se tvorby webu.

Vytvářím si vlastní knihovnu různých kódů, které jsou užitečné pro tvorbu webů.

Novinka

Slevy a akce

Akce a doporučení na hostingy, šablony, pluginy, nástroje, kurzy. Vše, co se podnikatelům hodí.

Novinka

Nástroje

Seznam nástrojů pro podnikání a vzdělávání.

Kvíz

Zjistěte, jaký archetyp podnikatele jste.

Facebook skupiny

Jediná a největší poradna čiště pro Divi na našem území. Jsem moderátorem.

Zajímavé informace ohledně tvorby webu – WordPress, Divi, design.