Ein wiederverwendbares Layout zum Erstellen einzigartiger Rahmendesigns mit Divi

Das Erstellen einzigartiger Rahmendesigns für Ihre Zeilen mit Divi kann eine nützliche (und unterhaltsame) Möglichkeit sein, Ihren Seiteninhalt kreativ in Szene zu setzen. Durch die Kombination der Abschnittsteiler von Divi mit einer kompakten Reihenstruktur können Sie unzählige Gestaltungsmöglichkeiten für die Einrahmung Ihrer Inhalte erkunden. Vielleicht haben Sie diese Technik bereits in früheren Tutorials oder in einigen unserer vorgefertigten Layouts gesehen. Aber heute dachte ich, ich zeige Ihnen eine einfache Möglichkeit, diese Designtechnik für sich selbst zu erkunden. In diesem Tutorial zeige ich Ihnen, wie Sie schnell ein wiederverwendbares Abschnittslayout erstellen, das in Ihrer Bibliothek gespeichert werden kann. Dann können Sie dieses Layout verwenden, um neue Rahmendesigns und Farbschemata zu erkunden. Das Layout funktioniert, indem es Ihre Zeile mit einem einzigartigen Design umrahmt, sodass alle Spaltenstrukturen und Module innerhalb der Zeile verwendet werden können.

Lass uns anfangen.

Erstellen des Design-Layouts für wiederverwendbare Rahmen

Um zu beginnen, erstellen wir einen neuen Abschnitt mit einem einspaltigen Layout. Wir müssen an dieser Stelle keine Module hinzufügen. Stattdessen werden wir zuerst unsere Zeile und unseren Abschnitt entwerfen, damit wir unsere Zeile später mit jedem gewünschten Inhalt füllen können.

Entwerfen Sie die Reihe

Aktualisieren Sie die Zeileneinstellungen wie folgt:

Hintergrundfarbe: #333333
Zeilenausrichtung: Mitte
Benutzerdefinierte Breite: 775 Pixel
Dachrinnenbreite: 2
Benutzerdefinierte Polsterung: 130 Pixel oben, 130 Pixel unten, 50 Pixel links, 50 Pixel rechts
Benutzerdefinierter Rand: 0px oben, 0px unten

Entwerfen Sie den Abschnitt

Aktualisieren Sie die Abschnittseinstellungen wie folgt:

Hintergrundfarbe: #ffffff
Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #ffffff
Unterteiler-Stil: siehe Screenshot
Farbe des unteren Teilers: #ffffff

Als Nächstes werden Sie die obere und untere Auffüllung auf 0px einstellen und wie folgt mit einem Rahmen oben und unten Platz schaffen:

Benutzerdefiniertes Padding: 0px oben, 0px unten
Breite des oberen Rands: 5vw
Farbe des oberen Rands: #ffffff
Breite des unteren Rands: 5vw
Farbe des unteren Rands: #ffffff

Wenn Sie den Abstand für den Abschnitt mit einem oberen und unteren Rand erstellen, wird der verfügbare Platz für den Abschnittsteiler maximiert, der die Reihe überlappt. Auf diese Weise können Sie jede Trennerhöhe für Ihr Design wählen.

Speichern Sie das Layout in Ihrer Bibliothek

Das war's für die grundlegende Layoutstruktur Ihres gerahmten Zeilendesigns. An dieser Stelle möchten wir diesen Abschnitt in der Divi-Bibliothek speichern, um das Abschnittslayout für zukünftige Designs zu verwenden.

Klicken Sie im Abschnittsmenü auf das Symbol In Bibliothek speichern.

Geben Sie dann einen Namen für das Layout ein (etwa „Zeilenrahmen-Layout“) und klicken Sie auf die Schaltfläche In Bibliothek speichern.

Abschluss des Rahmendesigns Nr. 1

Nachdem wir unser Abschnittslayout für zukünftige Bemühungen gespeichert haben, fügen wir unserer Zeile einige Inhalte hinzu, um das erste Designbeispiel zu vervollständigen.

