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

404 - Nenalezeno

Nenašli jsme nic, co by odpovídalo vašemu hledání. Zkuste upřesnit hledání nebo využijte hlavní menu k navigaci na webu.

Knihovna kódů

Swipe

Vytvořit upoutávku (blurb) > Row (řádek) ID swipe-scrollbar > vlastní css (hl.prvek): Nastavení stránky > css