Divi Toolbox er et plugin som tilføjer mange nye effekter til Divi, der normalt kræver CSS, JavaScript, PHP eller mange individuelle plugins. Effekterne er nemme at bruge, tilpasse og give din Websted Giv det ekstra glimt for at skille sig ud fra mængden.

Effekter inkluderer ændringer på hele webstedet, nye mobile menuer, partikelbaggrund, sidefod, widgets, stilarter, animationer, overskrifter, navigation, nye bloglayouter, Divi-præsentationer på nye placeringer, tilpasning af loginskærmen, pop op-vinduer osv. Mange funktioner kan tilpasses med nye tilføjelser til temaet tilpasning. Divi Toolbox fungerer ikke med Extra eller Divi Builder-pluginet.

Generelle indstillinger for Divi Toolbox

divi toolbox settings.png

Divi Toolbox-indstillingsskærmen føjes til Divi-dashboardmenuen. Indstillinger er aktiveret her, men justeringer foretages i tilpasningen.

Indstillingerne generelt inkluderer global overskriftsstil, brugerdefineret login-side, skjulte projekter, tilladelse til at uploade SVG-filtyper, brugerdefineret browser-rullepanel, 404 sideindstillinger (vælg layout og skjul sidehoved og sidefod) og sociale ikoner (aktiver stil, åbn fil). ny fane og tilføj flere ikoner).

divi værktøjskasse generelle parametre.png

Tilføjelse af sociale ikoner åbner et felt, hvor du kan indtaste URL'en til 9 yderligere sociale netværk.

tilføj sociale netværksdivi.png

Her er fanen generelt af tilpaseren, hvor jeg kan justere de indstillinger, jeg har aktiveret. Indstillinger inkluderer overskrifter og skrifttyper, browserrullepanel og loginskærm. I dette eksempel har jeg foretaget nogle justeringer af h1-teksten og brødteksten og tilføjet styling til rullepanelet. Jeg tilføjede også flere sociale ikoner.

divi værktøjskasse tilpasningsindstillinger.png

For login-skærmen skal du foretage dine ændringer og derefter logge ud eller se skærmen i en anden browser.

brugerdefineret login skærm divi.png

Her er min login-skærm efter tilføjelse af et baggrundsbillede, logo og ændring af størrelse og farve på felter og tekst. Det kræver lidt tilpasning, fordi du ikke kan se skærmen, mens du foretager dine ændringer.

Divi Toolbox header-indstillinger

headerindstillinger divi.png

Indstillingerne Header tilføj en stilart til menuen, aktiver en brugerdefineret rullemenu, tilføj en CTA-menuknap, skift logoet på docker, aktiver overlaylogoet og tilføj et Divi-layout, før du gennemsøger hjemmesiden samt en formatering før og efter. gennemsøger andre sider.

værktøjslinjekonfiguration divi.png

Med CTA-menuknappen kan du anvende CTA på det første eller sidste menupunkt eller anvende en brugerdefineret klasse. Den indeholder CSS og instruktioner om, hvor den skal tilføjes.

divi.png headertilpasning

Her er tilpasningen til overskriften. Jeg tilføjede et layout over menuen (i dette eksempel er det bare et tekstmodul, men du kan tilføje et komplet layout, hvis du vil). Det overlappende logo har en firkantet kasse med skyggeeffekter. Jeg ændrede logoets størrelse fra 200 til 140 og flyttede de sociale ikoner til hovedmenuen. Jeg svæver over menupunktet Tjenester, så du kan se CSS-effekten.

Sidefodsindstillinger i Divi værktøjskasse

sidefodsindstillinger divi.png

Sidefodsindstillinger inkluderer en klistret sidefod, display sidefod, tilpasning af menuer og widgets, tilpas knappen Tilbage til toppen (som tilføjer en brugerdefineret knaplink-indstilling) og tilføj før og efter layout sidefoden.

tilpas sidefod divi.png

I dette eksempel ændrede jeg overskrift og menuskrifttyper til alle bogstaver og øgede afstanden. Jeg justerede også svævefarverne og tilføjede et ikon ved siden af ​​svæveteksten. Jeg tilføjede et layout efter layoutet. Dette bruger en afsløret sidefod (det er grunden til, at teksten ligger bag tekstmodulet ovenfor).

