Divi-Plugin-Highlight: Divi Ribbon-Modul

Divi Ribbon Module ist ein Drittanbieter-Plugin für Divi, das dem Inhalt des Moduls ein gestaltbares Menüband hinzufügt. Fügen Sie ein Bild, eine Schaltfläche, einen Titel, einen Inhalt und einen Stil für jedes Element hinzu, so detailliert wie Sie möchten. Verwenden Sie es, um einen Produktverkauf hervorzuheben, einen Aufruf zum Handeln zu erstellen oder die Aufmerksamkeit auf ein beliebiges Element zu lenken. In diesem Divi-Plugin-Highlight werfen wir einen Blick auf das Divi Ribbon-Modul und sehen, was es kann.

Installieren des Divi Ribbon-Moduls

1. Gehen Sie zu und laden Sie das Plugin herunter
2. Gehen Sie im WordPress-Dashboard zu Plugins > Neu hinzufügen
3. Klicken Sie auf Plugin hochladen
4. Wählen Sie die gezippte Datei von Ihrem Computer aus
5. Klicken Sie auf Jetzt installieren
6. Wenn Sie „Plugin erfolgreich installiert“ sehen, klicken Sie auf Plugin aktivieren
7. Gehen Sie zu Tools > Divi Ribbon Plugin License und geben Sie Ihren Lizenzschlüssel ein

Divi Ribbon-Modul

Dem Divi Builder wird ein neues Modul namens Divi Ribbon hinzugefügt. Das Modul erstellt einen Klappentext (komplett mit Titel, Inhalt, Symbol, Bild und Schaltflächen) und platziert ein Menüband auf diesem Klappentext. Sie haben die Kontrolle über die Platzierung und Gestaltung des Menübands sowie der anderen Elemente im Modul. Der Klappentext enthält standardmäßig einen Kastenschatten.

Registerkarte Inhalt des Divi-Ribbons

Die Registerkarte Inhalt enthält die Haupteinstellungen, Klappendrehung, Bild und Symbol, Link, Hintergrund und Admin-Label. Die Haupteinstellungen bieten Auswahlmöglichkeiten für Bandtyp, Position, Text, Titel und Inhalt.

Haupteinstellungen

Es stehen 7 Farbbandtypen zur Auswahl. Sie funktionieren auf dieselbe Weise und enthalten denselben Inhalt, weisen jedoch unterschiedliche Formen auf. Formen umfassen Bänder mit gegabelten Enden, Bänder, die die Klappentexte überspannen, Bänder an der Seite oder oben und haben verschiedene Arten von Enden wie Gabeln oder Kreise. Dies bietet Ihnen viele Anzeigemöglichkeiten.

Jeder der Ribbon-Typen hat unterschiedliche Positionsoptionen, abhängig von ihren Anzeigefähigkeiten. Dieses Beispiel zeigt das Eckband. Es kann oben links oder rechts oder unten links oder rechts platziert werden.

Gegabelt kann oben links oder rechts angezeigt werden.

Die volle Breite kann oben oder unten angezeigt werden.

Einige der Menübandtypen haben andere Optionen, die sich öffnen, wenn Sie sie auswählen. Dieses Beispiel zeigt das Farbband in voller Breite. Sie können seine Position und Höhe anpassen.

Das seitliche Menüband enthält Anpassungen für Position, Breite und Höhe. Alle Steuerelemente sind die Standard-Divi-Schieberegler, sodass sie einfach zu bedienen sind.

Titel und Inhalt werden der Karte selbst hinzugefügt. Der Inhaltsbereich verfügt über Registerkarten für Bildmaterial und Text, die Medien, Links, Code und Shortcodes enthalten können.

Klappendrehung

Die Blurb-Rotation fügt eine 3D-Flip-Option hinzu, die den Inhalt anzeigt, nachdem die Karte auf die Seite gedreht wurde, sowie ein Bild und ein Symbol, die auf der Schriftart angezeigt werden.

Fügen Sie Bilder aus Ihrer Medienbibliothek und Symbole aus der Liste hinzu. Das Bild/Symbol wird zuerst angezeigt und dann wird die Karte umgedreht, um den Inhalt beim Schweben anzuzeigen. Sie können auch Bilder als Hintergrund hinzufügen.

Taste

Die Schaltfläche enthält Text, Link, Fensteroptionen, Auffüllung und Rand. Ich habe einen linken Rand hinzugefügt, um die Schaltfläche unter dem Menüband herauszuholen.

Registerkarte Divi Ribbon Design

Die Registerkarte Divi Ribbon Design enthält Einstellungen für Bild und Symbol, Drehung, Text, Größe, Menüband, Titeltext, Textkörper, Schaltfläche, Abstand, Rahmen, Filter, Transformation und Animation.

Bild und Symbol

Mit den Bild- und Symboleinstellungen können Sie die Bildbreite, den Rahmen, den Boxschatten, die Farben, den Mischmodus usw. anpassen.

Drehung

Mit den Rotationseinstellungen können Sie die Gesichtsfarbe anpassen. Dies ist der Hintergrund hinter dem Bild. Deaktivieren Sie den ursprünglichen Kartenrahmen, damit Sie Ihren eigenen erstellen können. Passen Sie das Rotationssymbol an. Es hat viele Optionen für das Symbol. Fügen Sie eine Symbolfarbe, einen Hintergrund, einen Rahmen hinzu und verwenden Sie eine Schriftgröße vor der Drehung.

Anfangs war es etwas verwirrend, dass die Symbolanpassung hier statt der Bild- und Symboleinstellungen war, aber es macht Sinn, in diesem Abschnitt zu sein. Sinnvoll wäre es, auch hier die Bildeinstellungen zu platzieren, aber es sind so viele, dass es einen eigenen Reiter braucht.

Textabstand

Der Textabstand gibt Ihnen die Rand- und Abstandseinstellungen für den Titel und den Fließtext an. Normalerweise wird das Menüband über dem Inhalt angezeigt. Auf diese Weise können Sie die Textpositionierung basierend auf der Position des Menübands anpassen, wenn es sichtbar sein soll. Ich habe in diesem Beispiel sowohl für den Titel als auch für den Haupttext Auffüllungen hinzugefügt.

Farbbandeinstellungen

Mit den Menübandeinstellungen können Sie die Farbe ändern, ein Bild hinzufügen, das das Band ausfüllt, das Bandende deaktivieren (um zu verhindern, dass das Styling die Karte überlappt), die Schriftarten anpassen, einen Textschatten hinzufügen, die Bandecken und den Rahmen anpassen. Ich habe die Farbbandfarbe in diesem Beispiel geändert.

Das Bild füllt das Band. Ich konnte nur JPGs zum Laufen bringen, aber es funktioniert gut. Ich empfehle, ein Bild auszuwählen, das bereits die gewünschte Größe hat, damit Sie die Kontrolle darüber haben, wie es angezeigt wird.

Durch das Abdrehen des Farbbandendes wird der Teil entfernt, der sich hinter die Karte zurückfaltet, wie Sie in diesem Beispiel links am Farbband sehen können.

Text

Der Titel und der Textkörper enthalten alle erwarteten Optionen. In diesem Beispiel habe ich beide vergrößert, die Farbe des Titeltexts geändert und beide zentriert.

Taste

Das Schaltflächen-Styling enthält alle erwarteten Optionen und fügt eine Funktion hinzu, um den Farbverlauf über dem Hintergrundbild anzuzeigen. In diesem Beispiel habe ich die Schrift vergrößert, die Farbe der Schrift und des Rahmens geändert, den Rahmen abgerundet, dem Hintergrund einen Farbverlauf gegeben und einen Schatten hinzugefügt.

Divi Ribbon-Beispiele

