Erstellen von Slide-in-CTAs mit Divis Zeilenausrichtungs- und Animationseinstellungen

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben. Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit dem Cleaning Company Layout Pack Slide-In-CTAs mit den Zeilenausrichtungs- und Animationseinstellungen von Divi erstellen.

Um dies zu erleichtern, entfernen wir zunächst alle Animationen, die bereits vorhanden sind. Auf diese Weise können wir die eingeblendeten Handlungsaufforderungen hervorheben.

Lasst uns anfangen!

Vorschau

Werfen wir einen Blick auf die drei verschiedenen Beispiele, die wir in diesem Beitrag behandeln werden:

Landing Page des Reinigungsunternehmens hochladen

Neue Seite hinzufügen und zum Visual Builder wechseln

Wie bereits erwähnt, verwenden wir das Cleaning Company Layout Pack, um dieses Tutorial zu erstellen, aber Sie können diesen Ansatz auch für jede Website verwenden, die Sie erstellen. Fügen Sie eine neue Seite hinzu, geben Sie Ihren Seitentitel ein und wechseln Sie sofort zu Visual Builder.

Landing Page des Reinigungsunternehmens hochladen

Sobald Sie dies getan haben, werden auf Ihrem Bildschirm drei Optionen angezeigt. Sie können von Grund auf mit dem Erstellen beginnen, ein vorgefertigtes Layout auswählen oder eine vorhandene Seite klonen. Wählen Sie die zweite Option.

Suchen Sie nach dem Cleaning Company Layout Pack, wählen Sie das Landingpage-Layout aus und laden Sie es auf Ihre Seite hoch.

Entfernen aller Animationseinstellungen auf der Seite

Abschnitt auf Seite suchen

Sobald das Layout auf Ihre Seite hochgeladen wurde, fahren Sie fort und suchen Sie den folgenden Abschnitt.

Animation entfernen

Öffnen Sie die Einstellungen und entfernen Sie die bereits vorhandene Animation.

Stil auf alle Abschnitte erweitern

Um Zeit zu sparen, werden wir diesen Animationsstil auf alle Designelemente auf der Seite ausweiten. Wir beginnen mit den Abschnitten auf unserer Seite, indem Sie mit der rechten Maustaste klicken und "Animationsstile erweitern" auswählen. Machen Sie es auf alle Abschnitte auf der Seite anwenden und klicken Sie auf "Erweitern".

Stil auf alle Zeilen erweitern

Wiederholen Sie die gleichen Schritte, aber wenden Sie sie stattdessen auf alle Zeilen auf der Seite an.

Stil auf alle Module erweitern

Lassen Sie es schließlich auch für alle Module auf der Seite gelten.

CTA Nr. 1 erstellen

Neue Zeile hinzufügen

Standort

Beginnen wir mit der Erstellung des ersten Slide-In-CTAs! Fügen Sie unten im folgenden Abschnitt eine neue Zeile hinzu:

Spaltenstruktur

Wählen Sie die folgende Spaltenstruktur für die gerade hinzugefügte Zeile:

Zeilenausrichtung

Wir schieben die Reihe nach links, um den Einschubeffekt zu erzeugen.

• Reihenausrichtung: Links

Größe

Wir verringern auch die Breite unserer Reihe.

• Benutzerdefinierte Breite verwenden: Ja
• Benutzerdefinierte Breite: 500px

Abstand

Und um unnötigen Leerraum loszuwerden, entfernen Sie die obere und untere Auffüllung der Zeile.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Call-to-Action-Modul hinzufügen

Kopie hinzufügen

Wir können jetzt unser Call-to-Action-Modul hinzufügen! Fügen Sie einen Inhalt Ihrer Wahl hinzu.

Link hinzufügen

Fügen Sie als nächstes einen Link zu Ihrem CTA-Modul hinzu. Wenn Sie noch keinen Link zum Weiterleiten haben, können Sie einfach '#' eingeben. Ohne etwas zu diesem Feld hinzuzufügen, können Sie die Schaltfläche nicht sehen, also stellen Sie sicher, dass Sie sie nicht leer lassen.

Hintergrundfarbe entfernen

Das CTA-Modul hat standardmäßig eine Hintergrundfarbe. Fahren Sie fort und entfernen Sie es in den Hintergrundeinstellungen.

Abschnittsverlauf kopieren

Öffnen Sie den Abschnitt mit dem blauen Hintergrund mit Farbverlauf. Ohne etwas daran zu ändern, klicken Sie mit der rechten Maustaste und kopieren Sie die Einstellungen.

Farbverlauf im CTA-Modul einfügen

Fügen Sie diesen Farbverlaufshintergrund in das CTA-Modul ein.

Einstellungen für Titeltext

Öffnen Sie die Einstellungen des CTA-Moduls erneut, gehen Sie zu den Einstellungen für den Titeltext und nehmen Sie einige Änderungen vor, die dem Layoutpaket entsprechen:

• Titelschriftart: Ubuntu
• Schriftstärke des Titels: Fett
• Titeltextgröße: 24px (Desktop & Tablet), 16px (Telefon)
• Höhe der Titelzeile: 1.2em

Textkörpereinstellungen

Ändern Sie auch die Schriftstärke des Körpers.

• Schriftstärke des Hauptteils: Semi Bold

Tasteneinstellungen

Ändern Sie als nächstes die Tasteneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 18px
• Schaltflächentextfarbe: #557df3
• Hintergrundfarbe der Schaltfläche: #FFFFFF
• Breite des Tastenrahmens: 10px
• Farbe des Knopfrahmens: #FFFFFF
• Schaltflächenrandradius: 0px
• Schaltflächenschriftart: Ubuntu
• Schriftdicke: fett

Abstand

Erhöhen Sie auch die Polsterung des Moduls.

• Obere Polsterung: 80px
• Untere Polsterung: 80px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Fügen Sie dann in den Rahmeneinstellungen einen oberen rechten und unteren rechten Randradius hinzu.

• Oben rechts: 100px
• Unten rechts: 100px

Box Schatten

Um mehr Tiefe zu erzeugen, fügen wir einen subtilen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 71px
• Stärke der Box-Schattenausbreitung: -5px

Animation

Zu guter Letzt verleihen Sie Ihrem CTA-Modul einen Animationseffekt.

• Animationsrichtung: Rechts
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Linear

CTA #2 erstellen

CTA #1 Zeile klonen und Änderungen vornehmen

Zeile klonen

Um das zweite Beispiel zu erstellen, klonen Sie die erste Zeile.

In Abschnitt ziehen

Scrollen Sie auf der Seite nach unten und platzieren Sie das Duplikat hier:

Obere Polsterung des Abschnitts entfernen

Öffnen Sie die Einstellungen des Abschnitts, in den Sie die Zeile eingefügt haben, und entfernen Sie die obere Polsterung.

• Obere Polsterung: 0px

Entfernen Sie den oberen linken Randradius des Abschnitts

Gehen Sie als nächstes zu den Randeinstellungen und entfernen Sie auch den oberen linken Randradius.

Entfernen Sie den oberen rechten Randradius des CTA

Öffnen Sie dann das CTA-Modul und entfernen Sie den oberen rechten Randradius, damit der Abschnitt und das Modul verschmelzen können.

Animation ändern

Für diesen Slide-In-CTA verwenden wir eine andere Animation. Fühlen Sie sich frei, auch mit anderen Animationsoptionen herumzuspielen.

• Animationsrichtung: Zentrum
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Linear

CTA #3 erstellen

CTA #1 Zeile klonen und Änderungen vornehmen

Zeile klonen

Um das letzte Beispiel zu erstellen, klonen wir die Zeile noch einmal.

In Abschnitt ziehen

Platzieren Sie das Duplikat im folgenden Abschnitt:

Zeilenausrichtung ändern

Öffnen Sie die Zeileneinstellungen des Moduls und ändern Sie die Ausrichtung nach rechts.

• Zeilenausrichtung: Rechts

CTA-Verlaufshintergrund entfernen

Entfernen Sie auch den Verlaufshintergrund des Moduls.

Stattdessen Hintergrundfarbe verwenden

Verwenden Sie stattdessen eine Hintergrundfarbe.

• Hintergrundfarbe: #f2835a

Schaltflächentextfarbe ändern

Um die Hintergrundfarbe anzupassen, ändern Sie auch die Textfarbe der Schaltfläche.

• Schaltflächentextfarbe: #f2835a

CTA-Randradius entfernen

Wir verwandeln das CTA-Modul in ein Quadrat, indem wir den gesamten Randradius entfernen, der ihm gegeben wurde.

Animation ändern

Ändern Sie als nächstes die Animationseinstellungen.

• Animationsrichtung: Unten
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Linear

Untere Polsterung des Abschnitts entfernen

Zu guter Letzt schieben wir das Modul an den unteren Rand des Abschnitts, indem wir die untere Polsterung des Abschnitts entfernen, in dem es platziert ist, und fertig!

• Untere Polsterung: 0px

Vorschau

Werfen wir einen letzten Blick auf die drei Beispiele für Slide-In-CTAs, die wir erstellt haben.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divis Cleaning Company Layout Pack Slide-In-CTAs erstellen. Wir haben damit begonnen, die Animationen zu entfernen, die bereits auf der Seite vorhanden sind. Danach haben wir drei Slide-In-CTAs erstellt, um Aufmerksamkeit zu erregen. Dieser Blogbeitrag ist Teil unserer Divi-Designinitiative, bei der wir versuchen, jede Woche etwas in Ihre Design-Toolbox zu legen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!