Sådan bruger du Elementor Flexbox Container i 6 enkle trin

Har du prøvet det nye  Elementor Flexbox Container funktion?

Nå, buzzen er, at det er en fantastisk tilføjelse til at gøre dit websted mere optimeret til alle enheder og få dit websted til at indlæses hurtigere.

Hvordan? 

Nå, den nye flex-beholder fungerer på en lidt anden måde (både front-end og backend) end de tidligere sektioner/indre sektion. Og det er disse nye og anderledes måder at arbejde på, der gør magien.

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å læs videre...

Hvad er en Elementor Flexbox Container?

Elementor Flexbox Beholder 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.

Bemærk: CSS flexbox-beholder, som navnet antyder, giver dig avanceret fleksibilitet til at skabe responsivt design. Før introduktionen af flexbox var det temmelig kompliceret at skabe responsivt design ved hjælp af flere layouttilstande som Block, Inline, Table og Position. Men med flexbox-beholdere har du ikke længere brug for flere layouttilstande.

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 tilføjet widgets og beholdere, kan du kontrollere fordelingen af widgets i beholderen sammen med layoutet for hver enhed. Desuden får du separate tilpasningsindstillinger for hver container (selv containere i en container). Dette giver dig den bedste fleksibilitet til at gøre din designenhed responsiv. 

Forskellen mellem nye Elementor Flex-beholdere og 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 mens du med sektioner skal tilføje kolonner og derefter tilføje widgets til det.
• I den flex container, widgetbredden er som standard inline hvorimod, med kolonnesektionsstruktur, er widgetbredden som standard fuld bredde.
• Tidligere kunne du kun tilføje én indre sektion inde i en sektion, men med de nyeste flex containere, kan du tilføje lige så mange containere du vil.
• Med kolonne-sektionsstrukturen kan du ændre widgetretningen ved hjælp af kolonne- eller inline-positionering. Nu med den seneste flex-beholder kan du ændre widgetretningen ved at bruge Kolonne, Række, Omvendt kolonne eller Omvendt række.
• I kolonnesektionsstrukturen blev Reverse Column eller Duplicate Sections brugt til at gøre websider responsive. I den nyeste flex container metode kan du bruge en Tilpasset rækkefølge af widgets eller containere for hver enhed.
• Justeringsmulighederne i sektions-/kolonnestrukturen er Venstre, Center og Højre. På den anden side får du med flexcontainere tilpasningsmuligheder såsom flex-start, flex-center og flex-End.

Nu skal du tænke på, hvordan disse ændringer kan gavne dig. For at lære mere om det, gå til næste afsnit.

Fordele ved at bruge Elementor Flexbox beholder

Der foretages en masse research, før en ny funktion føjes til et plugin for at sikre, at funktionen er nyttig for kunderne. Det samme gælder med Elementor flex-beholderen. Det her Elementor funktion er blevet tilføjet, fordi det vil gavne brugerne i høj grad.

Her er nogle af de fordele, du vil nyde, hvis du bruger Elementor flexbox-beholderen:

• Da sektion og indvendig sektion bliver udskiftet med flexcontainere, kan du bygge mere optimerede hjemmesider.
• 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 til dit WordPress-websted.
• Flexbox-beholderindstillinger giver dig mulighed for det bygge enhedsresponsive websteder med mere fleksibilitet end tidligere.
• Nu kan du hyperlink til et komplet afsnit. Tidligere kunne du kun hyperlink-widgets.
• Hvis du tidligere var utilfreds, fordi du kun kunne tilføje én indre sektion i en sektion, så er flexbeholderen noget for dig. Med flexbeholder kan du tilføje beholdere i beholderen på ubestemt tid.

Sådan bruger du Elementor Flexbox-beholder i 6 trin

Følg nedenstående trin for at lære, hvordan du bruger Elementor Flexbox-beholderen på din hjemmeside for at få et mere optimeret udseende. Processen består af 6 nemme trin:

Trin 1: Aktiver Flexbox Container i Elementor Experiments

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

For det, naviger til Elementor ⇒ Indstillinger fra WordPress-dashboardet. Flyt nu til fanen Eksperimenter og rul ned for at finde muligheden 'Flexbox Container'.

Når du har fundet muligheden choose Active from the dropdown menu to enable flexbox container elementor support on your website. Rul til sidst ned til bunden og klik på "Gem ændringer” for at gemme status.

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 Sider ⇒ Alle sider og så klik på Tilføj ny. Giv nu en titel, og klik på Rediger 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.

Bemærk: Hvis du bemærker strukturen i navigatoren, vil du opdage, at strukturen faktisk er en container, der har andre containere i sig frem for kolonner. Du kan også træk og slip en enkelt beholder fra menuen til venstre. 

Du kan tilpasse mange muligheder for containeren som f.eks

• Beholderbredde: Du kan vælge containerbredde som Boxed eller fuld bredde.
• Bredde: Hvis du vælger Boxed som containerbredde, så vil bredden være 928Px. På den anden side, hvis du vælger Full Width, vil containerbredden være 100% af viewportens bredde. Du kan dog ændre begge breddeværdierne.
• Flyde over: 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 tag: 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.

Bemærk:  Du får også mange muligheder under "Varer" (mere om end senere). Desuden kan du tilpasse alle indstillingerne ovenfor for hver indre beholder såvel.

Step 4: Add Widgets

Processen med at tilføje widgets er den samme som kolonnesektionsstrukturen. Du skal 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:

