Elementor brugerdefinerede brudpunkter: Tilføj flere enhedsstørrelser (gratis plugin)
Brugerdefinerede Breakpoints for Elementor er et gratis plugin fra Master Addons-teamet, der tilføjer dine egne enhedsstørrelser til Elementors responsive tilstand. Elementor stopper ved syv enhedsvisninger. Dette plugin tilføjer breakpoints oven på dem, som en 600px lille telefon eller en 1440px desktop, hver med sit eget navn og pixelbredde. Den gratis version indeholder 3 brugerdefinerede breakpoints, og Master Addons Pro gør dem ubegrænsede. Det fungerer med eller uden Master Addons installeret.
Sådan tilføjes et brugerdefineret breakpoint i Elementor
Tjek først Elementors egne ekstra visninger i Indstillinger for websted > Layout > Breakpoints. Hvis ingen af dem passer, skal du tilføje dine egne:
- Installere Brugerdefinerede brudpunkter for Elementor fra plugins > Tilføj ny og aktiver den.
- Åbn Breakpoints i din dashboardmenu. Hvis Master Addons er aktiv, sidder den under menuen Master Addons.
- Tilføj en enhed, giv den et navn og indtast dens maksimale bredde i pixels, for eksempel 600 til små telefoner.
- Gem. Pluginnet sorterer listen og justerer de tilstødende områder.
- Rediger en side med Elementor, vælg den nye visning i responsiv tilstand og stil dine elementer til den.
Se det virke i live breakpoints demo, eller læs vores guide til brugerdefinerede brudpunkter for Elementor for flere eksempler.
Brugerdefinerede enhedsstørrelser med dine egne navne
Navngiv enheden, og indtast dens maksimale bredde i pixels. Pluginnet sorterer hvert breakpoint efter bredde og udarbejder intervallerne for dig, så en 600px Small Mobile-visning dækker skærme op til 600px, og den næste visning starter ved 601px. Gemte breakpoints vises i Elementors responsive værktøjslinje ved siden af de indbyggede visninger.
- 3 brugerdefinerede breakpoints gratis, ubegrænset med Master Addons Pro.
- Brudpunkter sorterer automatisk efter bredde, så områder overlapper aldrig hinanden.
- En nulstillingsknap for at vende tilbage til Elementors standarder, plus import og eksport med Pro.
Fungerer inde i Elementors responsive tilstand
Brugerdefinerede breakpoints opfører sig som Elementors eget. Vælg den nye visning i den responsive værktøjslinje, og indstil derefter skriftstørrelser, udfyldning, kolonnebredder og andre responsive værdier, der kun gælder inden for det område. Pluginnet hægter sig ind i Elementors breakpoint-system, så de ekstra visninger vises på responsive kontroller i Elementor og i Master Addons-widgets.
- Vælg brugerdefinerede visninger fra samme værktøjslinje som Mobil og Tablet.
- Indstil typografi, afstand og layoutværdier for hver visning.
- Fix layouts, der bryder mellem to af Elementors indbyggede bredder.
Elementors indbyggede breakpoints vs Custom Breakpoints
Elementor gratis og Pro deler de samme syv enhedsvisninger: Mobilportræt (767px), Mobilt landskab (880px), Tabletportræt (1024px), Tabletlandskab (1200px), Bærbar (1366px), Desktop og Widescreen (2400px og opefter). Hver bredde kan redigeres, men du kan ikke tilføje en ottende visning.
| Elementor brudpunkter | Brugerdefineret Breakpoints plugin | |
|---|---|---|
| Price | Free | Gratis, ubegrænset med Master Addons Pro |
| Enhedsvisninger | Op til 7 | Elementors 7 plus 3 brugerdefinerede (gratis) eller ubegrænsede (Pro) |
| Navne | Fast | Din egen |
| Bredder | Redigerbar | Redigerbar |
| Import og eksport | No | Med Pro |
For hvordan du styler hver enhed, når dine brudpunkter er indstillet, læs vores guide til responsivt design med Elementor breakpoints. For at vise eller skjule hele sektioner efter enhed, brug Visningsbetingelser (Pro).
Ofte stillede spørgsmål til brugerdefinerede brudpunkter
Hvad er et eksempel fra den virkelige verden på at have brug for et brugerdefineret brudpunkt?
Tekst og knapper, der ser fint på 767px kan føle sig trang på en 360px telefon. Tilføj en Small Mobile breakpoint på 400px, og derefter øge skriftstørrelsen og knap polstring bare for de skærme. Alt bredere holder den almindelige Mobile stilarter.
Vil tilføjelse af mange breakpoints gøre Elementor-editoren langsommere?
Et par ekstra breakpoints vil ikke gøre en mærkbar forskel. Hver enkelt tilføjer en anden lydhør værdi til hver kontrol, så ti eller flere kan få redaktøren til at føle sig tungere. Tilføj kun de visninger, du rent faktisk vil style. Fem eller seks i alt, standardindstillinger inkluderet, er nok for de fleste websteder.
Påvirker disse brugerdefinerede brudpunkter mit live-websteds CSS og ydeevne?
Hvert breakpoint tilføjer CSS-medieforespørgsler til det stylesheet, Elementor genererer. Det er en lille mængde CSS, så besøgende vil ikke bemærke en forskel i indlæsningstid.
Kan jeg sætte et brudpunkt for "Mobillandskab" vs. "Mobilportræt"?
Du har muligvis ikke brug for en brugerdefineret. Elementor har allerede Mobile Landscape (880px) og Tablet Landscape (1200px) visninger, som du kan slå til i Indstillinger for websted > Layout > Breakpoints. Tilføj et brugerdefineret breakpoint, når du har brug for en bredde, som disse visninger ikke dækker.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
Post/Page Duplicator
