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í:

Další články

Jak probíhá spolupráce a proč je poptávkový dotazník důležitý?

Jak probíhá spolupráce a proč je poptávkový dotazník důležitý?

Popis spolupráce v krocích Prvním krokem je vyplnění poptávky. Na jejím základě vám napíši cenovou kalkulaci a technické možnosti. V případě, že potřebuji více informací, nebo něco dovysvětlit, spojíme se telefonicky / e-mailem. Po odsouhlasení kalkulace (a zároveň...

Divi: ultimátní návod na optimalizaci rychlosti

Divi: ultimátní návod na optimalizaci rychlosti

uptade 24.04.2020 Dlouho očekávaný článek o optimalizaci rychlosti Divi je tady. Ve skupině jsem to několikrát naznačila, že se tento článek rýsuje, ale protože je mnoho práce, nestíhám vydávat články tak pravidelně, jak bych chtěla. Ale konečně je to venku a doufám,...

Elegant Themes slaví 12 let a rozdává 20% slevy na nákup Divi theme

Elegant Themes slaví 12 let a rozdává 20% slevy na nákup Divi theme

Z malých vývojářů šablon, Elegant Themes, se za 12 let působnosti stali špičky a mohou se pochlubit s více než půl milionem zákazníků. Oproti jiným šablonám z Themeforest je to obrovské číslo. Kdo ještě neví, co je to Divi? Divi je tolik milovaný nebo nenáviděný...

Divi: Video návod na vlastní fullwidth menu

Divi: Video návod na vlastní fullwidth menu

Ve skupince jsem to slíbila již před pár týdny (?). Tak zde je slibovaný návod, jak si udělat vlastní menu na plnou šířku. Protože mi video nahrálo jenom jeden list a na konci videa jsem chtěla ukázat, jak to ve výsledku vypadá, mám ty videa dvě. Použila jsem video,...

Divi: Jak udělat Swipe kolonek na mobilu

Divi: Jak udělat Swipe kolonek na mobilu

Miluju swipe scrollbar. Pokud máte totiž více než 4 kolonky, ušetří to nemalé místo na mobilních zařízeních. Je to uživatelsky přívětivé a o to jde. Takže, prvně ukázka toho, co to je swipe: Na deskopu to vypadá běžně: A takhle to vypadá na mobilu: Jaký je postup?...

6 + 12 pluginů pro WordPress, které používám a doporučuji

6 + 12 pluginů pro WordPress, které používám a doporučuji

Pluginy jsou malé programy, které doplňují funkcionalitu WordPressu. WordPress je open-source systém a ve spojení s jeho obrovskou popularitou vznikly a pořád vznikají nové pluginy od vývojářů z celého světa. V tomto příspěvku bych se ráda věnovala tomu, jaké pluginy...

Rychlý tip: Buďte vždy majiteli domény a hostingu!

Rychlý tip: Buďte vždy majiteli domény a hostingu!

Ač za pár měsíců tady máme rok 2020, přesto některé agentury pořád žijí v roce 2000 a nabízí služby, které se mi nezdají moc legitimní. O čem mluvím? Sama bych tomu nevěřila, kdyby za mnou nechodili klienti s dotazem, jak by tohle měli vyřešit. Agentura, která jim...

Divi: Jak udělat text s gradientem bez pluginů a kódů? (Video)

Divi: Jak udělat text s gradientem bez pluginů a kódů? (Video)

Gradient, nebo-li volný přechod barev, je velmi trendy záležitost. Velký nešvar Divi komunity a celkově Divi “webdesignerů” je, že používají pluginy na každou hovadinu. Kde je poptávka, je i nabídka… Kdo mě zná ví, že nejsem příznivcem “pluginů na všechno”. Ale o tom...

Knihovna kódů

ssl .htaccess

# BEGIN FORCE REDIRECT TO HTTPSRewriteEngine OnRewriteCond %{ENV:HTTPS} !^.*onRewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]# END FORCE REDIRECT TO HTTPS

Odhalení sekce na klik

(odhalení přes obsah > dát pozici absolute) <body> Text (nebo jiný modul) ID "show-contact"Další modul ve stejné row "contact-form-module"CSS > display: none;Další modul kód: