So positionieren Sie Schaltflächen absolut, um einzigartige Schaltflächenlayouts in Divi . zu erstellen

Die integrierten Positionsoptionen von Divi sind ein praktisches Designwerkzeug für die präzise Positionierung jedes Divi-Elements, einschließlich der Tasten. Meistens verlassen wir uns auf die standardmäßige statische Position einer Schaltfläche, die mit dem Fluss des Dokuments (oder der Seite) Schritt hält. Wenn wir jedoch wissen, wie man Schaltflächen absolut positioniert, können wir einige einzigartige und praktische Schaltflächenlayouts für unsere Divi-Inhalte erstellen.

In diesem Tutorial zeigen wir Ihnen, wie Sie 4 verschiedene Schaltflächenlayouts erstellen, die das Blurb-Modul von Divi einzigartig hervorheben. Dies ist praktisch, wenn Sie Klappentexte auf Ihrer Website verwenden.

Lass uns anfangen.

Vorgeschmack

Sehen Sie sich diesen kurzen Blick auf die vier Schaltflächenlayouts an, die wir in diesem Tutorial erstellen werden.

Laden Sie die Divi-Button-Layouts KOSTENLOS herunter

Um die Schaltflächenlayout-Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie 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.

Laden Sie die Dateien herunter

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.

HERUNTERLADEN

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!

Um das Layout in Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen eines Tastenlayouts Nr. 1: Doppelte untere Tasten

Für das erste unserer vier Schaltflächenlayouts werden wir zwei untere Schaltflächen unter einem Klappenmodul erstellen. Dies ist eine großartige Option, um Inhalte (wie Dienste) bereitzustellen, die zwei CTAs erfordern. Außerdem ist dies eine großartige Möglichkeit, Ihre Schaltflächen am unteren Rand von Spalten mit gleicher Höhe zu halten.

Fügen Sie dem Abschnitt zunächst eine Zeile mit zwei Spalten (0 eine halbe eine halbe) hinzu.

Zeileneinstellungen

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 2
• Spaltenhöhen ausgleichen: JA
• Breite: 100%
• Rand: 50px unten
• Padding: 0px oben, 0px unten

Spalte 1 Einstellungen

• Hintergrundfarbe: #2e3858
• Polsterung: 50px unten

Diese untere Polsterung schafft den nötigen Platz für das Hinzufügen der absolut positionierten Schaltflächen.

Design des Blurb-Moduls

Fügen Sie als Nächstes ein Klappenmodul zu Spalte 1 hinzu.

Laden Sie dann ein Bild wie folgt in das Klappenmodul hoch:

Gehen Sie zu den Designeinstellungen und aktualisieren Sie Folgendes:

• Bild-/Symbolausrichtung: Links
• Titelschriftart: PT Sans
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #ffffff
• Titeltextgröße: 38px
• Abstand der Titelbuchstaben: 2px
• Textkörperfarbe: #ffffff
• Bildbreite: 40%
• Inhaltsbreite: 100%
• Breite: 100%
• Padding: 50px, oben, 50px unten, 30px links, 30px rechts

Hinzufügen der doppelten unteren Tasten

Schaltfläche Nr. 1 Design

Fügen Sie unter dem Klappenmodul ein neues Schaltflächenmodul hinzu.

Aktualisieren Sie dann die Schaltflächeneinstellungen wie folgt:

• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #2dc3a3
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: 2px
• Tastenschrift: PT Sans
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: TT
• Rand: 0px unten
• Polsterung: 1em oben, 1em unten, 1,5em links, 2,5em rechts

Taste Nr. 1 Absolute Positionierung

Um die Schaltfläche absolut links unten in der Spalte zu positionieren, aktualisieren Sie Folgendes:

• Position: Absolut
• Ort: unten links

Divi macht dies mit dem integrierten anklickbaren Standortraster einfach. Da wir möchten, dass die Schaltfläche bündig am unteren Rand der Spalte sitzt, werden keine Offset-Werte benötigt.

Button #2 Design und Position

Um Schaltfläche Nr. 2 zu erstellen, duplizieren Sie das vorherige Schaltflächenmodul.

Das Duplikat wird direkt über der vorherigen Schaltfläche gestapelt. Wenn Sie also den visuellen Builder verwenden, kann es so aussehen, als ob nichts passiert ist. Klicken Sie auf , um die Einstellungen des Tastenmoduls zu öffnen und Folgendes zu aktualisieren:

• Hintergrundfarbe: #df4570

• Position Position: Unten rechts

Löschen Sie nun die derzeit leere Spalte 2 und duplizieren Sie Spalte 1, um auch in der rechten Spalte ein exaktes Duplikat des Designs zu erhalten.

Schaltflächenlayout #1 Ergebnis

Sehen Sie sich das Ergebnis an. Beachten Sie, dass der Inhalt in der rechten Spalte die Spalte weiter nach unten auf der Seite verschiebt, aber da unsere Schaltflächen absolut positioniert sind, schmiegen sie sich weiterhin an den unteren Rand für ein schönes symmetrisches Design.

Schaltflächenlayout erstellen #2: Drei seitliche Schaltflächen

Für das nächste Schaltflächenlayout werden wir drei Schaltflächen rechts neben einem Klappenmodul in einer einzigen Spalte positionieren.

Um dieses Layout-Design für die nächste Schaltfläche zu starten, duplizieren Sie die vorherige Zeile.

Blurb-Einstellungen

Aktualisieren Sie die Klappeneinstellungen wie folgt:

• Hintergrundfarbe: #df4570
• Bildbreite: 60%
• Breite: 56 % (Desktop und Tablet), 100 % (Telefon)

Dadurch wird der Raum erstellt, den wir rechts neben dem Klappentext benötigen, um unser Drei-Tasten-Layout hinzuzufügen.

Positionierungstaste Nr. 1

Um Button #1 zu positionieren, öffnen Sie die Button-Einstellungen für den grünen Button in der unteren linken Ecke und aktualisieren Sie Folgendes:

• Position: Absolut (Desktop und Tablet), Relativ (Telefon)
• Ort: Oben rechts
• Vertikaler Versatz: 20 % (Desktop und Tablet), 0 % (Telefon)
• Horizontaler Versatz: 5 % (Desktop und Tablet), 0 % (Telefon)

Positionierungstaste #2

Um Schaltfläche Nr. 2 zu positionieren, duplizieren Sie die Schaltfläche, die Sie gerade positioniert haben. Sie können den roten Button unten rechts löschen, da wir ihn nicht benötigen.

Öffnen Sie dann die Einstellungen für die Duplikat-Schaltfläche und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #df4570

Bewegen Sie dann die Schaltfläche etwas nach unten, indem Sie den vertikalen Versatz erhöhen.

• Vertikaler Versatz: 35%

Positionierungstaste #3

Wiederholen Sie abschließend den Vorgang noch einmal, indem Sie die vorherige Schaltfläche duplizieren und Folgendes aktualisieren:

• Hintergrundfarbe: #3599e5
• Vertikaler Versatz: 50%

Schaltflächenlayout #2 Ergebnis

Sehen Sie sich das Endergebnis des Drei-Tasten-Layouts an.

Schaltflächenlayout erstellen #3: Verstreute und skalierte Schaltflächen

Für dieses nächste Layout werden wir die Schaltflächen etwas sporadischer positionieren und dann die Größe einiger Schaltflächen mithilfe der Transformationsskala anpassen.

Um zu beginnen, duplizieren Sie die vorherige Zeile, die das Layout mit drei Schaltflächen enthält.

Blurb-Einstellungen

Öffnen Sie dann die Einstellungen für das Klappenmodul in Spalte 1 und aktualisieren Sie Folgendes:

• Breite: 60%

• Hintergrundfarbe: Transparent
• Breite: 60%
• Modulausrichtung: Mitte

• Textausrichtung: Mitte
• Modulausrichtung: Mitte

• Rahmenbreite: 2px
• Rahmenfarbe: rgba(255,255,255,0.15)

• Text Textgröße: 20px

• Rand: 50px oben

Positionierung der Taste Nr. 1

• Vertikaler Versatz: 8%
• Horizontaler Versatz: -7%

Schaltfläche #2 Positionierung

• Position Ort: Oben rechts
• Vertikaler Versatz: 34%
• Horizontaler Versatz: -10%

• Transformationsskala: 80%

Schaltfläche #3 Positionierung

• Position Ort: unten rechts
• Vertikaler Versatz: -3%
• Horizontaler Versatz: 5%

• Transformationsskala: 138%

Zeileneinstellungen

• Dachrinnenbreite: 4
• Breite: 80% (Desktop)

Schaltflächenlayout #3 Ergebnis

Sehen Sie sich das Endergebnis an.

Schaltflächenlayout erstellen #4: Pull-Tab-Schaltflächen

Für dieses letzte Schaltflächenlayout werden wir oben rechts im Klappentext einige Pull-Tabs erstellen.

Um das Design zu starten, duplizieren Sie die Zeile des Schaltflächenlayouts #2.

Spalteneinstellungen

Aktualisieren Sie als Nächstes die Hintergrundeinstellungen für Spalte 1 wie folgt:

• Hintergrundfarbe (Desktop): keine (Standard)
• Hintergrundfarbe (Telefon): #2e3858

Aktualisieren Sie auf der Registerkarte Erweitert die Sichtbarkeitsoption, sodass der Überlauf auf dem Telefondisplay ausgeblendet wird.

• Horizontaler Überlauf (Telefon): Versteckt
• Vertikaler Überlauf (Telefon): Versteckt

