- Autor: Jarda Majer
- 4 minut čtení
Jak udělat 3 sloupce se smyčkou dotazů v Bricks Builderu
Ukážu vám, jak snadno vytvořit v několika krocích tří sloupcové rozvržení pro smyčku dotazů (Query Loop) v Bricks Builderu. Předvedu různé metody, včetně použití Flexboxu a CSS Gridu, abyste mohli dosáhnout požadovaného designu a funkčnosti.
Úvod
Vytváření více sloupcových rozvržení může být někdy výzvou, zejména pokud nejste vývojář. Tento návod vás provede kroky k vytvoření třísloupcového layoutu pro smyčku dotazů v Bricks Builderu, a to pomocí moderních CSS technik.
Náhled
Základní struktura
Všimněte si, že smyčku dotazu spouštím na prvek div, který je zabalen do nadřazeného kontejneru, kam v případě potřeby přidám většinu kaskádových stylů. Prvky uvnitř prvku div nejsou pro rozvržení relevantní a byly přidány za účelem ukázky.
Flexbox
Od verze 1.5 je Flexbox nativně podporovanou metodou v Bricks Builderu, kterou lze použít bez přidávání dodatečného CSS.
Flexbox funguje skvěle, bude ovšem potřebujete nestavit mezery mezi jednotlivými prvky, na které použijeme funkcí calc(), aby šířka prvků odpovídala požadovaným rozměrům a mezery mezi prvky byly rovnoměrně rozděleny. Pro ukázku jsem použil 2rem pro odsazení mezi sloupce i řádky.
Nastavení kontejneru:
- Nastavíme Flex zabalení: Sbalit CSS
flex-wrap: wrappro zabalení prvků do řádků. - Směr prvků nastavíme skládat na řádek vedle sebe pomocí CSS
flex-direction: row. - Zarovnáme křížovou osu na roztažení v CSS
align-items: stretch, aby prvky div měly stejnou výšku. - Přidáme mezery mezi sloupci i řádky
2 rem. -
Jako volitelné nastavení jsem ve stylech definoval okraje CSS
margin:podle potřeby, abych vytvořil prostor mezi hlavičkou, kontejnerem a patičkou.
Nastavení Div s loopem:
-
Flex roztažení a Flex smrštění v CSS
flex-growaflex-shrinknastavíme na hodnotu 1. -
Hodnoty Flex podklad v CSS
flex-basispro jednotlivé velikosti obrazovek: -
Desktop:
calc(33.333% - calc(calc(2rem * 2) / 3)) -
Tablety:
calc(50% - calc(calc(2rem * 1) / 2)) -
Mobil:
100%
Od verze 1.5 je Flexbox nativně podporovanou metodou v Bricks Builderu, kterou lze použít bez přidávání dodatečného CSS.
Flexbox funguje skvěle, bude ovšem potřebujete nestavit mezery mezi jednotlivými prvky, na které použíjeme funkcí calc(), aby šířka prvků odpovídala požadovaným rozměrům a mezery mezi prvky byly rovnoměrně rozděleny. Pro ukázku jsem použil 2rem pro odsazení mezi sloupce i řádky.
Abyste mohli používat WordPress.org, potřebujete hostingovou službu. Můžete si nastavit vlastní server a nainstalovat WordPress do svého počítače, ale když právě začínáte, je snazší přihlásit se k odběru služby, která již má servery nastavené a připravené hostovat web WordPress. Některé služby jsou zdarma a některé jsou placené; doporučujeme použít placený, protože budou poskytovat kvalitnější služby a funkce.
Nejste si jisti, jaký typ hostingu nebo kterého hostitele zvolit? Úplně rozumíme (a byli jsme tam už dříve, WPExplorer několikrát přepnul hostitele, než našel perfektní řešení). Je třeba vzít v úvahu několik různých typů hostingu, všechny s vlastními klady a zápory. Můžete si přečíst našeho průvodce nejlepším hostingem WordPress nebo se podívat na naši praktickou infografiku představující nejlepší možnosti hostování, které doporučujeme novým uživatelům WordPress.
na sociální sítě
Nevíte si rady? Potřebujete poradit?
Objednejte si WordPress konzultaci online.
Vysvětlím vám na sdílené obrazovce konkrétní postupy a zašlu video záznam.
Konzultace probíhá formou videokonference, zašlete požadavek s jakým tématem potřebujete poradit. Já si vyhradím čas a vysvětlím vám dané téma.
Autor Jarda Majer
Pro své zákazníky připravují kompletní prezentace na míru, nebo jednoduché stánky z dodaných podkladů. Mám za sebou realizaci několika e-shopů.
Obsah článku 4 minut čtení
Jarda Majer, IČ: 74083066
Zapsán v živnostenském rejstříku od roku 2005.
Bankovní spojení: 213751254/0300
Sídlo: Náměstí generála Knopa 1061, 564 01, Žamberk
Kancelář: J. Trnky 68, Frýdek Místek 736 01