Sådan justeres Elementorsektioner og kolonner

Mens du arbejder med Elementor , vil du bemærke, at det er lidt vanskeligt at tilpasse dine sektioner og kolonner. Du skal justere kolonner og sektioner lodret og vandret for at opnå et responsivt "stretch-to-fill"-layout. Uden denne justering vil elementerne i kolonner med varierende højder ikke kunne justeres på skærmen.

• Hvorfor skal vi justere?
• Hvordan fungerer kolonner eller sektioner for et responsivt design?
• Sådan justeres Elementorsektioner og kolonner?
• Brug af Overflow Hidden til at løse problemer med responsive bredde
• Pleje af positionering
• Relative enheder
• Kontroller dybden af ​​hvert element ved hjælp af Z-indeks
• Tricket om duplikatfunktionalitet
• Forskydninger
• Den gyldne regel
• Konklusion

Hvorfor skal vi justere?

I hver kolonne eller sektion kan indholdet være af forskellige kategorier. Det kan være i form af billeder, tekst og vurderinger. For et sammensat look anbefales det, at der er ensartethed i indholdsudseende. Det skal ikke bare kastes der - dumpet - bare for det.

Med god tilpasning kan du få hjemmesiden til at se mere pæn og stilfuld ud, så den ikke ser rodet ud. Med justeringsindstillingen kan du justere flere widgets i forskellige størrelser ved siden af ​​hinanden i samme kolonne.

Hvordan fungerer kolonner eller sektioner for et responsivt design?

Elementor 2.5 giver dig mulighed for at tilpasse dit design og indhold. Med den nye brugerdefinerede positioneringsfunktion kan du flytte widgets til enhver placering. Men du kan ikke rigtig gøre det ud over et bestemt afsnit. Disse widgets er i forhold til den kolonne, de er inde i. Dette kan forårsage et problem i designets reaktionsevne.

Antag, at du har et tre-søjles layout. Ved hjælp af brugerdefineret positionering kan du trække og slippe en widget fra højre kolonne ind i midterste kolonne, eller hvor du vil.

Men at gøre det vil kun gavne desktopbesøgere, fordi det ser OK ud for dem. Det vil dog medføre et problem, hvis der åbnes webstedet fra mobil, fordi Elementor stabler kolonnerne lodret på mobilen.

Så i stedet for at have tre kolonner side om side, kan du muligvis opleve alle tre kolonner stablet på hinanden. Elementet vises ikke længere i den midterste kolonne, som det gør på desktops.

Selvom du smart kan finjustere mobilvisningen med en skjult indstilling, men der er ingen garanti for, at flertallet af mennesker kan finde det. Så hvorfor frustrere brugerne? At gøre designet lydhør og tilpasses er den rigtige løsning. Så det ikke går ned overalt.

For den sags skyld skal du være opmærksom på widgetens forhold til den kolonne, den er inde i.

Sådan justeres Elementorsektioner og kolonner?

For hver sektion / kolonne skal du lande på layout-sektionen og indstille følgende justeringsindstillinger i henhold til dine krav:

• Lodret justering: du kan vælge indstillinger for widgets fra at følge. Men en ting, du skal huske, er, at indholdet i en søjle ikke kan justeres med de første tre kolonners lodrette indstillinger, dvs. top, midt og ned.
• Top
• Mellemøsten
• Bund

For den sags skyld er der ^* tre nye muligheder, der gør det virkelig praktisk at justere indholdet efter eget valg.

• ^*Mellemrum mellem - indstiller mellemrummet mellem widgets i starten og i slutningen i kanten af ​​kolonnen. Widgets er ligeligt fordelt, dvs. der er lige mellemrum mellem dem.
• ^*Mellemrum omkring - mellemrummet mellem widgets er lige, og kanterne er halvdelen af ​​størrelsen på mellemrummet mellem widgets.
• ^*Jævnligt mellemrum - mellemrummet mellem widgets er ensartet - det er lige mellem, før og efter dem.

• Vandret justering: med denne mulighed kan du udføre indbygget placering og justere de indbyggede widgets, der er i samme række, vandret. Du kan justere kolonnernes indhold vandret ved hjælp af disse muligheder:
• Startjusterer alle ikoner til venstre
• Center: placerer ikonerne i midten af ​​kolonnen
• End- sætter alle ikoner til højre
• Mellemrum mellem - mellemrummet mellem widgets i starten og i slutningen ved kanten af ​​kolonnen. Widgetsne har lige mellemrum, dvs. der er lige mellemrum imellem dem
• Mellemrum - mellemrummet mellem widgets er lige, og kanterne er halvt så store som mellemrummet mellem widgets
• Mellemrum jævnt - mellemrummet mellem widgets er ensartet - det er lige mellem, før og efter dem

Brug af Overflow Hidden til at løse problemer med responsive bredde

Når det kommer til et websteds udseende på mobil, er der stor sandsynlighed for, at du kan støde på et problem, hvor en widget med tilpasset placering oversvømmer bredden af ​​en kolonne.  

Dette medfører en virkelig frustrerende situation for mobile besøgende, hvor de kan rulle vandret. Og dette er ikke noget, som du havde ønsket dig på dit websted. Dette kan rettes ved:

Layoutindstillinger > Indstil indstillingen Overløb til Skjult

Ved at gøre dette vil det overskridende område blive afskåret, og der er ikke behov for at rulle vandret

Pleje af positionering

Du skal også sørge for placeringen af ​​søjlerne. Du kan indstille brugerdefineret positionering med Elementor 2.5 — absolut og fast.

Den absolutte positionering er placeringen af ​​elementet i forhold til det afsnit eller den kolonne, du er indeni. Så hvis du bruger absolut positionering til et element eller en sektion, vil denne sektion ikke bevæge sig langs den besøgendes vindue.

Den faste position er forskellig fra absolut, da den lader sektionen / elementet forblive fast i den besøgendes synspunkt. Så hvis brugeren ruller gennem siden, forbliver elementet der.

Relative enheder

Når du designer din webside, vil du opdage, at der er flere måder, du kan placere elementerne på. For absolut positionering er det en god ide at bruge relative enheder, da det vil gøre responsivt design mere funktionelt, når det kommer til forskellige skærmstørrelser.

Den relative enhed tilpasser sig baseret på skærmens relative bredde og højde, hvilket gør det muligt for elementerne eller sektionerne at ændre størrelsen på sig selv og et bedre responsivt design. Hvis du vælger at bruge pixels, skal du oprette flere responsive sektioner til forskellige skærmstørrelser.

Kontroller dybden af ​​hvert element ved hjælp af Z-indeks

Hvis du vil bruge 'absolut' eller 'fast' positionering til widgets, vil der være mange situationer, hvor to eller flere widgets kan overlappe, dvs. de er stablet "ovenpå" hinanden. Du kan undgå dette ved at bruge den normale Z-indeksindstilling. Dette giver dig mulighed for at kontrollere dybden og give dig mulighed for at vælge, hvilke widgets der vises i forgrunden.

Tricket om duplikatfunktionalitet

Hvis du bruger højreklik til at duplikere et element med brugerdefineret placering, kan det se ud som om, at højrekliket ikke har fungeret.

Men se. Det er ikke sandt. Dobbeltfunktionaliteten har fungeret helt fint og har duplikeret elementet. Det er bare, at da hvert element har nøjagtig den samme brugerdefinerede positionering, stables det duplikerede element NÆRMEST oven på det andet element (hvilket giver et indtryk af, at der ikke er oprettet en duplikat.)

Enkelt sagt, hvis du opretter en kolonne med succes, kan du duplikere kolonnen, når det er nødvendigt. Sørg også for, at de kolonner, du opretter, ikke bruger tilpasset placering. Hvis det gør det, fungerer duplikering ikke med indstillingen med højreklik. Du kan dog bruge duplikatfunktionen til at overvinde begrænsningen og kopiere kolonnen.

Træk det øverste element en smule, så afslører det andet. Begge elementer er meget der. Når du kopierer en kolonne, stabler den også over den gamle. Du kan blive forvirret. Men rolig, du kan bare trække den og derefter bruge den i dit webdesign.

Forskydninger

Der er tilfælde, hvor du har brug for at modregne dit websides indhold. Med Elementor kan du nemt indstille offset. Så hvis du indstiller en forskydning på 500 px fra venstre, vil der være plads omkring indholdet baseret på dit input. På samme måde kan du også indstille forskydning på højre side. Det er en god praksis at indstille både venstre og højre forskydning i en lignende værdi, da indholdet justeres korrekt på skærmen.

Der er tilfælde, hvor du har brug for at modregne dit websides indhold. Med Elementor kan du nemt indstille offset. Så hvis du indstiller en forskydning på 500 px fra venstre, vil der være plads omkring indholdet baseret på dit input. På samme måde kan du også indstille forskydning på højre side. Det er en god praksis at indstille både venstre og højre forskydning i en lignende værdi, da indholdet justeres korrekt på skærmen.

Den gyldne regel

Brug relative enheder for bedre responsivt design. Dette skyldes, at absolut positionering kan være vanskelig, når der er adgang til webstedet fra en anden platform. Brug af relative enheder til at designe dine sektioner vil resultere i et mere responsivt design. Ændringen i bredden kan håndteres perfekt ved hjælp af relative enheder. Ved "relativ" mener vi forskellige enheder som procent eller visningsbredde (VW) snarere end at rette enheder som pixels.

Konklusion

Elementor er en super brugervenlig webstedsbygger. Til tider kan det udgøre udfordringer i webstedsvisning, hvis der er adgang til webstedet fra mobil eller tablet. Ved hjælp af sektion og kolonnejustering kan du gøre dine websteder perfekte med reel lethed.