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:

  1. Installere Brugerdefinerede brudpunkter for Elementor fra plugins > Tilføj ny og aktiver den.
  2. Åbn Breakpoints i din dashboardmenu. Hvis Master Addons er aktiv, sidder den under menuen Master Addons.
  3. Tilføj en enhed, giv den et navn og indtast dens maksimale bredde i pixels, for eksempel 600 til små telefoner.
  4. Gem. Pluginnet sorterer listen og justerer de tilstødende områder.
  5. 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 enhedsbrudpunkter for Elementor

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.
Brugerdefinerede brudpunkter i Elementor editor preview

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 brudpunkterBrugerdefineret Breakpoints plugin
PriceFreeGratis, ubegrænset med Master Addons Pro
EnhedsvisningerOp til 7Elementors 7 plus 3 brugerdefinerede (gratis) eller ubegrænsede (Pro)
NavneFastDin egen
BredderRedigerbarRedigerbar
Import og eksportNoMed 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).

Skabelonfremviser
Facebook
Twitter
WhatsApp
Kopier Link
Køb Nu
Brugerdefineret Breakpoint
Brugerdefineret Breakpoint

Ofte stillede spørgsmål til brugerdefinerede brudpunkter

Lær de mest stillede forespørgsler, brugerne har om brugerdefinerede brudpunkter, og find svar på ét sted.
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.

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.

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.

Master Addons Glassmorphism udvidelse til Elementor: matteret glas kort med Blur Value kontrol indstillet til 20px

Glasmorfisme

Hjem Gratis Elementor Glassmorphism Extension: Frosted Glass Effect i One Toggle Glassmorphism er den frostede...
Se detaljer
Master Addons Container Extras udvidelse til Elementor: container med låg på en 1400px Max bredde, med Max bredde, Max højde, Min bredde og Min højde kontroller

Container ekstraudstyr

Hjem Elementor Container Max bredde og Max højde Controls Container Extras er en gratis Master...
Se detaljer
Master Addons Patterns udvidelse til Elementor: helt med Purple Gradient Grid Left stil, tre flere mønster stilarter og Enable Pattern panelet

Mønstre

Hjem 70 + Gratis Elementor Baggrund Mønstre Mønstre er en gratis Master Addons udvidelse, der tilføjer...
Se detaljer
Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast

Post/Page Duplicator

Hjem Duplikere Elementor Sider og indlæg i One Click Post/Page Duplicator er en gratis Master...
Se detaljer
Master Addons Reading Progress Bar udvidelse til Elementor: blå bjælke 42% udfyldt på tværs af toppen af en privatlivspolitik side, med aktivere, position, højde og fylde farveindstillinger

Læsning Progress Bar

Hjem Tilføj en læsefremskridtsbjælke i WordPress (Elementor) Reading Progress Bar er en gratis...
Se detaljer