Zuglaschen-Taste Nr. 1 positionieren

Jetzt können wir die drei Schaltflächen, die sich derzeit in der Spalte befinden, als Pull-Tab-Schaltflächen verwenden. Öffnen Sie die Einstellungen für die obere Schaltfläche und aktualisieren Sie Folgendes:

• Vertikaler Versatz: 0px
• Horizontaler Versatz: 0px

Da wir die Schaltfläche für eine Registerkarte verwenden werden, müssen wir Platz für das rechte Symbol schaffen, damit es zentriert aussieht, wenn es hinter dem Klappenmodul hervorsteht. Fahren Sie fort und aktualisieren Sie die Tastenbelegung wie folgt:

• Polsterung: 2em links, 3em rechts

Fügen Sie dann das folgende benutzerdefinierte CSS zum After-Element hinzu:

padding-left: 10px;

Aktualisieren Sie dann den horizontalen Versatz auf dem Telefon wie folgt:

• Horizontaler Versatz (Telefon): -134px

Dadurch wird die linke Seite der Schaltfläche außerhalb der Spalte auf dem Telefondisplay ausgeblendet, sodass die vollständige Schaltfläche beim Bewegen/Klicken angezeigt wird.

Positionierung der Zuglasche-Taste #2

Um die zweite ausziehbare Schaltfläche zu positionieren, duplizieren Sie die vorherige Schaltfläche und aktualisieren Sie die Hintergrundfarbe des Duplikats.

• Hintergrundfarbe: #df4570

Aktualisieren Sie dann die Position wie folgt:

• Vertikaler Versatz: 63px

Aktualisieren Sie dann die folgenden Positionsoptionen für die Telefonanzeige:

• Position (Telefon): Relativ
• Vertikaler Versatz (Telefon): 0%

Positionierung der Zuglasche Taste #3

Um schließlich die dritte Aufreißtaste zu positionieren, duplizieren Sie das vorherige Tastenmodul. Öffnen Sie dann die Einstellungen für das duplizierte Tastenmodul und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #3599e5
• Vertikaler Versatz: 126px

Sobald die dritte Schaltfläche vorhanden ist, verwenden Sie die Mehrfachauswahlfunktion von Divi, indem Sie Cmd (oder Strg) gedrückt halten und auf jedes der Schaltflächenmodule klicken.

Öffnen Sie dann die Einstellungen eines der Schaltflächenmodule und fügen Sie die folgende Transformationsübersetzung beim Hover hinzu.

• Transformieren X-Achse verschieben (Hover): 68%

Dadurch werden alle drei Schaltflächen mit der Pull-Tab-Funktionalität beim Hover aktualisiert, indem sie nach rechts 68% verschoben werden.

Positionierung des Blurb-Moduls

Dieses Schaltflächenlayout erfordert, dass das Klappenmodul die drei Schaltflächen teilweise ausblendet. Daher geben wir dem Klappentext eine Breite von 100% und verwenden dann den rechten Rand, um das erforderliche Stück der Schaltflächenreiter freizulegen. Dann müssen wir nur noch dem Klappentext einen hohen Z-Index geben, um sicherzustellen, dass er über den Schaltflächen sitzt.

Öffnen Sie die Klappenmoduleinstellungen und aktualisieren Sie Folgendes:

• Breite: auto
• Rand: 50px rechts
• Position: Relativ
• Z-Index: 11

Aktualisieren Sie dann die Hintergrundfarbe.

• Hintergrundfarbe: #2e3858

Zeileneinstellungen

Nachdem die Klappen- und Pull-Tab-Schaltflächen fertig sind, öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Breite, um diesen Registerkarten etwas Bewegungsspielraum zu geben.

• Breite: 80%

Löschen Sie Spalte 2 und duplizieren Sie dann Spalte 1, damit Sie in jeder das gleiche Design haben.

Öffnen Sie dann die Einstellungen für Spalte 1 und geben Sie ihr folgenden Z-Index:

• Z-Index: 12

Dadurch wird sichergestellt, dass die Schaltflächen in Spalte eins beim Hovern nicht hinter dem Inhalt in Spalte 2 verborgen sind.

Wenn Sie möchten, können Sie die Symbole für jede Schaltfläche entsprechend Ihren Anforderungen aktualisieren.

Schaltflächenlayout #4 Ergebnis

Sehen Sie sich das Endergebnis des Layouts der Pull-Tab-Schaltflächen an.

Endgültige Ergebnisse

Abschließende Gedanken

Die Positionierung von Schaltflächen öffnet absolut die Tür für endlose Schaltflächenlayouts in Divi. Hoffentlich hilft Ihnen dieses Tutorial zu verstehen, wie Sie die absolute Position in Divi am besten verwenden. Andere nützliche integrierte Funktionen wie Transformationsoptionen und Z-Index machen das Design absolut positionierter Schaltflächen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!