Responsive Banner mit den neuen Hintergrundoptionen von Divi erstellen

In meinem letzten Beitrag habe ich Ihnen gezeigt, wie Sie Schaltflächen mithilfe der Hintergrundoptionen-Schnittstelle von Divi gestalten, indem Sie das Schaltflächenmodul über Spalten- und Zeilenhintergründe schichten. Heute zeige ich Ihnen, wie Sie mit Divis Hintergrundoptionen-Schnittstelle reaktionsschnelle anklickbare Banner entwerfen.

Wir werden die gleichen Techniken wie für die Schaltflächenhintergründe verwenden, mit ein paar kleinen Anpassungen. Grundsätzlich werde ich Ihnen zeigen, wie Sie wirklich große Buttons erstellen und sie ein wenig mehr wie Banner gestalten. Wichtig dabei ist, dass die gesamte Fläche des Banners anklickbar bleibt. Sie sollten jedoch von Anfang an wissen, dass wir mit dieser Methode nur einfache Banner erstellen können. Da wir durch die Texteingabe des Button-Moduls eingeschränkt sind, können wir nur Banner mit einer Textfolge erstellen. Durch die Verwendung der Spaltenhintergrundoptionen können wir jedoch mit dem Visual Builder im Handumdrehen einige ziemlich cool aussehende Banner erstellen.

HTML-Banner im Vergleich zu Image-Bannern

Die Verwendung von HTML-Bannern (Banner, die mit HTML-Elementen erstellt wurden) gegenüber Image-Bannern (Banner, die als einzelnes Bild ohne HTML-Elemente erstellt wurden) hat viele Vorteile. Bei HTML-Bannern wird der Text von Webbrowsern erkannt (wichtig für Seitenübersetzer und Screenreader). Sie skalieren mit der Größe von Browserfenstern, sodass sie immer scharf aussehen, im Gegensatz zu Bildern, die verzerrt oder unleserlich werden können. Und vielleicht ist mein Lieblingsaspekt bei der Verwendung von HTML-Bannern gegenüber Bildbannern, dass HTML wirklich einfach zu ändern ist. Ich kann den Text mit wenigen Tastendrücken ändern, anstatt die Tiefen meiner Festplatte nach einer Originaldatei zu durchsuchen, die ich in einem Bildbearbeitungsprogramm bearbeiten muss. Und ich kann schnell eine andere Version des Banners erstellen, um einen Split-Test mit Divi Leads durchzuführen.

Diese Methode, Schaltflächen in Banner zu verwandeln, öffnet die Tür für einige hilfreiche Anwendungen wie das Erstellen eines benutzerdefinierten Beitrags, einer Kategorie oder einer Serie für Ihren Blog (oder Podcast).

Lass uns anfangen.

Vorgeschmack

Bevor wir offiziell rausgeschmissen werden. Hier ist ein kleiner Vorgeschmack auf die Banner, die wir in diesem Beitrag erstellen werden.

Umsetzung des Designs mit Divi

Abonnieren Sie unseren Youtube-Kanal

Beispiel #1: Logo-Banner

Fügen Sie mit dem Visual Builder einen regulären Abschnitt mit einer Spalte und einer Zeile hinzu.

Fügen Sie als Nächstes ein Schaltflächenmodul zur Zeile hinzu.

Aktualisieren Sie dann die Einstellungen des Tastenmoduls wie folgt:

Inhaltsoptionen

Schaltflächentext: [Geben Sie den Text ein, den Sie für Ihre Bannernachricht verwenden möchten]
Schaltflächen-URL: [URL eingeben]

Designoptionen

Tastenausrichtung: Mitte
Textfarbe: Hell
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 32px
Breite des Tastenrahmens: 0px
Schaltflächenschriftart: Arvo
Schaltflächensymbol: [Symbol hinzufügen. Ich verwende das Cursorsymbol]
Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN

Erweiterte Optionen

Wir müssen die Breite der Schaltfläche auf 100% setzen, um die Breite der Spalte auszufüllen. Außerdem müssen wir die Höhe unseres Buttons vergrößern, um genügend Platz für unsere Banner-Inhalte zu bieten. Geben Sie dazu das folgende benutzerdefinierte CSS in das Feld Hauptelement ein:

 Width: 100%;
padding: 20px 0 200px; 

Hinweis : Der benutzerdefinierte Abstand hier ist der Schlüssel zum Einstellen, wo der Bannertext angezeigt werden soll. Da die Schaltflächenausrichtung bereits zentriert ist, muss ich nur den Text vertikal anpassen. Wenn Sie dem Schaltflächentext daher oben einen kürzeren Abstand und unten einen längeren Abstand geben, wird der Text zum oberen Rand des Banners hin angepasst.

Einstellungen speichern

