Sådan bruger du Elementor Flexbox Container [Begyndervejledning]

Er du ny til Elementor Flexbox containere? Så den nye sidebyggerlayoutstruktur kan være lidt forvirrende. Men vi har hvad du skal bruge.

Elementor Flexbox er den nye layoutramme, der gør hjemmesidedesign nemmere og mere brugervenligt. Flexbox-containere markerer en trinvis opdatering af det gamle sektionskolonnelayout, som vi alle kender.

Selvom sektion-kolonne layoutet gjorde hjemmesidedesign praktisk ved at bruge sektioner, underafsnit og kolonner, manglede der stadig fleksibilitet med hensyn til design.

En sektion i Elementor kan kun have kolonner og en undersektion. Jo mere du tilføjer til en side, jo langsommere vil din hjemmeside indlæses.

For slet ikke at tale om, hvor svært det er at skabe mobilvenlige designs med denne gamle struktur.

Selvom sektionen og kolonnelayoutet har tjent designere godt, er det tid til at gå over til en bedre, mere effektiv og mere fleksibel måde at designe websteder på ved hjælp af Elementor-sidebyggeren.

Så hvis du vil mestre Flexbox-containere, skal du bogmærke denne blog. I denne Elementor Flexbox guide vil vi lede dig gennem alle detaljerne i denne nye layoutstruktur.

Vi vil også forstå, hvordan det er bedre end det gamle sektion-søjlelayout.

---

Indholdsfortegnelse

---

Hvad er en Elementor Flexbox-beholder?

Elementor Flexbox-containere er Elementors implementering af Flexbox CSS-skabelonen i deres sidebygger. CSS Flexbox eller Flexible Box Layout er et nyt weblayout drevet af CSS 3.

Den er optimeret til ydeevne og lydhørhed og tilbyder layouter, der tilpasser sig forskellige enheder og skærmstørrelser.

Udgivet med Elementor 3.6-opdateringen giver Elementor Flexbox Containers dig mulighed for at designe enhedsvenlige websider ved hjælp af containere som Flexbox CSS.

Disse Elementor-containere indeholder alle elementerne på din side, såsom tekst, billeder, widgets osv. Men her er den bedste del: du kan placere beholdere i beholdere.

Hvis du har brugt standard sektions-kolonner-layoutet, ved du allerede, hvor svært det er at arbejde med flere layouts.

Selvom vi får alle slags layouts som blokke, tabeller, inlines osv., er det besværligt at arbejde med dem, og det er svært at sikre deres lydhørhed.

Men med Flexbox kan du placere beholdere i beholdere i det uendelige. Dette kan skabe uendelige muligheder, når det kommer til unikke layouts og designs.

Kort sagt er containere dine nye sektioner, men de er fleksible på både individuelt og globalt plan. Fleksibilitet findes i næsten alle aspekter af en container, uanset om det er justering, polstring eller in-line positionering.

Almindelige brugssager til Flexbox-beholdere

Her er nogle populære anvendelsestilfælde til Flexbox-beholdere:

---

Forskellen mellem gamle sektioner og nye Elementor Flex beholdere

Lad os se de vigtigste forskelle mellem Elementor-beholderen og afsnittet om forskellige indstillinger.

1. Teknisk forskel

Elementor-sektioner giver en strukturel ramme til at organisere elementer som widgets, billeder, tekst osv. Du kan opdele et afsnit i kolonner og placere websideelementer i dem.

Tværtimod tilbyder Elementor Flexbox-containere en mere fleksibel og adaptiv måde at organisere websideelementer på. En beholder er som en sektion, men uden et foruddefineret gitter.

I stedet har du mulighed for at placere containere i en container.

Derudover har widgets i sektioner fuld bredde, mens de i containere er inline som standard. Derfor kan du placere så mange elementer, du vil, i en forældrebeholder.

Og efterhånden som du tilføjer flere elementer, ændres beholderens justering, placering og størrelse automatisk for at imødekomme dem.

2. Visuel forskel

Det næste trin i forskellen mellem Elementor-beholder og sektion er de visuelle ændringer.

Elementor sidebygger med Flexbox-containere bevarer den klassiske sidebygger-brugergrænseflade. Men der er nogle bemærkelsesværdige ændringer.

Du har stadig dashboardet i venstre side, hvor du kan få adgang til alle dine widgets, elementer og indstillinger. Men browseren viser nu containere og elementer nedenunder i stedet for opdelinger og sektioner.

Du kan altid klikke på ikonet + eller træk og slip elementer for at tilføje dem til din webside. Den eneste forskel er, at du skal vælge en beholder og retning i stedet for sektioner og antal kolonner.

Derudover har du også nye containercentrerede muligheder såsom retning, justering, justering, elementmellemrum, deformation osv. ...

3. Ydelsesforskel

Ydeevneforskellen mellem Flexbox-containere og sektionskolonnelayout er enorm, især hvis dit webstedsdesign er fyldt med komplekse layouts og underafsnit.

Du må have bemærket, at Elementor traditionelle sektioner har en visningsegenskab sat som " bloc ". Derfor, når du tilføjer en ny sektion eller widget, stables de oven på hinanden.

Hvis du vil vise dem side om side, skal du oprette flere opdelinger og DOM'er, hvilket gør din endelige hjemmeside langsommere.

På den anden side bruger Flexbox-containere en visningsegenskab kaldet " flex", som i fleksibel. Så når du tilføjer nye komponenter til en beholder, kan du stable dem lodret eller placere dem side om side vandret.

Derfor er der ikke behov for at oprette yderligere opdelinger. På denne måde forbliver websidekoden nem at udføre, hvilket reducerer indlæsningstiden markant.

---

Fordele ved at bruge Elementor Flexbox-beholdere

Der er flere fordele ved at bruge Flexbox-beholdere frem for traditionelle blokke til hjemmesidedesign. Nogle af de vigtigste fordele er:

---

Sådan bruger du Elementor Flexbox-beholdere (trin for trin)

Elementor Flexbox-sidebyggeroplevelsen ligner den standard Elementor-blokbygger. Så uanset om du er helt ny til Elementor eller skifter fra den gamle builder, har du ingen problemer med at vænne dig til det.

Du har måske forskellige spørgsmål i tankerne, såsom: "Hvordan aktiverer/aktiverer jeg containeren i Elementor? Hvordan bruger jeg containere i Elementor? Hvordan tilføjer jeg en container i Elementor?" Dette afsnit vil hjælpe dig med at besvare dem.

For at hjælpe dig i gang er her trinene til at bruge Flexbox-beholdere til at designe et websted:

Trin 1. Aktiver Flexbox i Elementor-indstillinger

Det første skridt til at bruge Flexbox i Elementor er at aktivere Flexbox. Så gå over til Elementor-indstillinger fra WordPress-dashboardet. Klik derefter på fanen Oplevelse, rul ned, find Flexbox-beholderen og vælg Aktiv fra rullemenuen. Gem til sidst ændringerne og gå videre til næste trin.

Bemærk: På nye hjemmesider er Flexbox-beholderen aktiv som standard.

Trin 2. Opret en ny webside

Nu skal vi oprette en ny side, som vi plejer. Gå til sektionen Sider, vælg Alle sider, og klik Tilføj en side.

Trin 3. Åbn Elementor

Du vil nu have WordPress-sidebyggervinduet på din skærm. Giv en titel til denne nye side og klik videre Rediger med Elementor for at få adgang til Flexbox-beholdere.

Trin 4. Tilføj en ny beholder

En velkendt Elementor-sidebyggerbrugergrænseflade vises på din skærm. Derudover kan du trække og slippe en beholder fra sidebjælken for at tilføje en ny beholder eller klikke på ikonet + og vælg den ønskede struktur.

Trin 5. Style containeren

Når du har tilføjet en container, kan du få adgang til mange tilpasningsmuligheder. Du kan ændre muligheder som containertype, bredde, højde, retning, justering osv.

