Slik justerer du Elementor-seksjoner og -kolonner

Mens du jobber med Elementor , vil du legge merke til at det er litt vanskelig å tilpasse seksjonene og kolonnene dine. Du må justere kolonner og seksjoner vertikalt og horisontalt for å oppnå et responsivt "strekk-til-fyll"-oppsett. Uten denne justeringen vil elementene i kolonner med varierende høyde ikke kunne justeres på skjermen.

• Hvorfor må vi innrette oss?
• Hvordan fungerer kolonner eller seksjoner for et responsivt design?
• Hvordan justere Elementor-seksjoner og kolonner?
• Bruk Overflow Hidden for å fikse responsive breddeproblemer
• Ta vare på posisjonering
• Relative enheter
• Kontroller dybden til hvert element ved hjelp av Z-indeksen
• Trikset om duplikatfunksjonalitet
• Forskyvninger
• Den gylne regel
• Konklusjon

Hvorfor må vi innrette oss?

I hver kolonne eller seksjon kan innholdet være av forskjellige kategorier. Det kan være i form av bilder, tekst og vurderinger. For et sammensatt utseende, anbefales det at det er ensartet innhold i utseendet. Det skal ikke bare kastes der - dumpes - bare for pokker.

Med god justering kan du få nettsiden til å fremstå mer ryddig og stilig – slik at den ikke ser rotete ut. Med justeringsalternativet kan du justere flere widgets av varierende størrelse ved siden av hverandre i samme kolonne.

Hvordan fungerer kolonner eller seksjoner for et responsivt design?

Elementor 2.5 lar deg tilpasse design og innhold. Med den nye egendefinerte posisjoneringsfunksjonen kan du flytte widgetene til et hvilket som helst sted. Men du kan egentlig ikke gjøre det utover en bestemt seksjon. Disse widgetene er i forhold til kolonnen de er inne i. Dette kan forårsake et problem med responsen til designet.

Anta at du har en layout med tre kolonner. Ved hjelp av tilpasset posisjonering kan du dra-og-slippe en widget fra høyre kolonne til midtkolonnen, eller slik du vil.

Men å gjøre det vil bare være til fordel for besøkende på skrivebordet fordi det vil se OK ut for dem. Det vil imidlertid forårsake et problem hvis nettsiden er tilgjengelig fra mobil fordi Elementor stabler kolonnene vertikalt på mobil.

Så i stedet for å ha tre kolonner side ved side, kan du oppleve at alle tre kolonnene er stablet på hverandre. Elementet vil ikke lenger vises i den midterste kolonnen som det gjør på skrivebord.

Selv om du smart kan justere mobilvisningen med en skjult innstilling, men det er ingen garanti for at de fleste kan finne den. Så hvorfor frustrere brukerne? Å gjøre designet responsivt og tilpasningsdyktig er den riktige løsningen. Slik at den ikke krasjer noe sted.

For den saks skyld må du ta hensyn til widgetens forhold til kolonnen den er inni.

Hvordan justere Elementor-seksjoner og kolonner?

For hver seksjon/kolonne, land på layoutseksjonen og angi følgende justeringsalternativer i henhold til dine krav:

• Vertikal justering: du kan velge innstillinger for widgetene fra følgende. Men en ting du må huske på er at innholdet i en kolonne ikke kan justeres med de tre første kolonne vertikale alternativene, dvs. topp, midt og bunn.
• Topp
• Midten
• Bunn

For den saks skyld er det ^* tre nye alternativer som gjør det veldig praktisk å justere innholdet etter din smak.

• ^*Space Between – angir avstanden mellom widgets i starten og på slutten ved kanten av kolonnen. Widgetene er lik avstand, dvs. det er lik avstand mellom dem.
• ^*Mellomrom rundt – avstanden mellom widgetene er lik, og kantene er halvparten så store som avstanden mellom widgetene.
• ^*Avstand jevnt – avstanden mellom widgets er ensartet – den er lik mellom, før og etter dem.

• Horisontal justering: med dette alternativet kan du utføre inline-posisjonering og justere inline-widgetene, som er i samme rad, horisontalt. Du kan justere kolonnenes innhold horisontalt ved å bruke disse alternativene:
• Start- justerer alle ikonene til venstre
• Senter: plasserer ikonene i midten av kolonnen
• End- setter alle ikonene til høyre
• Space Between – mellomrommet mellom widgets i starten og på slutten ved kanten av kolonnen. Widgetene er lik avstand, dvs. det er lik avstand mellom dem
• Mellomrom rundt – avstanden mellom widgetene er lik, og kantene er halvparten så store som avstanden mellom widgetene
• Avstand jevnt – avstanden mellom widgets er ensartet – den er lik mellom, før og etter dem

Bruk Overflow Hidden for å fikse responsive breddeproblemer

Når det kommer til et nettsteds utseende på mobil, er det stor sannsynlighet for at du kan støte på et problem der en widget med tilpasset plassering flyter over bredden på en kolonne.  

Dette forårsaker en veldig frustrerende situasjon for mobile besøkende, der de kan bla horisontalt. Og dette er ikke noe du hadde ønsket deg for nettstedet ditt. Dette kan fikses ved:

Layoutinnstillinger > Sett Overflow -alternativet til Skjult

Ved å gjøre dette vil det overskridende området kuttes av, og det vil ikke være behov for å rulle horisontalt

Ta vare på posisjonering

Du må også ta vare på plasseringen av søylene. Du kan angi tilpasset posisjonering med Elementor 2.5 — absolutt og fast.

Den absolutte posisjoneringen er plasseringen av elementet i forhold til seksjonen eller kolonnen du er inne i. Så hvis du bruker absolutt posisjonering til et element eller en seksjon, vil ikke den delen bevege seg langs besøkendes vindu.

Den faste posisjonen er forskjellig fra absolutt ettersom den lar seksjonen/elementet holde seg fast til den besøkendes synspunkt. Så hvis brukeren ruller gjennom siden, vil elementet forbli der.

Relative enheter

Når du designer nettsiden din, vil du oppdage at det er flere måter du kan plassere elementene på. For absolutt posisjonering er det en god idé å bruke relative enheter, da det vil gjøre responsiv design mer funksjonell når det kommer til ulik skjermstørrelse.

Den relative enheten justerer seg selv basert på den relative bredden og høyden på skjermen, og lar dermed elementene eller seksjonene endre størrelsen på seg selv og en bedre responsiv design. Hvis du velger å bruke piksler, må du lage flere responsive seksjoner for forskjellige skjermstørrelser.

Kontroller dybden til hvert element ved hjelp av Z-indeksen

Hvis du skal bruke 'absolutt' eller 'fast' posisjonering for widgetene, vil det være mange situasjoner der to eller flere widgets kan overlappe, dvs. de er stablet "oppå" hverandre. Du kan unngå dette ved å bruke den vanlige Z-indeksinnstillingen. Dette vil gjøre deg i stand til å kontrollere dybden og la deg velge hvilke widgets som vises i forgrunnen.

Trikset om duplikatfunksjonalitet

Hvis du bruker høyreklikk for å duplisere et element med tilpasset plassering, kan det se ut som om høyreklikk ikke har fungert.

Men se. Det er ikke sant. Duplikatfunksjonaliteten har fungert helt fint og har duplisert elementet. Det er bare det at siden hvert element har nøyaktig samme tilpassede plassering, stablet det dupliserte elementet NØYAKTIG oppå det andre elementet (gir et inntrykk av at det ikke er opprettet noen duplikat.).

Enkelt sagt, hvis du oppretter én kolonne vellykket, kan du duplisere kolonnen når det er nødvendig. Pass også på at kolonnene du oppretter ikke bruker tilpasset posisjonering. Hvis det gjør det, vil duplisering ikke fungere med høyreklikkalternativet. Du kan imidlertid bruke duplikatfunksjonen for å overvinne begrensningen og kopiere kolonnen.

Dra det øverste elementet litt, og det vil avsløre det andre. Begge elementene er veldig mye der. Når du dupliserer én kolonne, vil den også stables over den gamle. Du kan bli forvirret. Men ikke bekymre deg, du kan ganske enkelt dra den og deretter bruke den i websidedesignet.

Forskyvninger

Det er tilfeller der du må sette forskyvninger til innholdet på nettsiden din. Med Elementor kan du enkelt sette offset. Så hvis du setter en forskyvning på 500px fra venstre, vil det bli igjen plass rundt innholdet basert på inndataene dine. På samme måte kan du også sette offset på høyre side. Det er en god praksis å sette både venstre og høyre forskyvning til en lignende verdi, da innholdet vil være riktig justert på skjermen.

Det er tilfeller der du må sette forskyvninger til innholdet på nettsiden din. Med Elementor kan du enkelt sette offset. Så hvis du setter en forskyvning på 500px fra venstre, vil det bli igjen plass rundt innholdet basert på inndataene dine. På samme måte kan du også sette offset på høyre side. Det er en god praksis å sette både venstre og høyre forskyvning til en lignende verdi, da innholdet vil være riktig justert på skjermen.

Den gylne regel

For bedre responsiv design, bruk relative enheter. Dette er fordi absolutt posisjonering kan være vanskelig når nettstedet er tilgjengelig fra en annen plattform. Ved å bruke relative enheter for utformingen av seksjonene dine vil det resultere i et mer responsivt design. Endringen i bredden kan håndteres perfekt ved hjelp av relative enheter. Med "relativ" mener vi varierende enheter som prosent eller visningsbredde (VW), i stedet for å fikse enheter som piksler.

Konklusjon

Elementor er en super brukervennlig nettstedbygger. Til tider kan det by på utfordringer i visning av nettsider hvis nettsiden er tilgjengelig fra mobil eller nettbrett. Ved hjelp av seksjons- og kolonnejustering kan du enkelt gjøre nettsidene dine perfekte.