Ste novým v kontajneroch Elementor Flexbox? Takže nová štruktúra rozloženia nástroja na tvorbu stránok môže byť trochu mätúca. Ale máme to, čo potrebujete.

Elementor Flexbox je nový rámec rozloženia, vďaka ktorému je návrh webových stránok jednoduchší a užívateľsky prívetivejší. Kontajnery Flexbox predstavujú prírastkovú aktualizáciu starého rozloženia stĺpcov sekcií, ktoré všetci poznáme.

Hoci rozloženie sekcií a stĺpcov umožnilo praktickosť dizajnu webovej stránky pomocou sekcií, podsekcií a stĺpcov, stále tu chýbala flexibilita, pokiaľ ide o dizajn.

Sekcia v Elementore môže mať iba stĺpce a podsekciu. Čím viac pridáte na stránku, tým pomalšie sa bude váš web načítavať.

Nehovoriac o tom, aké ťažké je s touto starou štruktúrou vytvárať návrhy vhodné pre mobilné zariadenia.

Aj keď rozloženie sekcií a stĺpcov dobre poslúžilo dizajnérom, je čas prejsť na lepší, efektívnejší a flexibilnejší spôsob navrhovania webových stránok pomocou nástroja na tvorbu stránok Elementor.

Ak teda chcete ovládať kontajnery Flexbox, pridajte si tento blog medzi záložky. V tejto príručke Elementor Flexbox vás prevedieme všetkými detailmi tejto novej štruktúry rozloženia.

Tiež pochopíme, ako je to lepšie ako staré rozloženie sekcií a stĺpcov.

---

Obsah

---

Čo je kontajner Elementor Flexbox?

Kontajnery Elementor Flexbox sú implementáciou šablóny CSS Flexbox spoločnosti Elementor v ich nástroji na tvorbu stránok. CSS Flexbox alebo Flexible Box Layout je nové webové rozloženie založené na CSS 3.

Je optimalizovaný pre výkon a odozvu a ponúka rozloženia, ktoré sa prispôsobia rôznym zariadeniam a veľkostiam obrazovky.

Kontajnery Elementor Flexbox, vydané s aktualizáciou Elementor 3.6, vám umožňujú navrhovať webové stránky vhodné pre zariadenia pomocou kontajnerov, ako je Flexbox CSS.

Tieto kontajnery Elementor obsahujú všetky prvky vašej stránky, ako sú text, obrázky, widgety atď. Ale tu je to najlepšie: kontajnery môžete umiestniť do kontajnerov.

Ak ste použili štandardné rozloženie sekcií-stĺpcov, už viete, aké ťažké je pracovať s viacerými rozloženiami.

Hoci dostávame všetky druhy rozložení ako bloky, tabuľky, riadky atď., práca s nimi je náročná a je ťažké zabezpečiť ich odozvu.

Ale s Flexboxom môžete umiestňovať kontajnery do kontajnerov nekonečne. To môže vytvoriť nekonečné možnosti, pokiaľ ide o jedinečné rozloženie a dizajn.

Jednoducho povedané, kontajnery sú vaše nové sekcie, ale sú flexibilné na individuálnej aj globálnej úrovni. Flexibilita sa nachádza takmer v každom aspekte kontajnera, či už ide o zarovnanie, výplň alebo in-line umiestnenie.

Bežné prípady použitia pre kontajnery Flexbox

Tu je niekoľko populárnych prípadov použitia kontajnerov Flexbox:

---

Rozdiel medzi starými sekciami a novými kontajnermi Elementor Flex

Pozrime sa na hlavné rozdiely medzi kontajnerom Elementor a časťou o rôznych nastaveniach.

1. Technický rozdiel

Sekcie elementorov poskytujú štrukturálny rámec na organizovanie prvkov, ako sú widgety, obrázky, text atď. Sekciu môžete rozdeliť na stĺpce a umiestniť do nich prvky webovej stránky.

Naopak, kontajnery Elementor Flexbox ponúkajú flexibilnejší a prispôsobivejší spôsob organizácie prvkov webovej stránky. Kontajner je ako sekcia, ale bez preddefinovanej mriežky.

Namiesto toho máte možnosť umiestniť kontajnery do kontajnera.

Okrem toho majú widgety v sekciách celú šírku, zatiaľ čo v kontajneroch sú predvolene vložené. Preto môžete do nadradeného kontajnera umiestniť toľko prvkov, koľko chcete.

A keď pridáte ďalšie prvky, zarovnanie, umiestnenie a veľkosť kontajnera sa automaticky zmenia, aby sa im prispôsobili.

2. Vizuálny rozdiel

Ďalším krokom k rozdielu medzi kontajnerom Elementor a sekciou sú vizuálne zmeny.

Tvorca stránok Elementor s kontajnermi Flexbox si zachováva klasické používateľské rozhranie na tvorbu stránok. Existuje však niekoľko pozoruhodných zmien.

Stále máte panel na ľavej strane, kde máte prístup ku všetkým svojim widgetom, prvkom a nastaveniam. Prehliadač však teraz zobrazuje kontajnery a prvky pod nimi namiesto rozdelenia a sekcií.

Vždy môžete kliknúť na ikonu + alebo presuňte prvky a pridajte ich na svoju webovú stránku. Jediný rozdiel je v tom, že namiesto sekcií a počtu stĺpcov musíte zvoliť kontajner a smer.

Okrem toho získate aj nové možnosti zamerané na kontajner, ako je smer, zarovnanie, zarovnanie, medzera medzi prvkami, deformácia atď.

3. Výkonnostný rozdiel

Rozdiel vo výkone medzi kontajnermi Flexbox a rozložením stĺpcov sekcií je obrovský, najmä ak je dizajn vašej webovej lokality plný zložitých rozložení a podsekcií.

Určite ste si všimli, že tradičné sekcie Elementor majú vlastnosť zobrazenia nastavenú ako „ blok ". Preto, keď pridáte novú sekciu alebo miniaplikáciu, naukladajú sa na seba.

Ak ich chcete zobraziť vedľa seba, musíte vytvoriť viacero rozdelení a DOM, čo spomaľuje váš konečný web.

Na druhej strane kontajnery Flexbox používajú vlastnosť zobrazenia s názvom " flex“, ako vo flexibilnom. Takže keď pridáte nové komponenty do kontajnera, môžete ich stohovať vertikálne alebo umiestniť vedľa seba horizontálne.

Preto nie je potrebné vytvárať ďalšie delenia. Týmto spôsobom zostáva kód webovej stránky ľahko vykonateľný, čo výrazne znižuje časy načítania.

---

Výhody používania kontajnerov Elementor Flexbox

Existuje niekoľko výhod používania kontajnerov Flexbox oproti tradičným blokom pre návrh webových stránok. Niektoré z hlavných výhod sú:

---

Ako používať kontajnery Elementor Flexbox (krok za krokom)

Skúsenosti s tvorcom stránok Elementor Flexbox sú podobné štandardnému tvorcu blokov Elementor. Či už ste v Elementore úplne nováčik alebo prechádzate zo starého tvorcu, nebudete mať problém si naň zvyknúť.

Môžete mať na mysli rôzne otázky, ako napríklad: „Ako povoliť/povoliť kontajner v Elementore? Ako používať kontajnery v Elementore? Ako pridať kontajner v Elementore? » Táto časť vám pomôže na ne odpovedať.

Aby sme vám pomohli začať, tu sú kroky na použitie kontajnerov Flexbox na návrh webovej lokality:

Krok 1. Povoľte Flexbox v nastaveniach Elementor

Prvým krokom k používaniu Flexbox v Elementore je aktivácia Flexboxu. Takže prejdite na nastavenia Elementor z hlavného panela WordPress. Ďalej kliknite na kartu Skúsenosti, prejdite nadol, nájdite kontajner Flexbox a z rozbaľovacej ponuky vyberte možnosť Aktívne. Nakoniec uložte zmeny a prejdite na ďalší krok.

Poznámka: Na nových webových stránkach je kontajner Flexbox štandardne aktívny.

Krok 2. Vytvorte novú webovú stránku

Teraz musíme vytvoriť novú stránku ako zvyčajne. Prejdite do sekcie Stránky, vyberte Všetky strany a kliknite Pridajte stránku.

Krok 3. Otvorte Elementor

Teraz budete mať na obrazovke okno na tvorbu stránok WordPress. Pomenujte túto novú stránku a kliknite na ňu Upravte pomocou funkcie Elementor na prístup k kontajnerom Flexbox.

Krok 4. Pridajte nový kontajner

Na obrazovke sa zobrazí známe používateľské rozhranie tvorcu stránok Elementor. Okrem toho môžete presunúť kontajner z bočného panela a pridať nový kontajner alebo kliknúť na ikonu + a vyberte požadovanú štruktúru.

Krok 5. Upravte štýl nádoby

Po pridaní kontajnera získate prístup k mnohým možnostiam prispôsobenia. Môžete zmeniť možnosti, ako je typ kontajnera, šírka, výška, smer, zarovnanie atď.

