Erstellen eines Abschnitts „Unser Prozess“ mit den neuen Spaltenstrukturen von Divi

Die neuen Säulenstrukturen von Divi haben unbestreitbar eine Menge mehr eingebaute Designmöglichkeiten zu Divi hinzugefügt. Um Ihnen zu zeigen, wie einzigartig Sie mit den vielseitigen Spaltenstrukturen von Divi werden können, zeigen wir Ihnen, wie Sie nur mit den integrierten Optionen von Divi einen einzigartigen Abschnitt „unserer Prozess“ erstellen. Darüber hinaus fügen wir einen subtilen Hover-Effekt hinzu, der beim Bewegen der Maus über einen der Schritte im Prozess erscheint. Diese Abschnitte eignen sich hervorragend, um zu erklären, wie Sie Ihren Kunden oder potenziellen Kunden gegenüber das tun, was Sie tun.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis, das Sie von diesem Tutorial erwarten können.

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Fügen Sie einer neuen oder bestehenden Seite einen Standardabschnitt hinzu und verwenden Sie dafür die folgende Hintergrundfarbe:

• Hintergrundfarbe: #3a1dad

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 170px
• Untere Polsterung: 170px

Sichtweite

Wir erstellen eine Alternative für kleinere Bildschirmgrößen, beginnen aber mit der Erstellung der Desktop-Version. Aus diesem Grund wurde dieser Abschnitt auf dem Telefon und Tablet in den Sichtbarkeitseinstellungen deaktiviert.

Zeile 1 hinzufügen

Spaltenstruktur

Nachdem Sie die Abschnittseinstellungen geändert haben, fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Fügen Sie einen Farbverlaufshintergrund zu Spalte 1, 3 und 5 hinzu

Um einen schönen Hover-Effekt zu erzielen, fügen wir den Spalten 1, 3 und 5 einen Verlaufshintergrund hinzu. Dies sind die Spalten, die jeweils einen Prozessschritt enthalten. Wir verwenden die beiden verbleibenden Spalten, um die Schritte miteinander zu verbinden. Jede der drei erwähnten Spalten benötigt den gleichen Verlaufshintergrund:

• Farbe 1: #580cf2
• Farbe 2: rgba(41,196,169,0)
• Spalte 1 Verlaufstyp: Radial
• Spalte 1 Startposition: 38%
• Spalte 1 Endposition: 38%

Größe

Wenn Sie mit dem Hinzufügen der Farbverlaufshintergründe fertig sind, gehen Sie zu den Größeneinstellungen und aktivieren Sie die Option für die volle Breite.

• Machen Sie diese Zeile in voller Breite: Ja

Abstand

Wir benötigen auch einige benutzerdefinierte Auffüllungswerte für die gesamte Zeile und die Spalte, die für die Aufnahme von Prozessschritten bestimmt sind.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 1 obere Polsterung: 20px
• Spalte 1 untere Polsterung: 20px
• Spalte 3 obere Polsterung: 20px
• Spalte 3 untere Polsterung: 20px
• Spalte 5 obere Polsterung: 20px
• Spalte 5 untere Polsterung: 20px

Zeile 1 zweimal klonen

Bevor wir Module hinzufügen, klonen wir die Zeile zweimal. Dies wird uns helfen, bei den nächsten Schritten Zeit zu sparen.

Erstes Duplikat ändern

Spaltenverläufe entfernen

Öffnen Sie die zweite Zeile in Ihrem Abschnitt (das erste Duplikat) und entfernen Sie alle darauf angewendeten Spaltenverläufe. Diese werden wir nicht brauchen, da die zweite Reihe keine Prozessschritte enthält, sondern nur einen Titel und vertikale Trennlinien, die die Schritte verbinden.

Spaltenabstand entfernen

Entfernen Sie auf ähnliche Weise alle benutzerdefinierten Spaltenauffüllungen, die auf Spalte 1, 3 und 5 angewendet wurden.

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

Blurb-Modul zur ersten Spalte von Zeile 1 hinzufügen

Inhalt hinzufügen

Es ist Zeit, mit dem Hinzufügen der Module zu beginnen! Wir beginnen mit einem Blurb-Modul in Spalte 1 der ersten Zeile. Dieses Blurb-Modul enthält den Inhalt unseres ersten Schritts, also fahren Sie fort und fügen Sie einen Text Ihrer Wahl hinzu.

Symbol auswählen

Wir verwenden auch das folgende Symbol, das anzeigt, wo nach dem nächsten Schritt zu suchen ist:

Standardhintergrundfarbe

Fügen Sie dann dem Blurb-Modul eine Standardhintergrundfarbe hinzu. Diese Hintergrundfarbe ist dieselbe wie die, die wir für den Abschnitt verwendet haben. Es blendet den Hintergrund des Spaltenverlaufs aus, den wir im vorherigen Teil dieses Tutorials hinzugefügt haben.

• Hintergrundfarbe: #3a1dad

Hintergrundfarbe schweben

Wir möchten jedoch, dass der Hintergrund des Spaltenverlaufs beim Schweben angezeigt wird. Aus diesem Grund ändern wir die Hintergrundfarbe beim Hover in eine vollständig transparente.

• Hintergrundfarbe: rgba(255,255,255,0)

Standardsymboleinstellungen

Fahren Sie fort, indem Sie zu den Symboleinstellungen gehen und einige Änderungen vornehmen.

• Symbolfarbe: #9d8ad8
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 80px

Hover-Symboleinstellungen

Wenden Sie beim Hover eine andere Symbolfarbe und Schriftgröße an.

• Symbolfarbe: #ffffff
• Symbolschriftgröße: 120px

Texteinstellungen

Gehen Sie als Nächstes zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

• Textausrichtung: Mitte
• Textfarbe: Hell

Einstellungen für Titeltext

Die Einstellungen für den Titeltext müssen ebenfalls geändert werden.

• Schriftstärke des Titels: Ultra Bold
• Titelschriftart: Großbuchstaben

Übergänge

Um einen reibungslosen Übergang zu schaffen, verlängern wir die Übergangsdauer.

• Übergangsdauer: 500ms

Klonen Sie das Blurb-Modul und platzieren Sie es in unebenen Spalten (beide Zeile 1 und 3)

Nachdem wir den ersten Schritt des Blurb-Moduls erstellt haben, können wir ihn fünfmal klonen und die Duplikate in die im Druckbildschirm unten markierten Spalten platzieren.

Inhalt und Symbol jedes Duplikats ändern

Natürlich müssen Sie den Inhalt jedes der Duplikate zusammen mit dem Symbol ändern, um sicherzustellen, dass der Vorgang sinnvoll ist.

Fügen Sie der zweiten Spalte von Zeile 1 einen horizontalen Teiler hinzu

Sichtweite

Das zweite Modul, das wir hinzufügen müssen, ist ein Teilermodul. Wir verwenden dieses Modul, um alle Schritte des Blurb-Moduls miteinander zu verbinden. Fahren Sie fort und fügen Sie eins in die zweite Spalte der ersten Zeile ein.

• Teiler anzeigen: Ja

Teilerfarbe

Ändern Sie als nächstes die Teilerfarbe.

• Farbe: #dddddd

Abstand

Um das Teilermodul vertikal auszurichten, verwenden wir einen oberen Rand. Wir werden auch die Breite des Moduls erhöhen, indem wir einen negativen linken und rechten Rand verwenden.

• Oberer Rand: 150px
• Linker Rand: -60px
• Rechts: -60px

Klonen Sie den horizontalen Teiler und platzieren Sie ihn in geraden Spalten (beide Zeile 1 und 3)

Klonen Sie das Trennmodul und platzieren Sie es in den Spalten, die im folgenden Druckbildschirm markiert sind:

Vertikalen Teiler zur ersten Spalte von Zeile 2 hinzufügen

Sichtweite

Wir brauchen auch einen vertikalen Teiler. Um eines zu erstellen, fügen wir ein neues Teilermodul zu Spalte 1 der zweiten Zeile hinzu, stellen jedoch sicher, dass die Option "Teiler anzeigen" deaktiviert ist.

• Teiler anzeigen: Nein

Hintergrundfarbe

Fügen Sie dem Modul als nächstes eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #dddddd

Größe

Und ändern Sie als nächstes die Größeneinstellungen. Sobald Sie dies tun, werden Sie feststellen, dass ein vertikaler Teiler einrastet.

• Breite: 0,5%
• Modulausrichtung: Mitte

Abstand

Um die Höhe des vertikalen Teilers zu erhöhen, verwenden wir einige benutzerdefinierte Abstandswerte.

• Oberer Rand: 20px
• Obere Polsterung: 120px
• Untere Polsterung: 120px

Vertikalen Teiler klonen und Duplikat in Spalte 5 von Zeile 2 platzieren

Klonen Sie die erstellte vertikale Trennlinie und platzieren Sie sie in der letzten Spalte der zweiten Zeile.

Titeltextmodul zu Spalte 3 von Zeile 2 hinzufügen

Inhalt hinzufügen

Das letzte Modul, das wir benötigen, ist ein Titel-Textmodul. Fügen Sie dieses Modul der dritten Spalte der zweiten Zeile mit einem Inhalt Ihrer Wahl hinzu.

Überschriftstexteinstellungen

Gehen Sie zu den Überschriftentexteinstellungen und nehmen Sie einige Änderungen am Erscheinungsbild Ihres Titels vor.

• Überschrift 2 Schriftstärke: Ultra Bold
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: rgba(255,255,255,0.09)
• Überschrift 2 Textgröße: 220px (Desktop), 150px (Tablet), 100px (Telefon)
• Überschrift 2 Buchstabenabstand: -50px (Desktop), -30px (Tablet), -25px (Telefon)

Abstand

Fügen Sie schließlich einige benutzerdefinierte Abstandswerte hinzu, damit das Titel-Textmodul an seinen Platz passt.

• Oberer Rand: 30px
• Linker Rand: -800px
• Rechter Rand: -800px

Alternative für Tablet & Telefon erstellen

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Wie am Anfang dieses Beitrags erwähnt, werden wir eine Alternative für kleinere Bildschirmgrößen erstellen. Fahren Sie fort und fügen Sie einen neuen regulären Abschnitt mit derselben Hintergrundfarbe wie der vorherige hinzu.

• Hintergrundfarbe: #3a1dad

Abstand

Fügen Sie einige benutzerdefinierte Werte für die obere und untere Auffüllung hinzu.

• Obere Polsterung: 170px
• Untere Polsterung: 170px

Sichtweite

Und blenden Sie den Abschnitt auf dem Desktop in den Sichtbarkeitseinstellungen aus.

Zeile 1 hinzufügen

Spaltenstruktur

Anstatt eine 6-spaltige Zeile zu verwenden, wie wir es für den Desktop-Abschnitt getan haben, verwenden wir nur eine Spalte.

Titeltextmodul des vorherigen Abschnitts klonen und in Zeile 1 platzieren

Klonen Sie das Titel-Textmodul Ihres Desktop-Abschnitts und platzieren Sie das Duplikat in Ihrer neuen Zeile.

Abstand entfernen

Fahren Sie fort, indem Sie die Abstandseinstellungen dieses Moduls entfernen.

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie dann eine weitere Zeile mit einer Spalte hinzu.

Blurb-Modul des vorherigen Abschnitts klonen und in Zeile 2 platzieren

Klonen Sie einen der Blurb-Modulschritte im Desktop-Bereich und platzieren Sie das Duplikat in Ihrer neuen Zeile.

Icon ändern

Ändern Sie das Symbol in ein nach unten weisendes.

Größe ändern

Ändern Sie als nächstes die Größeneinstellungen.

• Breite: 39 % (Tablet), 59 % (Telefon)
• Modulausrichtung: Mitte

Vertikalen Teiler des vorherigen Abschnitts klonen und in Zeile 2 platzieren

Wir verwenden auch hier den vertikalen Teiler des vorherigen Abschnitts. Fahren Sie fort und klonen Sie es und platzieren Sie das Duplikat direkt unter dem Blurb-Modul.

Abstand ändern

Ändern Sie die Abstandseinstellungen dieses Moduls, um seine Höhe zu verringern.

• Obere Polsterung: 50px
• Untere Polsterung: 50px

Klonen Sie beide Module so oft Sie wollen

Sie können diese beiden Module beliebig oft klonen, um alle Prozessschritte auf kleineren Bildschirmgrößen darzustellen.

Vorschau

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie die Säulenstrukturen von Divi kreativ nutzen können, um einen atemberaubenden und einzigartigen Prozessabschnitt zu erstellen. Darüber hinaus haben wir jedem Prozessschritt, der angezeigt wird, wenn Sie über ein Element schweben, einen subtilen Hover-Effekt hinzugefügt. Fühlen Sie sich frei, mit diesem Design herumzuspielen, um Ihre eigene einzigartige Alternative zu kreieren. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!