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 Grid Line udvidelse i Master Addons Pro 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 på toppen af dit design i editoren kun, så besøgende aldrig se det, og du kan kontrollere, om dine sektioner og widgets faktisk linje op på gitteret en designer ville bruge i Figma eller Photoshop.
Standarden er et 12 kolonne gitter ved 1140px max bredde med en 15px tagrende, indsnævring til 1025px og 10px på tablet og 768px og 8px på mobil. Hver værdi er justerbar pr. enhed, og hele overlayet tændes og slukkes 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.
- A Master Addons Pro licens, fordi Grid Line er en Pro-udvidelse.
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 at tegne, fra 1 til 12. 12 er standarden, men du kan matche uanset hvilket gitter dit design bruger.
- Max bredde: gitterets samlede bredde, 1140px 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, 15px 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, kan du vende Aktiver træk dig tilbage for at få et rent lærred. At lade det være tændt skader ikke, for gitteret vises aldrig på den publicerede side.
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 Master Addons Pro 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 1 til 12, med 12 som standard, og skyderen Tagrende styrer mellemrummet mellem kolonner. Max bredde og forskydning former gitterets fodaftryk. Hver af disse er responsive, 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. Gitteret vises aldrig på den publicerede side på nogen måde.
Er Grid Line-udvidelsen gratis?
Nr. Grid Line er en Pro-udvidelse i Master Addons, der er angivet i gruppen Display Widgets under fanen Extensions. Se prissætning side for planerne.
Indpakning #
The Grid Line udvidelse 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, vend det videre 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.
