Sådan justeres Elementor-sektioner 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?
• Hvordan justerer man Elementor-sektioner og -kolonner?
• Brug Overflow Hidden for at løse problemer med responsiv bredde
• Tager sig af positionering
• Relative enheder
• Styr dybden af ​​hvert element ved hjælp af Z-Index
• 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 indholdets udseende. Det skal ikke bare smides - dumpet - bare for pokker.

Med god tilpasning kan du få hjemmesiden til at fremstå mere pæn og stilren - så den ikke ser rodet ud. Med indstillingsmuligheden kan du justere flere widgets af varierende størrelse 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 layout med tre kolonner. Ved hjælp af brugerdefineret positionering kan du trække-og-slippe en widget fra højre kolonne til midterkolonnen, eller hvordan du vil have det.

Men at gøre det vil kun gavne desktopbesøgende, fordi det vil se OK ud for dem. Det vil dog forårsage et problem, hvis hjemmesiden tilgås fra mobil, fordi Elementor stabler kolonnerne lodret på mobilen.

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

Selvom du smart kan tilpasse mobilvisningen med en skjult indstilling, men der er ingen garanti for, at de fleste mennesker kan finde den. Så hvorfor frustrere brugerne? At gøre designet responsivt og tilpasningsdygtigt er den rigtige løsning. Så den ikke styrter ned nogen steder.

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

Hvordan justerer man Elementor-sektioner og -kolonner?

For hver sektion/kolonne lander du på layoutsektionen og indstiller følgende justeringsmuligheder i henhold til dine krav:

• Lodret justering: du kan vælge indstillinger for widgets fra følgende. Men én ting du skal huske på er, at indholdet i en kolonne ikke kan justeres med de første tre kolonne vertikale muligheder, dvs. top, midt og bund.
• Top
• Midten
• Bund

For den sags skyld er der ^* tre nye muligheder, som gør det virkelig praktisk at tilpasse indholdet efter din smag.

• ^*Space Between – indstiller mellemrummet mellem widgets i starten og i slutningen ved kanten af ​​kolonnen. Widgets er lige store, dvs. der er lige stor plads mellem dem.
• ^*Space Around – mellemrummet mellem widgets er lige stort, 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.

• Horisontal justering: Med denne indstilling kan du udføre inline-positionering og justere de inline-widgets, som er i samme række, vandret. Du kan justere kolonnernes indhold vandret ved at bruge disse muligheder:
• Start - justerer alle ikoner til venstre
• Center: placerer ikonerne i midten af ​​kolonnen
• End-sætter alle ikonerne til højre
• Space Between – mellemrummet mellem widgets i starten og i slutningen ved kanten af ​​kolonnen. Widgets er lige store, dvs. der er lige stor plads mellem dem
• Mellemrum rundt – mellemrummet mellem widgets er lige stort, 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 Overflow Hidden for at løse problemer med responsiv bredde

Når det kommer til et websteds udseende på mobilen, er der stor sandsynlighed for, at du kan løbe ind i et problem, hvor en widget med tilpasset positionering flyder over bredden af ​​en kolonne.  

Dette forårsager en virkelig frustrerende situation for mobile besøgende, hvor de kan scrolle vandret. Og dette er ikke noget, du havde ønsket dig til din hjemmeside. Dette kan rettes ved:

Layoutindstillinger > Indstil Overløb til Skjult

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

Tager sig 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 placering er placeringen af ​​elementet i forhold til den sektion eller kolonne, som du er inde i. Så hvis du bruger absolut positionering til et element eller en sektion, vil den sektion ikke bevæge sig langs den besøgendes vindue.

Den faste position er forskellig fra absolut, da den lader sektionen/elementet forblive fast til den besøgendes synspunkt. Så hvis brugeren ruller gennem siden, vil elementet blive 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 idé 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 justerer sig selv baseret på den relative bredde og højde af skærmen, hvilket giver elementerne eller sektionerne mulighed for 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.

Styr dybden af ​​hvert element ved hjælp af Z-Index

Hvis du vil bruge 'absolut' eller 'fast' positionering for 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-indeks indstilling. Dette vil give 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 tilpasset positionering, kan det se ud som om, at højreklikket ikke har virket.

Men hold da op. Det er ikke sandt. Duplikatfunktionaliteten har fungeret perfekt og har duplikeret elementet. Det er bare, at da hvert element har nøjagtig den samme brugerdefinerede placering, er det duplikerede element stablet PRÆCIS oven på det andet element (hvilket giver et indtryk af, at der ikke er oprettet nogen duplikat).

Kort sagt, hvis du opretter én 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 positionering. Hvis det gør det, vil duplikering ikke fungere med højreklik-indstillingen. Du kan dog bruge duplikatfunktionen til at overvinde begrænsningen og kopiere kolonnen.

Træk det øverste element en lille smule, og det vil afsløre det andet. Begge elementer er der i høj grad. Når du dublerer en kolonne, vil den også stables over den gamle. Du kan blive forvirret. Men bare rolig, du kan blot trække det og derefter bruge det i dit websidedesign.

Forskydninger

Der er tilfælde, hvor du skal indstille forskydninger til indholdet på din webside. Med Elementor kan du nemt indstille offset. Så hvis du indstiller en offset på 500px fra venstre, vil der blive efterladt plads omkring indholdet baseret på dit input. Ligeledes kan du også indstille offset i højre side. Det er en god praksis at indstille både venstre og højre offset i en lignende værdi, da indholdet vil være korrekt justeret på skærmen.

Der er tilfælde, hvor du skal indstille forskydninger til indholdet på din webside. Med Elementor kan du nemt indstille offset. Så hvis du indstiller en offset på 500px fra venstre, vil der blive efterladt plads omkring indholdet baseret på dit input. Ligeledes kan du også indstille offset i højre side. Det er en god praksis at indstille både venstre og højre offset i en lignende værdi, da indholdet vil være korrekt justeret på skærmen.

Den Gyldne Regel

For bedre responsivt design skal du bruge relative enheder. Dette skyldes, at absolut positionering kan være vanskelig, når hjemmesiden tilgås 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. Med "relativ" mener vi varierende enheder som procent eller visningsbredde (VW) i stedet for at fikse enheder som pixels.

Konklusion

Elementor er en super brugervenlig hjemmesidebygger. Til tider kan det give udfordringer i hjemmesidevisningen, hvis hjemmesiden tilgås fra mobil eller tablet. Ved hjælp af sektions- og kolonnejustering kan du gøre dine hjemmesider perfekte med reel lethed.