Krok 6. Presuňte widgety do kontajnerov

Pridávanie miniaplikácií do kontajnerov je tiež jednoduché. Jednoducho vyberte požadovanú miniaplikáciu na karte Prvky a potom ju presuňte na ikonu + v kontajneri.

Krok 7. Prispôsobenie miniaplikácií

Podobne ako globálne nastavenia kontajnera môžete prispôsobiť aj obsah kontajnera. Môžete prispôsobiť možnosti, ako je smer, zarovnanie, zarovnanie, medzera, zalomenie atď.

Krok 8. Zverejnite svoju prvú webovú stránku Flexbox

Môžete vytvoriť veľa kontajnerov, duplikovať ich a vymeniť ich umiestnenie. Opakujte kroky pri pridávaní ďalších položiek a po dokončení kliknite na tlačidlo publikovať umiestniť svoju webovú stránku online. Môžete tiež kliknúť na tlačidlo Ukážka a interagovať s vašou novou webovou stránkou Flexbox.

---

Ako previesť stránku Elementor založenú na sekciách na kontajner Flexbox?

Sekciu-stĺpovú štruktúru môžete jednoducho premeniť na kontajner Flexbox. Postupujte podľa týchto jednoduchých krokov:

Krok 1. Vyberte sekciu

Kliknutím na šesť bodiek v hornej časti sekcie vyberte sekciu, ktorú chcete previesť na kontajner. Prípadne si môžete vybrať sekciu aj vo vyskakovacom okne Elementor Navigator.

Krok 2. Konvertujte sekciu na kontajner

Po výbere sekcie sa na karte Rozloženie zobrazí tlačidlo KONVERTOVAŤ. Kliknutím na ňu prevediete sekciu na kontajner.

Krok 3. Aktualizujte rozloženie

Po dokončení konverzie uvidíte dve samostatné verzie vybranej sekcie. Horná časť je pôvodná, zatiaľ čo spodná časť je nový kontajner. Odstráňte pôvodnú sekciu a kliknutím na tlačidlo Aktualizovať uložte rozloženie.

Opakujte kroky pre každú sekciu, ktorú plánujete previesť na kontajner.

---

Môžem kombinovať doplnky Elementor s novým kontajnerom flexbox?

Áno, doplnky Elementor môžete kombinovať s kontajnermi Flexbox. Nie je potrebné žiadne riešenie, pretože kontajnery Flexbox sa hladko integrujú s doplnkami a doplnkami tretích strán.

V skutočnosti sú doplnky potrebné na povolenie pokročilých funkcií a možností prispôsobenia v nástroji na tvorbu stránok Elementor. Môžete nainštalovať

---

zdroje príbuzný

• Ako používať globálne písma v Elementore
• Ako vytvoriť plávajúce tlačidlo pomocou indexu Elementor Z
• Ako vytvoriť stránku 404 v Elementore
• Ako vytvoriť obrázkový akordeón pomocou JetTabs v Elementore
• Ako vytvoriť ponuku na celú obrazovku v Elementore 

záver

Kontajner Flexbox od Elementor je výkonný nástroj, ktorý mení spôsob, akým navrhujete a štruktúrujete svoje webové stránky. Vďaka flexibilným funkciám môžete spravovať zarovnanie, distribúciu aorganizácie vašich prvkov s výnimočnou presnosťou. Či už chcete vytvárať zložité rozloženia alebo jednoducho zlepšiť odozvu svojich návrhov, Flexbox ponúka elegantné a intuitívne riešenie.

Pomocou kontajnera Flexbox máte prístup k celému radu ovládacích prvkov, ktoré uľahčujú správu priestorov a zarovnaní a zároveň zjednodušujú úpravy potrebné na bezproblémovú prezentáciu na všetkých zariadeniach. Táto úroveň prispôsobenia nielen zlepšuje používateľskú skúsenosť, ale tiež optimalizuje proces návrhu tým, že robí vaše stránky dynamickejšími a prispôsobivejšími.

Neváhajte a preskúmajte rôzne možnosti, ktoré ponúka Flexbox, aby ste zistili, ako môžu obohatiť vaše projekty Elementor. So správnym použitím týchto nástrojov môžete vytvárať hladké a profesionálne rozloženia, ktoré upútajú a zaujmú vašich návštevníkov. Pokračujte v experimentovaní a využívajte možnosti, ktoré ponúka Elementor, aby ste zo svojich webových návrhov vyťažili maximum.

Takže ! Práve sme vám ukázali, ako používať kontajner Elementor Flexbox. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

---

často kladené otázky