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.

In this blog, you will learn about the new options Elementor Flexbox Container brings to the table to build a responsive website and follow a complete Elementor Flexbox Container tutorial to create modern layouts using flexbox elementor features.

Så fortsätt läsa...

Vad är en Elementor Flexbox-behållare?

Elementor Flexbox Behållare brings all the CSS Flexbox facilities to your Elementor editor and helps users create advanced responsive layouts using a modern flexbox container system. With the new addition, you can easily create advanced layouts to ensure that web pages look great on all devices irrespective of size.

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.

And when it comes to the Elementor flexbox container, you won’t have to use sections anymore. You can add widgets within a container without any section. This nested container Elementor structure gives you more flexibility than traditional sections and columns.

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

Understanding Elementor section vs container layouts is important because containers provide lighter code structure, better responsiveness, and more design flexibility compared to older sections.

. Well, there are quite a few differences. These are some key differences :

• Du kan add widgets to containers with Elementor 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 will reduce the number of Elementor Flexbox columns and inner sections. As a result, less code will be produced in the backend. And less DOM will result in better speed 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

First, you need to enable the Elementor Flexbox Container feature to start using Elementor containers inside the editor.

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 choose Active from the dropdown menu to enable flexbox container elementor support on your website. Till sist, scrolla ner till botten och klicka på "Spara ändringar” för att spara statusen.

Step 2: Create a New Page

After activating the flex container, it’s time to create a new page so you can use this feature. This is the starting point for any beginner following an Elementor container tutorial or learning how to use Elementor’s flexbox containers effectively.

For that, Navigate to Sidor ⇒ Alla sidor och då klicka på Lägg till ny. Ange nu en titel och klicka på Redigera med Elementor.

Step 3: Add a Container

Now, instead of a section, you need to add container layouts using the new Elementor container flexbox system. If you are wondering how to add a container in Elementor, simply click the plus icon and select your preferred structure.

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: You can choose overflow value as Default, hidden, or auto. Advanced users often use Elementor container overflow hidden settings to improve animation and scrolling effects.
• HTML-tagg: You can also create an Elementor container link by assigning clickable HTML tags. You get options such as div, header, footer, main, article, section, etc. There is a new addition of a tag.

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

Step 4: Add Widgets

Processen att lägga till widgetar är densamma som strukturen för kolumnavsnittet. Du behöver search for the widget then and drag widgets directly into the Elementor-widget-container area inside each container. This makes Elementor widget container management easier compared to older section-based layouts.

For example, I am going to add one heading, one video, and one social share icon.

Step 5: Customize Container Contents 

The Flexbox controls are the core of Flexbox WordPress layouts inside Elementor. For this, edit the container. Then, go to Layout on the left panel and expand the Items option. Here are the options you get to play with:

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

How to Convert Section-based Elementor Page to 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:

Step 1: Select the Section you Want to Convert

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

Step 2: Click on Convert to Make the Conversion

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

Step 3: Delete the Previous Section

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

You can repeat steps 1 to step 3 for all the sections of your page. Once you are done with converting all the sections into WordPress Flexbox container layout, click on the 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.

Can You Use Elementor Add-on Features with the New 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 90+ advanced widgets, 20+ modules, and 1,000+ professional templates. It extends the Elementor page builder with multilevel mega menus, custom headers & footers, versatile content elements, and trendy animations like liquid glass eller parallax to build powerful WordPress websites. You can easily skapa en komplett webbplats using the ElementsKit premade template in just a few minutes.

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

Vanliga frågor

What is the difference between flexbox vs grid Elementor layouts?

Flexbox is a one-direction layout that allows you arrange items in a row or column. Whereas, Elementor grid is a two-dimentional layout where you can arrange items both in columns or rows at the same time.

Why Elementor flexbox container not showing?

Elementor flexbox container might not show due to plugin conflict, browser cache, outdated Elementor version, disabled flexbox container, etc. So, if you encounter such error, check and resolve the issue related to it.

How to reduce space between container in Elementor?

You can reduce space between Elementor container by adjusting padding and margin settings. Besides, you can also edit column gaps and container layout controls to reduce space between containers in Elementor.

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.