Springe zum Hauptinhalt

Verwenden Sie transparente Bilder, um mit Divi hervorragende CTA-Spaltenüberlagerungen zu erstellen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Je ansprechender der CTA ist, desto besser ist die Chance, dass die Conversion-Rate erreicht wird. Es gibt viele Möglichkeiten, Ihre CTAs zu entwerfen. In diesem Artikel zeigen wir Ihnen jedoch, wie Sie fantastische CTA-Spaltenvorlagen mit halbtransparenten Bildern und Spaltenüberlagerungen erstellen. Sie finden die halbtransparenten Bilder im Download-Ordner unten, können aber auch andere Bilder verwenden. Sie können die JSON-Datei auch kostenlos herunterladen!

Gehen wir.

Vorschauen

Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Klappentext Divi DesignBeginnen wir mit der Neuerstellung!

Einen neuen Abschnitt hinzufügen

Kontext

Erstellen Sie zunächst eine neue Seite oder fügen Sie einer vorhandenen Seite einen neuen regulären Abschnitt hinzu. Gehen Sie dann zum Abschnitt Einstellungen und fügen Sie einen Verlaufshintergrund hinzu.

  • Hintergrund: Farbverlauf
  • Farbverlauf: sehr hellgrau #efefef
  • Hintergrundfarbe zwei: Weiß #ffffff
  • Verlaufstyp: Radial
  • Radiale Richtung: Mitte
  • Ausgangsposition: 52%
  • Endgültige Position: 50%

Hintergrund Divi Abschnitt

Abstand

Wechseln Sie zur Registerkarte Design und passen Sie die Füllung in den Abstandseinstellungen an.

  • Ober- und Unterseite gepolstert
    • Büro: 0vw
  • Polster In Strümpfen
    • Tablet + Telefon: 70vw

Konfigurieren der Aufteilung von Divi-AbschnittenFügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:

Fügen Sie eine neue Divilinie hinzuSizing

Passen Sie dann die Breite und die maximale Breite der Linie an.

  • Breite: 100%
  • Maximale Breite 100%

Nexopos Größe

Fügen Sie ein Textmodul hinzu

Fügen Sie H2 und Textinhalte hinzu

Es ist Zeit, Module hinzuzufügen! Fügen Sie zunächst ein Textmodul hinzu und fügen Sie den gewünschten H2-Inhalt und die gewünschten Absätze ein.

Anpassung des Textmoduls

Text

Wechseln Sie zur Registerkarte "Design" und gestalten Sie den Text wie folgt:

  • Schriftart: Öffnen Sie Sans
  • Textausrichtung: Mitte
  • Textfarbe: Grün #5bba1b
  • Textgröße:
    • Büro: 1.2vw
    • Tablette: 2.8vw
    • Telefon: 3.6vw
  • Abstand der Buchstaben: 0.2vw
  • Höhe der Textzeile: 1.8em

Konfiguration im Wordpress-TextmodulstilTitel 2 Text

Gestalten Sie nach dem Stylen des Absatztextes auch den Text H2.

  • Abschnitt: H2
  • H2 Schriftgröße: Doppio One
  • H2-Textausrichtung: Mitte
  • Textfarbe H2: #3d3d3d
  • H2 Textgröße:
    • Büro: 4.4vw
    • Tablette: 5.9vw
    • Telefon: 6.9vw

An der Kopfabteilung anpassenAbstand

Und füge oben ein wenig Polster hinzu.

  • Top Polsterung: 212px

Anpassen der Textmodulauffüllung

Fügen Sie ein Divisionsmodul hinzu

Sichtbarkeit

Fügen Sie unter dem Textmodul ein Divisionsmodul hinzu und setzen Sie die Sichtbarkeit auf „Ja“.

  • Sichtbarkeit: ja

Divi-Teilermodul anzeigen

Linie

Ändern Sie dann die Farbe des Separators.

  • Linienfarbe: Dunkelgrau #545454

Passen Sie die Farbe der Divi-Linie an

Sizing

Passen Sie nun die Größe des Separators so an, dass er kleiner aussieht.

  • Separatorgewicht: 4px
  • Breite: 9%
  • Ausrichtung des Moduls: Mitte

Passen Sie die Divi-Ausrichtung an

Abstand

Fügen Sie auch einen negativen oberen Rand hinzu.

  • Oberer Rand:
    • Büro: -40px
    • Tablet + Telefon: -15px

Negative Margin Modul Divider Divi

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit drei gleich großen Spalten hinzufügen. Dies wird die Grundlage für das Design der CTA-Säule sein.

Zeile hat 3 Spalten divi

