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?

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.

Ahmad

Se kommentarer

  • Hvor finder du disse muligheder? De findes ikke. Er dette til Premium Elementor? Hvis ja, bør du nævne det i din artikel, så folk ikke spilder deres tid på at læse den igennem.

  • Hej,

    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 tak!

  • Hej, den første ting, jeg ville undersøge, ville være indstillingen for lodret justering af kolonnen beskrevet i den første del af dette indlæg.
    Skål,

  • Godt, tutto chiaro, taknemmelig!
    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.
    I tilfælde af et foto med et dæksel og en kolonna af en sinistra med en kontinuerlig puls (unsopra l'altro), ækvidistant og central position af kolonna af sinistra, rimandano med modellen af ​​smartphone i henhold til kvaliteten og tilgængeligheden af ​​smartphonecoveret på billedet. 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

    • Hej, OK godt, det er sikkert muligt, du kan endda centrere indholdet lodret i hver kolonne

  • Der er et problem med afsnittet uden logoopløsningsmiddel. El indhold se queda a lado, la imagen, titel 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. Det er allerede redigeret af tamaño móvil, så det er en quedado såvel som en lado todo cuando cambio a escritorio! Alguien sabe que puede ser? Han forsøgte at gøre sit arbejde og articulo og parece que nada funciona 🤗

    • Hej, jeg tror, ​​du skal starte med at kontrollere alle dine justeringer i sektioner og derefter kolonner og derefter indholdsblok. Det er også muligt, at dit temas CSS kommer til at spille en rolle i denne tilpasning.

  • bonjour!
    Du m'arrache les cheveux car je n'arrive pas à aligner 3 colones à l'horizontale.
    Omkring designet med al den perfekte justering kan du visualisere modifikationerne, søjlerne med eftermonterede imbrikéer og de forskellige taljelinjer (større og hauthors) på kranens mål. dit 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 horizontal y paragraphción vertikal.
    Hvordan installerede du en complemento adicional? Tak

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

  • Hej,

    Jeg har flere widgets i sidefoden. Det er altid en overskrift, en mere modig pointe. På den måde behøver jeg ikke skrive uskrevne tekster i én boks (h4 og p), medmindre jeg skriver det i 2 afsnit. Hvordan kan jeg nu finde de næste wordpress-sektioner? Der er stadig plads til, at overskriften og teksten kan vises.

    tak for din hjælp

    • Hej, der er flere muligheder for at moderere afstanden mellem tekster: det kan være sektion, spalte eller widget-margen eller udfyldning, ELLER det kan være skrifttype som linjehøjde.

Seneste indlæg

Sådan bruger du sidehoveder og sidefødder med Elementor

Et websteds sidehoveder og sidefødder er væsentlige elementer. I de fleste tilfælde giver overskriften navigation...

6. januar 2022

WordPress-temasammenligning: Astra vs OceanWP

To af de mest populære WordPress-temaer på markedet er Astra og OceanWP. Professionel…

2. januar 2022

WordPress nyhedstema sammenligning: Avis vs. Astra

Oprettelse af et fremragende nyhedswebsted kræver ikke, at du bliver webdesigner. Vi…

25. oktober 2021

Opret en nyhedsrelateret hjemmeside med Newspaper Theme

Avis-temaet er et af de mest betydningsfulde WordPress-temaer designet af tagDiv, en...

18. oktober 2021

Sådan bygger du en e-handel med Avada WooCommerce builder

Når det kommer til at oprette en online butik, er WooCommerce det perfekte plugin . Det…

4. oktober 2021

Sådan bruger du sticky header og rulleeffekter med Elementor

En header er generelt det første, en person ser, når de besøger dit websted,...

21. september 2021