Brugerdefineret elementorbrudpunkter Opsætning og konfiguration af mastertilføjelser #
Den frie Brugerdefinerede brudpunkter for Elementor plugin fra Master Addons (3 brugerdefinerede breakpoints gratis, ubegrænset med Master Addons Pro) lader dig oprette fuldt responsive hjemmeside layouts optimeret til skærmstørrelser ud over Elementors indbyggede enhedsvisninger. Dette sikrer en ensartet brugeroplevelse af høj kvalitet på tværs af enhver enhed.
Ved hjælp af brugerdefinerede elementorbrudpunkter kan du:
- Tilføj så mange brugerdefinerede brudpunkter (skærmbredder) efter behov (ubegrænset med Master Addons Pro).
- Definer specifikke layout, skriftstørrelser, mellemrum og justering for enheder som Small Mobile, Large Tablet eller brugerdefinerede skærmstørrelser.
- Tilsidesæt Elementors standard responsive adfærd ved præcise pixelbredder.
Hvad er brugerdefinerede elementorbrudpunkter? #
Brugerdefinerede Elementor-brudpunkter er ekstra, brugerdefinerede skærmbredder, der lader dit layout tilpasse sig i størrelser Elementors indbyggede visninger dækker ikke. Elementor har op til syv enhedsvisninger (Mobilportræt, Mobilt landskab, Tabletportræt, Tabletlandskab, Bærbar computer, Desktop og Widescreen). Et brugerdefineret brudpunkt tilføjer endnu et ved den nøjagtige maksimale bredde, du vælger, for eksempel en 600px lille mobil visning. Master Addons tilføjer op til 3 brugerdefinerede brudpunkter på den gratis plan og ubegrænsede brudpunkter med Pro, hvilket giver dig præcis kontrol over responsivt design uden at røre kode.
Så lad os se, hvordan du opsætter og konfigurerer denne funktion.
Opsætning af brugerdefinerede elementorbrudpunkter #
Hurtigt svar: installer Custom Breakpoints-udvidelsen fra Master Addons > Udvidelse, åbne den nye Brudpunkter side under menuen Mastertilføjelser, og indtast derefter en Max-bredde i pixels for hver enhedsstørrelse, du vil målrette mod (f.eks. 600px for lille mobil).
Følg disse trin for at installere og definere dine brugerdefinerede brudpunkter.
Trin 1: Installer og aktiver udvidelsen #
- Naviger til Master Addons menu i dit WordPress dashboard.
- Gå til lokaltelefon fane.
- finde "Tilpassede brudpunkter" valgmulighed og klik på download-knappen for at installere og aktivere den på dit websted.
Trin 2: Få adgang til indstillingerne for brudpunkter #
- I WordPress dashboard, hold markøren over Master Addons menu.
- Et nyt menupunkt med titlen "brudpunkter" vises. Klik på det. Dette vil omdirigere dig til den brugerdefinerede breakpoint input side.
Trin 3: Tilføj brugerdefinerede brudpunkter #
På Breakpoints-inputsiden vil du se dine aktive Elementor-brudpunkter og deres pixelområder.
For at tilføje et nyt brugerdefineret brudpunkt skal du bruge inputfeltet til kun at indstille Max-bredde (i pixels).
For eksempel, for at målrette mod små mobile enheder, skal du indtaste 600px som max bredde.
Efter lagring vil systemet automatisk justere Min-Width for det næste standardbrudpunkt. I eksemplet ovenfor vil “Small Mobile”-brudpunktet gælde for alle skærme mindre end eller lig med 600px, mens standard “Mobil” breakpoint vil starte ved 601px og slut ved Tablet-brudpunktets minimumsbredde.
Du kan tilføje eller fjerne brudpunkter efter behov fra denne side.
Brug af brugerdefinerede elementorbrudpunkter #
Når de er konfigureret i indstillingerne for Master Addons, bliver de brugerdefinerede brudpunkter tilgængelige direkte i Elementor-sideeditoren.
Trin 1: Åbn Responsive Mode i Elementor #
Gå til en hvilken som helst side og klik “Rediger med Elementor.” Klik på Responsiv tilstand ikon (normalt en skærm og telefonikon) nederst til venstre i panelet.
Trin 2: Vælg et brugerdefineret brudpunkt #
Den øverste bjælke vil vise alle tilgængelige brudpunkter, herunder de brugerdefinerede, du har oprettet (f.eks. “Small Mobile”).
Klik på din Brugerdefineret Breakpoint sådan ændrer du editorvisningen til den specifikke skærmstørrelse.
Trin 3: Anvend brugerdefinerede stilarter #
Vælg et hvilket som helst element (f.eks. en Heading-widget).
Gå til elementets måde fane.
Klik på responsivt ikon (desktop monitor) ved siden af enhver stil indstilling, som f.eks Typografi > Størrelse eller Indhold > Justering.
Definer en bestemt værdi for det pågældende brudpunkt (indstil f.eks. skriftstørrelsen til 20px). Denne værdi vil kun gælde, når browserbredden er inden for det område, der er defineret for det pågældende brugerdefinerede breakpoint.
Trin 4: Gem og forhåndsvisning #
Når du har defineret dine responsive styles for alle nødvendige breakpoints, skal du klikke opdater for at gemme siden.
Se et eksempel på siden live, og tilpas størrelsen på dit browservindue for at se, at dine brugerdefinerede brudpunkter udløser de unikke stilarter, du definerede.
Ofte stillede spørgsmål #
Hvor mange brugerdefinerede brudpunkter kan jeg tilføje i Elementor?
Master Addons tilføjer op til 3 brugerdefinerede breakpoints på den gratis plan og ubegrænsede breakpoints med Master Addons Pro. Hvert breakpoint er en ekstra skærmstørrelse med maks. bredde, der er lagt oven på Elementors indbyggede enhedsvisninger for fuldt responsive layouts.
Hvordan tilføjer jeg et brugerdefineret breakpoint i Elementor?
Installer Custom Breakpoints-udvidelsen fra fanen Master Addons Extension, åbn den nye Breakpoints-side under menuen Master Addons, og indtast en Max-Width i pixels — for eksempel 600px for small mobile. Når du har gemt, vises det nye breakpoint i Elementors Responsive Mode klar til stil.
Kræver brugerdefinerede brudpunkter Elementor Pro?
Nej. Brugerdefinerede brudpunkter er en master addons plugin, ikke en Elementor Pro-funktion. Det gratis Custom Breakpoints-plugin giver dig op til 3 brugerdefinerede breakpoints, og kun den højere grænse kræver Master Addons Pro.
Skal jeg indstille en min-bredde for hvert brudpunkt?
Nej. Du indtaster kun Max-Width. Master Addons justerer automatisk Min-Width af det næste breakpoint, så intervallerne aldrig overlapper hinanden — for eksempel gør et 600px small-mobile breakpoint, at standardvisningen Mobil starter ved 601px.
Gør brugerdefinerede breakpoints min hjemmeside langsommere?
Nej. Breakpoints tilføjer kun standard CSS medieforespørgsler, som er lette, og de stilarter, du indstiller, indlæses nøjagtigt som Elementors indbyggede responsive stilarter. Følger generelt Elementor hastighed bedste praksis holder siden hurtig uanset hvor mange breakpoints du bruger.
For en sammenligning med Elementors indbyggede breakpoints og en live demo, se Brugerdefineret Breakpoints plugin-side.