Ändern der Spaltenstruktur

Für dieses Design denke ich, dass es schön sein wird, eine sechsspaltige Bildergalerie hinzuzufügen. Die kleine Spaltenstruktur ermöglicht es uns, eine kleine Gruppe von Bildern zu erstellen, die innerhalb der schmalen Reihe schön gerahmt sind.

Ändern Sie dazu zunächst die Zeilenstruktur in ein sechsspaltiges Layout.

Hinzufügen von Inhalten zur Zeile

Fügen Sie dann jeder Spalte drei Bildmodule (mit Bildern) hinzu. Ich verwende Bilder mit mehr Hochformat (anstatt Querformat) mit unterschiedlichen Größen / Abmessungen.

Hier ist das endgültige Design.

Bonus-Design-Tipp

Bevor wir weitere Gestaltungsmöglichkeiten für die Rahmengestaltung erkunden, möchte ich auf einen einfachen Trick hinweisen, mit dem Sie Ihren Rahmen auf eine Seite der Seite erweitern können. Gehen Sie dazu in die Abschnittseinstellungen und fügen Sie wie folgt einen Hintergrundverlauf hinzu:

Hintergrund Farbverlauf links: #333333
Hintergrundfarbe rechts: #ffffff
Verlaufsrichtung: 90deg
Startposition: 50%
Endposition: 0%

Schauen Sie sich dieses Design an.

Anpassen des Layouts für verschiedene Rahmendesigns und Inhalte

Die aufregenden Möglichkeiten dieses einfachen Layouts sind gelinde gesagt zahlreich. Durch Anpassen des Farbschemas, des Trennerstils, des Spaltenlayouts und des Modulinhalts können Sie alle möglichen unterschiedlichen Layoutdesigns erstellen. Außerdem können Sie diese coolen Divi-Funktionen wie "Suchen und Ersetzen" verwenden, um mit wenigen Klicks weit verbreitete Farbschemaänderungen vorzunehmen.

Hier ist der grundlegende Vorgang zum Aktualisieren des Layouts:

1. Gespeichertes Abschnittslayout auf die Seite laden
2. Aktualisieren Sie das Farbschema des Abschnitts mit „Suchen und Ersetzen“.
3. Ändern Sie den Teilerstil
4. Passen Sie die Zeile mit einem neuen Hintergrund und einer neuen Spaltenstruktur an.
5. Module zu Ihren Spalten hinzufügen

Mit diesem Prozess sollte das Erkunden neuer Designs ziemlich Spaß machen! Lass uns weitermachen.

Rahmendesign #2

Für dieses nächste Design verwenden wir das gespeicherte Schnittlayout, das wir zuvor erstellt haben. Klicken Sie dazu auf , um einen neuen Abschnitt im Visual Builder hinzuzufügen. Wählen Sie dann die Registerkarte Aus Bibliothek hinzufügen und klicken Sie in der Liste auf das Abschnittslayout.

Jetzt können wir den Abschnitt für ein neues Design anpassen.

Um das für dieses Layout verwendete Farbschema zu ändern, können wir mithilfe der Funktion Suchen und Ersetzen einige Divi-Entwurfskräfte abrufen. Gehen Sie zu den Abschnittseinstellungen des duplizierten Abschnitts, klicken Sie mit der rechten Maustaste auf die Hintergrundfarbe und wählen Sie „Suchen und Ersetzen“.

Aktualisieren Sie im Modal Suchen & Ersetzen Folgendes:

Innerhalb: Dieser Abschnitt
Ersetzen durch: #443850
Wählen Sie Alle ersetzen

Dadurch wird die weiße Farbe, die für den Abschnittshintergrund, den Rahmen und die Trennlinien verwendet wird, durch eine neue Farbe ersetzt.

Aktualisieren Sie nun die Abschnittseinstellungen mit einem neuen Trennlinienstil:

