Indholdsfortegnelse
Elementors gratis version giver dig flere breakpoints end de fleste tutorials indrømmer: syv enhedsvisninger i alt, hver med en redigerbar pixelbredde, alle tændt fra Indstillinger for websted. Ingen Pro-licens nødvendig. Hvor det oprindelige system stopper er ved de syv faste slots. Hvis dit design har brug for en ottende visning, eller en enhedsbredde de navngivne slots ikke kort til, er det mellemrum, hvad det gratis Brugerdefineret Breakpoints udvidelse fra Master Addons håndtag. Det dækker styling halvdelen af responsive arbejde, mens en udvidelse som Visningsbetingelser bestemmer, hvilke sektioner der overhovedet vises på hvilken enhed.
Nedenfor: hvad Elementor gratis faktisk indeholder (mere end tre visninger, uanset hvad ældre indlæg hævder), hvordan du aktiverer de ekstra native breakpoints, og hvordan du tilføjer virkelig brugerdefinerede breakpoints på toppen. Den sidste del er gratis op til 3 breakpoints, ubegrænset med Master Addons Pro.
Hvilke breakpoints Elementor gratis giver dig faktisk
For det første myten, der ikke vil dø: ekstra breakpoints i Elementor er ikke låst bag Elementor Pro. Masser af artikler siger stadig, at de er. Siden Elementor 3.4 den gratis version, der leveres funktionen Yderligere brugerdefinerede brudpunkter, understøtter op til syv enhedsvisninger:
- Mobilt portræt: op til 767px som standard (altid aktiv)
- Mobile Landscape: op til 880px
- Tablet Portræt: op til 1024px (altid aktiv)
- Tablet Landskab: op til 1200px
- Laptop: op til 1366px
- Desktop: basisvisningen alt andet forgrener sig fra
- Widescreen: 2400px og op (det ene min-bredde breakpoint i sættet)
Hver eneste af disse pixelværdier kan redigeres. Åbn webstedsindstillinger, skift Tablet Portrait-afskæringen fra 1024px til 900px, gem, færdig. Elementors udviklerdokumentation forklarer maks-bredde logikken nedenunder, hvis du vil have mekanikken.
Så hvad kan den gratis version ikke gøre? To ting. Du kan ikke tilføje et ottende breakpoint, og du kan ikke træde uden for de navngivne slots: de seks ekstra visninger har faste roller, og når de alle er i brug, er det oprindelige system fuldt. Det loft er grunden til, at der overhovedet findes et dedikeret breakpoints-plugin.
Sådan aktiveres Elementors ekstra brudpunkter (gratis, ingen plugin)
Før du installerer noget, skal du tænde for det, Elementor allerede giver dig. Tager omkring et minut:
- Åbn en vilkårlig side med Elementor, og klik på hamburgermenuen i øverste venstre hjørne af panelet, og vælg derefter Indstillinger for websted.
- Gå til Layout → Brudpunkter.
- Klik ind i Aktive Breakpoints marker og tilføj de ønskede visninger: Mobilt landskab, Tabletlandskab, Bærbar computer, Widescreen.
- Juster pixelværdien under hvert brudpunkt, hvis standarden ikke stemmer overens med dit design.
- Hit Gem ændringer. Elementor regenererer sin CSS, og de nye visninger vises i Responsive Mode.
Hvis syv visninger dækker dit projekt, skal du stoppe her. Du har ikke brugt noget og ikke installeret noget. Fortsæt med at læse, hvis du har brug for flere visninger end det, eller et breakpoint, som de navngivne slots ikke kan udtrykke.
Sådan tilføjes brugerdefinerede brudpunkter ud over Elementors syv
Den frie rute forbi Elementors loft er Brugerdefinerede brudpunkter for Elementor, et plugin bygget af Master Addons team. Det kører på egen hånd ved siden af Elementor, ingen andre plugin kræves. Det parrer også med Master Addons hvis du allerede kører det, så du administrerer breakpoints fra samme dashboard som dine widgets. Den gratis version tilføjer op til 3 brugerdefinerede breakpoints med nøjagtig pixel kontrol over hver enhed bredde; Master Addons Pro fjerner hætten helt.
Trin 1: Installer plugin'et
I dit WordPress dashboard skal du gå til Plugins → Tilføj Ny og søg efter “Brugerdefinerede brudpunkter for Elementor”. Installer og aktiver det. Hvis du allerede bruger Master Addons, kan du også tænde det fra fanen Udvidelse i Master Addons dashboard; begge ruter slutter ved samme indstillingsside.
Trin 2: Åbn siden Breakpoints
Et nyt Breakpoints-element vises i din dashboardmenu. Klik på det. Siden viser dine aktuelt aktive breakpoints med deres intervaller, der matcher det, du har konfigureret i Elementors webstedsindstillinger, og giver dig mulighed for at tilføje en ny enhed ovenpå.
Trin 3: Tilføj et brudpunkt med en maks. bredde
Navngiv enheden og indtast dens Max-Width i pixels. For at målrette mod små telefoner skal du skrive 600 og gemme. Pluginnet justerer min-bredden af naboenheden for dig, så intervallerne aldrig overlapper hinanden: din nye Small Mobile-visning dækker skærme op til 600px, og den næste visning starter ved 601px. Der er også 17+ enhedspræindstillinger, der dækker almindelige telefoner, tablets og bærbare computere, så du kan starte fra en rigtig enhedsprofil i stedet for at gætte bredder. På den gratis version kan du tilføje op til 3 af disse brugerdefinerede breakpoints; Master Addons Pro brugere får ubegrænsede breakpoints plus import/eksport.
Trin 4: Style den nye visning i Elementor
Rediger enhver side med Elementor, og klik på responsive-mode ikonet nederst i panelet. Din brugerdefinerede visning sidder nu i enhedslinjen ved siden af standardindstillingerne. Vælg det, vælg et element, og indstil værdier som skriftstørrelse, polstring eller kolonnetælling, der kun gælder inden for det pixelområde. Klik på Opdater, og tilpas derefter din browsers størrelse for at se typografierne udløses. For en dybere gennemgang af styling pr. enhed, se vores guide til responsivt design med Elementor breakpoints.
Gratis vs Pro: hvor mange breakpoints hver mulighed giver dig
Her er sammenligningen, herunder hvad Elementor giver dig, før noget plugin kommer ind i billedet:
| Option | Omkostning | Hvad du får | Limit |
|---|---|---|---|
| Elementor fri (indfødt) | Free | 7 navngivne enhedsvisninger, hver med en redigerbar pixelbredde | Fast sæt med 7, ingen nye slots |
| Brugerdefinerede brudpunkter for Elementor (gratis) | Free | Virkelig brugerdefinerede breakpoints med dine egne navne og nøjagtige bredder, 17+ enhedsforudindstillinger | 3 brugerdefinerede brudpunkter |
| Master Addons Pro | Betalt | Alt over, plus import/eksport og breakpoint sortering | Ubegrænset |
For de fleste websteder dækker Elementors syv visninger plus 3 brugerdefinerede niveauer hvert reelt hul: en lille telefonvisning, en ulige tabletbredde, en kioskvisning. Agenturer, der jonglerer med klientenhedslister, er dem, der rammer den frie hætte, og det er hvem Pro er for. Hvis du vejer hele plugin'et mod alternativer, mens du er i gang, er vores Master Addons vs Ultimate Addons sammenligning dækker det bredere funktionsmatch-up.
Når et brugerdefineret breakpoint faktisk løser et layout
Et brugerdefineret breakpoint er værd at tilføje, når et layout bryder i mellemrummet mellem to eksisterende visninger. Det klassiske tilfælde er et 3-kolonne gitter. Det ser lige ud på skrivebordet over 1025px. Elementor dropper det til 2 kolonner ved 1024px tabletvisningen. På en stor tablet, der holdes i landskabet, efterlader den samme 1024px visning en bred tom kolonne og spilder plads.
Tilføj et brudpunkt ved f.eks. 992px, indstil gitteret tilbage til 3 kolonner der, og layoutet passer til enheden i stedet for at gætte. Det samme træk fungerer for en visning med små telefoner, hvor du støder skriftstørrelser og knappolstring op, der ser trangt ud under 400px, en rækkevidde, som selv Elementors Mobile Portrait-visning behandler som én spand.
Breakpoints parrer også godt med betinget visning. Hvis en sektion kun giver mening på større skærme, styrer et brugerdefineret breakpoint dets styling, mens Visningsbetingelser styrer om det overhovedet dukker op. De to løser forskellige halvdele af det samme responsive problem.
Gør brugerdefinerede breakpoints langsommere på dit websted?
En håndfuld breakpoints vil ikke bremse dit websted på nogen måde en besøgende bemærker. Hver enkelt tilføjer en standard CSS medieforespørgsel, og de stilarter, du indstiller, indlæses nøjagtigt som Elementors indbyggede responsive stilarter. Den tilføjede CSS er lillebitte ved siden af vægten af en typisk side.
Redaktøren er en anden historie. Hvert ekstra breakpoint betyder et mere responsivt panel Elementor skal gengive, så stabling af 10 eller flere kan få redigeringsskærmen til at føles tungere. Tilføj kun de visninger, du rent faktisk vil style. Fem eller seks i alt, standardindstillinger inkluderet, er rigeligt til næsten hvert projekt. Hvis hastighed er din bredere bekymring, er vores guide på sådan fremskynder du Elementor-websteder dækker de rettelser, der faktisk vises i belastningstider.
Hvornår skal man ikke tilføje et brugerdefineret brudpunkt
Brugerdefinerede breakpoints er ikke en rettelse for hver responsiv fejl, og at nå til en først er ofte det forkerte opkald. Hvis et enkelt element opfører sig forkert på én skærmstørrelse, er en målrettet regel i Brugerdefineret CSS er normalt renere end et helt nyt enhedsniveau, der så har brug for styling overalt.
To flere tilfælde for at springe det over. Hvis aktivering af en af Elementors hvilende oprindelige visninger, eller nudging af en standard pixelværdi i Indstillinger for websted, løser problemet, gør det i stedet; det koster intet og holder editoren lys. Og hvis problemet virkelig handler om, hvilket indhold der vises på hvilken enhed i stedet for hvordan den er stylet, er det et job for visningsforhold, ikke et andet brudpunkt.
Custom Breakpoints sidder sammen med resten af Master Addons-værktøjssættet, fra de gratis udvidelser gennem Tema Bygherre, alle bygget til at lukke hullerne Elementor blade åbne.
Ofte stillede spørgsmål
Har Elementor free brugerdefinerede breakpoints?
Ja, mere end de fleste tror. Elementor gratis indeholder syv enhedsvisninger: Mobilportræt, Mobilt landskab, Tabletportræt, Tabletlandskab, Bærbar computer, Desktop og Widescreen. Du aktiverer de ekstra i Indstillinger for websted → Layout → Breakpoints og kan redigere hver pixelværdi. Hvad gratis Elementor ikke kan gøre er at tilføje breakpoints ud over de syv navngivne slots; til det har du brug for det gratis Custom Breakpoints for Elementor plugin.
Hvordan tilføjer jeg et brugerdefineret breakpoint i Elementor?
For de indbyggede visninger skal du åbne Indstillinger for websted → Layout → Brudpunkter, tilføje de ønskede visninger til feltet Aktive brudpunkter og justere deres bredder. For brudpunkter ud over Elementors syv skal du installere det gratis Custom Breakpoints for Elementor-plugin, åbne dets Brudpunkter-side og indtaste et enhedsnavn og Max-Width i pixels, for eksempel 600 for små telefoner. Den nye visning vises derefter i Elementor Responsive Mode klar til at style.
Hvor mange brudpunkter kan du have i Elementor?
Elementor gratis og Pro begge toppe ud på syv indfødte enhed visninger. Den Brugerdefinerede Breakpoints for Elementor plugin tilføjer op til 3 virkelig brugerdefinerede breakpoints oven i det gratis, og Master Addons Pro fjerner hætten for ubegrænsede breakpoints.
Kræver brugerdefinerede brudpunkter Elementor Pro?
Nej, på begge punkter. Elementors egne ekstra breakpoints (Mobile Landscape, Tablet Landscape, Laptop, Widescreen) skib i den gratis version, og Custom Breakpoints for Elementor plugin er gratis også. Ingen Elementor Pro licens er involveret overalt; kun ubegrænset brugerdefinerede breakpoints kalder for Master Addons Pro.
Har Custom Breakpoints plugin brug for Master Addons for at fungere?
Nej. Det fungerer som et selvstændigt plugin med kun Elementor installeret. Det integreres også med Master Addons, hvis du kører begge dele, så du administrerer breakpoints fra samme dashboard som dine widgets og udvidelser, og Master Addons Pro er det, der låser op for ubegrænsede breakpoints.
Gør brugerdefinerede breakpoints min hjemmeside langsommere?
Nej. Hvert breakpoint tilføjer kun en letvægts CSS medieforespørgsel, og stilarterne indlæses som Elementors indbyggede responsive stilarter. Stabling af mange breakpoints kan få editoren til at føles tungere, så tilføj kun de visninger, du rent faktisk vil style.
Relateret læsning
