Divi Toolbox er en plugin som legger til mange nye effekter til Divi som normalt krever CSS, JavaScript, PHP eller mange individuelle plugins. Effektene er enkle å bruke, tilpasse og gi din nettstedet Web Gi den ekstra gnisten for å skille seg ut fra mengden.

Effekter inkluderer endringer på hele nettstedet, nye mobile menyer, partikkelbakgrunn, bunntekst, widgets, stiler, animasjoner, topptekster, navigering, nye bloggoppsett, Divi-presentasjoner på nye steder, tilpasning av påloggingsskjermen, popup-vinduer osv. Mange funksjoner kan tilpasses med nye tillegg til temaet. Divi Toolbox fungerer ikke med Extra eller Divi Builder-plugin.

Generelle innstillinger for Divi Toolbox

divi toolbox settings.png

Divi Toolbox-alternativskjermbildet legges til Divi-dashbordmenyen. Innstillinger er aktivert her, men justeringer gjøres i tilpasningen.

Innstillingene general inkluderer global overskriftsstil, tilpasset påloggingsside, skjuleprosjekter, tillatelse til å laste opp SVG-filtyper, tilpasset nettleserullelinje, 404 sideinnstillinger (velg layout og skjul topptekst og bunntekst) og sosiale ikoner (aktiver stil, åpen fil). ny fane og legg til flere ikoner).

divi verktøykasse generelle parametre.png

Å legge til sosiale ikoner åpner et felt der du kan skrive inn URL-en til 9 ekstra sosiale nettverk.

legg til sosiale nettverk divi.png

Her er fanen Generelt av tilpasseren, der jeg kan justere innstillingene jeg har aktivert. Innstillingene inkluderer overskrifter og skrifter, rullefelt i nettleseren og påloggingsskjermen. I dette eksemplet har jeg gjort noen justeringer av h1-teksten og brødteksten, og lagt til styling i rullefeltet. Jeg la også til flere sosiale ikoner.

divi toolbox personalization settings.png

For innloggingsskjermbildet må du gjøre endringene dine og deretter logge ut eller se skjermen i en annen nettleser.

tilpasset innloggingsskjerm divi.png

Her er påloggingsskjermen min etter å ha lagt til et bakgrunnsbilde, logo og endret størrelse og farge på felt og tekst. Det tar litt finjustering fordi du ikke kan se skjermen mens du gjør endringene.

Divi Toolbox topptekstinnstillinger

headerinnstillinger divi.png

Innstillingene header legge til en stil i menyen, aktivere en tilpasset rullegardinmeny, legge til en CTA-menyknapp, endre logoen på dockeren, aktivere overleggslogoen og legge til en Divi-layout før navigering på hjemmesiden, samt en formatering før og etter. navigering på andre sider.

verktøylinjekonfigurasjon divi.png

Med CTA-menyknappen kan du bruke CTA på det første eller siste menyelementet eller bruke en tilpasset klasse. Den inneholder CSS og instruksjoner om hvor du skal legge den til.

divi.png headertilpasning

Her er tilpasningen for overskriften. Jeg la til et oppsett over menyen (i dette eksemplet er det bare en tekstmodul, men du kan legge til et fullstendig oppsett hvis du vil). Den overlappende logoen har en firkantet ramme med skyggeeffekter. Jeg endret logostørrelsen fra 200 til 140 og flyttet de sosiale ikonene til hovedmenyen. Jeg svever over menyelementet Tjenester, slik at du kan se CSS-effekten.

Bunntekstinnstillinger i Divi verktøykasse

bunntekstinnstillinger divi.png

Bunntekstinnstillinger inkluderer en klebrig bunntekst, visning av bunntekst, tilpasse menyer og widgets, tilpasse Tilbake til toppen-knappen (som legger til et tilpasset knappelinkalternativ), og legge til før og etter oppsett bunnteksten.

tilpasser bunnteksten divi.png

I dette eksemplet endret jeg overskrift og menyfonter til store bokstaver og økte avstanden. Jeg justerte også sveverfargene og la til et ikon ved siden av sveveteksten. Jeg la til et oppsett etter oppsettet. Dette bruker en avslørt bunntekst (det er grunnen til at teksten ligger bak tekstmodulen ovenfor).

