Verwenden von Trennmodulen zum Erstellen von Hintergrundformen mit den Transformationsoptionen von Divi

Veröffentlicht: 2019-04-10

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 Trennmodule verwenden, um Hintergrundformen mit den Transformationsoptionen von Divi und dem Paralegal Layout Pack zu erstellen. Trennmodule sind sehr vielseitig und können das Gesamtdesign Ihrer Seiten wirklich verbessern. Obwohl wir einige Beispiele neu erstellen werden, die speziell zum Paralegal Layout Pack passen, können Sie diese Technik für jede Art von Website verwenden, die Sie mit Divi erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Hintergrundformen

Handy, Mobiltelefon

Hintergrundformen

Erstellen Sie eine neue Seite mit der Landing Page des Paralegal Layout Packs

Erstellen Sie eine neue Seite und laden Sie die Landingpage des Paralegal Layout Packs darauf hoch.

Hintergrundformen

Beispiel 1 neu erstellen

Abschnittsüberlauf

Beginnen wir mit der Erstellung des ersten Beispiels! Gehen Sie weiter und öffnen Sie die Einstellungen für den Heldenbereich und gehen Sie zur Registerkarte "Design". Hier wollen wir sicherstellen, dass nichts über den Abschnittscontainer hinausgeht. Dazu fügen wir dem Hauptelement eine einzelne Zeile CSS-Code hinzu.

overflow: hidden;

Hintergrundformen

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Fahren Sie dann fort und fügen Sie der zweiten Spalte des Spezialbereichs ein Trennmodul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

Teiler anzeigen: Ja

Hintergrundformen

Hintergrundfarbe

Als Hintergrundfarbe für die Trennlinie verwenden wir eine Farbe aus der Farbpalette des Layoutpakets.

Hintergrundfarbe: #d94144

Hintergrundformen

Farbe

Dann gehen wir zum Design-Tab und ändern auch die Farbe des Teilers.

Farbe: #f3f1f2

Hintergrundformen

Stile

Gehen Sie zu den Stileinstellungen und ändern Sie den Trennstil.

Teilerstil: Gepunktet

Hintergrundformen

Größe

Spielen Sie auch mit den Größeneinstellungen herum. Sie können dieses Divider-Modul nach Belieben aussehen lassen, aber wenn Sie möchten, dass es genau so aussieht, wie es in der Vorschau dieses Beitrags gezeigt wurde, verwenden Sie die folgenden Einstellungen:

Teilergewicht: 4px
Höhe: 0px

Hintergrundformen

Abstand

Jetzt werden wir die Position und Größe des Divider-Moduls ändern, indem wir einige benutzerdefinierte Margin- und Padding-Werte verwenden. Stellen Sie sicher, dass Sie die Werte entsprechend den verschiedenen Bildschirmgrößen ändern, damit alles reaktionsschnell bleibt.

Obere Marge: -30vw (Desktop), -100vw (Tablet & Telefon)
Linker Rand: -100vw (Desktop), -138vw (Tablet), -300vw (Telefon)
Obere Polsterung: 0px
Untere Polsterung: 1,3 vw (Desktop), 2,2 vw (Tablet), 3 vw (Telefon)

Hintergrundformen

Verwandeln

Maßstab transformieren

Zeit, das Modul zu transformieren! Das erste, was wir in den Transformationseinstellungen tun werden, ist die Teilergröße zu erhöhen, indem wir die folgenden Transformationsskalierungswerte hinzufügen:

Unten: 153%
Rechts: 500%

Hintergrundformen

Transformieren Drehen

Wir werden auch das Teilermodul in den Transformationsdreheinstellungen drehen. Wie Sie feststellen können, übertrifft das Divider-Modul den Abschnitt dank der einen Zeile CSS-Code, die wir zu Beginn dieses Tutorials hinzugefügt haben, nicht.

Links: 348 Grad

Hintergrundformen

Beispiel 2 neu erstellen

Abschnittsüberlauf

Auf zum nächsten Beispiel! Auch hier möchten wir sicherstellen, dass nichts den Abschnittscontainer übertrifft, indem wir dem Hauptelement des Abschnitts eine einzelne Zeile CSS-Code hinzufügen.

overflow: hidden;

Hintergrundformen

Neue Zeile am Abschnittsende hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie am Ende des Abschnitts eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrundformen

Abstand

Um die von der Zeile eingenommene Größe zu verringern, entfernen wir die standardmäßige obere und untere Auffüllung in den Abstandseinstellungen.

Obere Polsterung: 0px
Untere Polsterung: 0px

Hintergrundformen

Trennmodul hinzufügen

Sichtweite

Zeit, das Divider-Modul hinzuzufügen und zu stylen! Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

Teiler anzeigen: Ja

Hintergrundformen

Hintergrundfarbe

Wir verwenden wieder eine der Farben in der Farbpalette des Layoutpakets als Hintergrundfarbe.

Hintergrundfarbe: #d94144

Hintergrundformen

Farbe

Wechseln Sie zur Registerkarte Design und ändern Sie auch die Teilerfarbe.

Farbe: #f3f1f2

Hintergrundformen

Größe