Kontext

Bevor Sie Module hinzufügen, fügen Sie dem Hintergrund der Linienparameter einen Verlauf hinzu.

  • Hintergrund: Farbverlauf
  • 1-Hintergrundfarbverlauf: Weiß #ffffff
  • Hintergrundfarbe zwei mit Farbverlauf: transparent
  • Verlaufstyp: Radial
  • Radiallenkzentrum
  • Ausgangsposition: 42%
  • Endgültige Position: 50%

Einstellung der Divi-Line-Parameter

Sizing

Passen Sie nun die Größe der Linie an.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • Breite: 100%
  • Maximale Breite: 100%

Divi-LiniengrößeAbstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte Füllwerte hinzu.

  • obere Polsterung: 22vw
  • Polsterung unten: 10vw
  • Linke und rechte Polsterung: 10vw

Konfigurieren der Divi-Line-Polsterung

1-Spalteneinstellungen

Kontext

Öffnen Sie anschließend die 1-Spalte und fügen Sie einen Verlaufshintergrund hinzu.

  • Hintergrund: Farbverlauf
  • Hintergrundfarbe mit Farbverlauf: Blau #2a4eed
  • Hintergrundfarbe 2 mit Farbverlauf: Hellblau #91f5f7
  • Verlaufstyp: linear
  • Verlaufsrichtung: 38deg
  • Ausgangsposition: 23%

Konfiguration der Gradientendivi

Grenze

Definieren Sie dann die abgerundeten Ecken der Spalten in den Rahmeneinstellungen.

  • Abgerundete Ecken: 2vw an allen Ecken

Konfiguration mit gerundeten Spaltenrändern

Schattenkiste

Fügen Sie einen subtilen Kastenfarbton auch hinzu.

  • Box Shadow: Zweite Option
  • Schatten der Box Horizontale Position: 6px
  • Vertikale Position des Boxschattens: -10px
  • Box Shadow Blur Force: 50px

Schattenkonfiguration für Spalte 1

Überlauf

Stellen Sie sicher, dass auch die Überläufe der Spalte sichtbar sind.

  • Horizontaler und vertikaler Überlauf: sichtbar

Divi-Spaltenüberlaufkonfiguration

2-Spalteneinstellungen

Kontext

Gehen Sie zur zweiten Spalte und fügen Sie den folgenden Hintergrund mit Farbverlauf hinzu:

  • Hintergrund: Farbverlauf
  • Hintergrundfarbe eins: #1ba038
  • Zweifarbiger Hintergrundverlauf: #c6f727
  • Verlaufstyp: linear
  • Verlaufsrichtung: 38deg
  • Ausgangsposition: 23%

Divi-Einstellung für die zweite Spalte

Grenze

Fügen Sie der Spalte auch einen Rahmenradius hinzu.

  • Abgerundete Ecken: 2vw an den vier Ecken

Spaltenkonfiguration 2 gerundete Divi

Schattenkiste

Mit dezentem Kastenschirm.

  • Box Shadow: Zweite Option
  • Schatten der Box Horizontale Position: 6px
  • Vertikale Position des Boxschattens: -10px
  • Box Shadow Blur Force: 50px

Spaltenschattenkonfiguration 2 Divi

Transformator

Diese Spalte ist etwas höher als die anderen. Um diesen Effekt zu erzielen, werden wir die Transformationskonvertierungseinstellungen für Spalte 2 anpassen.

  • Transformator Übersetzen:
    • Büro: -8vw, y-Achse
    • Tablette + Telefon: 30vw, Y-Achse

Konfiguration der Säulenposition 2 Divi

Überlauf

Machen Sie auch die Überläufe dieser Spalte sichtbar.

  • Horizontale und vertikale Überläufe: sichtbar

Konfiguration der Spaltensichtbarkeit 2 Divi3-Spalteneinstellungen

Kontext

Gehen wir zur letzten und letzten Spalte über! Fügen Sie einen Hintergrund mit Farbverlauf hinzu.

  • Hintergrund: Farbverlauf
  • Hintergrundfarbe 1 mit Farbverlauf: #f0562c
  • Zweifarbiger Hintergrundverlauf: #f1a526
  • Verlaufstyp: linear
  • Verlaufsrichtung: 38deg
  • Ausgangsposition: 23%

Hintergrundkonfigurationsspalte 3 diviGrenze

Wechseln Sie zur Registerkarte Design und fügen Sie jeder Ecke einen Rahmenradius hinzu.

  • Abgerundete Ecken: 2vw an allen Ecken.

Abgerundete Randkonfiguration Divi Spalte 3Schattenkiste

