Hur man använder Elementor Flexbox Container i 6 enkla steg

Har du provat den nya  Elementor Flexbox Container funktion?

Tja, ryktet är att det är ett bra tillägg för att göra din webbplats mer optimerad för alla enheter och få din webbplats att laddas snabbare.

Hur? 

Tja, den nya flexbehållaren fungerar på ett lite annorlunda sätt (både frontend och backend) än de tidigare sektionerna/innerdelen. Och dessa nya och annorlunda sätt att arbeta är det som gör magin.

I den här bloggen kommer du att lära dig om de nya alternativen Elementor flexbox container ger till bordet för att bygga en webbplats och hur du använder Elementor Flexbox Container i en steg-för-steg-guide.

Så fortsätt läsa...

Vad är en Elementor Flexbox-behållare?

Elementor Flexbox-behållaren tar med alla CSS Flexbox-faciliteter till din Elementor-redigerare. Med det nya tillägget kan du enkelt skapa avancerade layouter för att säkerställa att webbsidor ser bra ut på alla enheter, oavsett storlek.

Notera: CSS flexbox-behållare som namnet antyder ger dig avancerad flexibilitet för att skapa enhetsresponsiv design. Före introduktionen av flexbox var det ganska komplicerat att skapa responsiv design med flera layoutlägen som Block, Inline, Table och Position. Men med flexbox-behållare behöver du inte längre flera layoutlägen.

Och när det kommer till Elementor flexbox-behållaren behöver du inte längre använda sektioner. Du kan lägga till widgets i en behållare utan någon sektion. Du kan också lägga till ett oändligt antal behållare i behållaren.

När du har lagt till widgets och behållare kan du styra fördelningen av widgets i behållaren tillsammans med layouten för varje enhet. Dessutom får du separata anpassningsinställningar för varje behållare (även behållare i en behållare). Detta ger dig den bästa flexibiliteten för att göra din designenhet responsiv. 

Skillnaden mellan nya Elementor Flex-behållare och sektioner

Du måste undra vad som är skillnaderna mellan behållare och sektioner. Tja, det finns en hel del skillnader. Det här är några viktiga skillnader:

• Du kan lägg till widgets i behållare med flexbox medan du med sektioner måste lägga till kolumner och sedan lägga till widgets till den.
• I den flex container, widgetbredden är inline som standard medan, med kolumnsektionsstruktur, widgetbredden är full bredd som standard.
• Tidigare kunde du bara lägga till en inre sektion inuti en sektion, men med de senaste flexcontainrarna kan du lägga till så många containrar du vill.
• Med kolumn-sektionsstrukturen kan du ändra widgetriktningen med kolumn- eller inlinepositionering. Nu med den senaste flexbehållaren kan du ändra widgetriktningen med kolumn, rad, kolumnvänd eller radomvänd.
• I kolumnsektionsstrukturen användes Reverse Column eller Duplicate Sections för att göra webbsidor responsiva. I den senaste flexcontainermetoden kan du använda en Anpassad ordning av widgets eller behållare för varje enhet.
• Justeringsalternativen i sektions-/kolumnstrukturen är Vänster, Mitt och Höger. Å andra sidan, med flexbehållare får du anpassningsalternativ som flex-start, flex-center och flex-End.

Nu måste du tänka på hur dessa förändringar kan gynna dig. För att lära dig mer om det, gå till nästa avsnitt.

Fördelar med att använda Elementor Flexbox-behållare

Mycket forskning görs innan en ny funktion läggs till ett plugin för att säkerställa att funktionen är användbar för kunderna. Detsamma gäller med Elementor flex-behållaren. Detta Elementor funktion har lagts till eftersom det kommer att gynna användarna i stor utsträckning.

Här är några av fördelarna som du kommer att njuta av om du använder Elementor flexbox-behållaren:

• Eftersom sektion och innerdel kommer att ersättas med flexcontainrar kan man bygga mer optimerade webbplatser.
• Flexbox kommer att minska antalet Elementor Flexbox-kolumner och inre sektioner. Som ett resultat kommer mindre kod att produceras i backend. Och jagess DOM kommer att resultera i bättre hastighet för din WordPress-webbplats.
• Flexbox containerinställningar ger dig möjlighet att bygga enhetsresponsiva webbplatser med mer flexibilitet än tidigare.
• Nu kan du hyperlänk ett komplett avsnitt. Tidigare kunde du bara hyperlänka widgets.
• Om du var missnöjd tidigare eftersom du bara kunde lägga till en inre sektion i en sektion, då är flexbehållaren för dig. Med flexbehållare kan du lägg till behållare i behållaren på obestämd tid.

