Divi-Plugin-Highlight – Divi Switch

Divi Switch ist ein Drittanbieter-Plugin für Divi, das Divi viele neue Funktionen hinzufügt, die Sie mit einem Tastendruck ein- oder ausschalten können. Viele in der Divi-Community kennen Divi Switch schon seit mehreren Jahren, aber ihr 3.0-Update brachte viele neue Funktionen und Verbesserungen mit sich, die es wert sind, betrachtet zu werden. Einige dieser neuen Funktionen umfassen: ein neues Dashboard, ein Mini-Plugin zum Importieren und Exportieren, Preloader, neue Theme-Anpasser-Einstellungen, Logo-Anpassungen, benutzerdefinierte 404- und Wartungsseiten mit integrierten Layouts, Unterstützung für SVG-Bilder und mehr.

In diesem Artikel werfen wir einen Blick auf den neuen Divi Switch und achten genau auf seine aktualisierten Funktionen.

Divi Switch installieren

Laden und aktivieren Sie Divi Switch wie jedes Plugin. Dann wird dem Divi-Theme-Optionen-Menü im Dashboard eine neue Registerkarte namens Divi Switch hinzugefügt. Geben Sie Ihren Lizenzschlüssel ein und aktivieren Sie das Plugin. Auf der Registerkarte wird dann ein neues intuitives Dashboard angezeigt.

Divi Switch-Dashboard

Divi Switch wurde neu gestaltet und alle Einstellungen wurden von ihrem separaten Platz im Admin-Menü auf die Divi-Theme-Optionsseite verschoben. Die Schalter selbst sind in den Unter-Tabs unter dem neuen „Divi-Schalter“-Tab in den Divi-Theme-Optionen verteilt.

Jeder Schalter hat einen Titel, eine kurze Beschreibung und einen schattierten Schalter, der standardmäßig auf "Deaktiviert" eingestellt ist. Wenn Sie den Effekt aktivieren möchten, klicken Sie einfach auf den Schalter und er wechselt auf „aktiviert“. Es wird blau, um anzuzeigen, dass es aktiviert ist.

Um die Beschreibung der Funktionen anzuzeigen, wählen Sie das Fragezeichen aus, das rechts angezeigt wird, wenn Sie mit der Maus über den Effekt fahren.

Schauen wir uns mehrere Registerkarten an und sehen, was sie tun können.

Header

Die Registerkarte Kopfzeile fügt 8 Schalter und Anpassungen hinzu. Sie können die Unterstreichung der Kopfzeile entfernen, die Telefonnummer anklickbar machen, soziale Links in einem neuen Tab öffnen, die oberen Kopfzeilenelemente zentrieren, ein anderes Logo beim Scrollen verwenden, den Hamburger-Menütext ändern, ein seitenspezifisches Logo verwenden und das ersetzen Vollbild-Menü mit einem Divi-Layout.

Logo-Anpassungen

Das Divi-Theme hat die Möglichkeit, ein benutzerdefiniertes Logo festzulegen, das auf jeder Seite oder jedem Beitrag angezeigt werden kann. Aber was ist, wenn Sie auf Ihrer Website unterschiedliche Logos verwenden müssen? Divi Switch fügt mehrere Logooptionen hinzu, sodass Sie mehr Logos anzeigen können und steuern können, wie und wo sie angezeigt werden. In den Einstellungen können Sie beim Scrollen ein anderes Logo auswählen und für bestimmte Seiten ein anderes Logo festlegen.

Unterschiedliches Logo auf Scroll

Um ein neues Logo beim Scrollen anzuzeigen, laden Sie einfach das Logo im Einstellungsbildschirm hoch. Das alternative Logo wird jetzt angezeigt, wenn der Besucher scrollt.

Seitenspezifisches Logo

Mit Page Specific Logo sind Sie nicht auf nur ein Logo auf Ihrer Website beschränkt. Sie können beliebig viele Logos verwenden und haben die vollständige Kontrolle darüber, welches Logo auf welcher Seite angezeigt wird.

Wenn Sie in den Einstellungen das seitenspezifische Logo aktiviert haben, wird am unteren Rand des Inhaltsbereichs von Seiten und Beiträgen eine neue Funktion hinzugefügt. Sie können nun ein anderes Logo für die Homepage und ein anderes für die anderen Seiten und Beiträge einstellen. Hier laden Sie einfach das Logo hoch, das diese Seite oder dieser Beitrag anzeigen soll.

Dieses Beispiel zeigt verschiedene Seiten, wobei jede Seite eine Variation des Logos der Website zeigt.

Vollbild-Menü

Der Header hat auch mehrere Menüanpassungen. Für dieses Beispiel habe ich den Hamburger-Menütext geändert und ein Layout für das Vollbildmenü ausgewählt.

Hier ist das Hamburger-Menü mit seinem neuen Text.

Wenn Sie auf das Hamburger-Menü klicken, wird das Vollbildmenü geöffnet und das von mir ausgewählte Divi-Layout angezeigt. Es ist durchscheinend, sodass Sie die Website im Hintergrund sehen können. Es enthält auch eine Schließen-Schaltfläche.

Fusszeile

Auf der Registerkarte Fußzeile können Sie die Aufzählungszeichen entfernen, die untere Fußzeile ausblenden, das Schweben der Fußzeile verhindern und die Fußzeile durch ein Divi-Layout ersetzen.

Dieses Layout wurde der Fußzeile jeder Seite hinzugefügt, indem Sie es einfach auf der Registerkarte Fußzeile auswählen.

Hauptinhalt

Die Registerkarte Hauptinhalt fügt 11 Schalter und Anpassungen hinzu. Sie können die Trennlinie der Seitenleiste entfernen, einen Homepage-Preloader hinzufügen und den Typ und die Farben festlegen, das Portfolio-Bildverhältnis ändern, das Öffnen von Bildern in einer Lightbox verhindern, die Animationen der Schieberegler anpassen, den Beitragstyp Projekte entfernen, eine benutzerdefinierte Wartungsseite hinzufügen und Fügen Sie eine benutzerdefinierte 404-Seite hinzu.

Vorlader

Wenn Sie den Preloader aktivieren, wird während des Ladens der Homepage ein animiertes Symbol angezeigt. Dies ist großartig, um dem Besucher anzuzeigen, dass etwas passiert, während der eigentliche Inhalt der Seite noch im Hintergrund geladen wird. Es hat 15 Übergangstypen und zwei Farboptionen.

Hier ist ein Beispiel dafür, wie der Preloader auf der Website aussieht, während die Seite geladen wird.

Benutzerdefinierte 404- und Wartungsseiten mit Layouts

Mit diesen Funktionen können Sie eine beliebige Wartungsseite und eine 404-Seite aus Ihrer Seitenliste auswählen. Das bedeutet, dass Sie die Seiten mit Layouts erstellen können, die Sie erstellt oder in die Divi-Bibliothek importiert haben.

Um Ihnen dabei zu helfen, enthält Divi Switch Premium 404-Seiten- und Wartungsseiten-Layout-Pakete mit 10 vorgefertigten Layouts, die einfach angepasst und standardmäßig eingestellt werden können. Sie liegen im JSON-Format vor. Das Bild oben ist eine der 404-Seiten.

Die Layouts sind professionell gestaltet, sodass Ihre 404-Seite und Wartungsseiten nicht nur informativ, sondern auch attraktiv sind. Dieses Beispiel ist eine der Wartungsseiten. Es enthält einen Countdown-Timer.

Handy, Mobiltelefon

Auf der Registerkarte Mobil können Sie Haltepunkte für jede Bildgröße festlegen. Geben Sie eine Zahl des Wertes ein, der den Breakpoint ändern soll. Sie können das Menü auch auf dem Handy reduzieren und einen bestimmten Text anzeigen.

Beiträge

Posts hat eine coole Kommentarfunktion. Dadurch werden die Kommentare in einen Umschalter verschoben, sodass sie standardmäßig ausgeblendet sind.

Dies ist der geschlossene Schalter. Es wird am Ende des Beitrags platziert, wo normalerweise die Kommentare erscheinen.

Klicken Sie hier, um die Kommentare zu öffnen und anzuzeigen. Dies ist das Standard-WordPress-Kommentarformular.

Wenn Sie das Divi-Kommentarmodul zu Ihrem Layout hinzufügen, können Sie es mit den Moduleinstellungen gestalten. Es befindet sich immer noch innerhalb des Umschalters und ist standardmäßig geschlossen.

Archiv

Die Registerkarte Archive gibt Ihnen die Kontrolle über die Archivseiten (Seiten für Tags, Kategorien, Autor, Suche usw.). Fügen Sie den Kategorietitel hinzu, entfernen Sie die Seitenleiste, fügen Sie einen Link zum Weiterlesen hinzu und fügen Sie eine Trennlinie unter den Beiträgen hinzu.

Hier ist ein Beispiel für eine Autorenseite mit allen aktivierten Archivierungsschaltern.

Integration

