Divi Toolbox är en plugin som lägger till många nya effekter till Divi som normalt kräver CSS, JavaScript, PHP eller många individuella plugins. Effekterna är lätta att använda, anpassa och ge dina webbplats Ge den extra gnistan för att sticka ut från mängden.

Effekterna inkluderar ändringar över hela webbplatsen, nya mobila menyer, partikelbakgrunder, sidfot, widgets, stilar, animationer, rubriker, navigering, nya blogglayouter, Divi-presentationer på nya platser, anpassning av inloggningsskärmen, popup-fönster etc. Många funktioner kan anpassas med nya tillägg till temainpassaren. Divi Toolbox fungerar inte med Extra eller Divi Builder-tillägget.

Allmänna inställningar för Divi Toolbox

divi toolbox settings.png

Alternativskärmen för Divi Toolbox läggs till i Divi-instrumentpanelmenyn. Inställningar är aktiverade här, men justeringar görs i anpassaren.

Inställningarna allmänna inkludera global rubrikstil, anpassad inloggningssida, döljande projekt, behörighet att ladda upp SVG-filtyper, anpassad webbläsarfält, 404 sidinställningar (välj layout och dölj sidhuvud och sidfot) och sociala ikoner (aktivera stil, öppna fil). ny flik och lägg till fler ikoner).

divi verktygslåda allmänna parametrar.png

Lägga till sociala ikoner öppnar ett fält där du kan ange webbadressen till ytterligare 9 sociala nätverk.

lägg till sociala nätverk divi.png

Här är fliken Général av anpassaren, där jag kan justera de inställningar jag har aktiverat. Inställningarna inkluderar rubriker och teckensnitt, webbläsarens rullningsfält och inloggningsskärm. I det här exemplet har jag gjort några justeringar av h1-texten och brödtexten och lagt till styling i rullningsfältet. Jag lade också till fler sociala ikoner.

divi verktygslådan anpassning inställningar.png

För inloggningsskärmen måste du göra dina ändringar och sedan logga ut eller visa skärmen i en annan webbläsare.

anpassad inloggningsskärm divi.png

Här är min inloggningsskärm efter att ha lagt till en bakgrundsbild, logotyp och ändrat storlek och färg på fält och text. Det krävs lite justering eftersom du inte kan se skärmen medan du gör dina ändringar.

Huvudinställningar för Divi Toolbox

header-inställningar divi.png

Inställningarna Header lägg till en stil i menyn, aktivera en anpassad rullgardinsmeny, lägg till en CTA-menyknapp, ändra logotypen på dockaren, aktivera överläggslogotypen och lägg till en Divi-layout innan du surfar på hemsidan, samt en formatering före och efter. navigering på andra sidor.

verktygsfältets konfiguration divi.png

Med CTA-menyknappen kan du tillämpa CTA på det första eller sista menyalternativet eller tillämpa en anpassad klass. Den innehåller CSS och instruktioner om var du ska lägga till den.

divi.png header customizer

Här är anpassaren för rubriken. Jag lade till en layout ovanför menyn (i det här exemplet är det bara en textmodul, men du kan lägga till en fullständig layout om du vill). Den överlappande logotypen har en fyrkantig ruta med skuggeffekter. Jag ändrade logotypstorleken från 200 till 140 och flyttade de sociala ikonerna till huvudmenyn. Jag svävar över menyalternativet Tjänster så att du kan se CSS-effekten.

Sidfotinställningar i Divi Toolbox

sidfotinställningar divi.png

Sidfotinställningar inkluderar en klibbig sidfot, visning av sidfot, anpassa menyer och widgets, anpassa knappen Tillbaka till toppen (som lägger till ett anpassat alternativ för knapplänk) och lägga till före och efter layouter sidfoten.

anpassa sidfot divi.png

I det här exemplet ändrade jag rubriken och menyfonttypen till alla tecken och ökade avståndet. Jag justerade också svävarfärgerna och lade till en ikon bredvid svävartexten. Jag lade till en layout efter layouten. Detta använder en avslöjad sidfot (vilket är anledningen till att texten ligger bakom textmodulen ovan).

Jag formade toppen av sidan för att visa text. Det har en skuggeffekt och jag justerade platsen. Jag lämnade standardfärgerna. Jag har centrerat den nedre texten och de sociala ikonerna. För svävareffekten valde jag Grow (det inkluderar också krympning, flytta upp, ner, vackla, hjärtslag, jello och puls).

Inställningar för Divi Toolbox Mobile

verktygslådan inställningar för mobile.png

Inställningarna mobil inkludera ett fält för att ange brytpunkten för mobilmenyn (skärmens exakta bredd när menyn ändras från skrivbordet till mobil), anpassade stilar, redigera logotypen, välj hamburgarikonen klickaeffekt , komprimera den kapslade undermenyn och aktivera. flera CSS-klasser. Med CSS-klasser kan du vända kolumner och centrera text, moduler och knappar.

Divi-Toolbox-Mobile-Settings-för mobile.png

Här är en förhandsvisning av sidan i Google Chrome med Responsive valt. Så fort jag tog skärmstorleken under 980px ändrades den till mobilikonen jag valde och lade till hamburgermenyn med en animation jag valde.

mobilmeny animation.png

På den här skärmen utformar jag bakgrundsfärg, svävar bakgrundsfärg och mobil menyhamburgarmeny. Jag ändrade texten till huvudmenyalternativen till versaler och lämnade CTA-textstandarden. Jag ändrade också bakgrunden för CTA-menyalternativet. Du kan också justera meny och ikonstorlek.

Blogginställningar Divi Toolbox

blogginställningar divi toolbox.png

Parametrarna för blogg låter dig anpassa sidofältet och widgets, posta meta, arkivera och kategorisidor, välja en layout (från 6 alternativ), dölja arkivsidfältet och anpassa knapptext Läs mer.

För enstaka inlägg kan du välja sidofältslayouten, dölja inläggets titel, lägga till en författarebox, lägga till föregående och nästa länkar, lägga till relaterade inlägg och anpassa formen av kommentarer. Du kan också lägga till anpassade layouter efter navigering till enskilda inlägg, arkiv, kategorier, författarsidor och sökresultatsidor.

anpassa utseendet på bloggen divi.png

För bloggsidan lade jag till en skuggeffekt i sidofältet, ändrade teckensnitt och styling, utformade sökrutan och ökade gränsen. Den använder en alternerande layout och jag anpassade texten för läs mer-knappen.

resultatanpassningsgränssnitt blogg divi.png

Detta exempel är layout 6. Jag anpassade teckensnittsfärgerna för metasektionen igen och lade till en svävarfärg. Jag anpassade också bakgrunden för knappen Läs mer.

ändra teckensnittet för blogginnehållet divi.png

Med enskilda blogginlägg kan du anpassa var och en av objekten du har lagt till i blogginställningarna. På den här skärmen anpassar jag tillhörande artiklar, nästa och tidigare länkar samt författarområdet. Du kontrollerar all text, färger, skuggor etc.

anpassning avsnitt kommentar divi.png

I det här exemplet anpassar jag formen av kommentarer. Du styr fältfärgerna (fokus och icke-fokus), kant, text, färger, knapp, etc. Jag ändrade knappens bakgrundsfärg, fältets fokusfärg, lade till en ram till fältet och ändrade radien.

Divi Toolbox License

Du har valet mellan två licensiering :

  • Vanlig licens (som ska användas i ett projekt) - € 49,00
  • Utökad licens (för användning i obegränsade projekt) - € 169,00

Vad man ska komma ihåg

Jag är imponerad av mängden funktioner och inställningar i detta plugin. Jag gillar särskilt det faktum att det kan lägga till liknande artiklar, tidigare och nästa länkar och ett författarområde till blogginlägg som inte skapas med Divi-byggaren. Scrollfältet är också en fin touch.

Du kan komma åt några inställningar i Divi-modulerna, till exempel rubriktext, men det ger mer information om dessa inställningar. Jag skulle vilja att några fler justeringar läggs till (t.ex. skuggeffekter för kommentarområdet, fler logotypalternativ, ikoner för sociala medier etc.).

Om du vill lägga till massor av nya effekter till Divi på det enklaste sättet är Divi Toolbox värt en omväg.