Divi-Plugin-Highlight: Divi Toolbox

Divi Toolbox ist ein Drittanbieter-Plugin, das Divi viele neue Effekte hinzufügt, die normalerweise CSS, JavaScript, PHP oder viele einzelne Plugins erfordern würden. Die Effekte sind einfach zu verwenden und anzupassen und verleihen Ihrer Divi-Website einen zusätzlichen Glanz, um sich von der Masse abzuheben.

Zu den Effekten gehören Site-weite Änderungen, neue mobile Menüs, Partikelhintergründe, Fußzeilen, Widgets, Styling, Animationen, Kopfzeilen, Navigation, neue Blog-Layouts, Divi-Layouts an neuen Orten, Anpassung des Anmeldebildschirms, Popups und vieles mehr. Viele der Funktionen können mit neuen Ergänzungen zum Theme-Anpasser gestaltet werden. Divi Toolbox funktioniert nicht mit Extra oder dem Divi Builder-Plugin.

Allgemeine Einstellungen der Divi Toolbox

Der Divi Toolbox-Optionsbildschirm wird dem Divi-Dashboard-Menü hinzugefügt. Hier werden Einstellungen aktiviert, die Anpassungen werden jedoch im Customizer vorgenommen.

Zu den allgemeinen Einstellungen gehören der globale Überschriftenstil, das Anpassen der Anmeldeseite, das Ausblenden von Projekten, das Hochladen von SVG-Dateitypen, die benutzerdefinierte Bildlaufleiste des Browsers, 404-Seiteneinstellungen (wählen Sie ein Layout und blenden Sie die Kopf- und Fußzeile aus) und Einstellungen für soziale Symbole (Styling aktivieren, in öffnen). eine neue Registerkarte und fügen Sie weitere Symbole hinzu).

Wenn Sie weitere soziale Symbole hinzufügen, wird ein Feld geöffnet, in das Sie die URL für 9 weitere soziale Netzwerke eingeben können.

Hier ist die Registerkarte Allgemein im Customizer, auf der ich die von mir aktivierten Einstellungen anpassen kann. Zu den Einstellungen gehören Überschriften und Schriftarten, die Bildlaufleiste des Browsers und der Anmeldebildschirm. In diesem Beispiel habe ich einige Anpassungen am h1- und Fließtext vorgenommen und der Bildlaufleiste ein Styling hinzugefügt. Ich habe auch mehr soziale Symbole hinzugefügt.

Für den Anmeldebildschirm müssen Sie Ihre Änderungen vornehmen und sich dann abmelden oder den Bildschirm in einem anderen Browser anzeigen.

Hier ist mein Anmeldebildschirm, nachdem ich ein Hintergrundbild, ein Logo hinzugefügt und die Größe und Farben der Felder und des Textes geändert habe. Es erfordert ein wenig Optimierung, da Sie den Bildschirm nicht sehen können, während Sie Ihre Änderungen vornehmen.

Divi Toolbox Header-Einstellungen

Die Kopfzeileneinstellungen fügen dem Menü einen Stil hinzu, aktivieren ein benutzerdefiniertes Dropdown-Menü, fügen eine CTA-Menüschaltfläche hinzu, ändern das Logo im festen Menü, aktivieren überlappende Logos und fügen ein Divi-Layout vor der Navigation auf der Startseite und ein Layout davor und danach hinzu Navigation auf anderen Seiten.

Mit der CTA-Menüschaltfläche können Sie den CTA auf das erste oder letzte Menüelement anwenden oder eine benutzerdefinierte Klasse anwenden. Es enthält das CSS und Anweisungen zum Hinzufügen.

Hier ist der Customizer für den Header. Ich habe ein Layout über dem Menü hinzugefügt (in diesem Beispiel ist es nur ein Textmodul, aber Sie können ein komplettes Layout hinzufügen, wenn Sie möchten). Das überlappende Logo hat einen quadratischen Kasten mit Schatteneffekten. Ich habe die Logogröße von 200 auf 140 geändert und die Social Icons in das Hauptmenü verschoben. Ich fahre mit der Maus über das Menüelement Dienste, damit Sie den CSS-Effekt sehen können.

Divi Toolbox-Fußzeileneinstellungen

Die Fußzeileneinstellungen umfassen eine klebrige Fußzeile, Fußzeilenanzeige, Anpassen von Menüs und Widgets, Anpassen der Zurück-nach-oben-Schaltfläche (die eine benutzerdefinierte Schaltflächen-Link-Option hinzufügt) und Hinzufügen von Vorher- und Nachher-Fußzeilenlayouts.