Jeg stylede toppen af ​​siden for at vise tekst. Det har en skyggeeffekt, og jeg justerede placeringen. Jeg forlod standardfarverne. Jeg har centreret den nederste tekst og de sociale ikoner. For svæveeffekten valgte jeg Grow (det inkluderer også krympning, bevægelse op, ned, wobble, hjerterytme, jello og puls).

Indstillinger for Divi Toolbox Mobile

værktøjskasseindstillinger til mobile.png

Indstillingerne mobil inkludere et felt for at åbne mobilmenupunktet (den nøjagtige bredde på skærmen, når menuen skifter fra desktop til mobil), brugerdefinerede stilarter, redigere logoet, vælg hamburgerikonet klikeffekt , skjul den indlejrede undermenu og aktiver. flere CSS-klasser. CSS-klasser giver dig mulighed for at vende kolonner og centrere tekst, moduler og knapper.

Divi-værktøjskasse-mobil-indstillinger-til mobile.png

Her er en forhåndsvisning af siden i Google Chrome med Responsive valgt. Så snart jeg tog skærmstørrelsen lavere end 980 pixels, ændrede den sig til mobilikonet, jeg valgte, og tilføjede hamburgermenuen med en animation, jeg valgte.

mobilmenu animation.png

På denne skærm styler jeg baggrundsfarven, svæver baggrundsfarven og den mobile menu-hamburger-menu. Jeg ændrede hovedmenupunktet til store bogstaver og forlod CTA-tekststandarden. Jeg ændrede også baggrunden for CTA-menupunktet. Du kan også justere menuen og ikonstørrelsen.

Blogindstillinger Divi værktøjskasse

blogindstillinger divi toolbox.png

Parametrene for blog giver dig mulighed for at tilpasse sidebjælke og widgets, sende meta-, arkiv- og kategorisider, vælge et layout (fra 6 indstillinger), skjule arkivsidebjælke og tilpasse knaptekst Læs mere.

For enkelte indlæg kan du vælge sidebjælkelayoutet, skjule indlægstitlen, tilføje en forfatterboks, tilføje forrige og næste links, tilføje relaterede indlæg og tilpasse formular af kommentarer. Du kan også tilføje tilpassede efternavigationslayouts til enkelte indlæg, arkiver, kategorier, forfattersider og søgeresultatsider.

tilpasse udseendet på blog divi.png

Til blogsiden tilføjede jeg en skyggeeffekt til sidebjælken, ændrede skrifttyper og styling, stylede søgefeltet og øgede størrelsen på grænsen. Det bruger et skiftevis layout, og jeg tilpassede teksten til læs mere-knappen.

resultattilpasningsgrænseflade blog divi.png

Dette eksempel er layout 6. Jeg tilpassede fontfarverne til metasektionen igen og tilføjede en svæverfarve. Jeg tilpassede også baggrunden til knappen Lær mere.

ændre skrifttypen på blogindholdet divi.png

Individuelle blogindlæg giver dig mulighed for at tilpasse hvert af de emner, du har tilføjet i blogindstillingerne. På dette skærmbillede tilpasser jeg de tilknyttede artikler, de næste og forrige links samt forfatterområdet. Du styrer al tekst, farver, skygger osv.

tilpasningssektion kommentar divi.png

I dette eksempel tilpasser jeg formular af kommentarer. Du styrer feltfarverne (fokus og ikke-fokus), kant, tekst, farver, knap osv. Jeg ændrede knappens baggrundsfarve, feltets fokusfarve, tilføjede en kant til feltet og ændrede radius.

Divi Toolbox License

Du har valget mellem to licens :

  • Almindelig licens (til brug på et projekt) - € 49,00
  • Udvidet licens (til brug på ubegrænsede projekter) - € 169,00

Hvad man skal huske

Jeg er imponeret over mængden af ​​funktioner og indstillinger i dette plugin. Jeg kan især godt lide det faktum, at det kan tilføje lignende artikler, forrige og næste links og et forfatterområde til blogindlæg, der ikke er oprettet med Divi-bygherren. Rullepanelet er også et godt strejf.

Du kan få adgang til et par indstillinger i Divi-modulerne, f.eks. Overskriftsteksten, men det indeholder flere detaljer for disse indstillinger. Jeg vil gerne tilføje et par flere tweaks (f.eks. Skyggeeffekter til kommentarområdet, flere logoindstillinger, placeringer på sociale medier, ikon osv.).

Hvis du vil tilføje et ton nye effekter til Divi på den nemmeste måde, er Divi værktøjskasse værd at omvejen.