Så här använder du Elementor Flexbox-behållare i 6 steg

Följ stegen nedan för att lära dig hur du använder Elementor Flexbox-behållare på din webbplats för att få ett mer optimerat utseende. Processen består av 6 enkla steg:

Steg 1: Aktivera Flexbox Container i Elementor Experiments

Först behöver du en flexbox-behållarefunktion för att utnyttja flexbox-behållaren i Elementor. För det, navigera till Elementor ⇒ Inställningar från WordPress-instrumentpanelen. Gå nu till fliken Experiment och scrolla ner för att hitta alternativet "Flexbox Container".

När du har hittat alternativet välj Aktiv från rullgardinsmenyn för att aktivera Elementor Flexbox Container. Till sist, scrolla ner till botten och klicka på "Spara ändringar” för att spara statusen.

Steg 2: Skapa en ny sida

Efter att ha aktiverat flexbehållaren är det dags att skapa en ny sida så att du kan använda den här funktionen. För det, Navigera till Sidor ⇒ Alla sidor och då klicka på Lägg till ny. Ange nu en titel och klicka på Redigera med Elementor

Steg 3: Lägg till en behållare

Nu, istället för en sektion, måste du lägga till en behållare. För det,  klicka på ikonen + och välj sedan den struktur du gillar.

Notera: Om du märker strukturen i navigatorn kommer du att upptäcka att strukturen faktiskt är en behållare som har andra behållare i sig snarare än kolumner. Du kan också dra och släpp en enskild behållare från menyn till vänster. 

Du kan anpassa många alternativ för behållaren som t.ex

• Behållarens bredd: Du kan välja containerbredd som Boxed eller full bredd.
• Bredd: Om du väljer Boxed som containerbredd blir bredden 928Px. Å andra sidan, om du väljer Full Width, kommer behållarens bredd att vara 100% av visningsportens bredd. Du kan dock ändra båda breddvärdena.
• Svämma över: Du kan välja överflödesvärde som Standard, dolt eller automatiskt.
• HTML-tagg: Du kan också ändra HTML-taggen för behållaren. Du får alternativ som div, sidhuvud, sidfot, huvud, artikel, avsnitt etc. Det finns ett nytt tillägg av en tagg. På så sätt kan du vända ett ehela behållaren till en länk med en tagg.

Notera:  Du får också många alternativ under "Artiklar" (mer om än senare). Dessutom kan du anpassa alla inställningar ovan för varje inre behållare också.

Steg 4: Lägg till widgets

Processen att lägga till widgetar är densamma som strukturen för kolumnavsnittet. Du behöver sök efter widgeten och dra och släpp på +-ikonen för varje behållare. Till exempel kommer jag att lägga till en rubrik, en video och en social delningsikon.

Steg 5: Anpassa behållarens innehåll 

Nu är det dags att anpassa behållarwidgetarna. För detta, redigera behållaren. Gå sedan till Layout på den vänstra panelen och expandera alternativet Objekt. Här är alternativen du får spela med:

• Vägbeskrivning: Standardriktningen är rad. Du får dock fyra alternativ som rad, kolumn, omvänd rad och omvänd kolumn. Om du väljer kolumn eller omvänd kolumn kommer alla behållare i huvudbehållaren att visas som olika Elementor flexbox-kolumner.

Obs: Om du väljer en kolumn måste du justera bredden på de inre behållarna.

• Justera behållare: Du kan ställa in justeringen som Flex Start, Center, Flex-end och Scratch. Flex startar placera ditt containerelement från startpunktent, och med ett Flex-centervärde kan du placera föremålen i mitten. Å andra sidan, med Flex-änden kan du visa alla innerbehållare på botten. Och med stretchalternativet kommer de inre behållarna att ta upp extra utrymme om de tilldelas. Alla dessa kommer att gälla om du väljer riktning som en rad.

Å andra sidan, om du väljer riktning som en kolumn, då kommer flexstart- och mittvärdena att fungera på samma sätt som raden. Men med flex-end kommer behållarna att flyttas åt höger och med repa, kommer den att ta upp vilket utrymme som helst till vänster.

• Motivera innehåll:  Du får sex alternativ för att motivera innehåll: flex start, center, flex slut, utrymme mellan, utrymme runt och utrymme jämnt. Mellanrum mellan lägger till samma utrymme mellan var och en av objekten. Det kommer dock inte att lägga till något utrymme på toppen eller botten av objekten.

