Divi-Plugin-Highlight – AC-Shortcodes

Mussten Sie jemals ein Divi-Modul oder sogar ein komplettes Layout in einem anderen Divi-Modul platzieren? Stellen Sie sich mit einem Texteditor die Gestaltungsmöglichkeiten vor, Karten, Formulare, Zähler, Klappentexte, Testimonials oder jedes andere Modul in einem anderen Modul zu platzieren. Was wäre, wenn Sie diese Module in Ihrer Seitenleiste platzieren könnten? Ein Drittanbieter-Plugin namens AC Shortcodes macht genau das.

AC Shortcodes ist ein Drittanbieter-Plugin von Ayanize, das Divi-Module in Shortcodes umwandelt, damit Sie sie in einem anderen Modul platzieren können. Erstellen Sie einen Shortcode mit einem einzelnen Modul oder einem Layout und fügen Sie diesen Shortcode dann in den Texteditor eines Moduls ein. Es funktioniert mit Divi, Extra und jedem Thema mit dem Divi Builder-Plugin.

In dieser Plugin-Übersicht nehmen wir AC Shortcodes für eine Runde und sehen einige der Dinge, die damit gemacht werden können, und sehen, wie einfach es zu verwenden ist. Die Bilder für meine Beispielseiten wurden von Unsplash.com übernommen.

AC-Shortcodes-Plugin installieren

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Sobald das Plugin aktiviert wurde, sehen Sie eine Nachricht, um Ihre Permalinks erneut zu speichern. Dadurch wird sichergestellt, dass das Plugin ordnungsgemäß funktioniert. Klicken Sie in der Nachricht auf Permalinks aktualisieren. Dadurch gelangen Sie zu den Permalinks-Einstellungen. Klicken Sie unten auf der Seite auf Änderungen speichern und dann in der Nachricht auf FERTIG. Die Meldung verschwindet dann und Sie können jetzt AC-Shortcodes verwenden.

Erstellen eines Shortcodes

Dem Divi-Menü im Dashboard wird ein neuer Menüpunkt hinzugefügt (gehen Sie zu Dashboard, Divi, AC-Shortcodes). Wenn Sie darauf klicken, wird das AC-Shortcodes-Menü geöffnet, in dem Sie Shortcodes erstellen können. Alle von Ihnen erstellten Shortcodes werden hier in der Liste angezeigt. Um einen neuen Shortcode zu erstellen, klicken Sie auf Shortcode erstellen.

Dies führt Sie zu einem Editor, in dem Sie wählen können, ob Sie mit dem Divi Builder bauen möchten. Der Shortcode ist rechts angegeben. Sie können diese kopieren und in den Inhalt eines anderen Moduls einfügen. Erstellen Sie einfach ein Layout mit dem Divi Builder und klicken Sie auf Erstellen, um es zu speichern.

Sobald Sie Ihre Shortcodes erstellt haben, werden sie in der Liste im Dashboard-Menü angezeigt. Hier können Sie den Shortcode zum Einfügen in Ihren Inhalt bearbeiten, löschen und kopieren. Die Shortcodes können in Divi Builder-Modulen, im Standard-WordPress-Editor (bei Verwendung von Divi oder Extra) oder in Text-Widgets (erfordert Divi oder Extra) verwendet werden.

Beispiele für AC-Shortcodes

Für meine Beispiele habe ich eine Standard-Divi-Blogseite mit einem Header in voller Breite erstellt. Ich habe einen Verlaufshintergrund für den Abschnitt erstellt.

Kopfzeile in voller Breite

Dies ist die Beispielseite. Ich möchte die Standardkopfzeile durch eine neue Kopfzeile ersetzen, indem ich Module verwende, die normalerweise nicht im Kopfzeilenbereich platziert werden können.

Dies ist das Layout des Kurzcodes. Es enthält Karten-, Galerie- und Call-to-Action-Module sowie ein Menü mit voller Breite in einem Abschnitt mit voller Breite. Ich habe den Hintergrund transparent gemacht, damit das Styling auf der Seite selbst angezeigt wird, und ich habe dem Fullwidth Menu-Modul einen Verlaufshintergrund gegeben, der über dem Stil des Hintergrunds angezeigt wird.

Die Seite selbst enthält ein Textmodul, in dem ich den Shortcode platziert habe, und ein Blog-Modul. Diese Abschnitte liefern das Hintergrund-Styling.

Hier ist ein Blick auf den neuen Header. Es ist leicht, sich die Möglichkeiten vorzustellen, die mit diesem Header gemacht werden können.

Registerkarten

Das Tabs-Modul ist eines der einfachsten zu sehen, wie die Shortcodes funktionieren. Normalerweise können Sie mit dem Tabs-Modul jede Art von Inhalt auf einer Registerkarte platzieren, die Sie in einem Editor platzieren könnten. Dazu gehören Texte und Medien wie Bilder, Videos usw. Was ist, wenn Sie Karten, Kontaktformulare, CTAs oder andere Divi-Module platzieren möchten? Lass es uns tun!

Ich habe mehrere Shortcodes von Modulen erstellt und jeden in eine separate Registerkarte eingefügt. Einige der Module beinhalten ein eigenes Hintergrund-Styling.

Die Module werden mit den gleichen Designmerkmalen angezeigt, die ich für sie erstellt habe. In diesem Beispiel habe ich einen Verlaufshintergrund für den Abschnitt verwendet.

Diese Registerkarte verwendet ein Kontaktformular. Ich habe ihm kein besonderes Styling gegeben.

Auf dieser Registerkarte wird ein Blogbeitrag angezeigt. Ich habe den Verlaufshintergrund für die Seite verwendet, aber keinen für den Shortcode des Blogbeitrags. Jede der Registerkarten hat ihre eigene Hintergrundfarbe und individuelle Stile, da sie unabhängig erstellt werden.

Sie können sogar komplette Layouts erstellen, um sie als Shortcodes anzuzeigen.

Dieses Layout verwendet einen Spezialbereich mit einem Bild, einem Blog, einem Portfolio und einem Kontaktformular. Ich habe es auf der Registerkarte Layout platziert.

Hier ist ein Blick auf das Shop-Modul innerhalb eines Tabs. Die Verwendung von Modulen innerhalb von Registerkarten würde einige Möglichkeiten zum Anzeigen von Informationen, Formularen, CTAs und vielem mehr eröffnen.

Seitenleisten und Widgets

Sie können die Shortcodes auch in Ihren Seitenleisten verwenden, indem Sie sie in ein Text-Widget einfügen.

Hier wird die Karte in der linken Seitenleiste angezeigt. Sie können sehen, dass es immer noch seinen Hintergrundstil hat. Dies ist leicht zu ändern.

Um den Shortcode zu aktualisieren, laden Sie ihn einfach aus der AC-Shortcodes-Liste und nehmen Sie Ihre Änderungen vor. Die Änderungen werden überall dort widergespiegelt, wo Shortcode verwendet wird. In diesem Beispiel habe ich den Hintergrund entfernt, den ich dem Abschnitt im Karten-Shortcode hinzugefügt hatte. Ich habe den Hintergrund transparent eingestellt. Die Karte wird jetzt ohne Hintergrund angezeigt.

Hier habe ich mehrere weitere Widgets mit Modulen in der Seitenleiste hinzugefügt.

WooCommerce-Produktseiten

Eine meiner Lieblingsanwendungen für AC-Shortcodes besteht darin, sie auf WooCommerce-Produktseiten zu platzieren.

Ich habe einen Shortcode für einen Slider mit zwei Slides im Produktbeschreibungsbereich platziert. Jede Folie verwendet ihre eigenen Einstellungen.

Für dieses Beispiel habe ich ein Layout mit Textbaustein und Galeriebaustein in die Produktkurzbeschreibung eingefügt. Und ja, ich spiele wieder mit den Hintergrundverläufen.

Verwenden von AC-Shortcodes mit Extra

Hier ist ein Blick auf das Tabs-Modul in Extra. Es verwendet die Seitenleiste mit Shortcodes in mehreren Text-Widgets, um die Karten- und Kontaktformular-Module anzuzeigen. Alles funktionierte wie erwartet.

Verwenden von AC-Shortcodes mit dem Divi Builder-Plugin

Hier ist das Kartenmodul, das das Divi Builder-Plugin mit dem Twenty Seventeen-Thema verwendet. Dies ist eigentlich ein Tab-Shortcode, der einen Map-Shortcode enthält. Ein Shortcode innerhalb eines Shortcodes. Wie könnte ich widerstehen?

Shortcodes für Seitenleisten funktionieren nur, wenn das Divi- oder Extra-Theme verwendet wird. Shortcodes müssen auch in einem Divi Builder-Modul platziert werden, es sei denn, Sie verwenden Divi oder Extra. Mit dem Divi Builder-Plugin wird das AC-Shortcodes-Menü unter Erscheinungsbild im Dashboard angezeigt.

Dokumentation

Die Dokumentation wird im AC-Shortcodes-Menü bereitgestellt. In der oberen rechten Ecke des Bildschirms sehen Sie das Wort Hilfe. Klicken Sie darauf, um den Hilfebildschirm zu öffnen. Dadurch werden auf der linken Seite vier Registerkarten angezeigt:

• Überblick
• Dokumentation
• Kompatibilität
• Vorlagenverwendung

Auf der rechten Seite befinden sich Links, um ein Video und einen Blogbeitrag anzuzeigen.

Lizenz

AC Shortcodes beinhaltet eine unbegrenzte Lizenz. Sie können es auf beliebig vielen Websites für Sie und Ihre Kunden installieren. Es enthält Updates für das Leben und 6 Monate Support.

Zu kaufen – dieses Drittanbieter-Plugin ist auf vielen Divi-Marktplätzen sowie auf der Website des Anbieters verfügbar: Ayanize

Abschließende Gedanken

Die Möglichkeit, Divi-Module als Shortcodes in anderen Modulen und Seitenleisten zu verwenden, eröffnet eine neue Welt der Gestaltungsmöglichkeiten. Die Beispiele, die ich in diesem Plugin-Highlight erstellt habe, kratzen nur an der Oberfläche. Das Plugin selbst ist einfach zu bedienen und erfordert nur Divi Builder-Kenntnisse und die Möglichkeit, einen Shortcode zu kopieren und einzufügen. Wenn Sie daran interessiert sind, den Nutzen von Divi-Modulen zu erweitern, ist AC Shortcodes einen Blick wert.

Wir möchten von Ihnen hören! Haben Sie AC-Shortcodes ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über PhotoRoyalty / shutterstock.com