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

Divi: Jak udělat Swipe kolonek na mobilu

A takhle to vypadá na mobilu:

Divi: Jak udělat Swipe kolonek na mobilu

Jaký je postup?

Vytvořte si běžnou sekci a vytvořte si upoutávky, neboli blurbs.
Jděte do Nastavení Řádku.
Klikněte na Pokročilé.
Klikněte na ID a třídy CSS.
Přiřaďte Třídu CSS – já to mám pojmenované swipe-scrollbar (ani nevím, jak bych to napsala po česky).

Divi: Jak udělat Swipe kolonek na mobilu


Poté jděte ve stejné kartě na Vlastní CSS.
V poli Hlavní prvek klikněte na ikonku mobilu.

Divi: Jak udělat Swipe kolonek na mobilu


Do kolonky Tablet Mobil vložte následující kód: (nepoužíváme <style></style>, ani .id { } , zde to vkládáme v tomto tvaru)

Pamatujte na to, že v grid-template-columns: repeat(6, 70%); si zadáte reálné číslo, podle toho, kolik máte kolonek. Já mám zde 6, tak proto je v kódů šestka. Můžete si upravit i procenta – mě se to nejvíce líbí na 70%. Tento kód nám tedy vytváří přímo funkci swipu.

Pokud vám vadí, jako mě, defaultně vzhlížející scrollbar, pojďme jej upravit. A to následovně:

Teď klikněte na Nastavení stránky.
Klikněte na Pokročilé.
Klikněte na Vlastní CSS.

Divi: Jak udělat Swipe kolonek na mobilu

A tam vložíme následující kód, který si již upravíte podle sebe:

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 na mobilu dát kolonky vedle sebe místo pod sebe

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

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

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: