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?

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 i 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-stiller 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 rulle 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 posisjoneringen 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, hold ut. 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.

Ahmad

Se kommentarer

  • Hvor finner du disse alternativene? De finnes ikke. Er dette for Premium Elementor? I så fall bør du nevne det i artikkelen din slik at folk ikke kaster bort tiden sin på å lese gjennom den.

  • Hallo,

    Estoy maquetando med Elementor Pro.
    Quiero poner dos bannere, uno pegado a la izquierda y otro pegado a la derecha de la pantalla. Para ello he creado: - una seccion para cada banner.
    - un encabezado con un frase, a la cual he puesto de fondo una imagen.

    Una de ella deberia ir pegada a la derecha de la pantalla (margins izquierda 0 imagino). Algun consejo? Mange takk!

  • Hei, det første jeg vil se nærmere på er innstillingen for vertikal justering av kolonnen beskrevet i første del av dette innlegget.
    Jubel,

  • Veldig bra, takk!
    Ma mi stavo domandando se è possibile inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa colonna. Cerco di spiegarmi meglio: vorrei dividere un sezione in due colonne.
    Når det gjelder et bilde med et deksel, og en kolonna av en sinistra med en kontinuerlig puls (unsopra l'altro), like langt og sentral plassering av kolonaden til sinistra, rimandano med modellen til smarttelefonen i henhold til dens kvalitet og tilgjengelighetsomslag på bildet. Sto cercando ovunque, ma non trovo nulla che indichi che si possa fare.
    Så ingen aperta a tutti jeg foreslår
    Grazie

  • Scusate, ho appena capito come fare (l'ho capito per errore). Scusate il disturbo e grazie lo stesso

    • Hei, OK flott, sikkert det er mulig, du kan til og med sentrere innholdet vertikalt i hver kolonne

  • Det er et problem med avsnittet uten logoløsningsmiddel. Innholdet er tilgjengelig, bilde, tittel og tekst. No logro centarlo (solo hay una columna pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar. Den er allerede redigert av tamaño móvil, så den er en quedado så vel som en lado todo cuando cambio a escritorio! Alguien sabe que puede ser? Han prøvde å gjøre jobben sin og articulo and parece que nada funciona 🤗

    • Hei, jeg tror du må starte med å sjekke alle justeringene dine i seksjoner og deretter kolonner og deretter innholdsblokk. Det er også mulig at CSS-en til temaet ditt kommer til å spille en rolle i denne justeringen.

  • bonjour!
    You m'arrache les cheveux car je n'arrive pas à aligner 3 colones à l'horizontale.
    Rundt designet med all den perfekte justeringen, kan du visualisere modifika, søylene med ettermonterte imbrikéer og de forskjellige midjelinjene (større og hauthors) på kranens mål. ditt valg er formen på kroppen og formen på aligneren. Kommentar faire?

  • Hola, tengo instalado elementor pero cuando agrego une nueva sección no parecen las opciones de paragraphción horisontal y paragraphción vertikal.
    Hay que installer et tilleggsutstyr? Gracias

  • Hola, tengo la versjon pro de elementor y ingen figura ninguna de las opciones que indicas, que puede ser?

  • Hallo,

    Jeg har flere widgets i bunnteksten. Det er alltid en overskrift, et dristigere poeng. På den måten slipper jeg å skrive uskrevne tekster i én boks (h4 og p) med mindre jeg skriver det i 2 seksjoner. Hvordan kan jeg nå finne de neste wordpress-seksjonene? Det er fortsatt plass til at overskriften og teksten vises.

    takk for hjelpen

    • Hei, det er flere alternativer for å moderere avstanden mellom tekster: det kan være seksjons-, kolonne- eller widgetmargin eller utfylling ELLER det kan være skriftalternativer som linjehøyde.

Siste innlegg

Slik bruker du topptekst og bunntekst med Elementor

Et nettsteds topp- og bunntekst er viktige elementer. I de fleste tilfeller gir toppteksten navigasjon...

6. januar 2022

WordPress-temasammenligning: Astra vs OceanWP

To av de mest populære WordPress-temaene på markedet er Astra og OceanWP. Profesjonell…

2. januar 2022

WordPress nyhetstema sammenligning: Avis vs. Astra

Å lage et utmerket nyhetsnettsted krever ikke at du blir webdesigner. Vi…

25. oktober 2021

Lag en nyhetsrelatert nettside med avis-tema

Avis-temaet er et av de viktigste WordPress-temaene designet av tagDiv, en...

18. oktober 2021

Hvordan bygge en e-handel med Avada WooCommerce-bygger

Når det gjelder å sette opp en nettbutikk, er WooCommerce go-to- plugin . Den…

4. oktober 2021

Hvordan bruke klebrig overskrift og rulleeffekter med Elementor

En overskrift er vanligvis det første en person ser når de besøker nettstedet ditt,...

21. september 2021