Fügen Sie einen Kastenfarbton auch hinzu.

  • Box Shadow: Zweite Option
  • Schatten der Box Horizontale Position: 6px
  • Vertikale Position des Boxschattens: -10px
  • Box Shadow Blur Force: 50px

Border Divi-Konfigurationsspalte 3

Transformator

Bei kleineren Bildschirmgrößen müssen wir die Spalte mithilfe benutzerdefinierter Transformationskonvertierungswerte neu positionieren.

  • Transformator Übersetzen:
    • Tablet + Telefon: 60vw

Divi Modul Transformation

Überlauf

Passen Sie abschließend die Überlaufeinstellungen an.

  • Horizontale und vertikale Überläufe: sichtbar

Divi-Überlaufkonfiguration

Fügen Sie Bildmodule hinzu

Importieren Sie ein halbtransparentes Ausschnittbild

Sobald Sie alle Spaltenparameter festgelegt haben, können Sie Module hinzufügen. Fügen Sie Spalte 1 ein Bildmodul hinzu und laden Sie ein halbtransparentes Bild Ihrer Wahl hoch. Sie finden die von uns verwendeten Bilder in dem komprimierten Ordner, den Sie am Anfang dieses Artikels herunterladen konnten.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Fügen Sie ein transparentes Divi-Bild hinzu

Sizing

Machen Sie das Modul in voller Breite.

  • In den Vollbreitenmodus wechseln: Ja

Wechseln Sie zu moe in voller Breite

Abstand

Fügen Sie dann benutzerdefinierte Rand- und Füllwerte hinzu.

  • Oberer Rand:
    • Büro: -11vw
    • Tablet + Telefon: -24vw
  • Polsterung links und rechts:
    • Büro: 5vw
    • Tablet + Telefon: 20vw

Padding Configuration Image Modul Divi

Verwandle die Leiter in einen Schwebeflug

Mit der Option "Skalierungsskala" in den Transformationseinstellungen fügen wir dem Bild einen subtilen Hover-Effekt hinzu.

  • Transform Scale on Hover: 120% auf beiden Achsen.

In Hover-Divi-Modul-Image konvertieren

Z-Index

Erhöhen Sie den z-Indexwert auf der Registerkarte Erweitert, um sicherzustellen, dass das Bild oben in der Spalte angezeigt wird.

  • Z-Index: 1

Konfiguration zindex module image divi

Bildmodule duplizieren und ziehen

Klonen Sie nun das Bildmodul zweimal und platzieren Sie die Duplikate in den verbleibenden zwei Spalten. Dieser Vorgang ist im kabelgebundenen Modus einfacher.

  • Beginnen Sie, indem Sie das Image-Modul zweimal duplizieren
  • Ziehen Sie dann die neuen Bildmodule in die Spalten 2 und 3.
  • Laden Sie verschiedene Bilder herunter

Duplizieren und verschieben Sie ein Bildmodul

Textbausteine ​​hinzufügen

Fügen Sie H3-Inhalte hinzu

Fügen Sie unter Bild 1 ein Textmodul hinzu und fügen Sie den gewünschten H3-Inhalt ein.

Fügen Sie den Text des Divi-Moduls hinzu

Titel 3 Text

Wechseln Sie zur Registerkarte Design und wenden Sie einen Stil auf die H3-Texteinstellungen an.

  • Text Titel: H3
  • H3-Schriftart: Doppio One
  • H3 Schriftgröße: fett
  • H3-Ausrichtung: Mitte
  • H3-Textfarbe: Weiß #ffffff
  • H3 Textgröße:
    • Büro: 1.8vw
    • Tablette: 5vw
    • Telefon: 6vw

Divi Textmodul Parameter

Textbausteine ​​duplizieren und ziehen

Klonen Sie den Textbaustein zweimal und platzieren Sie die Duplikate in den beiden verbleibenden Spalten.

  • Beginnen Sie, indem Sie die Textbausteine ​​zweimal duplizieren.
  • Ziehen Sie sie dann unter die Bildmodule in den Spalten 2 und 3.
  • Ändern Sie den Inhalt in jedem neuen Textmodul

Duplizieren Sie das Divi-Textmodul

Textbausteine ​​hinzufügen

Inhalt hinzufügen

Fügen Sie unter dem Titelmodul ein neues Textmodul hinzu. Fügen Sie im Inhaltsbereich Absatzinhalte hinzu.

Fügen Sie den Text des Divi-Moduls hinzu

Text