In diesem Beispiel habe ich die Kopfzeilen- und Menüschriftarten in Großbuchstaben geändert und den Abstand vergrößert. Ich habe auch die Hover-Farben angepasst und ein Symbol neben dem Text beim Hover hinzugefügt. Ich habe ein Layout nach dem Fußzeilenlayout hinzugefügt. Dieser verwendet eine enthüllte Fußzeile (weshalb sich der Text hinter dem Textmodul darüber befindet).

Ich habe die Schaltfläche "Zurück nach oben" so gestaltet, dass Text angezeigt wird. Es hat einen Schatteneffekt und ich habe seine Position angepasst. Die Farben habe ich standardmäßig belassen. Ich habe den unteren Text und die sozialen Symbole zentriert. Für den Schwebeeffekt habe ich Wachsen gewählt (er umfasst auch Schrumpfen, Aufwärts bewegen, Abwärts bewegen, Wackeln, Herzschlag, Wackelpudding und Puls). Ich fahre mit der Maus über das Facebook-Symbol, damit Sie den Effekt sehen können.

Divi Toolbox Mobile-Einstellungen

Die Mobile- Einstellungen umfassen ein Feld zum Eingeben des Mobile-Menü-Haltepunkts (die genaue Bildschirmbreite, wenn das Menü von Desktop zu Mobile wechselt), benutzerdefinierte Stile, das Logo ändern, den Hamburger-Symbol-Klickeffekt auswählen, das verschachtelte Untermenü reduzieren und aktivieren mehrere CSS-Klassen. Mit den CSS-Klassen können Sie die Spalten umkehren und den Text, die Module und Schaltflächen zentrieren.

Sehen Sie sich die Seite in Google Chrome mit ausgewählter Responsive-Option an. Sobald ich die Bildschirmgröße unter 980 Pixel nahm, änderte es sich in das von mir ausgewählte Handy-Symbol und fügte das Hamburger-Menü mit der von mir ausgewählten Animation hinzu.

In diesem Bildschirm gestalte ich die Hintergrundfarbe des mobilen Menüs, die Hintergrundfarbe des Mauszeigers und das Hamburger-Menü. Ich habe den Text für die Hauptmenüpunkte in Großbuchstaben geändert und den CTA-Textstandard belassen. Ich habe auch den Hintergrund für den CTA-Menüpunkt geändert. Sie können auch die Menü- und Symbolgröße anpassen.

Divi Toolbox Blog-Einstellungen

Mit den Blog- Einstellungen können Sie die Seitenleiste und Widgets, das Post-Meta, das Archiv und die Kategorieseiten anpassen, ein Layout auswählen (aus 6 Optionen), die Seitenleiste des Archivs ausblenden und den Text der Schaltfläche "Weiterlesen" anpassen.

Für einzelne Beiträge können Sie das Seitenleistenlayout auswählen, den Beitragstitel ausblenden, ein Autorenfeld hinzufügen, vorherige und nächste Links hinzufügen, verwandte Beiträge hinzufügen und das Kommentarformular anpassen. Sie können auch benutzerdefinierte Layouts nach der Navigation zu einzelnen Posts, Archiven, Kategorien, Autorenseiten und Suchergebnisseiten hinzufügen.

Für die Blog-Seite habe ich der Seitenleiste einen Schatteneffekt hinzugefügt, die Schriftarten und deren Stil geändert, das Suchfeld gestaltet und den Rahmen vergrößert. Es verwendet ein wechselndes Layout und ich habe den Text der Schaltfläche "Weiterlesen" angepasst.

Dieses Beispiel ist Layout 6. Ich habe die Metaschriftfarben erneut angepasst und eine Hover-Farbe hinzugefügt. Ich habe auch den Hintergrund der Schaltfläche "Weiterlesen" angepasst.

Mit den einzelnen Blog-Posts können Sie jedes der Elemente anpassen, die Sie in den Blog-Einstellungen hinzugefügt haben. In diesem Bildschirm passe ich die verwandten Beiträge, die nächsten und vorherigen Links sowie das Autorenfeld an. Sie haben die Kontrolle über alle Texte, Farben, Schatten usw.

In diesem Beispiel passe ich das Kommentarformular an. Sie haben die Kontrolle über die Farben des Felds (sowohl Fokus als auch Nicht-Fokus), Rahmen, Text, Farben, Schaltflächen usw. Ich habe die Hintergrundfarbe der Schaltfläche und die Fokusfarbe des Felds geändert, dem Feld einen Rahmen hinzugefügt und die geändert Radius.

Einstellungen für Divi Toolbox-Module

Die Registerkarte Module bietet Einstellungen zum Hinzufügen eines Mauszeiger-Hover-Effekts, zum Hinzufügen eines schlanken E-Mail-Opt-Ins (es bietet CSS für drei verschiedene Optionen), sekundäre Schaltflächen (die eine neue Anpassungsebene hinzufügen) und viele Optimierungen.

Zu den Optimierungen gehören ein animiertes Dreiecksymbol für Akkordeon- und Umschaltmodule, das Entfernen des horizontalen unteren Rahmens und das Auffüllen für Preistabellen, das Verschieben des Hochformats unter den Inhalt in Testimonials, das Ausblenden horizontaler Bildlaufleisten und das Hinzufügen von CSS zum vertikalen Ausrichten von Spalten und zum Ändern der Höhe eines Elements auf 100 % seiner Ansichtsfensterhöhe.

Hier ist ein Blick auf das schlanke E-Mail-Opt-In. Es platziert alle Felder in einer einzigen Zeile. In diesem Beispiel wird auch die sekundäre Schaltfläche verwendet. Nur die Schaltflächen, denen ich die CSS-Klasse hinzugefügt habe, erhalten diese Änderungen. Die Verwendung der CSS-Klasse bedeutet, dass ich jetzt zwei globale Schaltflächenstile habe.

Divi Toolbox Extras-Einstellungen

Die Registerkarte Extras enthält Preloader, Popups, Partikelhintergrund, 3D-Neigungseffekt und Parallax-Scrolling für Module.

Es stehen 12 Preloader zur Auswahl. Sie können sie nur auf der Startseite anzeigen lassen, wenn Sie möchten, und ihren Übergangstyp und ihre Geschwindigkeit auswählen. Der Auswahlbildschirm zeigt die Animationen der Preloader. Sie können sie im Theme-Anpasser weiter anpassen.

Lösen Sie die Popups mit einem beliebigen Link aus einem Menüelement, einer Schaltfläche, einem Link im Text usw. aus. Erstellen Sie so viele wie Sie möchten. Wählen Sie ein beliebiges vorgefertigtes Layout für das Popup. Passen Sie den Hintergrund und die Schaltfläche zum Schließen im Customizer an.

Dies bewegt Teilchen. Sie haben die volle Kontrolle über Farbe, Form, Anzahl der Partikel, Geschwindigkeit, Größe, Liniengröße, Deckkraft und Interaktivität. Es gibt zwei CSS-IDs für Partikel, sodass Sie zwei verschiedene Designs haben.

Hier ist ein Blick auf die Neigungsfunktion. Sie können Neigung, Perspektive, Skalierung, Geschwindigkeit und Blendung anpassen. Fügen Sie es zu einem beliebigen Abschnitt, einer Zeile oder einem Modul hinzu.

Divi Toolbox-Lizenz

Es stehen zwei Lizenzen zur Auswahl:

• Reguläre Lizenz (für die Verwendung in einem Projekt) – 49,00 €
• Erweiterte Lizenz (für unbegrenzte Projekte) – 169,00 €

Gedanken beenden

Ich bin beeindruckt von der Menge an Funktionen und Einstellungen dieses Plugins. Besonders gut gefällt mir, dass Blog-Posts, die nicht mit dem Divi-Builder erstellt wurden, verwandte Beiträge, vorherige und nächste Links sowie eine Autorenbox hinzugefügt werden. Die Scrollbar ist auch eine nette Geste.

Es gibt einige Einstellungen, auf die Sie in den Divi-Modulen zugreifen können, z. B. Kopfzeilentext, aber dies enthält mehr Details zu diesen Einstellungen. Ich würde gerne ein paar weitere Anpassungen sehen (z. B. Schatteneffekte für das Kommentarfeld, mehr Logo-Optionen, Platzierung von Social-Media-Symbolen usw.).

Wenn Sie daran interessiert sind, Divi auf einfachste Weise eine Menge neuer Effekte hinzuzufügen, ist Divi Toolbox einen Blick wert.

Wir wollen von dir hören. Haben Sie Divi Toolbox ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren unten mit.

Ausgewähltes Bild über vasabii / shutterstock.com