So erstellen Sie einen einzigartigen CTA mit den Hintergrundmuster- und Maskenoptionen von Divi

Die neuen Hintergrundmuster und Maskenoptionen von Divi machen es einfach, auffällige und einzigartige Call-to-Action (CTA)-Abschnitte auf Ihrer Website zu erstellen. Sie können Bilder, Verläufe, Muster und Masken mit vielen Anpassungsoptionen kombinieren, um einzigartige Hintergrunddesigns zu erstellen, die die Aufmerksamkeit Ihrer Besucher auf sich ziehen.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit den neuen Hintergrundmuster- und Maskenoptionen von Divi einen einzigartigen CTA-Abschnitt erstellen.

Lass uns anfangen!

Vorgeschmack

Hier ist eine Vorschau des CTA-Abschnitts, den wir in diesem Tutorial entwerfen werden.

Was Sie für den Einstieg benötigen

Bevor wir beginnen, installieren und aktivieren Sie das Divi-Design und stellen Sie sicher, dass Sie die neueste Version von Divi auf Ihrer Website haben.

Springen wir hinein.

So erstellen Sie einen einzigartigen CTA mit den Hintergrundmuster- und Maskenoptionen von Divi

Erstellen Sie eine neue Seite mit einem vorgefertigten Layout

Für unser Tutorial verwenden wir ein vorgefertigtes Layout aus der Divi-Bibliothek. Für dieses Design verwenden wir die Ice Cream Shop Landing Page aus dem Ice Cream Shop-Layoutpaket.

Erstellen Sie eine neue Seite, fügen Sie einen Titel hinzu und wählen Sie dann die Option Divi Builder verwenden.

Wir werden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek verwenden, also wählen Sie Layouts durchsuchen.

Suchen Sie nach dem Layout Ice Cream Shop Landing Page und wählen Sie es aus.

Wählen Sie Dieses Layout verwenden aus, um das Layout zu Ihrer Seite hinzuzufügen.

Jetzt sind wir bereit, unser Design zu erstellen.

Ändern des Layouts für das Hintergrundmuster und die Maske

Wir werden den CTA-Bereich des Monats von diesem Layout modifizieren. Nehmen wir einige Änderungen an unserem Layout für das Hintergrundmuster und das Maskendesign vor.

Zeileneinstellungen

Öffnen Sie Zeileneinstellungen und wählen Sie dann Design aus.

Gleichen Sie unter Dimensionierung die Spaltenhöhen an.

• Spaltenhöhen ausgleichen: Ja

Entfernen Sie unter Abstand die obere Polsterung, um den Kegel an die Spitze des Abschnitts zu bringen.

• Obere Polsterung: 0px

Spalte 1 Einstellungen

Wählen Sie auf der Registerkarte Inhalt für die Zeileneinstellungen die Einstellungen für Spalte 1 aus. Löschen Sie unter Hintergrund den orangefarbenen Hintergrund.

Spalte 2 Einstellungen

Wählen Sie nun die Einstellungen für Spalte 2 aus. Das ursprüngliche Design hat einige Abstände, die wir nicht brauchen, also werden wir sie los. Navigieren Sie unter Design zu Abstand und löschen Sie die obere Polsterung.

Wählen Sie dann „Erweitert“ und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu, sodass unser „Geschmack des Monats“-Text vertikal zentriert ist.

margin:auto;

Abschnittseinstellungen

Öffnen Sie die Bereichseinstellungen. Wählen Sie unter Design Padding aus. Passen Sie die Abschnittspolsterung so an, dass der obere Kegel ganz oben auf der Seite ausgerichtet ist.

• Füllung: 0px

Hinzufügen eines Hintergrundmusters und einer Maske zum CTA-Abschnitt

Nachdem unser Layout geändert wurde, können wir unser Hintergrundmuster und unsere Maske hinzufügen. Mit den neuen Optionen von Divi gibt es endlose Optionen für Hintergrundmuster und Masken, was bedeutet, dass Sie mit nur wenigen Klicks einzigartige Designs für Ihren CTA-Bereich erstellen können. Folgen Sie den Anweisungen, um zu erfahren, wie Sie mit diesen Einstellungen einen auffälligen Hintergrund gestalten können.

Hintergrundfarbe, Muster und Maskeneinstellungen

Navigieren Sie zu den Abschnitt Hintergrundeinstellungen.

Fügen Sie auf der Registerkarte Farbe einen orangefarbenen Hintergrund hinzu

• Farbe: #FFA256

Legen Sie auf der Registerkarte Muster Form und Farbe des Musters fest.

• Form: Konfetti
• Farbe: #FF7D14

Jetzt fügen wir die Maske hinzu. Wählen Sie die Registerkarte „Maske“ und fügen Sie dann die Einstellungen wie folgt hinzu:

• Form: Corner Blob
• Maskenfarbe: #FFFFFF
• Maskentransformation: Horizontal
• Seitenverhältnis der Maske: Querformat
• Maskengröße: Abdeckung

Designanpassungen

Nachdem unser Hintergrund nun steht, nehmen wir einige letzte Anpassungen am Design vor.

Öffnen Sie die Schaltflächeneinstellungen „Kaufen“ und ändern Sie die Ausrichtung auf der Registerkarte „Design“.

• Tastenausrichtung: Links

Ändern Sie die Hintergrundfarbe des Schwebezustands für die Schaltfläche „Kaufen“, sodass sie sich vom orangefarbenen Hintergrund abhebt.

• Schaltflächenhintergrund beim Hover: #FF7D14

Wir passen auch das Zeilenlayout an, um etwas mehr Platz zwischen dem orangefarbenen Hintergrund und dem Abschnitt „Geschmack des Monats“ auf der rechten Seite hinzuzufügen. Ändern Sie das Layout von 1:1 auf 3:2.

Und jetzt ist das Desktop-Design fertig und Sie haben gelernt, wie Sie einen einzigartigen CTA-Bereich mit Divis Hintergrundmuster und Maskenoptionen erstellen!

Den CTA-Abschnitt reaktionsfähig machen

Wenn unser CTA-Bereich auf einem Telefon oder Tablet angezeigt wird, wird der Inhalt in Spalte 2 unter Spalte 1 gestapelt. Dies kann einige Lesbarkeitsprobleme mit unserem Design verursachen. Lassen Sie uns einige Anpassungen vornehmen, um unseren Inhalt und unser Design für kleinere Bildschirme zu optimieren, indem wir die integrierten Responsive-Einstellungen von Divi verwenden.

Da der Text vor den Buttons stehen soll, kopieren Sie den Text „Highlight Flavour of the Month“ in den Textbaustein „July Orange Chocolate“. Stellen Sie sicher, dass Sie diesen Text nur zu den Telefon- und Tablet-Versionen hinzufügen.

• Ändern Sie den Text „Orange Chocolate“ in H3.

Als nächstes werden wir einige Änderungen am Text vornehmen, damit er sich von diesem Hintergrund abhebt. Gehen Sie zur Registerkarte Design und nehmen Sie die folgenden Änderungen vor:

• H2 (Telefon und Tablet) Textfarbe: #000000
• H2 (Telefon und Tablet) Textgröße: 30px
• H3 (Telefon und Tablet) Textfarbe: #000000
• H4 (Telefon und Tablet) Textfarbe: #000000

Gehen Sie nun in die Einstellungen des originalen „Flavor of the Month“-Textbausteins und ändern Sie die Sichtbarkeit so, dass er nur auf Desktop-Geräten sichtbar ist. Dadurch wird der ursprüngliche Textbaustein auf kleineren Geräten ausgeblendet. Der Text „Geschmack des Monats“ wird über der Schaltfläche angezeigt, zusammen mit dem anderen Text auf der Seite.

• Deaktivieren auf: Telefon und Tablet

Öffnen Sie als Nächstes die Zeileneinstellungen und dann die Einstellungen für Spalte 1. Entfernen Sie die rechte und linke Polsterung.

• Rechte Füllung: 0px
• Linke Füllung: 0px

Gehen Sie zu den Abschnittseinstellungen, dann zum Hintergrund, und bearbeiten Sie dann die Maskeneinstellungen

• Maskentransformation: Invertieren
• Seitenverhältnis der Maske: Hochformat

Und jetzt haben Sie dank der Hintergrundmuster- und Maskenoptionen von Divi einen vollständig ansprechenden CTA-Bereich mit einem einzigartigen Hintergrund erstellt.

Endergebnis

Werfen wir einen Blick auf das Endergebnis.

Abschließende Gedanken

Das Entwerfen eines einzigartigen und auffälligen Call-to-Action-Bereichs ist dank der leistungsstarken Hintergrundmuster und Maskenoptionen von Divi sehr einfach. Lassen Sie Ihrer Kreativität freien Lauf, indem Sie mit verschiedenen Farben, Mustern, Masken und Einstellungskombinationen experimentieren. Es ist einfach zu gestalten und Sie können Ihre Einstellungen mit nur wenigen Klicks anpassen, bis Sie den perfekten Look gefunden haben. Am wichtigsten ist, dass es direkt in Divi integriert ist! Keine Notwendigkeit mehr, Hintergrundgrafiken in einem anderen Programm zu entwerfen. Sie können die Hintergrundeinstellungen auf andere Abschnitte, Reihen und Module anwenden, um noch einzigartigere Designs zu erhalten. Wenn Sie mehr über die Hintergrundmuster- und Maskenfunktionen von Divi erfahren möchten, sehen Sie sich unser Tutorial für einen Heldenabschnitt mit Hintergrundmasken und -mustern an und erfahren Sie, wie Sie Divis Verlaufsgenerator mit Hintergrundmasken und -mustern kombinieren.

Wie haben Sie das Hintergrundmuster und die Maskenoptionen von Divi auf Ihrer Website verwendet? Teilen Sie uns in den Kommentaren unten mit, was Sie erstellt haben!