Gestalten Sie den Text nun wie folgt.

  • Schriftart: Öffnen Sie Sans
  • Textfarbe: Weiß #ffffff
  • Textgröße:
    • Büro: 0.6vw
    • Tablette: 2vw
    • Telefon: 2.8vw
  • Höhe der Textzeile: 2.2em

Konfigurationsbeschreibung Divi-Modul

Abstand

Passen Sie den Abstand des Moduls wie folgt an, um den Text zu zentrieren.

  • Unterer Rand:
    • Büro: 5vw
    • Tablet + Telefon: 10vw
  • Polsterung links und rechts
    • Büro: 5vw
    • Tablet + Telefon: 14vw

Divi LayoutTextbausteine ​​duplizieren und ziehen

Klonen Sie den Textbaustein zweimal und ziehen Sie die Duplikate in die verbleibenden zwei Spalten.

  • Beginnen Sie, indem Sie die Textbausteine ​​zweimal duplizieren
  • Dann platzieren Sie die Duplikate in den Spalten 2 und 3
  • Ändern Sie den Inhalt jedes Duplikats

Duplizieren Sie das Textmodul in einer anderen Divi-SpalteSchaltflächenmodule hinzufügen

Inhalt hinzufügen

Gehen wir zum letzten Modul! Fügen Sie der 1-Spalte ein Schaltflächenmodul mit einer Kopie Ihrer Wahl hinzu.

Fügen Sie ein Divi-Button-Modul hinzu

Ajouter un lien

Fügen Sie einen Link in die Linkoptionen des Moduls ein.

Divi Modul Link KonfigurationAusrichtung

Richten Sie nun das Tastenmodul aus.

  • Ausrichtung: Mitte

Konfiguration der Ausrichtung des Divi-Tastenmoduls

Schaltflächenstile

Rufen Sie dann die Schaltfläche wie folgt auf.

  • Größe des Schaltflächentexts:
    • Büro: 1vw
    • Tablette: 2vw
    • Telefon: 3vw
  • Textfarbe der Schaltfläche: Bright Blue #2a4eed
  • Tastenhintergrundfarbe: Weiß #ffffff
  • Randradius der Schaltfläche: 50vw
  • Tastenschrift: Double One
  • Schriftgröße: Fett
  • Die Farbe der Tasten: Bright Blue #2a4eed

Farbkonfiguration der Divi-Modultasten

Abstand

Formen Sie die Schaltfläche und erstellen Sie unten eine Überlappung, indem Sie in den Abstandseinstellungen benutzerdefinierte Rand- und Füllwerte hinzufügen.

  • Unterer Rand:
    • Büro: -1.7vw
    • Tablette: -4vw
    • Telefon: -6vw
  • Polster oben und unten:
    • Büro: 1vw
    • Tablet + Telefon: 3vw
  • Polsterung links und rechts
    • Büro: 4vw
    • Tablet + Telefon: 10vw

Abstandstaste

Schattenkiste

Zu guter Letzt fügen Sie der Schaltfläche einen dezenten Kasten-Farbton hinzu.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • Kastenschatten: erste Option
  • Schatten der horizontalen Position der Box: 0px
  • Schatten der vertikalen Position der Box: 2px
  • Box Shadow Blur Force: 50px

Divi-Konfiguration des Schattenmoduls

Schaltflächenmodule duplizieren und ziehen

Klonen Sie wie in den vorherigen Modulen die Schaltfläche zweimal und platzieren Sie die Duplikate in den verbleibenden zwei Spalten der Zeile.

  • Klonen Sie das Tastenmodul zweimal
  • Platzieren Sie die Duplikate in den Spalten 2 und 3

Duplizieren Sie das Divi-Button-ModulSchaltfläche 2 Symboltext und Farbe

Ändern Sie die Symbolfarbe der Schaltfläche und des Schaltflächenmoduls in Spalte 2.

  • Textfarbe der Schaltfläche: Grün # 1ba038
  • Symbolfarbe: # 1ba038

Divi-Tastenmodul

Schaltfläche 3 Symboltext und Farbe

Machen Sie dasselbe mit dem Knopf in der letzten Spalte und Sie sind fertig!

  • Farbe des Textes der Schaltflächen: Orange #f0562c
  • Symbolfarbe: # f0562c

Divi-Tastenparameter

Um zu beenden

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit semitransparenten Bildern ein hervorragendes CTA-Säulendesign erstellen. Wir haben die Einstellungen für den Divi-Spaltenüberlauf verwendet, damit sich Bilder und Schaltflächen nahtlos überlappen. Versuchen Sie, dieses Design in Ihrem nächsten Divi-Projekt zu verwenden, und teilen Sie uns im Kommentarbereich mit, wie es funktioniert!

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren