Springe zum Hauptinhalt

So verwenden Sie die Toolbox Toolbox des Themas WordPress Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Zu den Effekten gehören Änderungen auf der gesamten Website, neue mobile Menüs, Partikelhintergründe, Fußzeilen, Widgets, Stile, Animationen, Kopfzeilen, Navigation, neue Blog-Layouts, Divi-Präsentationen an neuen Orten, Anpassung des Anmeldebildschirms, Popups usw. Viele Funktionen können mit neuen Ergänzungen zum Theme-Customizer angepasst werden. Divi Toolbox funktioniert nicht mit Extra oder dem Divi Builder-Plugin.

Allgemeine Einstellungen der Divi Toolbox

divi toolbox settings.png

Der Optionsbildschirm der Divi Toolbox wird dem Divi-Dashboard-Menü hinzugefügt. Die Einstellungen sind hier aktiviert, aber Anpassungen werden im Customizer vorgenommen.

Einstellungen General Dazu gehören der globale Header-Stil, eine benutzerdefinierte Anmeldeseite, das Ausblenden von Projekten, die Berechtigung zum Hochladen von SVG-Dateitypen, eine benutzerdefinierte Browser-Bildlaufleiste und 404-Seiteneinstellungen (Layout auswählen und ausblenden Kopf- und Fußzeile) und soziale Symbole (Stil aktivieren, Datei öffnen). neue Registerkarte und weitere Symbole hinzufügen).

divi toolbox general parameters.png

Durch Hinzufügen von sozialen Symbolen wird ein Feld geöffnet, in das Sie die URL von 9 zusätzlichen sozialen Netzwerken eingeben können.

soziales Netzwerk hinzufügen divi.png

Hier ist die Registerkarte General des Customizers, wo ich die Einstellungen anpassen kann, die ich aktiviert habe. Zu den Einstellungen gehören Überschriften und Schriftarten, eine Browser-Bildlaufleiste und ein Anmeldebildschirm. In diesem Beispiel habe ich einige Anpassungen am h1-Text und -Körper vorgenommen und der Bildlaufleiste einen Stil hinzugefügt. Ich habe auch mehr soziale Symbole hinzugefügt.

divi toolbox customization settings.png

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

Benutzerdefinierter Anmeldebildschirm divi.png

Hier ist mein Anmeldebildschirm, nachdem ich ein Hintergrundbild und ein Logo hinzugefügt und die Größe und Farbe von Feldern und Text geändert habe. Es sind einige Anpassungen erforderlich, da Sie den Bildschirm nicht sehen können, während Sie Ihre Änderungen vornehmen.

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Divi Toolbox Header-Einstellungen

Kopfzeileneinstellungen divi.png

Einstellungen Kopfzeile Fügen Sie dem Menü einen Stil hinzu, aktivieren Sie ein benutzerdefiniertes Dropdown-Menü, fügen Sie eine CTA-Menüschaltfläche hinzu, ändern Sie das Logo auf dem Docker, aktivieren Sie das Overlay-Logo und fügen Sie ein Divi-Layout hinzu, bevor Sie die Startseite durchsuchen 'eine Formatierung vorher und nachher. andere Seiten durchsuchen.

toolbar configuration divi.png

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

divi.png Header-Anpassungsprogramm

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 vollständiges Layout hinzufügen, wenn Sie möchten). Das überlappende Logo hat einen quadratischen Rahmen mit Schatteneffekten. Ich habe die Logo-Größe von 200 auf 140 geändert und die sozialen Symbole in das Hauptmenü verschoben. Ich bewege den Mauszeiger über den Menüpunkt Dienste, damit Sie den CSS-Effekt sehen können.

Fußzeileneinstellungen in der Divi Toolbox

Fußzeileneinstellungen divi.png

Zu den Fußzeileneinstellungen gehören eine klebrige Fußzeile, eine Fußzeile zum Anzeigen, das Anpassen von Menüs und Widgets, das Anpassen der Schaltfläche "Nach oben" (mit der eine benutzerdefinierte Option zum Verknüpfen von Schaltflächen hinzugefügt wird) sowie das Hinzufügen von Layouts vor und nach dem Layout die Fußzeile.

Passen Sie die Fußzeile divi.png an

In diesem Beispiel habe ich die Kopf- 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 Hover-Text hinzugefügt. Ich habe nach dem Layout ein Layout hinzugefügt. Dies verwendet eine aufgedeckte Fußzeile (weshalb sich der Text hinter dem obigen Textmodul befindet).

Ich habe die Schaltfläche oben auf der Seite so gestaltet, dass Text angezeigt wird. Es hat einen Schatteneffekt und ich habe seine Position angepasst. Ich habe die Standardfarben beibehalten. Ich habe den unteren Text und die sozialen Symbole zentriert. Für den Hover-Effekt habe ich Grow gewählt (es umfasst auch Schrumpfen, Auf- und Abbewegen, Wackeln, Herzschlag, Wackelpudding und Puls).

Einstellungen für Divi Toolbox Mobile

Toolbox-Einstellungen für mobile.png

Einstellungen Handy Fügen Sie ein Feld hinzu, um den Haltepunkt für das mobile Menü einzugeben (die genaue Breite des Bildschirms, wenn das Menü von Desktop zu Mobil wechselt), benutzerdefinierte Stile, bearbeiten Sie das Logo und wählen Sie den Hamburger-Symbol-Klickeffekt Reduzieren Sie das verschachtelte Untermenü und aktivieren Sie es. mehrere CSS-Klassen. Mit CSS-Klassen können Sie Spalten invertieren und Text, Module und Schaltflächen zentrieren.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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

Hier ist eine Vorschau der Seite in Google Chrome mit ausgewähltem Responsive. Sobald ich eine Bildschirmgröße von weniger als 980 Pixel gewählt hatte, wurde sie durch das von mir ausgewählte mobile Symbol ersetzt und das Hamburger-Menü mit einer von mir ausgewählten Animation hinzugefügt.

mobiles Menü animation.png

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

Blog Einstellungen Divi Toolbox

blog settings divi toolbox.png

Die Parameter von Blog Mit dieser Option können Sie Seitenleisten und Widgets anpassen, Meta-, Archiv- und Kategorieseiten veröffentlichen, ein Layout auswählen (aus 6 Optionen), die Seitenleiste des Archivs ausblenden und den Schaltflächentext anpassen Weiterlesen.

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 einzelnen Posts, Archiven, Kategorien, Autorenseiten und Suchergebnisseiten auch benutzerdefinierte Layouts zum Durchsuchen hinzufügen.

Passen Sie das Erscheinungsbild des Blogs divi.png an

Für die Blog-Seite habe ich der Seitenleiste einen Schatteneffekt hinzugefügt, die Schriftarten und das Design geändert, das Suchfeld gestaltet und den Rand vergrößert. Es wird ein abwechselndes Layout verwendet und ich habe den Text für die Schaltfläche "Mehr lesen" angepasst.

Ergebnis Anpassung Schnittstelle Blog divi.png

Dieses Beispiel ist Layout 6. Ich habe die Schriftfarben für den Meta-Bereich erneut angepasst und eine Hover-Farbe hinzugefügt. Ich habe auch den Hintergrund für die Schaltfläche Weitere Informationen angepasst.

ändere die Schriftart des Blog-Inhalts divi.png

Mit einzelnen Blog-Posts können Sie jedes Element anpassen, das Sie in den Blog-Einstellungen hinzugefügt haben. In diesem Bildschirm passe ich die zugehörigen Artikel, die nächsten und vorherigen Links sowie den Autorenbereich an. Sie steuern alle Texte, Farben, Schatten usw.

Anpassungsabschnitt Kommentar divi.png

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

In diesem Beispiel passe ich das Kommentarformular an. Sie steuern die Farben des Feldes (Fokus und Nichtfokus), den Rand, den Text, die Farben, die Schaltfläche usw. Ich habe die Hintergrundfarbe der Schaltfläche und die Fokusfarbe des Felds geändert, dem Feld einen Rand hinzugefügt und den Radius geändert.

Divi Toolbox Lizenz

Sie haben die Wahl zwischen zwei Lizenzen :

  • Reguläre Lizenz (zur Verwendung für ein Projekt) - 49,00 €
  • Erweiterte Lizenz (für unbegrenzte Projekte) - € 169,00

Was man sich merken sollte

Ich bin beeindruckt von der Menge an Funktionen und Einstellungen in diesem Plugin. Mir gefällt besonders die Tatsache, dass ähnliche Artikel, vorherige und nächste Links sowie ein Autorenbereich zu Blog-Posts hinzugefügt werden können, die nicht mit dem Divi Builder erstellt wurden. Die Bildlaufleiste ist auch eine nette Geste.

Sie können auf einige Einstellungen in den Divi-Modulen zugreifen, z. B. auf den Kopfzeilentext, der jedoch weitere Details zu diesen Einstellungen enthält. Ich möchte, dass ein paar weitere Verbesserungen hinzugefügt werden (z. B. Schatteneffekte für den Kommentarbereich, mehr Logooptionen, Positionen der Symbole für soziale Medien usw.).

Wenn Sie Divi auf einfachste Weise eine Menge neuer Effekte hinzufügen möchten, ist Divi Toolbox einen Umweg wert.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren