16/08/2023
Divi Booster: En dybdegående guide til optimering af dit Divi-websted
Divi Theme er kendt for sin fleksibilitet og brugervenlighed, men hvad hvis du ønsker endnu mere kontrol og ydeevne? Her introducerer vi Divi Booster, et alsidigt plugin designet til at udvide Divi Themes funktionalitet markant. Dette plugin tilføjer over 50 nye konfigurationer, der påvirker alt fra header, sideindhold, posts, moduler, sidebar, footer, menuer og meget mere. Lad os dykke ned i, hvad Divi Booster kan tilbyde, og hvordan det kan forbedre din hjemmeside.
Hvad er Divi Booster?
Divi Booster er et plugin udviklet af Dan fra DiviBooster.com. Ideen bag pluginnet er at samle en lang række kodebidder og tutorials, der kan forbedre Divi Theme, i et letanvendeligt plugin. I stedet for at kopiere og indsætte kode manuelt i din child theme, hvilket kan være tidskrævende og fejlbehæftet, tilbyder Divi Booster en enkel løsning: Upload pluginnet, vælg dine ønskede funktioner, og du er færdig. Dette eliminerer behovet for kodning og sikrer, at dine tilpasninger forbliver intakte, selv ved opdateringer af temaet.
Ydeevne og hastighed
En af de mest bemærkelsesværdige fordele ved Divi Booster er dets fokus på ydeevne. Pluginnet er optimeret til hastighed ved at præ-kompilere og minificere sin kode, når du gemmer dine indstillinger. Dette betyder, at siden indlæses hurtigere for dine besøgende, da koden er klar, før siden anmodes. Faktisk loader Divi Booster hurtigere end at placere kode direkte i temaets filer.
Kompatibilitet med Extra Theme
Selvom Divi Booster primært er designet til Divi Theme, fungerer nogle af funktionerne også med Elegant Themes' Extra Theme. Dan tilbyder specifikke kodebidder og tutorials for Extra Theme på sin hjemmeside, men et dedikeret plugin til Extra er endnu ikke tilgængeligt. Hvis du er interesseret, opfordres du til at give feedback til Dan.
Overblik over Divi Boosters funktioner
Divi Booster integreres direkte i Divi-menuen i dit WordPress-dashboard. Menuen er organiseret i 12 hovedkategorier, som hver især indeholder flere underkategorier med specifikke indstillinger. Hver indstilling har et informationsikon, der linker til den originale blogpost, hvor du kan finde yderligere detaljer og den underliggende kode. Men med pluginnet behøver du aldrig at røre koden selv.
Site-wide Settings
- Icons: Upload dine egne ikoner til blurb- og gallerimoduler. Du kan også tilføje flere social media-ikoner til din footer og vælge, om links skal åbne i et nyt vindue.
- Layout: Placer et billede over headeren, tilføj en sticky widget, der forbliver synlig på skærmen, lad indhold overlappe headeren i boks-layout, og fjern skygger i boks-layout. Disse funktioner giver dig mulighed for at skabe unikke og dynamiske layouts.
- Anchor Link Scrolling: Løser problemer med ankerlinks, der ikke fører præcist til den ønskede sektion.
- Site Speed: Komprimerer sidens downloadstørrelse for at forbedre indlæsningstiden og hjælpe med PageSpeed Insights-optimering.
Header-optimeringer
Divi Booster tilbyder omfattende kontrol over både top- og hovedheaderen, samt mobilheaderen:
- Top Header: Flyt ikoner til højre, vis sociale ikoner på sekundær menu på mobile enheder, ændr hover-farver, placer kontaktikoner til venstre og sociale ikoner til højre, tilføj tekst til venstre side, og gør telefonnumre klikbare.
- Main Header: Tilføj et nyt widgetområde under navigationslinks, centrer header-links vertikalt, indstil headerens krympe-punkt, brug mobilheaderen på desktop, skjul bundlinjen, forhindr headeren i at krympe ved scroll, skjul headeren helt for brugerdefinerede designs, og sæt minimumshøjden for både normal og krympet header. Derudover er der muligheder for at tilpasse farver på undermenu-hover, menu-links hover, søgeikon-hover, samt justere afstanden mellem menupunkter, logoets link-URL og teksten for den centrerede menu-side.
- Mobile Header: Implementer et app-lignende layout, skjul søgeikonet, tilføj tekst før menu-knappen, indstil skriftstørrelse og skjul sekundære menuer.
Indholdsoptimeringer (Posts & Pages)
- Posts: Gør featured billeder lige så brede som indholdsområdet, ret kommentarknappens responsivitet, bevar featured posts højde uden beskæring, og forhindr featured billeder i at strække sig.
- Pages: Tilføj side-layout muligheder til Divi Builder-sider, hvilket normalt kun er tilgængeligt i standardeditoren. Dette kan spare betydelig tid.
Sidebar og Footer
- Sidebar: Tilpas baggrundsfarven på sidebaren og fjern den delende linje.
- Footer: Rediger footer-editor for at centrere footer-links, erstatte dem med brugerdefineret tekst eller HTML. Brug shortcodes til at vise copyright-symbolet og forskellige formater for året.
Divi Builder Tilpasninger
- Standard Builder: Gør modulindstillinger fuldskærm, aktiver builder på brugerdefinerede post-typer (ideelt til WooCommerce), og indstil minimumsbredden for CTA-knapper. Fuldskærmsmodulindstillinger hjælper med at visualisere flere valgmuligheder på skærmen.
- Visual Builder: Vis hover-grænser på moduler for bedre layout-visualisering.
Modul-specifikke forbedringer
Divi Booster tilbyder en bred vifte af tilpasninger til specifikke moduler:
| Modul | Tilpasninger |
|---|---|
| Accordion | Lukket som standard, Gør dem lukkelige |
| Blurb | Gør venstreplacerede ikoner større |
| Countdown | Skjul foranstillet nul på dage |
| Gallery | Tilpas billedstørrelser, antal billeder pr. række, kantfarve, centrering, deaktiver slide-in, skjul titler |
| Header (Full-width) | Få scroll-down ikonet til at hoppe, ret IE fuldskærmsdisplay-problemer |
| Map | Brug eget billede som pin-ikon |
| Portfolio | Tilpas billeder pr. række, billedhøjde og -bredde, fyld containeren |
| Portfolio (Filterable) | Samme funktioner som almindelig portfolio |
| Portfolio (Full-width) | Tilføj mellemrum mellem projektbilleder, undgå beskæring/strækning |
| Post Navigation | Byt om på næste og forrige links |
| Post Slider | Billedlink til post, firkantede/hule kontrolknapper |
| Pricing Table | Ret afstands-problemer, forbedret stil, runde hjørner, + og x feature-grafik, gennemstregning af ikke-tilgængelige features |
| Signup | Horisontal stil |
| Slider | Standardhøjde, baggrundsfarve med opacitet, billeder til højre, åbn links i ny fane, deaktiver slide-in, firkantede/hule kontrolknapper, billedlink til indhold |
| Text | Øg afstand omkring punktlister |
Plugin og udvikler-værktøjer
- WooCommerce: Fjern indkøbskurv-ikonet fra headeren, vis fire produkter pr. række.
- Other: Ret header-overlap for Simple Lightbox, ret PageLoader layout-problemer i Chrome.
- CSS Manager: Vis og administrer brugerdefineret CSS. Tilføj ubegrænsede CSS-bokse.
- Developer Tools: Importér/eksportér plugin-indstillinger, vis genereret CSS, JavaScript, Footer HTML og .htaccess-regler. Mulighed for at deaktivere minificering.
- Depreciated: Funktioner til ældre versioner af Divi (2.4 eller lavere).
Ja, Divi Booster kan konfigureres til at vise hamburger-menuen på alle skærmstørrelser, hvilket giver dig mulighed for at skjule de normale menupunkter på desktops. Dette er især nyttigt, hvis du ønsker et renere design eller ønsker at tvinge brugerne til at interagere med en skjult menu.
Konklusion
Divi Booster er et uvurderligt værktøj for enhver, der ønsker at maksimere potentialet i Divi Theme. Med over 50 funktioner, der dækker alt fra design og layout til ydeevne og funktionalitet, tilbyder pluginnet en omfattende løsning til at skræddersy din hjemmeside. Den brugervenlige grænseflade og muligheden for nemt at tilgå yderligere information gør det til et oplagt valg, især når man betragter den tidsbesparelse, det medfører i forhold til manuel kodning. Hvis du bruger Divi, er Divi Booster en investering, der hurtigt betaler sig selv hjem.
Ofte stillede spørgsmål
Spørgsmål: Kan jeg bruge Divi Booster på flere hjemmesider?
Svar: Ja, pluginnet kan installeres på et ubegrænset antal hjemmesider, både til dig selv og dine klienter, uden behov for licensnøgler.
Spørgsmål: Kræver Divi Booster, at jeg bruger en child theme?
Svar: Nej, da det er et plugin, behøver du ikke at bruge en child theme, og dine tilpasninger vil ikke forsvinde ved temaopdateringer.
Spørgsmål: Hvor mange hovedkategorier er der i Divi Booster?
Svar: Der er 12 hovedkategorier, som hver især indeholder yderligere indstillinger og muligheder.
Spørgsmål: Kan Divi Booster forbedre min hjemmesides hastighed?
Svar: Ja, Divi Booster inkluderer funktioner til at komprimere sider og optimere indlæsningstiden, hvilket kan forbedre din PageSpeed Insights-score.
Hvis du vil læse andre artikler, der ligner Divi Booster: Mere kontrol over din hjemmeside, kan du besøge kategorien Teknologi.