Designere arbejder oven på et kolonnegitter. Det er, hvordan overskrifter, kort og knapper ender med at stille op i stedet for at drive et par pixels fra hinanden. Elementor viser dig ikke en, så justering sker normalt med øjet. Den Gitterlinje forlængelse i Master Addons til Elementor løser, at med en kolonne gitter overlay kan du tænde lige inde i editoren.
Du styrer antallet af kolonner, tagrenden, den maksimale bredde, forskydningen og farven på overlejringen, direkte fra Elementors Sideindstillinger. Her er, hvordan du aktiverer det, og hvad hver mulighed gør.
Hvad Grid Line-udvidelsen gør #
Grid Line tegner et sæt jævnt fordelte lodrette kolonner over din side inde i Elementor editor. Overlejringen sidder oven på dit design, så du kan kontrollere, om dine sektioner og widgets faktisk er på linje på gitteret, som en designer ville bruge i Figma eller Photoshop.
Standarden er et 12 kolonne gitter ved 1280px max bredde med en 40px tagrende, den samme konvention de fleste designsystemer bruger. Hver værdi er justerbar pr. enhed, og hele overlayet tænder og slukker med en toggle.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning first.
- Grid Line er en gratis udvidelse, så der kræves ingen Pro-licens.
Sådan aktiveres Grid Line-udvidelsen #
Trin 1: Slå det til i fanen Udvidelser #
Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Grid Line bor i Display Widgets gruppe med en Populær badge, ved siden af Glassmorphism og Mønstre. Klik på dens toggle, så det bliver lilla.
Trin 2: Gem dine ændringer #
Rul til toppen og klik Gem ændringer. En grøn “Indstillinger gemt med succes” meddelelse bekræfter udvidelsen er aktiv. Hvis Elementor editor var åben, genindlæse det én gang.
Sådan viser du gitteret i Elementor-editoren #
Åbn en hvilken som helst side med Elementor og klik på Sideindstillinger ikon i øverste bjælke. Under den Indstillinger fane finder du en ny Gitterlinje sektion markeret med det lilla MA-mærke. Flip Aktiver til Til, og kolonneoverlejringen vises på tværs af lærredet med det samme.
Fordi indstillingen lever i Sideindstillinger, er gitteret pr. side: du bestemmer, hvor det vises, og det følger dig ikke ind i hvert dokument.
Gitterlinjeindstillinger forklaret #
- Aktiver: slår overlejringen til og fra for denne side.
- Gitterfarve: kolonnernes farve. Vælg den globale farveprøve, eller indstil en brugerdefineret farve med vælgeren. En værdi med lav opacitet holder dit indhold læsbart under overlægningen.
- Kolonner: hvor mange kolonner skal du tegne. 12 er standarden, men du kan matche det gitter, dit design bruger.
- Max bredde: den samlede bredde af gitteret, 1280px som standard. Match det til dit websteds indholdsbredde, så kolonnerne er på linje med dit faktiske layout.
- Offset: skubber gitteret ind fra kanterne, når dit layout har brug for det.
- Rendesten: mellemrummet mellem kolonner, 40px som standard.
- Z-indeks: overlejringens stablingsrækkefølge, 999 som standard, så gitteret forbliver synligt over dit indhold.
Kolonner, Maksbredde, Forskydning og Tagrende er responsive kontrolelementer: Klik på enhedsikonet ud for hver enkelt for at angive forskellige værdier for skrivebord, tablet og mobil.
Ændre gitterfarven #
Klik på den brugerdefinerede farveprøve ud for Gitterfarve for at åbne farvevælgeren. Enhver HEXA-værdi virker, og alfakanalen betyder mest: noget i retning af 50 procent opacitet giver dig synlige kolonner uden at skjule designet nedenunder.
Stil søjlerne og tagrenden #
Træk skyderne og overlay opdateringerne live. I eksemplet nedenfor tagrenden er op til 58px og gitteret bærer en brugerdefineret farvetone, så det læser klart mod den lette baggrund, mens prissætning kortene forbliver læselige.
Når layoutet er justeret, skal du vende Aktiver slå tilbage. Indstillingen gemmes med siden, så det er nemt at glemme overlejringen på.
Når Grid Line sparer dig tid #
- Matcher en designfil. Genopbyg et Figma- eller XD-layout på det samme gitter med 12 søjler, som det blev designet på, i stedet for øjenæblerafstande.
- Justering af sektioner. Kontrollér, at elementer på tværs af forskellige sektioner starter og slutter på den samme kolonne.
- Konsekvent sideserie. Hold landingssider bygget af forskellige teammedlemmer på ét delt gitter.
- Polering af importerede skabeloner. Slip overlejringen til en side fra en skabelon kit og få øje på de elementer, der sidder off-grid.
- Afstandsbeslutninger. Brug rendestenslinjerne som en hurtig lineal, når du indstiller kolonnebredder og polstring.
Video Tutorial #
Foretrækker du at se det i bevægelse? Denne video går gennem aktivering af Grid Line og justering af overlayet i Elementor-editoren.
Ofte stillede spørgsmål #
Hvad er Grid Line-udvidelsen i Master Addons?
Det er en gratis udvidelse, der tegner en kolonne gitter overlay i Elementor editor. Du indstiller antallet af kolonner, tagrende, max bredde, offset, og farve fra Sideindstillinger, og derefter bruge kolonnerne til at justere sektioner og widgets den måde designere gør i Figma.
Hvor finder jeg indstillingerne for Grid Line?
I Elementor editor, åbne Sideindstillinger fra øverste bjælke og bo på fanen Indstillinger. Når du har aktiveret udvidelsen i Master Addons dashboard, vises en Grid Line sektion med en MA badge der, holder Aktiver skifte og alle gitterindstillinger.
Kan jeg ændre antallet af kolonner og tagrenden?
Ja. Feltet Kolonner tager et hvilket som helst tal, 12 som standard, og skyderen Tagrende styrer mellemrummet mellem kolonner. Maks. bredde og forskydning former gitterets fodaftryk. Hver af disse er lydhør, så desktop, tablet og mobil kan bruge forskellige værdier.
Viser gitteroverlejringen på hver side?
Nej. Gitterlinje er en indstilling pr. side inde i Sideindstillinger, så du aktiverer den kun på de sider, hvor du vil have overlejringen. Slå Aktivér skift fra, når du er færdig med at justere, og den side går tilbage til et rent lærred.
Er Grid Line-udvidelsen gratis?
Ja. Grid Line leveres med den gratis version af Master Addons for Elementor, i gruppen Display Widgets under fanen Extensions. Kontroller prissætning side for at se, hvad Pro-planerne tilføjer ud over de gratis udvidelser.
Indpakning #
Grid Line-udvidelsen giver Elementor den ene ting, som ethvert designværktøj allerede har: et rigtigt søjlegitter at bygge imod. Aktiver det én gang i instrumentbrættet, slå det til fra Sideindstillinger, når du har brug for det, og indstil kolonnerne, tagrenden og farven, så de passer til dit designsystem. Gennemse resten af Master Addons widgets og udvidelser for flere værktøjer som dette, herunder Hvilket element hold markøren på etiketter til redaktøren.
