Laden Sie ein KOSTENLOSES Mehrzweck-Verkaufsbanner-Design für Divi . herunter
Veröffentlicht: 2018-11-18Ein Mehrzweck-Verkaufsbanner ist in den entscheidenden Zeiten des Jahres, in denen Werbeaktionen in aller Munde sind, definitiv praktisch (und spart Ihnen Zeit). Deshalb bieten wir dieses Mehrzweck-Verkaufsbanner für Divi als KOSTENLOSEN Download an! Dieses Verkaufsbanner kann mit nur wenigen Anpassungen an Text und einem Hintergrundbild leicht an Ihre Bedürfnisse angepasst werden. Die Gestaltung des Verkaufsbanners in Divi ist so einfach, dass Sie sich nicht mit Image-Bannern zufrieden geben müssen, die im Web oft etwas körnig aussehen. Neben dem kostenlosen Download zeige ich Ihnen also, wie Sie das Verkaufsbanner in Divi von Grund auf neu gestalten.
Lass uns anfangen!
was ist inbegriffen
Hier ist ein Blick auf das im Download enthaltene Verkaufsbanner-Design.
Laden Sie das Verkaufsbanner-Design KOSTENLOS herunter
Um das Verkaufsbanner-Design kostenlos in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Kostenlos herunterladen
Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.
Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!
Laden des Layouts in die Divi-Bibliothek
Nachdem Sie die Datei heruntergeladen haben, entpacken Sie sie. Sie werden feststellen, dass es eine Datei namens „sales-banner-design.json“ enthält. Dies ist, was Sie in Ihre Divi-Bibliothek laden. Gehen Sie nun zu Ihrem WordPress-Dashboard und navigieren Sie zu Divi > Divi-Bibliothek. Klicken Sie dann oben auf der Seite auf die Schaltfläche Importieren. Wählen Sie im Portabilitäts-Popup-Fenster die Registerkarte Importieren und wählen Sie die Datei sales-banner-design.json. Klicken Sie dann auf die Schaltfläche Divi Builder-Layouts importieren.
Um nun das Layout in Ihre Seite zu importieren, erstellen Sie einfach eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie dann „Wählen Sie ein vorgefertigtes Layout“. Wählen Sie im Popup "Aus Bibliothek laden" die Registerkarte "Ihre gespeicherten Layouts" und klicken Sie dann auf das Layout "Sales Banner Design" aus der Liste. Das ist es!
So erstellen Sie das Verkaufsbanner von Grund auf in Divi
Abschnittshintergrund hinzufügen
Erstellen Sie zunächst eine neue Seite. Nachdem Sie Ihrer Seite einen Titel gegeben haben, stellen Sie den visuellen Builder bereit und wählen Sie die Option „Von Grund auf neu erstellen“. Fügen Sie dann einen neuen Abschnitt mit einer einspaltigen Zeile hinzu.
Bevor Sie Module zur Reihe hinzufügen, geben Sie Ihrem Abschnitt eine Hintergrundfarbe für den Farbverlauf (Die Farbe spielt an dieser Stelle keine Rolle. Wir benötigen nur eine Hintergrundfarbe, um alle weißen Designelemente zu sehen, die wir für unsere Verkäufe verwenden werden Banner.)
Anpassen der Zeilen für das Verkaufsbanner
Bevor wir der Reihe unsere Module hinzufügen, geben wir unserer Reihe zunächst eine benutzerdefinierte Breite von 700px und entfernen alle oberen oder unteren Abstände, damit unsere Reihe gut über der anderen Reihe sitzt, die wir darunter hinzufügen werden. Gehen Sie zu den Zeileneinstellungen und aktualisieren Sie Folgendes:
Benutzerdefinierte Breite: 700px
Dachrinnenbreite: 1
Benutzerdefinierter Rand: 0px oben, 0px, unten
Benutzerdefinierte Polsterung: 0px oben, 0px unten
Duplizieren Sie die Zeile nun zweimal, sodass Sie insgesamt drei identische Zeilen haben. Diese werden verwendet, um unser Verkaufsbanner zu erstellen.
Hinzufügen des oberen Randrahmens mit angrenzendem Text
Um unser Verkaufsbanner zu erstellen, beginnen wir mit einem oberen Rand mit etwas Text links. Dazu verwenden wir ein Trennmodul und ein Textmodul. Erstellen Sie zunächst ein neues Textmodul und fügen Sie einige Wörter in das Inhaltsfeld ein.
Inhalt: „Nur online“
Fahren Sie mit der Registerkarte Design fort und aktualisieren Sie Folgendes:
Schriftstärke des Textes: Fett
Textschriftart: TT
Text Textfarbe: rgba(255,255,255,0.9)
Text Textgröße: 15px
Text Buchstabenabstand: 2px
Textzeilenhöhe: 1em
Breite: 22 % (Desktop), 25 % (Tablet), 40 % (Smartphone)
Modulausrichtung: links
Benutzerdefinierter Rand: 0 Pixel oben, -15 Pixel unten
Benutzerdefiniertes Padding: 0px oben, 0px unten
Dieser benutzerdefinierte Rand ist etwas verfrüht, da unser Teiler noch nicht hinzugefügt wurde, aber es ist notwendig, den Text so auszurichten, dass er perfekt an den Teiler angrenzt, der bald hinzugefügt werden soll.
Fügen Sie nun unter dem Textbaustein in derselben Zeile ein Trennmodul hinzu. Aktualisieren Sie dann die Teilereinstellungen wie folgt:
Farbe: rgba(255,255,255,0.9)
Teilerposition: unten
Teilergewicht: 15px
Höhe: 15px
Breite: 78 % (Desktop), 75 % (Tablet), 60 % (Smartphone)
Modulausrichtung: Rechts
Benutzerdefinierter Rand: 0 Pixel oben, 0 Pixel unten
Benutzerdefiniertes Padding: 0px oben, 0px unten
Natürlich müssen Sie die Breite Ihres Rahmens je nach Breite Ihres Textbausteins anpassen, wenn Sie das Design an Ihre eigenen Bedürfnisse anpassen.
Als nächstes müssen wir ein weiteres Teilermodul hinzufügen, um unseren Teiler mit dem rechten Rand der Reihe zu verbinden, die wir als nächstes entwerfen werden.
Dazu duplizieren Sie das Teilermodul und aktualisieren Sie Folgendes:
Breite: 15px
Benutzerdefinierter Rand: -1px unten
Hinzufügen des unteren Rahmens mit angrenzendem Text
Um den unteren Rahmenrahmen zu erstellen, können wir dasselbe Element verwenden, das wir im oberen Rahmenrahmen unserer oberen Reihe erstellt haben. Nur beginnen wir diesmal mit dem 15px breiten Teilermodul. Fahren Sie fort und kopieren Sie das 15px-Teilermodul und fügen Sie es in die dritte (untere) Reihe ein. Aktualisieren Sie dann die Modulausrichtung nach links statt nach rechts.
Als nächstes kopieren Sie das längere Teilermodul aus der oberen Reihe und fügen es unter dem 15px-Teiler in der unteren Reihe ein. Dann passen Sie folgendes an:
Breite: 75% (Desktop), 70% (Tablet), 50% (Smartphone)
Modulausrichtung: links
Kopieren Sie abschließend das Textmodul in der oberen Reihe und fügen Sie es unter den beiden Trennmodulen in der unteren Reihe ein. Aktualisieren Sie dann Folgendes:
Inhalt: „Beginnt am 1. November“
Breite: 25 % (Desktop), 30 % (Tablet), 50 % (Smartphone)
Modulausrichtung: Rechts
Benutzerdefinierter Rand: -15px oben, 0px unten
Benutzerdefinierte Polsterung: 15 Pixel übrig
Hinzufügen der Textmodule zur mittleren Zeile
Jetzt können wir damit beginnen, die Textmodule zu unserer mittleren Zeile hinzuzufügen, die unseren Hauptverkaufsbannertext enthalten wird. Wir werden drei Textbausteine übereinander stapeln. Fahren Sie fort und fügen Sie das erste Textmodul in die mittlere Zeile ein.
Aktualisieren Sie dann Folgendes:
Inhalt: „Alles 20% Rabatt“
Hintergrundfarbe: rgba(255,255,255,0.9)
Schriftstärke des Textes: Halbfett
Textschriftart: TT
Text Textfarbe: #000000
Text Textgröße: 34px (Desktop), 20px (Smartphone)
Text Buchstabenabstand: 2px
Textzeilenhöhe: 1em
Textausrichtung: Mitte
Benutzerdefinierte Polsterung: 2vw oben, 2vw unten, 5vw links, 5vw rechts
Dem Text eine schwarze Farbe über einem weißen Hintergrund zu geben ist wichtig, um den Bildschirmmischmoduseffekt zu maximieren, der es dem Text ermöglicht, mit dem Abschnittshintergrund zu verschmelzen. Wir werden der Zeile etwas später den Bildschirmmischmodus hinzufügen.
Duplizieren Sie nun das Textmodul, um das Design des nächsten Textmoduls zu starten. Aktualisieren Sie dann den Inhalt mit dem folgenden HTML:
<h2 style="border: 7px solid #000000;">Fall Sale</h2>
Das Inline-Styling fügt einfach einen schwarzen Rahmen um den Überschriftentext hinzu. Auch hier funktioniert die schwarze Farbe mit dem Bildschirmmischmodus, um den Abschnittshintergrund mit dem Text freizugeben.
Aktualisieren Sie dann Folgendes:
Überschrift 2 Schriftstärke: Fett
Überschrift 2 Schriftstil: TT
Überschrift 2 Textfarbe: #000000
Überschrift 2 Textgröße: 100px (Desktop), 80px (Tablet), 60px (Smartphone)
Überschrift 2 Buchstabenabstand: 2px
Benutzerdefinierter Rand: 0px oben
Benutzerdefiniertes Padding: 0px oben, 0px unten
Für den letzten Textbaustein duplizieren Sie den ersten Textbaustein in dieser mittleren Zeile und fügen ihn unter den zweiten Textbaustein ein.
Aktualisieren Sie dann Folgendes:
Inhalt: „Jetzt einkaufen“
Textschriftart: TT, U (unterstrichen)
Benutzerdefinierter Rand: 0px oben
Benutzerdefinierte Polsterung: 1vw oben, 2vw unten
Styling der mittleren Reihe
Die letzte Phase dieses Designs besteht darin, der mittleren Reihe einen Rahmen und einen Bildschirm-Mischmodus-Effekt hinzuzufügen. Öffnen Sie dazu die mittleren Zeileneinstellungen und aktualisieren Sie Folgendes:
Benutzerdefinierte Polsterung: 15 Pixel links, 15 Pixel rechts
Breite des rechten Rands: 15px
Farbe des rechten Rands: rgba(255,255,255,0.9)
Breite des linken Rands: 15px
Farbe des linken Rands: rgba(255,255,255,0.9)
Mischmodus: Bildschirm
Der Bildschirmmischmodus ermöglicht es dem Text, das Hintergrundbild zu mischen, um durch den Text zu erscheinen, um einen coolen Effekt zu erzielen!
Sehen Sie sich das Endergebnis an.
Hinzufügen eines Links zu Ihrem Verkaufsbanner
Da es sich um ein Verkaufsbanner handelt, sollten Sie den anklickbaren Platz auf dem Banner maximieren, um die Conversions zu erhöhen. Dazu können Sie der gesamten mittleren Zeile einen Link hinzufügen. Öffnen Sie einfach die mittleren Zeileneinstellungen und geben Sie eine Zeilenlink-URL ein, um auf Ihre gewünschte Seite umzuleiten.
Hinzufügen verschiedener Abschnittshintergründe für einzigartige Designs
Mit diesem neuen Verkaufsbanner-Design können Sie das Hintergrundbild ganz einfach aktualisieren, um einzigartige Designs zu erstellen.
Hier sind ein paar Beispiele.
Abschließende Gedanken
Ich hoffe, dass dieses Verkaufsbanner-Design für all die Web-Werbeaktionen nützlich ist, die das ganze Jahr über benötigt werden. Das Design dient als Mehrzweck-Verkaufsbanner, das leicht mit neuen Text- und Abschnittshintergrundbildern für einen völlig neuen Look aktualisiert werden kann. Sie können sogar einen Videohintergrund hinzufügen!
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!