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.
Beginnen 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%
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
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:
Sizing
Passen Sie dann die Breite und die maximale Breite der Linie an.
- Breite: 100%
- Maximale Breite 100%
Fügen Sie ein Textmodul hinzu
Fügen Sie H2 und Textinhalte hinzu
Es ist Zeit, Module hinzuzufügen! Fügen Sie zunächst einen Textbaustein hinzu und fügen Sie einige ein Inhalt H2 und Absätze Ihrer Wahl.
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
Titel 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
Abstand
Und füge oben ein wenig Polster hinzu.
- Top Polsterung: 212px
Fügen Sie ein Divisionsmodul hinzu
Sichtbarkeit
Fügen Sie unter dem Textmodul ein Teilungsmodul hinzu und setzen Sie die Sichtbarkeit auf "Ja".
- Sichtbarkeit: ja
Linie
Ändern Sie dann die Farbe des Separators.
- Linienfarbe: Dunkelgrau #545454
Sizing
Passen Sie nun die Größe des Separators so an, dass er kleiner aussieht.
- Separatorgewicht: 4px
- Breite: 9%
- Ausrichtung des Moduls: Mitte
Abstand
Fügen Sie auch einen negativen oberen Rand hinzu.
- Oberer Rand:
- Büro: -40px
- Tablet + Telefon: -15px
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.
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%
Sizing
Passen Sie nun die Größe der Linie an.
- Breite: 100%
- Maximale Breite: 100%
Abstand
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
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%
Grenze
Definieren Sie dann die abgerundeten Ecken der Spalten in den Rahmeneinstellungen.
- Abgerundete Ecken: 2vw an allen Ecken
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
Überlauf
Stellen Sie sicher, dass auch die Überläufe der Spalte sichtbar sind.
- Horizontaler und vertikaler Überlauf: sichtbar
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%
Grenze
Fügen Sie der Spalte auch einen Rahmenradius hinzu.
- Abgerundete Ecken: 2vw an den vier Ecken
Schattenkiste
Mit dezentem Kastenschirm.
- Box Shadow: Zweite Option
- Schatten der Box Horizontale Position: 6px
- Vertikale Position des Boxschattens: -10px
- Box Shadow Blur Force: 50px
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
Überlauf
Machen Sie auch die Überläufe dieser Spalte sichtbar.
- Horizontale und vertikale Überläufe: sichtbar
3-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%
Grenze
Wechseln Sie zur Registerkarte Design und fügen Sie jeder Ecke einen Rahmenradius hinzu.
- Abgerundete Ecken: 2vw an allen Ecken.
Schattenkiste
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
Transformator
Bei kleineren Bildschirmgrößen müssen wir die Spalte mithilfe benutzerdefinierter Transformationskonvertierungswerte neu positionieren.
- Transformator Übersetzen:
- Tablet + Telefon: 60vw
Überlauf
Passen Sie abschließend die Überlaufeinstellungen an.
- Horizontale und vertikale Überläufe: sichtbar
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.
Sizing
Machen Sie das Modul in voller Breite.
- In den Vollbreitenmodus wechseln: Ja
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
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.
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
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
Textbausteine hinzufügen
Fügen Sie H3-Inhalte hinzu
Fügen Sie unter dem Bild in Spalte 1 ein Textmodul hinzu und fügen Sie einige ein Inhalt H3 Ihrer Wahl.
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
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.
- Ändere das Inhalt in jedem neuen Textbaustein
Textbausteine hinzufügen
Inhalt hinzufügen
Fügen Sie unter dem Titelmodul ein neues Textmodul hinzu. Fügen Sie im Inhaltsbereich Absatzinhalte 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
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
Textbausteine 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
Schaltflä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.
Ajouter un lien
Fügen Sie einen Link in die Linkoptionen des Moduls ein.
Ausrichtung
Richten Sie nun das Tastenmodul aus.
- Ausrichtung: Mitte
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
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
Schattenkiste
Zu guter Letzt fügen Sie der Schaltfläche einen dezenten Kasten-Farbton hinzu.
- Kastenschatten: erste Option
- Schatten der horizontalen Position der Box: 0px
- Schatten der vertikalen Position der Box: 2px
- Box Shadow Blur Force: 50px
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
Schaltflä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
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
Um zu beenden
In diesem Artikel haben wir Ihnen gezeigt, wie Sie halbtransparente Bilder verwenden, um ein beeindruckendes CTA-Spaltendesign zu erstellen. Wir haben Spaltenüberlaufeinstellungen verwendet Divi sodass sich Bilder und Schaltflächen nahtlos überlappen. Versuchen Sie, dieses Design in Ihrem nächsten Projekt zu verwenden Divi und lassen Sie uns im Kommentarbereich wissen, wie es läuft!