Aktualisieren Sie dann die Zeileneinstellungen mit einer weißen Hintergrundfarbe und einem Kastenschatten, um das neue Rahmendesign für die Zeile zu vervollständigen.

Für den Inhalt versuchen wir es mit einem fünfspaltigen Layout mit einigen Klappentexten. Fahren Sie fort und aktualisieren Sie das Spaltenlayout für Ihre Zeile auf ein fünfspaltiges Layout.

Fügen Sie dann einen Klappentext zur ersten Spalte hinzu. Nehmen Sie den Standardinhaltstext heraus und lassen Sie nur den Titeltext. Ersetzen Sie dann das Klappenbild durch ein Sternsymbol. Aktualisieren Sie die Designeinstellungen wie folgt:

Symbolfarbe: #7d8491
Symbol Schriftgröße: 80px
Textausrichtung: Mitte

Duplizieren Sie das Klappenmodul und aktualisieren Sie die Einstellungen wie folgt:

Symbolfarbe: #8cd845
Symbolschriftgröße: 50px

Jetzt duplizieren oder kopieren Sie diese beiden Module und fügen Sie sie in ein Muster in Ihren fünf Spalten mit drei Modulen in jeder Spalte ein.

Hier ist das endgültige Design.

Rahmendesign #3

Für das dritte Rahmendesign müssen wir zunächst unser gespeichertes Schnittlayout laden, wie wir es zuvor für das zweite Design getan haben.

Danach können wir Suchen und Ersetzen für die Hintergrundfarbe des Abschnitts verwenden (wie im vorherigen Design), um die weiße Farbe, die für den Abschnittshintergrund, die Trennlinie und den Rahmen verwendet wird, durch eine schöne blaue Farbe zu ersetzen. Gehen Sie dazu zu den Abschnittseinstellungen, klicken Sie mit der rechten Maustaste auf die Hintergrundfarbe und wählen Sie Suchen und Ersetzen. Aktualisieren Sie dann Folgendes:

Innerhalb: Dieser Abschnitt
Ersetzen durch: #1e3888
Wählen Sie Alle ersetzen

Aktualisieren Sie dann den Abschnittsteiler mit einem neuen oberen und unteren Teilerstil (den Wolken):

Gehen Sie als Nächstes zu den Zeileneinstellungen. Geben Sie der Zeile wie folgt einen Verlaufshintergrund:

Hintergrundfarbe links: Standard (#2b87da)
Hintergrundfarbe rechts: # 1E3888 (gleiche Farbe wie Abschnittshintergrund)
Verlaufstyp: Radial (um der Reihe ein abgerundetes „wolkenartiges“ Gefühl zu geben)
Endposition: 83% (um die Zeilenränder etwas auszublenden)

Jetzt müssen wir nur noch etwas Inhalt zu unserer gerahmten Zeile hinzufügen. Fügen wir der Zeile ein Call-to-Action-Modul hinzu und aktualisieren die Einstellungen wie folgt:

Fügen Sie dem Link-Eingabefeld „#“ hinzu, um die Schaltfläche anzuzeigen
Hintergrundfarbe verwenden: NEIN

Titeltextfarbe: #ffc338
Schaltflächentextfarbe: #ffc338

Hier ist das endgültige Design.

Was ist mit Handy?

Falls du dich gewundert hast. So sehen die Designs auf mobilen Geräten aus.

Abschließende Gedanken

Die in diesem Tutorial erstellten Rahmendesigns sollen Designmöglichkeiten hervorheben, anstatt vollständig polierte Designstücke zu präsentieren. Aus diesem Grund habe ich mich auf die Rahmendesigns konzentriert und grundlegende inhaltliche Beispiele verwendet. Hoffentlich werden sie Sie zumindest dazu inspirieren, neue Designs zu erkunden, indem Sie mit verschiedenen Abschnittsteilern, Farbschemata und Inhalten spielen.

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

Danke schön!