Trin 6. Træk og slip widgets i containere

Det er også nemt at tilføje widgets til containere. Du skal blot vælge den ønskede widget fra fanen Elementer, og derefter trække og slippe den på ikonet + i beholderen.

Trin 7. Tilpas widgets

Ligesom globale containerindstillinger kan du også tilpasse indholdet af en container. Du kan tilpasse muligheder som retning, justering, justering, mellemrum, ombrydning osv.

Trin 8. Udgiv din første Flexbox-webside

Du kan oprette mange containere, duplikere dem og bytte deres placeringer. Gentag trinene, efterhånden som du tilføjer flere elementer, og når du er færdig, skal du klikke på knappen offentliggøre at sætte din webside online. Du kan også klikke på Preview-knappen for at interagere med din nye Flexbox-webside.

---

Hvordan konverterer man en sektionsbaseret Elementor-side til en Flexbox-container?

Du kan nemt konvertere en sektionssøjlestruktur til en Flexbox container. Bare følg disse enkle trin:

Trin 1. Vælg afsnittet

Vælg den sektion, du vil konvertere til en beholder, ved at klikke på de seks prikker øverst i sektionen. Alternativt kan du også vælge sektionen i Elementor Navigator-popup'en.

Trin 2. Konverter sektion til container

Når du har valgt en sektion, vil du se knappen KONVERTER på fanen Layout. Klik på den for at konvertere sektionen til en beholder.

Trin 3. Opdater layout

Når konverteringen er fuldført, vil du se to separate versioner af den valgte sektion. Den øverste sektion er den originale, mens den nederste sektion er den nye beholder. Slet den oprindelige sektion, og klik på Opdater for at gemme layoutet.

Gentag trinene for hver sektion, du planlægger at konvertere til en beholder.

---

Kan jeg kombinere Elementor-tilføjelser med den nye flexbox-beholder?

Ja, du kan kombinere Elementor-tilføjelser med Flexbox-beholdere. Der er ikke behov for en løsning, da Flexbox-beholdere integreres problemfrit med tredjeparts tilføjelser og plugins.

Faktisk er tilføjelser nødvendige for at aktivere avancerede funktioner og tilpasningsmuligheder i Elementor-sidebyggeren. Du kan installere

---

Relaterede ressourcer

• Sådan bruges globale skrifttyper i Elementor
• Sådan opretter du en flydende knap med Elementor Z Index
• Sådan opretter du en 404-side i Elementor
• Sådan opretter du en billedharmonika med JetTabs i Elementor
• Sådan opretter du en fuldskærmsmenu i Elementor 

Konklusion

Elementors Flexbox-container er et kraftfuldt værktøj, der transformerer den måde, du designer og strukturerer dine websider på. Med dens fleksible funktioner kan du administrere justering, afstand og organisering af dine elementer med exceptionel præcision. Uanset om du vil oprette komplekse layouts eller blot forbedre responsiviteten af ​​dine designs, tilbyder Flexbox en elegant og intuitiv løsning.

Ved at bruge Flexbox-containeren har du adgang til en række kontroller, der letter styringen af ​​afstand og justering, samtidig med at de justeringer, der er nødvendige for en problemfri præsentation på tværs af alle enheder, forenkles. Dette niveau af tilpasning forbedrer ikke kun brugeroplevelsen, men optimerer også designprocessen ved at gøre dine sider mere dynamiske og responsive.

Tøv ikke med at udforske de forskellige muligheder, som Flexbox tilbyder, for at finde ud af, hvordan de kan forbedre dine Elementor-projekter. Med den rette brug af disse værktøjer kan du skabe flydende og professionelle layouts, der fanger og engagerer dine besøgende. Fortsæt med at eksperimentere og udnytte de muligheder, som Elementor tilbyder, for at få mest muligt ud af dine webdesigns.

Så! Vi har lige vist dig, hvordan du bruger Elementor Flexbox-beholderen. Hvis du er i tvivl om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

---

Ofte Stillede Spørgsmål