• Vejbeskrivelse: Standardretningen er række. Du får dog fire muligheder såsom række, kolonne, omvendt række og omvendt kolonne. Hvis du vælger kolonnen eller den omvendte kolonne, vil alle beholderne i hovedbeholderen vises som forskellige Elementor flexbox-kolonner.

Bemærk: Hvis du vælger en kolonne, skal du justere bredden på de indre beholdere.

• Juster beholdere: Du kan indstille justeringen som Flex Start, Center, Flex-end og Scratch. Flex starter placer dit beholderelement fra startpunktett, og med en Flex-centerværdi kan du placere emnerne i midten. På den anden side, med Flex-enden kan du vise alle de indre beholdere på bunden. Og med strækmuligheden vil de indre beholdere optage ekstra plads, hvis de er tildelt. Alle disse vil være gældende, hvis du vælger retning som en række.

På den anden side, hvis du vælger retning som en søjle, så fungerer flex-start- og centerværdierne på samme måde som rækken. Men med flex-ende, vil beholderne blive forskudt til højre og med ridse, vil den optage enhver plads til venstre.

• Begrund indhold:  Du får seks muligheder for at retfærdiggøre indhold: flex start, center, flex ende, mellemrum mellem, mellemrum rundt og mellemrum jævnt. Mellemrum mellem vil tilføje det samme mellemrum mellem hvert af elementerne. Det vil dog ikke tilføje noget mellemrum på toppen eller bunden af emnerne.

Indstillingen mellemrum omkring vil tilføje plads på både toppen og bunden af hver beholder. Og muligheden for jævnt mellemrum tilføjer den samme plads omkring alle widgets og indvendige beholdere.

• Elementgab:  Du kan bruge denne mulighed til at tilføje mellemrum mellem elementer (widgets og indre sektioner).

• Indpakning: Vælg Ingen indpakning at sætte alle elementerne på en enkelt linje og Indpak for at lade indholdet flyde i flere linjer.

Trin 6: Udgiv og forhåndsvisning

Du kan gentage trin 4 for at tilpasse alle dine containerindstillinger. Når du er færdig med tilpasningen, skal du klikke på udgiv-knappen for at udgive siden. Derefter kan du klikke på forhåndsvisningsknappen for at se din side med den nye flex containerstruktur.

How to Convert Section-based Elementor Page to Flexbox Container

Konvertering af sektions-/søjlebaseret struktur til den nye Elementor Flex-beholder er super nemt. Du kan gøre dette ved at følge de 4 enkle trin vist nedenfor:

Step 1: Select the Section you Want to Convert

Du skal konvertere hver sektion separat. Så vælg først den sektion, du vil konvertere. Du kan klik på de seks prikker for at vælge et afsnit eller vælg et afsnit fra navigatoren (du kan finde muligheden i nederste venstre hjørne).

Step 2: Click on Convert to Make the Conversion

Nu for at konvertere, på venstre panel, vil du finde en Konverter til container-indstilling under layoutet. Klik på den KONVERTERE knap.

Step 3: Delete the Previous Section

Når konverteringsprocessen er fuldført, vil du finde to versioner af samme afsnit. En er sektionsbaseret og en anden er containerbaseret. Udgaven øverst er sektionsbaseret. Slet den tidligere/ originale version.

Trin 4: Opdatering og forhåndsvisning

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 opdateringsknap for at gemme. Nu kan du klikke på forhåndsvisningsknappen for at se den samme side, men med et containerlayout.

Kan du oprette vandret og lodret Flexbox-beholder i Elementor?

Ja, Elementor understøtter oprettelse af vandrette og lodrette flexbox-beholdere på mindre end et par sekunder. Du skal blot vælge de seks prikker i Elementor-beholderen og vælge den vandrette eller lodrette retning fra layoutfanen. Således kan du lave din flexbox beholder uden problemer.

Can You Use Elementor Add-on Features with the New Flexbox Container?

Ja. Det kan du absolut. 

Du kan bruge ElementsKit - den ultimative tilføjelse til Elementor for at tilføje yderligere widgets og andre funktioner til Elementor-sidebyggeren. Denne Elementor tilføjelse er 100% kompatibel med den nye Flexbox-beholder fra Elementor.

Du kan bruge den samme proces til at konvertere en hvilken som helst Elementor-sektion til Container-layout (vist i ovenstående afsnit) til at konvertere ElementsKit-sektioner/-sider. 

ElementsKit følger med 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 parallakse to build powerful WordPress websites. You can easily oprette en komplet hjemmeside using the ElementsKit premade template in just a few minutes.

Her er et eksempel, hvor du kan se, hvor smidigt ElementsKit præmade sider bliver konverteret til Elementor Flexbox Container.

Ofte stillede spørgsmål

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.

Afslut

Jeg er sikker på, at du nu indser, hvorfor der er så meget omkring denne nye tilføjelse af Elementor. Elementor Flex-beholderen er virkelig en velsignelse for alle WordPress-webstedsbyggere, der ledte efter måder at lave websteder på mere optimeret, hurtigere og lydhør uanset enhedsstørrelse.

Og prikken over i'et er, at du kan forvandle din tidligere oprettede hjemmeside til en container-baseret optimeret hjemmeside på ingen tid. Flexbeholderen er dog stadig i eksperimentel tilstand. Så det anbefales ikke at bruge det på et live-websted, før det er udgivet som en aktiv funktion

Indtil da er du velkommen til at lege med Elementor flex-beholderen på dit iscenesættelsessted. Og prøv dig frem ElementsKit for at få mere fleksibilitet til at designe et fantastisk udseende websted, der fastholder din kundes opmærksomhed og løfter dit websteds succes.