Jeg stylet toppen av siden for å vise tekst. Det har en skyggeeffekt, og jeg justerte plasseringen. Jeg forlot standardfargene. Jeg har sentrert bunnteksten og de sosiale ikonene. For sveveeffekten valgte jeg Grow (den inkluderer også krympe, bevege seg opp, ned, vingle, hjerterytme, jello og puls).

Innstillinger for Divi Toolbox Mobile

verktøykasseinnstillinger for mobile.png

Innstillingene mobil inkluderer et felt for å angi mobilmenyens brytpunkt (den nøyaktige bredden på skjermen når menyen endres fra skrivebordet til mobil), tilpassede stiler, redigere logoen, velg hamburgerikonet klikkeffekt , skjul den nestede undermenyen og aktiver den. flere CSS-klasser. CSS-klasser lar deg reversere kolonner og midtre tekst, moduler og knapper.

Divi-Toolbox-Mobile-Settings-for mobile.png

Her er en forhåndsvisning av siden i Google Chrome med Responsive valgt. Så snart jeg tok skjermstørrelsen under 980px, endret den seg til mobilikonet jeg valgte og la til hamburgermenyen med en animasjon jeg valgte.

mobilmeny animasjon.png

På denne skjermen styler jeg bakgrunnsfarge, svevende bakgrunnsfarge og mobilmeny-hamburger-meny. Jeg endret hovedmenyelementet til store bokstaver og forlot CTA-tekststandarden. Jeg endret også bakgrunnen for CTA-menyelementet. Du kan også justere meny og ikonstørrelse.

Blogginnstillinger Divi Toolbox

blogginnstillinger divi toolbox.png

Parametrene til blog lar deg tilpasse sidefelt og widgets, legge ut meta-, arkiv- og kategorisider, velge et oppsett (fra 6 alternativer), skjule arkivsidefelt og tilpasse knappetekst Les mer.

For enkeltinnlegg kan du velge sidefeltoppsettet, skjule innleggstittelen, legge til en forfatterboks, legge til forrige og neste lenker, legge til relaterte innlegg og tilpasse skjema av kommentarer. Du kan også legge til tilpassede oppsett etter navigering til enkeltinnlegg, arkiver, kategorier, forfattersider og søkeresultatsider.

tilpasse utseendet til blogg divi.png

For bloggsiden la jeg til en skyggeeffekt i sidefeltet, endret skrift og styling, stilte søkeboksen og økte størrelsen på kanten. Den bruker et vekslende oppsett, og jeg tilpasset teksten til les mer-knappen.

resultattilpasningsgrensesnitt blogg divi.png

Dette eksemplet er layout 6. Jeg tilpasset fontfargene for meta-delen igjen og la til en sveverfarge. Jeg tilpasset også bakgrunnen for Lær mer-knappen.

endre skrifttypen til blogginnholdet divi.png

Individuelle blogginnlegg lar deg tilpasse hvert av elementene du har lagt til i blogginnstillinger. I dette skjermbildet tilpasser jeg de tilknyttede artiklene, neste og forrige lenker, samt forfatterområdet. Du kontrollerer all tekst, farger, skygger osv.

tilpasning seksjon kommentar divi.png

I dette eksemplet tilpasser jeg skjema av kommentarer. Du kontrollerer feltfargene (fokus og ikke-fokus), kantlinje, tekst, farger, knapp osv. Jeg endret bakgrunnsfargen på knappen, fokusfargen på feltet, la til en kantlinje til feltet og endret radius.

Divi Toolbox License

Du har valget mellom to lisensiering :

  • Vanlig lisens (skal brukes på et prosjekt) - € 49,00
  • Utvidet lisens (for bruk på ubegrensede prosjekter) - € 169,00

Hva å huske

Jeg er imponert over mengden funksjoner og innstillinger i dette pluginet. Jeg liker spesielt det faktum at det kan legge til lignende artikler, forrige og neste lenker, og et forfatterområde til blogginnlegg som ikke er opprettet med Divi-byggeren. Rullefeltet er også en fin touch.

Du kan få tilgang til noen få innstillinger i Divi-modulene, for eksempel toppteksten, men den gir mer informasjon om disse innstillingene. Jeg vil at det skal legges til noen flere justeringer (f.eks. Skyggeeffekter for kommentarområdet, flere logoalternativer, sosiale medier ikonposisjoner osv.).

Hvis du vil legge til massevis av nye effekter til Divi på den enkleste måten som mulig, er Divi Toolbox verdt en omvei.