Slik justerer du Elementorseksjoner 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 samkjøre?
• Hvordan fungerer kolonner eller seksjoner for et responsivt design?
• Hvordan justere Elementorseksjoner og kolonner?
• For å fikse responsive breddeproblemer, bruk overskudd skjult
• Ta vare på posisjonering
• Relative enheter
• Kontroller dybden til hvert element ved å bruke Z-indeks
• Trikset om duplikatfunksjonalitet
• Forskyvninger
• Den gylne regel
• Konklusjon

Hvorfor må vi samkjøre?

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

Med god tilpasning kan du få nettstedet til å fremstå som mer pent og stilig - slik at det ikke ser rotete ut. Med justeringsalternativet kan du justere flere widgets i forskjellige størrelser 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 i responsen til designet.

Anta at du har en tre-kolonne layout. Ved hjelp av tilpasset posisjonering kan du dra og slippe en widget fra høyre kolonne inn i midtkolonnen, eller hvor 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 føre til et problem hvis nettstedet nås fra mobil fordi Elementor stabler kolonnene vertikalt på mobilen.

Så i stedet for å ha tre kolonner side om side, kan du oppleve alle de tre kolonnene som er stablet på hverandre. Elementet vil ikke lenger vises i den midterste kolonnen, slik det gjør på stasjonære maskiner.

Selv om du smart kan finjustere mobilvisningen med en skjult innstilling, men det er ingen garanti for at flertallet av mennesker kan finne den. Så hvorfor frustrere brukerne? Å gjøre designen responsiv og tilpasningsdyktig er den riktige løsningen. Slik at det ikke krasjer noe sted.

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

Hvordan justere Elementorseksjoner og kolonner?

Land på layoutdelen og angi følgende justeringsalternativer i henhold til dine krav:

• Vertikal justering: du kan velge innstillinger for widgetene fra å følge. Men en ting du må huske på er at innholdet i en kolonne ikke kan justeres med de tre første kolonnens 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 eget ønske.

• ^*Mellomrom - angir mellomrommet mellom widgets i starten og på slutten i kanten av kolonnen. Widgets er like mellom hverandre, det vil si at det er like stort mellomrom.
• ^*Plass rundt - mellomrommet mellom widgetene er lik, og kantene er halvparten av størrelsen på mellomrommet mellom widgetene.
• ^*Plass jevnt - mellomrommet mellom widgets er ensartet - det er likt mellom, før og etter dem.

• Horisontal justering: med dette alternativet kan du utføre innebygd posisjonering og justere de innebygde widgetene, som er i samme rad, horisontalt. Du kan justere kolonnenes innhold horisontalt ved å bruke disse alternativene:
• Startjuster alle ikonene til venstre
• Senter: plasserer ikonene til midten av kolonnen
• End - setter alle ikonene til høyre
• Mellomrom - mellomrommet mellom småprogram i starten og slutten ved kanten av kolonnen. Widgetene har like mellomrom, det vil si at det er likt mellomrom mellom dem
• Mellomrom - mellomrommet mellom modulene er likt, og kantene er halve størrelsen på mellomrommet mellom modulene
• Mellomrom jevnt - rommet mellom enhetene er jevnt - det er likt mellom, før og etter dem

For å fikse responsive breddeproblemer, bruk overskudd skjult

Når det gjelder utseendet til et nettsted på mobil, er det stor sannsynlighet for at du kan støte på et problem der en widget med tilpasset plassering oversvømmer bredden på en kolonne.  

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

Layoutinnstillinger > Sett Overflow alternativet til Skjult

Ved å gjøre dette vil det overskytende området bli kuttet av, og det vil ikke være behov for å bla 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 posisjonen 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, da den lar seksjonen / elementet holde seg fast til den besøkendes synspunkt. Så hvis brukeren blar gjennom siden, blir elementet der.

Relative enheter

Når du designer websiden din, vil du oppdage at det er flere måter du kan plassere elementene på. For absolutt posisjonering er det en god ide å bruke relative enheter, da det vil gjøre responsiv design mer funksjonell når det gjelder annen skjermstørrelse.

Den relative enheten justerer seg basert på den relative bredden og høyden på skjermen, slik at elementene eller seksjonene kan endre størrelsen på seg selv og et bedre responsivt design. Hvis du velger å bruke piksler, må du opprette flere responsive seksjoner for forskjellige skjermstørrelser.

Kontroller dybden til hvert element ved å bruke Z-indeks

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

Trikset om duplikatfunksjonalitet

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

Men se. Det er ikke sant. Kopifunksjonaliteten har fungert helt greit og har duplisert elementet. Siden hvert element har nøyaktig samme egendefinerte posisjonering, er det dupliserte elementet stablet nøyaktig på toppen av det andre elementet (noe som gir et inntrykk av at det ikke er opprettet noen duplikat.).

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

Dra toppelementet litt, så avslører det andre. Begge elementene er veldig mye der. Når du dupliserer en kolonne, vil den også stables over den gamle. Du kan bli forvirret. Men ikke bekymre deg, du kan bare dra den og deretter bruke den i nettsidedesignet ditt.

Forskyvninger

Det er tilfeller der du må forskyve innholdet på websiden. Med Elementor kan du enkelt sette offset. Så hvis du setter en forskyvning på 500 px fra venstre, blir det plass igjen rundt innholdet basert på innspillene dine. På samme måte kan du også sette forskyvning på høyre side. Det er en god praksis å sette både venstre og høyre forskyvning i en lignende verdi, da innholdet blir riktig justert på skjermen.

Det er tilfeller der du må forskyve innholdet på websiden. Med Elementor kan du enkelt sette offset. Så hvis du setter en forskyvning på 500 px fra venstre, blir det plass igjen rundt innholdet basert på innspillene dine. På samme måte kan du også sette forskyvning på høyre side. Det er en god praksis å sette både venstre og høyre forskyvning i en lignende verdi, da innholdet blir 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. Bruk av relative enheter for å designe seksjonene dine vil gi et mer responsivt design. Endringen i bredde kan håndteres perfekt ved hjelp av relative enheter. Med "relativ" mener vi forskjellige enheter som prosent eller visningsbredde (VW), i stedet for å fikse enheter som piksler.

Konklusjon

Elementor er en super brukervennlig nettstedbygger. Noen ganger kan det utgjøre utfordringer i nettstedsvisning hvis nettstedet er tilgjengelig fra mobil eller nettbrett. Ved hjelp av seksjon og kolonnejustering kan du gjøre nettstedene dine perfekte med letthet.