Die Dinge sind im Moment noch ganz weiß und unsichtbar, aber das ist in Ordnung. Wir werden einen Hintergrund für das Schaltflächenmodul innerhalb der Zeilen- und Spalteneinstellungen hinzufügen.

Gehen Sie zu den Zeileneinstellungen , in denen sich Ihr Tastenmodul befindet, und aktualisieren Sie Folgendes:

Inhaltsoptionen

Unter der Registerkarte Hintergrundbilder

Hintergrundbild: [Bild einfügen]
Position des Hintergrundbilds: [Verwenden Sie diese Option, um das Bild für Ihr Banner anzupassen. Ich wollte, dass der untere Teil meines Bildes angezeigt wird, also habe ich "Bottom Center" ausgewählt.]

Scrollen Sie nun ein wenig nach unten, um die Hintergrundoptionen von Spalte 1 zu aktualisieren.

Wählen Sie die Registerkarte Hintergrundverlauf Spalte 1 und klicken Sie dann auf die graue runde Schaltfläche mit einem weißen Plussymbol.

Aktualisieren Sie Folgendes:

Hintergrund-Verlaufsfarben: rgba(131,0,233,0.92), rgba(0,0,0,0.69)
Spaltenverlaufsrichtung: 180deg
Spaltenstartposition: 50%
Spaltenendposition: 0%

Einstellungen speichern

Als nächstes werden wir dem Banner ein Logo hinzufügen. Klicken Sie auf die Registerkarte Hintergrundbild und aktualisieren Sie Folgendes:

Spalte 1 Hintergrund Bildgröße: Tatsächliche Größe (mein Logo ist ein 120 x 120 png)

Spalte 1 Hintergrundbildposition: Mitte

Das ist es. Jetzt haben Sie ein einfaches Banner, das anklickbar und reaktionsschnell ist. Sie können die Einstellungen für das Schaltflächenmodul verwenden, um alle Hover-Effekte hinzuzufügen, die das Banner hervorheben sollen.

Machen wir ein anderes Beispiel.

Beispiel #2: Einfaches Textbanner

Lassen Sie uns für dieses nächste Banner den gesamten Abschnitt duplizieren , der das erste Banner enthält, das Sie gerade entworfen haben. Dies spart etwas Einrichtungszeit.

Gehen Sie dann zu den Zeileneinstellungen und aktualisieren Sie Folgendes:

Inhaltsoptionen

Hintergrundbild: [neues Bild eingeben]
Position des Hintergrundbilds: Mitte
Spalte 1 Hintergrund-Verlaufsfarben: rgba(0,0,0,0.41), rgba(12,113,195,0.66)
Spaltenverlaufsrichtung: 270deg

Klicken Sie anschließend auf die Registerkarte Hintergrundbild in Spalte 1 und löschen Sie das Bild/Logo.

Einstellungen speichern

Gehen Sie zu den Tastenmoduleinstellungen und aktualisieren Sie Folgendes:

Inhaltsoptionen

Schaltflächentext: [Geben Sie Text für Ihr Banner ein]
Schaltflächen-URL: [Geben Sie die URL für das Banner ein]

Designoptionen

Schaltflächentextgröße: 42px
Breite des Tastenrahmens: 19px
Rahmenfarbe der Schaltfläche: rgba(0,0,0,0.17)
Tastenabstand: 8px
Knopfschrift: Montserrat, Fett (B)
Schaltflächensymbol hinzufügen: NEIN
Farbe des Button-Hover-Rahmens: rgba(0,0,0,0.46)
Schaltflächen-Hover-Randradius: 0px
Schaltflächen-Hover-Buchstabenabstand: 12px

Wie Sie sehen, hat dieses Beispielbanner einen einzigartigen Hover-Effekt, der die Rahmenfarbe ändert und den Buchstabenabstand vergrößert:

So machen Sie Ihr Banner in voller Breite

Um dieses Banner in voller Breite zu erstellen, müssen Sie lediglich die Abschnittseinstellungen auf der Registerkarte Design wie folgt aktualisieren:

Benutzerdefiniertes Auffüllen: 0 Pixel oben, 0 Pixel rechts, 0 Pixel unten, 0 Pixel links

Einstellungen speichern

Gehen Sie nun zu den Zeileneinstellungen und aktualisieren Sie die Designoptionen wie folgt:

Machen Sie diese Zeile in voller Breite: JA
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1

Jetzt erstreckt sich das Banner auf allen Geräten über die volle Breite des Bildschirms.

So erstellen Sie ein klebriges Banner

Wenn Sie möchten, können Sie dieses Banner ganz einfach fixieren (kleben) und oben in Ihrem Browserfenster fixieren. Ich würde vorschlagen, die Polsterung zu verringern, um sie viel kürzer zu machen, damit sie nicht zu viel des Fensters blockiert.

Zur Verringerung der Höhe, Gehen Sie auf die Schaltfläche Modul - Einstellungen unter dem Registerkarte Erweitert die folgende CSS in dem Hauptelement Feld hinzufügen:

padding: 0px 0px !important;

Um nun den gesamten Abschnitt festzuhalten, gehen Sie zu den Abschnittseinstellungen und aktualisieren Sie die Optionen der Registerkarte Erweitert mit dem folgenden benutzerdefinierten CSS im Feld Hauptelement :

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

Jetzt bleibt Ihr gesamter Abschnitt oben auf der Seite und bleibt dort, wenn Sie auf der Seite nach unten scrollen.

Diese Art von Banner würde gut für Werbeartikel auf einer Landingpage ohne Navigationsleiste funktionieren, da das klebende Banner die Navigationsleiste verdecken würde.

Hinzufügen von Bannern zu mehreren Spaltenlayouts

Sie können Banner auch in einer mehrspaltigen Zeilenstruktur erstellen. Dies wäre praktisch, wenn Sie einige Elemente am Ende Ihrer Seite oder Ihres Blogs anzeigen möchten.

Lass es uns versuchen.

Fügen Sie einen weiteren regulären Abschnitt mit einer Zeilenstruktur von 1/2 1/2 Spalten hinzu.

Kopieren oder duplizieren Sie aus Zeitgründen ein gerade erstelltes Schaltflächenmodul und fügen oder ziehen Sie es in die erste Spalte.

Um das Bannerhintergrunddesign zu erhalten, verwenden wir die Spaltenhintergründe in den Zeileneinstellungen. Gehen Sie zu den Zeileneinstellungen und aktualisieren Sie Folgendes:

Inhaltsoptionen

Unter der Registerkarte Hintergrundbild

Spalte 1 Hintergrund: [Hintergrundbild eingeben]
Spalte 1 Hintergrundbildposition: [passen Sie die Position des Bildes nach Ihren Wünschen an]
Spalte 1 Hintergrundbild-Mischung: Multiplizieren

Unter der Registerkarte Hintergrundverlauf

Spalte 1 Verlaufsfarben: rgba(255,255,255,0), #e02b20
Spalte 1 Gradientenrichtung: 180deg
Spalte 1 Startposition: 70%
Spalte 1 Endposition: 0%

Der letzte Schritt besteht darin, die Einstellungen des Tastenmoduls zu aktualisieren:

Inhaltsoptionen

Schaltflächentext: Reiseserie

Designoptionen

Schaltflächentextgröße: 32px
Breite des Tastenrahmens: 2px
Tastenabstand der Buchstaben: 0px
Farbe des Button-Hover-Rands: #edf000
Schaltflächen-Hover-Buchstabenabstand: 0px

Erweiterte Optionen

Benutzerdefiniertes CSS im Feld „Hauptelement“:

padding: 350px 0px 50px;
width: 100%;

Dieses benutzerdefinierte CSS passt die Auffüllung des Button-Moduls so an, dass sich der Text unten direkt hinter dem Hintergrundverlauf befindet.

Sie können diesen Vorgang gerne für das Banner in der nächsten Spalte duplizieren und den Inhalt nach Belieben aktualisieren.

Sehen Sie sich das Ergebnis an.

Hinweis : Ich würde die Spaltenhöhe anpassen nicht verwenden, wenn ich diese Funktion verwende. Die Säule erstreckt sich über das Tastenmodul hinaus. Wenn Sie möchten, dass die Bannerhöhen perfekt übereinstimmen, müssen Sie möglicherweise mit der Polsterung des Tastenmoduls herumspielen, um es richtig zu machen.

Reaktionsfähig?

Jawohl. Da die Tasten in die Spaltenstruktur von Divi integriert sind, reagieren die Tasten auf allen Geräten gut. Bei den horizontalen Bannern würde ich mit der Platzierung Ihres Logos und Ihres Textes vorsichtig sein, da sie sich auf Mobilgeräten überlappen können.

Hier ist ein Beispiel dafür, wie diese beim Verkleinern auf kleinere Bildschirmgrößen aussehen:

Browser-Kompatibilität

Derzeit wird die CSS-Eigenschaft für den Hintergrund-Blending-Modus von Internet Explorer oder Edge nicht unterstützt, und Safari bietet nur begrenzte Mischoptionen. Der Fallback ist jedoch meiner Erfahrung nach in den meisten Fällen nicht erheblich.

Abschließende Gedanken

Ich hoffe, Ihnen hat dieser kleine, aber nützliche Design-Trick gefallen, um responsive Banner zu erstellen. Solange Sie die damit verbundenen Einschränkungen verstehen und es einfach halten, können Sie einige ziemlich coole Banner erstellen. Außerdem lässt sich diese Lösung sowohl einfach implementieren als auch schnell anpassen.

Und ich bin sicher, es gibt noch andere nützliche Anwendungen dafür. Ich freue mich auf Ihre Ideen in den Kommentaren.

Danke schön!