Auf der Registerkarte Integration können Sie Divi-Layouts an bestimmten Stellen einfügen, einschließlich vor dem Hauptinhalt, nach dem Hauptinhalt und vor dem Beitragsinhalt. Wählen Sie das Layout aus den Dropdown-Listen aus.

Ich habe ein Banner in voller Breite nur mit einem Textmodul erstellt und vor dem Inhalt eingefügt. Natürlich können Sie jede gewünschte Art von Layout erstellen. Dies ist eine großartige Möglichkeit, CTAs und spezielle Menüs zu erstellen.

Fortschrittlich

Auf der Registerkarte Erweitert können Sie skalierbare Vektorgrafiken (SVG) für schärfere Logos, Symbole und andere Bilder hochladen. Da WordPress standardmäßig SVGs blockiert, ist dies eine großartige Möglichkeit, dieses Bildformat mit Divi zu verwenden.

Import Export

Auf der Registerkarte Import/Export können Sie den von Divi Switch generierten Code in ein schlankes und benutzerdefiniertes Plugin exportieren, um es auf den Websites Ihrer Kunden zu installieren. Dies macht es einfach, Ihren bevorzugten Divi Switch-Code zu verwenden, ohne das Divi Switch-Plugin selbst installieren und einrichten zu müssen. Geben Sie einen Namen für das Plugin ein, geben Sie eine Beschreibung an, fügen Sie die Autoreninformationen hinzu, geben Sie ihm eine Plugin-Version und wählen Sie Plugin exportieren.

Sie können Ihr Marken-Plugin jetzt wie jedes andere Plugin auf die Websites Ihrer Kunden hochladen. Es wird Ihr Branding haben.

Theme-Anpasser

Dem Theme-Anpasser wird eine neue Registerkarte namens Divi Space-Einstellungen hinzugefügt. Hier finden Sie eine weitere Registerkarte namens Divi Switch. Der Theme-Anpasser enthält zusätzliche Einstellungen, um ein benutzerdefiniertes Symbol für das mobile Menü zu erstellen, das Hintergrundbild der Kopfzeile zu ändern, die Schaltfläche Zurück zum Anfang anzupassen und Archivseiten anzupassen – alles mit Live-Vorschau.

In diesem Beispiel habe ich der Kopfzeile ein Hintergrundbild hinzugefügt. Sie können die Wiederholung einstellen, die Bildposition ändern und die Bildgröße ändern. Oberhalb dieser Einstellung befindet sich ein Auswahlbereich, in dem Sie ein Symbol für das mobile Menü auswählen können.

In diesem Beispiel passe ich die Schaltfläche "Zurück nach oben" an das Layout an. Sie können die Symbolgröße, den Radius, die Position, die Hintergrundfarbe, die Symbolfarbe und die Hover-Farben anpassen.

In diesem Beispiel passe ich die Trennfarbe, Höhe und Breite für die Archivseiten an. Sie werden in diesen Beispielen auch feststellen, dass sich das Logo geändert hat, als ich nach unten gescrollt habe. Ich habe immer noch die Logo-Swap-Einstellung aktiviert (nun, ich denke, sie ist tatsächlich "umgeschaltet".)

Lizenz

Divi Switch bietet drei Lizenzen zur Auswahl:

• Einzelne Site – $24
• 3 Seiten – $50
• Unbegrenzte Websites – $96

Divi Switch ist auch im Divi Space-Mitgliedschaftsplan verfügbar.

Gedanken beenden

Ich bin beeindruckt von den neuen Funktionen in Divi Switch. CSS-Klassen nicht einfügen zu müssen und das neue Dashboard sind willkommene Funktionen. Die Logo-Optionen, der Pre-Loader, das Mini-Plugin und die benutzerdefinierte 404-Seite und Wartungsseite fügen Divi ganz allein viel hinzu. Ich mag die Möglichkeit, Divi-Layouts einzufügen und eine benutzerdefinierte Fußzeile auszuwählen. Ich mag auch die Theme-Anpassungsfunktionen, um der Kopfzeile ein Bild hinzuzufügen und es anzupassen und die Farbe, Form und Position der Schaltfläche "Zurück nach oben" zu ändern.

Divi Switch fügt Divi viele Funktionen hinzu. Ich fand jeden von ihnen einfach zu bedienen. Wenn Sie nach vielen Anpassungen suchen, die Sie auf einfachste Weise hinzufügen können, ist Divi Switch möglicherweise das Richtige für Sie.

Wir wollen von dir hören. Haben Sie Divi Switch ausprobiert? Erzählen Sie uns von Ihren Erfahrungen in den Kommentaren unten!

Ausgewähltes Bild über Oleh Donets / shutterstock.com