Alternativet utrymme runt kommer att lägga till utrymme på både toppen och botten av varje behållare. Och alternativet för jämnt utrymme kommer att lägga till samma utrymme runt alla widgets och inre behållare.

• Element Gap:  Du kan använda det här alternativet för att lägga till utrymme mellan element (widgets och inre sektioner).

• Slå in: Välj Ingen Wrap att lägga alla objekt på en enda rad och Linda in för att låta innehållet flöda i flera rader.

Steg 6: Publicera och förhandsgranska

Du kan upprepa steg 4 för att anpassa alla dina behållarinställningar. När du är klar med anpassningen klickar du på publicera-knappen för att publicera sidan. Sedan kan du klicka på förhandsgranskningsknappen för att se din sida med den nya flexcontainerstrukturen.

Hur man konverterar sektionsbaserad Elementor-sida till Flexbox Container

Att konvertera sektions-/kolumnbaserad struktur till den nya Elementor Flex-behållaren är superenkelt. Du kan göra detta genom att följa de fyra enkla stegen nedan:

Steg 1: Välj avsnittet du vill konvertera

Du måste konvertera varje avsnitt separat. Så, först, välj avsnittet du vill konvertera. Du kan klicka på de sex prickarna för att välja ett avsnitt eller välj ett avsnitt från navigatorn (du hittar alternativet i det nedre vänstra hörnet).

Steg 2: Klicka på Konvertera för att göra konverteringen

För att nu konvertera, på den vänstra panelen, hittar du en Alternativet Konvertera till behållare under layouten. Klick på KONVERTERA knapp.

Steg 3: Ta bort föregående avsnitt

När konverteringsprocessen är klar hittar du två versioner av samma avsnitt. En är sektionsbaserad och en annan är containerbaserad. Versionen på toppen är sektionsbaserad. Ta bort den tidigare/originalversionen.

Steg 4: Uppdatera och förhandsgranska

Du kan upprepa steg 1 till steg 3 för alla avsnitt på din sida. När du är klar med att konvertera alla sektioner till Flexbox containerlayout, klicka på uppdateringsknappen för att spara. Nu kan du klicka på förhandsgranskningsknappen för att se samma sida men med en containerlayout.

Kan du skapa horisontell och vertikal Flexbox-behållare i Elementor?

Ja, Elementor stöder att skapa horisontella och vertikala flexbox-behållare på mindre än några sekunder. Du behöver bara välja de sex prickarna i Elementor-behållaren och välja den horisontella eller vertikala riktningen från layoutfliken. På så sätt kan du göra din flexbox-behållare utan problem.

Kan jag använda Elementors tilläggsfunktioner med den nya Flexbox Container?

Ja. Det kan du absolut. 

Du kan använda ElementsKit - det ultimata tillägget för Elementor för att lägga till ytterligare widgets och andra funktioner till Elementors sidbyggare. Denna Elementor tillägg är 100% kompatibel med den nya Flexbox-behållaren från Elementor.

Du kan använda samma process för att konvertera alla Elementor-sektioner till Container-layout (visas i avsnittet ovan) för att konvertera ElementsKit-sektioner/-sidor. 

ElementsKit medföljer 500+ färdiga sektioner, 35+ färdiga sidor och 85+ anpassade tillägg funktioner för att göra ditt liv enkelt. Du kan enkelt skapa en komplett webbplats använda ElementsKit Premade-mallen på bara några minuter.

Här är ett exempel där du kan se hur smidigt ElementsKit förgjorda sidor konverteras till Elementor Flexbox Container.

Sammanfatta

Jag är säker på att nu inser du varför det finns så mycket kring detta nya tillägg av Elementor. Elementor Flex-behållaren är verkligen en välsignelse för alla WordPress-webbplatsbyggare som letade efter sätt att skapa webbplatser mer optimerad, snabbare och lyhörd oavsett enhetsstorlek.

Och grädden på moset är att du kan förvandla din tidigare skapade webbplats till en containerbaserad optimerad webbplats på nolltid. Dock är flexbehållaren fortfarande i experimentläget. Så det rekommenderas inte att använda det på en livewebbplats förrän det har publicerats som en aktiv funktion

Tills dess, lek gärna med Elementor flex-behållaren på din iscensättningsplats. Och prova ElementsKit för att få mer flexibilitet att designa en fantastiskt utseende webbplats som håller din kunds uppmärksamhet och höjer din webbplats framgång.