Wir spielen auch mit den Größeneinstellungen herum.

Teilergewicht: 10px
Höhe: 0px

Hintergrundformen

Abstand

Und wir erstellen genau die Form, die wir wollen, indem wir benutzerdefinierte Auffüllungen verwenden, die wir für verschiedene Bildschirmgrößen ändern.

Obere Polsterung: 2vw
Untere Polsterung: 2.5vw (Desktop), 3vw (Tablet), 3.9vw (Telefon)

Hintergrundformen

Verwandeln

Maßstab transformieren

Zeit sich zu verwandeln! Als erstes skalieren wir das Divider-Modul. Wir tun dies, um sicherzustellen, dass weder am Anfang noch am Ende des Abschnitts eine Lücke entsteht. Machen Sie sich keine Sorgen, dass Sie Ihr Divider-Modul zu stark skalieren, alles, was über den Abschnitt hinausgeht, wird in Ihrem Design nicht angezeigt.

Unten: 153%
Rechts: 153% (Desktop), 250% (Tablet), 500% (Telefon)

Hintergrundformen

Transformieren Übersetzen

Dann ändern wir auch die Position des Divider-Moduls, damit es auf der rechten Seite angezeigt wird. Stellen Sie sicher, dass Sie diese Werte an die verschiedenen Bildschirmgrößen anpassen.

Unten: 25vw (Desktop), 27vw (Tablet & Telefon)
Rechts: 0px (Desktop), -32vw (Tablet & Telefon)

Hintergrundformen

Transformieren Drehen

Zu guter Letzt werden wir den horizontalen Teiler in einen vertikalen umwandeln, indem wir mit den Transformationsdreheinstellungen herumspielen.

Links: 270 Grad

Hintergrundformen

Beispiel 3 neu erstellen

Abschnittsüberlauf

Auf zum nächsten und letzten Beispiel! Stellen Sie auch hier sicher, dass nichts den Abschnittscontainer übertrifft, indem Sie dem Hauptelement des Abschnitts eine einzelne Zeile CSS-Code hinzufügen.

overflow: hidden;

Hintergrundformen

Neue Zeile am Anfang des Abschnitts hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie oben im Abschnitt eine neue Zeile hinzufügen. Es ist wichtig, dass die Zeile oben platziert wird, damit sie später im Tutorial nicht den Inhalt darunter überlappt.

Hintergrundformen

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Spalte die gesamte Bildschirmbreite einnehmen.

Machen Sie diese Zeile in voller Breite: Ja
Benutzerdefinierte Dachrinnenbreite verwenden: Ja
Dachrinnenbreite: 1

Hintergrundformen

Trennmodul hinzufügen

Sichtweite

Fügen Sie als nächstes Ihr Trennmodul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

Teiler anzeigen: Ja

Hintergrundformen

Hintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen und fügen Sie eine Hintergrundfarbe Ihrer Wahl hinzu.

Hintergrundfarbe: #d94144

Hintergrundformen

Farbe

Ändern Sie auch die Teilerfarbe.

Farbe: #f3f1f2

Hintergrundformen

Stile

Und ändern Sie den Teilerstil in den Stileinstellungen.

Teilerstil: Gepunktet

Hintergrundformen

Größe

Gehen Sie dann zu den Größeneinstellungen und nehmen Sie einige Änderungen vor.

Teilergewicht: 4px
Höhe: 0px

Hintergrundformen

Abstand

Und erstellen Sie die gewünschte Form, indem Sie in den Abstandseinstellungen etwas oberes und unteres Padding verwenden.

Obere Polsterung: 3vw
Untere Polsterung: 3vw

Hintergrundformen

Box Schatten

Wir werden unserer Seite auch etwas Tiefe verleihen, indem wir dem Teiler einen subtilen Kastenschatten geben.

Stärke der Box-Schattenunschärfe: 80px
Schattenfarbe: rgba(0,0,0,0.3)

Hintergrundformen

Verwandeln

Maßstab transformieren

Nachdem wir den Teiler gestaltet haben, können wir ihn umwandeln. Das erste, was wir tun werden, ist die Größe des Divider-Moduls in den Einstellungen für die Transformationsskala zu erhöhen.

Unten: 140 %
Rechts: 140 %

Hintergrundformen

Transformieren Übersetzen

Dann gehen wir zu den Transformationsübersetzungseinstellungen und ändern die Position des Divider-Moduls. Wenn Sie die Zeile oben im Abschnitt platzieren, können wir einen niedrigeren Z-Index beibehalten als die Zeile darunter, wodurch diese schöne Überlappung entsteht!

Unten: 4vw
Rechts: 16vw (Desktop), 26vw (Tablet), 35vw (Telefon)

Hintergrundformen

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Hintergrundformen

Handy, Mobiltelefon

Hintergrundformen

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie das Divider-Modul und die neuen Transformationsoptionen von Divi verwenden, um Hintergrundformen zu erstellen und das allgemeine Erscheinungsbild Ihrer Seiten zu verbessern. Dieses Tutorial ist Teil unserer laufenden Divi-Designinitiative, bei der wir versuchen, jede Woche etwas mehr in Ihre Design-Toolbox zu bringen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!