Hier sind einige Beispiele dafür, wie Divi Ribbon in Divi-Layouts aussieht.

On Sale Ribbon

Im ersten Beispiel ersetze ich den CTA rechts.

Es wurde mit drei Modulen erstellt: Bild, Text und Schaltfläche. Ich verwende denselben Hintergrund, Text und dieselbe Schaltfläche und erstelle sie mit einem einzigen Divi Ribbon-Modul neu.

Hier ist das Ergebnis mit Divi Ribbon. Ich habe das Bild, den Titeltext und den Haupttext hinzugefügt, um dem Original zu entsprechen. Ich habe auch das Menüband in die Ecke eingefügt und die Schaltfläche in die Mitte verschoben und die Rahmenfarbe aus dem Hintergrund des Menübands verwendet. Das Original verwendete das Bild in der Spalte. Ich habe es entfernt und das Bild zum Modul hinzugefügt, aber es würde so oder so funktionieren.

Ich habe das verschnörkelte Bild (eine Dreieckswelle) nicht eingefügt, aber es konnte leicht in den Inhaltsbereich eingefügt werden. Der Titel müsste auch in den Inhaltsbereich verschoben werden, damit die Grafik über dem Titel angezeigt wird. Das On Sale-Band hebt es noch ein wenig mehr hervor.

Menüband für neueste Projekte

Für dieses habe ich ein Bild durch das Divi Ribbon-Modul ersetzt und ein Ribbon in voller Breite als CTA hinzugefügt, um die neuesten Projekte anzuzeigen. Das Menüband hat ein Hintergrundbild und Schriftarten aus dem Layout. Der Boxschatten ist die Standardeinstellung. Ich habe den Text zentriert.

Produkt-CTA-Band

In diesem Beispiel habe ich dem Heldenbereich der Shop-Seite des Leather Company-Layouts ein Divi Ribbon-Modul hinzugefügt. Mit einem Bild aus dem Layout habe ich den Standard-Sale-CTA ersetzt. Das Menüband und die Schaltfläche verwenden Farben aus dem Layout. Ich habe das Band in die untere rechte Ecke verschoben und das Bandende entfernt.

Dies ist ein Spezialbereich. Ich freue mich zu sehen, dass es in den Spezialbereichen gut funktioniert. Viele Module von Drittanbietern sind nicht immer mit dieser Art von Abschnitt kompatibel.

Testen und kaufen

Sie können Divi Ribbon Module von der Website des Entwicklers für 11 US-Dollar für den persönlichen oder kommerziellen Gebrauch auf einer einzigen Website erwerben.

Sie können das Plugin auch vor dem Kauf testen, um zu sehen, ob es für Ihre Bedürfnisse funktioniert. Den Link zum Testen des Plugins finden Sie auf der Verkaufsseite des Entwicklers. Es gibt Ihnen vollen Zugriff auf den Divi Builder und das Plugin, sodass Sie es nach Herzenslust gestalten können. Ich empfehle, es auszuprobieren.

Gedanken beenden

Divi Ribbon Module ist ein interessantes Modul für den Divi Builder. Es enthält mehrere Orte zum Hinzufügen von Bildern und Sie können einen Titel, Inhalt, ein Symbol und eine Schaltfläche einfügen. Mit all diesen Funktionen funktioniert es hervorragend als Klappentext, Call-to-Action, Produktlink, Blog-Link usw. Fügen Sie dazu ein gestaltbares Band hinzu, um auf Verkäufe oder andere CTAs aufmerksam zu machen, und dieses Plugin bietet Styling-Optionen, die schwer zu finden sind erhalten Sie mit einem einzigen Modul.

Divi Ribbon Module funktioniert hervorragend mit dem Visual Builder und dem Theme Builder. Es ist ein ausgezeichnetes Plugin, das einfach zu empfehlen ist.

Wir wollen von dir hören. Haben Sie das Divi Ribbon-Modul ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über Foxys Graphic / shutterstock.com