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.

I denne blog vil du lære om de nye muligheder Elementor flexbox container bringer til bordet for at bygge en hjemmeside og hvordan du bruger Elementor Flexbox Container i en trin-for-trin guide.

Så læs videre...

Hvad er en Elementor Flexbox Container?

Elementor Flexbox container bringer alle CSS Flexbox faciliteterne til din Elementor editor. Med den nye tilføjelse kan du nemt oprette avancerede layouts for at sikre, at websider ser flotte ud på alle enheder uanset størrelse.

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.

Og når det kommer til Elementor flexbox-beholderen, behøver du ikke længere bruge sektioner. Du kan tilføje widgets i en container uden nogen sektion. Du kan også tilføje et uendeligt antal containere i containeren.

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

Du må undre dig over, hvad forskellene er mellem containere og sektioner. Nå, der er en del forskelle. Dette er nogle vigtige forskelle:

• Du kan tilføje widgets til containere med 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 vil reducere antallet af Elementor Flexbox-søjler og indre sektioner. Som et resultat vil der blive produceret mindre kode i backend. Og less DOM vil resultere i bedre hastighed 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

For det første skal du bruge en flexbox-beholderfunktion for at udnytte flexbox-beholderen i Elementor. 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 vælg Aktiv fra rullemenuen for at aktivere Elementor Flexbox Container. Rul til sidst ned til bunden og klik på "Gem ændringer” for at gemme status.

Trin 2: Opret en ny side

Efter at have aktiveret flex-beholderen, er det tid til at oprette en ny side, så du kan bruge denne funktion. For det, Naviger til Sider ⇒ Alle sider og så klik på Tilføj ny. Giv nu en titel, og klik på Rediger med Elementor

Trin 3: Tilføj en beholder

Nu, i stedet for en sektion, skal du tilføje en beholder. For det,  klik på +-ikonet, og vælg derefter den struktur, du kan lide.

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: Du kan vælge overløbsværdi som standard, skjult eller automatisk.
• HTML tag: Du kan også ændre containerens HTML-tag. Du får muligheder som div, sidehoved, sidefod, hoved, artikel, sektion osv. Der er en ny tilføjelse af et tag. På denne måde kan du dreje et ehele beholderen til et link med et 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.

Trin 4: Tilføj widgets

Processen med at tilføje widgets er den samme som kolonnesektionsstrukturen. Du skal søg efter widgetten og træk og slip på +-ikonet for hver container. For eksempel vil jeg tilføje en overskrift, en video og et socialt delingsikon.

Trin 5: Tilpas beholderens indhold 

Nu er det tid til at tilpasse container-widgets. Til dette skal du redigere beholderen. Gå derefter til Layout i venstre panel og udvid indstillingen Elementer. Her er de muligheder, du kan spille med:

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

Sådan konverteres sektionsbaseret Elementor-side til 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:

Trin 1: Vælg den sektion, du vil konvertere

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

Trin 2: Klik på Konverter for at foretage konverteringen

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

Trin 3: Slet det forrige afsnit

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

Du kan gentage trin 1 til trin 3 for alle sektioner på din side. Når du er færdig med at konvertere alle sektionerne til Flexbox container layout, skal du klikke på 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.

Kan jeg bruge Elementor tilføjelsesfunktioner med den nye 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 500+ Klar-sektioner, 35+ Klar-sider og 85+ Custom Addons funktioner, der gør dit liv nemt. Du kan sagtens oprette en komplet hjemmeside ved at bruge ElementsKit Premade-skabelonen på få minutter.

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

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.