So erstellen Sie schwebende Eckendesigns für Inhalte in Divi
Veröffentlicht: 2019-04-11Das Erstellen von schwebenden Eckdesigns ist eine einfache und einfache Möglichkeit, Divi-Modulen einen kreativen Stil zu verleihen, den Sie ohne benutzerdefinierten Code vielleicht nicht für möglich gehalten hätten. Gute Nachrichten! Mit Divi können Sie Teiler und Klappen verwenden, um die vier Ecken Ihres Moduls mit den integrierten Optionen von Divi zu gestalten. Und es kann ziemlich viel Spaß machen, die verschiedenen Möglichkeiten auszuprobieren.
In diesem Tutorial zeige ich Ihnen, wie Sie in Divi schwebende Eckdesigns für Ihre Inhalte erstellen. Sobald Sie die Elemente eingerichtet haben, können Sie diese Ecken mit unzähligen Formen, Symbolen und Farben gestalten!
Lass uns anfangen!
Vorgeschmack
Hier ist ein kleiner Vorgeschmack auf die schwebenden Eckdesigns, die in diesem Tutorial möglich sind.
Laden Sie das Floating-Border-Design-Beispiel-Layout KOSTENLOS herunter
Um das schwebende Bordüren-Design-Layout in die Hände zu bekommen, müssen Sie es 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.
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.
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 auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.
Kommen wir nun zum Tutorial, sollen wir?
Einstieg
Das einzige, was Sie für dieses Tutorial benötigen, ist Divi. Wir werden diese Beispiele im Frontend des Divi Builder von Grund auf neu erstellen.
Erstellen Sie zunächst eine neue Seite und geben Sie Ihrer Seite einen Titel. Klicken Sie auf den Divi Builder im Frontend und wählen Sie die Option „Build from Scratch“.
Jetzt sind Sie bereit zu gehen!
Erstellen der Design-Layoutvorlage für schwebende Ecken
Da es bei diesem Design unzählige Gestaltungsmöglichkeiten geben wird, ist es sinnvoll, das Basislayout (oder die Vorlage) zu erstellen, von der aus gearbeitet werden kann.
Für diese Vorlage fügen wir jeder Ecke eines Textmoduls vier Trennwände hinzu. Sobald das Layout fertig ist, können Sie neue Wege erkunden, um diese Trennwände für einzigartige Designs anzupassen.
Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile.
Bevor wir das Textmodul hinzufügen, aktualisieren Sie die Zeileneinstellungen wie folgt:
Benutzerdefinierte Breite: 640px
Benutzerdefiniertes Padding: 0px oben, 0px unten
Fügen Sie dann der Zeile ein Textmodul hinzu und aktualisieren Sie Folgendes:
Text Textgröße: 20px
Textzeilenhöhe: 1.8em
Benutzerdefinierter Rand: -25px oben, -25px unten, 25px links, 25px rechts
Benutzerdefinierte Polsterung (Desktop): 10 % oben, 10 % unten, 10 % links, 10 % rechts
Benutzerdefinierte Polsterung (Telefon): 20 % oben, 20 % unten
Rahmenbreite: 4px
Rahmenfarbe: #eeeeee
Der benutzerdefinierte Rand und die Polsterung werden dabei helfen, unsere Teilermodule auszurichten, die wir in Kürze hinzufügen werden. Da die Trennwände eine Höhe und Breite von 50px haben, werden diese Trennwände durch den oberen und unteren Rand von -25px zur Hälfte in das Textmodul gezogen, um ein schönes symmetrisches Design zu erzielen (Sie werden sehen).
Hinzufügen der oberen beiden schwebenden Eckteiler
Wenn das Textmodul installiert ist, können wir beginnen, die beiden oberen schwebenden Eckdesigns mithilfe von Trennmodulen hinzuzufügen.
Erstellen Sie ein neues Trennmodul und ziehen Sie es an den Anfang des Textmoduls.
Dann und aktualisieren Sie die Teilereinstellungen wie folgt:
Teiler anzeigen: NEIN
Hintergrundfarbe: #7cda24 (oder eine beliebige Farbe)
Höhe: 50px
Breite: 50px
Die Höhe und Breite von 50px gibt uns das perfekte Quadrat, das wir für unseren schwebenden Rahmen verwenden können.
Fügen Sie nun dem Teiler einen Kastenschatten hinzu, um den schwebenden Effekt wie folgt zu erzeugen:
Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenunschärfe: 0px
Stärke der Box-Schattenausbreitung: 20px
Schattenfarbe: #ffffff
Um sicherzustellen, dass das Trennmodul über dem Textmodul bleibt (und sich nicht dahinter versteckt), müssen wir dem Hauptelement wie folgt ein CSS-Snippet hinzufügen:
Hauptelement-CSS:
position: relative
Aktualisieren Sie dann den Z-Index auf 1.
Als nächstes duplizieren Sie das Teilermodul und aktualisieren die duplizierten Teilereinstellungen wie folgt:
Modulausrichtung: rechts
Benutzerdefinierter Rand: -50px oben
Dadurch wird der Teiler rechts ausgerichtet und auf die exakte Höhe des darüber sitzenden Teilermoduls hochgezogen. Dadurch entsteht genau die Eckplatzierung, die wir suchen.
Hinzufügen der unteren Eckteiler
Um die beiden unteren Eckteiler hinzuzufügen, stellen Sie den Drahtmodell-Ansichtsmodus bereit und kopieren Sie die soeben erstellten linken und rechten Teiler und fügen Sie sie unter das Textmodul ein (stellen Sie sicher, dass der linke Teiler über dem rechten Teiler gestapelt bleibt, wie in der Abbildung gezeigt unter).
Das ist es! Schauen wir uns das endgültige Design unseres Basislayouts an.
Entdecken Sie neue Designs für schwebende Ecken
Mit dieser Vorlage können wir einige verschiedene Designs erkunden, die möglich sind. Sie können diesen gesamten Abschnitt in der Divi-Bibliothek speichern, damit Sie ihn in Zukunft als Vorlage behalten können. Aber vorerst duplizieren wir einfach den Abschnitt und erkunden ein neues Design.
Rautenformen mit Verlaufshintergründen
Verwenden Sie mit einem Duplikat unserer Vorlage die Mehrfachauswahlfunktion, um alle vier Teilermodule auszuwählen. Klicken Sie dann auf das Zahnradsymbol für die Einstellungen auf einem der ausgewählten Teiler, um das Elementeinstellungen-Modal bereitzustellen. Es kann hilfreich sein, für diesen Schritt den Klickmodus zu verwenden.
Aktualisieren Sie in den Elementeinstellungen Folgendes:
Farbverlauf Hintergrund links: #7cda24
Farbverlauf Hintergrund rechts: #edf000
Steigungsrichtung: 45deg
Verwenden Sie dann die Transformationsoptionen, um den Teiler in eine Rautenform zu drehen.
Transformieren Z-Achse drehen: 45deg
Hier ist das endgültige Design.
Schiefe Teiler
Sie können auch die Option „Schiefe transformieren“ verwenden, um die Teiler für ein noch einzigartigeres Design zu neigen. Sie können entweder für jeden Teiler ein separates Schrägdesign hinzufügen oder Multiselect verwenden, um die Transformationsschräge für alle vier gleichzeitig um -37 Grad auf der X- und Y-Achse zu aktualisieren.
So würde das aussehen.
Dunkle Hintergrunddesigns
Sie können sogar experimentieren, indem Sie dem Textmodul eine dunkle Hintergrundfarbe hinzufügen, um ein einzigartiges Design mit schwebenden Ecken zu erhalten. Hier ist ein Beispiel für das Textmodul mit der Hintergrundfarbe #002130, das ohne Transformationsdrehung oder -schrägstellung verwendet wird.
Abgerundete Kantenecken
Um dem Design einige abgerundete Ecken zu verleihen, können Sie der Reihe einfach wie folgt abgerundete Ecken hinzufügen:
Abgerundete Ecken: 20px
Kreise schwebende Ecken
Um diese quadratischen Ecken in Kreise zu verwandeln, können Sie dem Hauptelement jedes Teilers das folgende benutzerdefinierte CSS-Snippet hinzufügen:
border-radius: 50%;
Da die Teiler 50 x 50 Pixel groß sind, entsteht ein perfektes Kreisdesign.
Wie Sie sehen, gibt es viele verschiedene Möglichkeiten, diese Elemente für unzählige neue Eckdesigns zu optimieren.
Lassen Sie uns nun die Verwendung von Klappensymbolen für schwebende Ecken anstelle von Trennmodulen untersuchen.
Erstellen von schwebenden Ecken mit Blurb-Symbolen
Durch Hinzufügen von Blurb-Symbolen zu jeder Ecke des Textmoduls können Sie noch einzigartigere Designs erhalten. Sie können dieselbe Layoutvorlage verwenden, die wir zu Beginn des Tutorials erstellt haben. Der einzige Unterschied besteht in der Verwendung von Klappenmodulen anstelle von Trennmodulen für die vier Ecken.
Fahren Sie fort und erhalten Sie ein Duplikat der bereitgestellten Abschnittslayout-Vorlage.
Löschen Sie anschließend die Trennbausteine oberhalb und unterhalb des Textbausteins.
Hinzufügen der oberen beiden Klappensymbolecken
Da wir das Klappenmodul nur verwenden möchten, um ein einzelnes Symbol anzuzeigen, müssen wir sicherstellen, dass die Größe und der Abstand korrekt sind.
Fügen Sie über dem Textmodul ein Klappenmodul hinzu und entfernen Sie den Titel und den Fließtext. Klicken Sie dann, um ein Symbol anstelle eines Bildes zu verwenden, und wählen Sie das Facebook-Kreissymbol aus.
Aktualisieren Sie dann die folgenden Klappeneinstellungen (diese Einstellungen sind den Einstellungen sehr ähnlich, die wir im ersten Beispiel zum Trennmodul hinzugefügt haben):
Hintergrundfarbe: #ffffff
Symbolschriftgröße: 50px
Breite: 50px
Benutzerdefinierter Rand: 0 Pixel unten
Abgerundete Ecken: 50%
Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenunschärfe: 0px
Stärke der Box-Schattenausbreitung: 20px
Schattenfarbe: #ffffff
Hauptelement-CSS:
position: relative;
Blurb-Bild-CSS:
margin-bottom: 0px
Z-Index: 1
Als nächstes duplizieren Sie das Klappenmodul, um ein weiteres direkt unter dem aktuellen Klappentext zu erstellen, und aktualisieren Sie Folgendes:
Modulausrichtung: rechts
Benutzerdefinierter Rand: -50px oben
Kopieren Sie dann die beiden oberen Klappenmodule und fügen Sie sie unter das Textmodul ein (achten Sie darauf, dass der linke Klappentext über dem rechten Klappentext gestapelt bleibt).
Dann können Sie die Symbole für jeden Klappentext nach Belieben aktualisieren.
Hier ist das endgültige Design.
Entdecken Sie weitere Designs mit Blurb Icon Floating Corners
Mit diesem Setup können Sie viele einzigartige Designs erkunden. Sie können die Symbole ändern, verschiedene Farbkombinationen verwenden und sie sogar mit Transformationsoptionen skalieren oder drehen.
Hier ist ein Beispiel für das Design mit einer dunklen Hintergrundfarbe für das Textmodul und verschiedenen Symbolfarben.
Funktioniert in Layouts mit mehreren Spalten
Solange Sie die Elemente zusammenhalten, können Sie diese schwebenden Ecklayouts in mehreren Spalten hinzufügen.
Einpacken
Das Erstellen von schwebenden Eckendesigns für Ihre Inhalte in Divi zeigt wirklich die Leistungsfähigkeit von Divi Builder. Mit allen verfügbaren integrierten Optionen können Sie aus einer grundlegenden Layoutvorlage unzählige Designvarianten erstellen. Ich hoffe, dies wird Sie dazu inspirieren, etwas Spaß beim Erkunden neuer Designs zu haben.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!