10 unterhaltsame Möglichkeiten, das Divider-Modul mit den neuen Divi-Optionen zu verwenden
Veröffentlicht: 2017-09-26Im heutigen Divi-Tutorial geben wir Ihnen einen Einblick, was Sie mit den neuen Optionen tun können, die in den vorherigen Updates zu Divi hinzugefügt wurden. Etwas präziser; Wir werden 10 interessante Möglichkeiten vorstellen, wie Sie das Divider-Modul mit diesen neuen Änderungen gestalten können. Die Möglichkeiten sind wirklich endlos, aber dieser Beitrag könnte Ihnen helfen, die Inspiration für Ihr nächstes Projekt zu finden.
Vorgeschmack
Eines der besten Dinge an diesem Tutorial ist die Tatsache, dass wir kein zusätzliches CSS (oder Code jeglicher Art) verwenden werden. Alle Beispiele, die wir erstellen, verwenden nur die Optionen, die im Divider-Modul enthalten sind. Werfen wir einen kurzen Blick auf die Teiler, die wir bauen werden, bevor ich Ihnen Schritt für Schritt zeige, wie Sie sie erstellen:
10 unterhaltsame Möglichkeiten, das Divider-Modul mit den neuen Divi-Optionen zu verwenden
Abonnieren Sie unseren Youtube-Kanal
Wiederverwendbaren Abschnitt erstellen
Als erstes müssen Sie den Abschnitt erstellen, den wir in allen 10 Beispielen verwenden. Natürlich können Sie die Teiler auch in anderen Kontexten verwenden, aber wenn Sie diesen Abschnitt zuerst erstellen, haben Sie die Möglichkeit, mit Ihrem eigenen Divi Builder herumzuspielen und zu sehen, welchen Sie bevorzugen.
Neue Seite erstellen
Erstellen Sie zunächst eine neue Seite in Ihrem WordPress-Dashboard, aktivieren Sie den Divi Builder und öffnen Sie den Visual Builder.
Abschnitt mit dreispaltiger Zeile erstellen
Wenn Sie sich auf Ihrer neuen Seite befinden, erstellen Sie einen Standardabschnitt und verwenden Sie eine dreispaltige Zeile innerhalb dieses Standardabschnitts. Wir haben '#f4f4f4' als Hintergrundfarbe für den Abschnitt verwendet.
Erstes Textmodul hinzufügen
Fügen Sie dann das erste Textmodul zur ersten Spalte der Zeile hinzu. Öffnen Sie die Einstellungen, geben Sie den Text ein, der angezeigt werden soll, und gehen Sie zur Registerkarte Design. Nehmen Sie auf der Registerkarte Design die folgenden Änderungen an der Unterkategorie Text vor:
- Textschriftart: Hummer
- Schriftgröße des Textes: 35
- Textfarbe: #000000
- Textzeilenhöhe: 1.7em
- Textausrichtung: Mitte
Zweites Textmodul hinzufügen
Nachdem Sie das erste Textmodul hinzugefügt haben, können Sie direkt darunter ein weiteres hinzufügen. Fügen Sie den Text hinzu, der angezeigt werden soll, und wechseln Sie zur Registerkarte Design. Stellen Sie auf der Registerkarte Design sicher, dass die folgenden Änderungen gelten:
- Textschriftart: Roboto
- Schriftgröße des Textes: 14
- Textzeilenhöhe: 1.7em
- Textausrichtung: Mitte
Textbausteine klonen und in andere zwei Spalten platzieren
Nachdem Sie diese beiden Textbausteine erstellt haben, können Sie sie auch in die anderen beiden Spalten der Zeile einfügen.
Bevor Sie beginnen
Wir werden 10 unterhaltsame Möglichkeiten vorstellen, wie Sie das Trennmodul von Divi gestalten können. Jedes der Beispiele hat drei Teiler, die miteinander harmonieren. Die meisten Einstellungen sind für alle drei Module gleich. Wir beginnen damit, Ihnen die Einstellungen zu zeigen, die für jeden von ihnen zählen, und fahren mit den Änderungen fort, die Sie an den anderen beiden Teilern vornehmen müssen. Also, jedes Mal, wenn Sie den ersten Teiler fertigstellen, klonen Sie ihn und platzieren Sie ihn in den anderen beiden Spalten. Sobald Sie dies getan haben, können Sie die Änderungen an den anderen beiden Teilern vornehmen.
Hinweis: Sie müssen für jeden der Teiler die Option "Teiler anzeigen" auf der Registerkarte "Inhalt" aktivieren.
1. Das verschwommene Dreieck
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Auf dem Inhalts-Tab werden wir die folgenden Hintergrundeinstellungen verwenden:
- Erste Farbe: #e09900
- Zweite Farbe: rgba(255,255,255,0)
- Verlaufstyp: Linear
- Verlaufsrichtung: 176deg
- Startposition: 13%
- Endposition: 31%
Registerkarte „Design“
Wechseln Sie zur Registerkarte Design und stellen Sie sicher, dass die folgenden Einstellungen für die Unterkategorie Dimensionierung gelten:
- Teilergewicht: 0
- Höhe: 25px
- Breite: 35%
- Modulausrichtung: Mitte
Scrollen Sie auf derselben Registerkarte nach unten und verwenden Sie die folgenden Animationseinstellungen in der Unterkategorie Animation:
- Animationsstil: Folie
- Animationswiederholung: Einmal
- Animationsrichtung: Zentrum
- Animationsdauer: 1200 ms
- Animationsintensität: 80%
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Auf der Registerkarte "Inhalt" müssen Sie nur die erste Verlaufsfarbe in "#0c71c3" ändern.
Registerkarte „Design“
Als Nächstes müssen Sie der Unterkategorie Animation eine Animationsverzögerung von '250 ms' hinzufügen.
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Ändern Sie die erste Verlaufsfarbe in '#8300e9' für den letzten Teiler.
Registerkarte „Design“
Die Animationsverzögerung, die Sie zur Animationsunterkategorie des letzten Teilers hinzufügen müssen, beträgt '500ms'.
2. Der Farbschatten
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Verwenden Sie die folgenden Verlaufshintergrundeinstellungen auf der Registerkarte Inhalt:
- Erste Farbe: #e09900
- Zweite Farbe: rgba(255,255,255,0)
- Verlaufstyp: Linear
- Verlaufsrichtung: 180deg
- Startposition: 0%
- Endposition: 72%
Registerkarte „Design“
Das erste, was Sie auf der Registerkarte Design tun müssen, ist die Farbe des Teilers in '#000000' zu ändern.
Verwenden Sie in der Unterkategorie Stile derselben Registerkarte 'Solid' als Trennstil und 'Oben' als Trennposition.
Scrollen Sie weiter nach unten und nehmen Sie die folgenden Änderungen vor, die für die Unterkategorie Größenanpassung gelten:
- Teilergewicht: 2
- Höhe: 20px
- Breite: 70%
- Modulausrichtung: Mitte
Verwenden Sie schließlich die folgenden Optionseinstellungen für die Unterkategorie Animation:
- Animationsstil: Bounce
- Animationswiederholung: Einmal
- Animationsrichtung: Zentrum
- Animationsdauer: 2000 ms
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Ändern Sie die erste Verlaufsfarbe des Verlaufshintergrunds in '#0c71c3'.
Registerkarte „Design“
Fügen Sie in der Unterkategorie Animation '350ms' zur Option Animationsverzögerung hinzu.
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Nehmen Sie die gleiche Änderung am dritten Teiler vor, verwenden Sie jedoch stattdessen die Farbe '#8300e9'.
Registerkarte „Design“
Und schließlich fügen Sie eine Animationsverzögerung von '700 ms' hinzu.
3. Die Gradient-Serie
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Verwenden Sie für den ersten Teiler die folgenden Verlaufshintergrundeinstellungen:
- Erste Farbe: #0970a0
- Zweite Farbe: rgba(255,255,255,0)
- Verlaufstyp: Linear
- Verlaufsrichtung: 119deg
- Startposition: 0%
- Endposition: 86%
Registerkarte „Design“
Wählen Sie auf der Registerkarte "Design" "#FFFFFF" als Farbe Ihres Teilers.
Nehmen Sie als Nächstes die folgenden Änderungen an der Unterkategorie Stile vor:
- Teiler-Stil: Solid
- Teilerposition: Vertikal zentriert
Stellen Sie, während Sie sich immer noch auf derselben Registerkarte befinden, sicher, dass die folgenden Einstellungen für die Unterkategorie Größenanpassung gelten:
- Teilergewicht: 3
- Höhe: 10px
- Breite: 25%
- Modulausrichtung: Links
Fügen Sie auch in der Unterkategorie "Abstand" '15px' zum unteren Abstand hinzu.
Und zuletzt verwenden Sie die folgenden Einstellungen für die Unterkategorie Animation:
- Animationsstil: Folie
- Animationswiederholung: Einmal
- Animationsrichtung: Links
- Animationsdauer: 2000 ms
- Animationsintensität: 100%
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Die Verlaufshintergrundeinstellungen für den zweiten Teiler unterscheiden sich geringfügig:
- Erste Farbe: #0970a0
- Zweite Farbe: rgba(255,255,255,0)
- Verlaufstyp: Radial
- Radiale Richtung: Mitte
- Startposition: 0%
- Endposition: 100%
Registerkarte „Design“
Ändern Sie in der Unterkategorie Dimensionierung die Modulausrichtung auf Mitte.
Zentralisieren Sie schließlich auch die Animationsrichtung.
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Der dritte Teiler enthält auch einen weiteren Verlaufshintergrund:
- Erste Farbe: rgba(255,255,255,0)
- Zweite Farbe: #0970a0
- Verlaufstyp: Linear
- Verlaufsrichtung: 119deg
- Startposition: 14%
- Endposition: 100%
Registerkarte „Design“
Wir werden die gleichen Änderungen vornehmen, die wir am zweiten Teiler vorgenommen haben, aber rechts statt mittig verwenden.
4. Der rollende Kreis
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Beginnen Sie damit, dass die folgenden Hintergrundeinstellungen für den Farbverlauf gelten:
- Erste Farbe: #e09900
- Zweite Farbe: rgba(255,255,255,0)
- Verlaufstyp: Radial
- Radiale Richtung: Mitte
- Startposition: 20%
- Endposition: 21%
Registerkarte „Design“
Das erste, was Sie auf der Registerkarte Design tun müssen, ist die Farbe '#000000' für den Teiler zu verwenden.
Wählen Sie dann „Solid“ als Ihren Teilerstil und „Vertikal zentriert“ als Teilerposition.
Nehmen Sie im weiteren Verlauf die folgenden Änderungen an der Unterkategorie Dimensionierung vor:
- Teilergewicht: 2
- Höhe: 50px
- Breite: 40%
- Modulausrichtung: Mitte
Schließlich benötigt die Unterkategorie Animation die folgenden Einstellungen:
- Animationsstil: Rolle
- Animationswiederholung: Einmal
- Animationsrichtung: Zentrum
- Animationsdauer: 1500 ms
- Animationsverzögerung: 850ms
- Animationsintensität: 60%
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Ändern Sie die erste Verlaufsfarbe in '#0c71c3'.
Registerkarte „Design“
Und ändern Sie die Animationsverzögerung auf '0ms'.
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Für den letzten Teiler müssen Sie nur die erste Hintergrundfarbe des Farbverlaufs in '#8300e9' ändern.
5. Die Halterung
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Verwenden Sie die folgenden Verlaufshintergrundeinstellungen:
- Erste Farbe: #e0d1b1
- Zweite Farbe: #e09900
- Verlaufstyp: Radial
- Radiale Richtung: Mitte
- Startposition: 36%
- Endposition: 100%
Registerkarte „Design“
Stellen Sie sicher, dass die Farbe des Teilers mit der Hintergrundfarbe des Abschnitts übereinstimmt. In diesem Fall ist das '#f4f4f4'.
Scrollen Sie in der Design-Registerkarte nach unten und verwenden Sie „Gestrichelt“ als Trennlinienstil und „Oben“ als Trennlinienposition.
Nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Dimensionierung gelten:
- Teilergewicht: 100
- Höhe: 18 Pixel
- Breite: 60%
- Modulausrichtung: Mitte
Sie müssen auch '15px' zum oberen, rechten und linken Abstand hinzufügen.
Verwenden Sie schließlich die folgenden Animationseinstellungen:
- Animationsstil: Zoom
- Animationswiederholung: Einmal
- Animationsrichtung: Zentrum
- Animationsdauer: 1000ms
- Animationsintensität: 80%
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Ändern Sie die Farben des Verlaufshintergrunds in '#87acc1' und '#0c71c3'.
Registerkarte „Design“
Ändern Sie als Nächstes die Animationsdauer auf '1300ms' und die Animationsverzögerung auf '250ms'.
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Die im dritten Teiler verwendeten Verlaufsfarben sind '#c9a4e8' und '#8300e9'.
Registerkarte „Design“
Ändern Sie die Animationsdauer auf '1300ms' und die Animationsverzögerung auf '500ms'.
6. Die Doppellinien
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Wenden Sie die folgenden Verlaufshintergrundeinstellungen an:
- Erste Farbe: #e09900
- Zweite Farbe: rgba(255,255,255,0)
- Verlaufstyp: Linear
- Verlaufsrichtung: 179deg
- Startposition: 0%
- Endposition: 45%
Registerkarte „Design“
Wählen Sie '#000000' als Teilerfarbe.
Verwenden Sie in der Unterkategorie Stile 'Double' als Trennstil und 'Vertikal zentriert' als Trennposition.
Verwenden Sie im weiteren Verlauf die folgenden Einstellungen für die Unterkategorie Dimensionierung:
- Teilergewicht: 5
- Höhe: 25px
- Breite: 35%
- Modulausrichtung: Links
Verwenden Sie schließlich die folgenden Animationseinstellungen:
- Animationsstil: Rolle
- Animationswiederholung: Einmal
- Animationsrichtung: Links
- Animationsdauer: 1000ms
- Animationsintensität: 50%
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Ändern Sie die erste Verlaufsfarbe in '#0c71c3'.
Registerkarte „Design“
Verwenden Sie als Nächstes eine andere Animation für den zweiten Teiler:
- Animationsstil: Ausblenden
- Animationswiederholung: Einmal
- Animationsdauer: 1400 ms
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Verwenden Sie für den dritten Teiler '#8300e9' als erste Verlaufshintergrundfarbe.
Registerkarte „Design“
Das einzige, was Sie auf der Registerkarte Design ändern müssen, ist die Animationsrichtung, die in diesem Fall "Rechts" ist.
7. Die Brücke
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Beginnen Sie damit, dem Hintergrund '#8300e9' zuzuweisen.
Registerkarte „Design“
Fahren Sie fort, indem Sie die Hintergrundfarbe des Abschnitts als Teilerfarbe verwenden, in diesem Fall '#f4f4f4'.
Als nächstes verwenden Sie 'Gepunktet' als Ihren Teilerstil und 'Oben' als Ihre Teilerposition.
Verwenden Sie in der Unterkategorie Dimensionierung die folgenden Einstellungen:
- Teilergewicht: 15
- Höhe: 7px
- Breite: 70%
- Modulausrichtung: Links
Wir benötigen auch eine benutzerdefinierte Polsterung:
- Obere Polsterung: 7px
- Rechte Polsterung: -7px
- Linke Polsterung: -7px
Die Animation, die wir verwenden werden, hat die folgenden Einstellungen:
- Animationsstil: Folie
- Animationswiederholung: Einmal
- Animationsrichtung: Links
- Animationsdauer: 800 ms
- Animationsverzögerung: 400ms
- Animationsintensität: 30%
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Ändern Sie für den zweiten Teiler den Hintergrund in '#0c71c3'.
Registerkarte „Design“
Wir werden auch eine andere Animation verwenden:
- Animationsstil: Zoom
- Animationswiederholung: Einmal
- Animationsrichtung: Zentrum
- Animationsdauer: 800 ms
- Animationsintensität: 30%
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Der dritte Teiler verwendet '#8300e9' als Hintergrundfarbe.
Registerkarte „Design“
Die Animation für den dritten Teiler ist ebenfalls etwas anders:
- Animationsstil: Zoom
- Animationswiederholung: Einmal
- Animationsrichtung: Rechts
- Animationsdauer: 800 ms
- Animationsverzögerung: 400ms
- Animationsintensität: 30%
8. Die Eleganz
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Beginnen Sie, indem Sie dem ersten Teiler den folgenden Verlaufshintergrund hinzufügen:
- Erste Farbe: #000000
- Zweite Farbe: rgba(255,255,255,0)
- Verlaufstyp: Radial
- Radiale Richtung: Mitte
- Startposition: 20%
- Endposition: 20%
Registerkarte „Design“
Verwenden Sie die Farbe '#8300e9' für Ihren Teiler.
Verwenden Sie als Nächstes 'gepunktet' als Trennlinienstil und 'Vertikal zentriert' als Trennlinienposition.
Wir benötigen auch eine obere Auffüllung von '40px'.
Und eine Animation mit folgenden Einstellungen:
- Animationsstil: Bounce
- Animationswiederholung: Einmal
- Animationsrichtung: Unten
- Animationsdauer: 1000ms
Einstellungen des zweiten Teilermoduls
Registerkarte „Design“
Für den zweiten Teiler ändern Sie die Farbe in '#0c71c3'.
Auch die Animation benötigt einige Änderungen:
- Animationsrichtung: Zentrum
- Animationsdauer 1500 ms
Einstellungen des dritten Teilermoduls
Registerkarte „Design“
Der dritte Teiler verwendet '#8300e9' als Farbe.
Und wird 'Up' als Animationsrichtung haben.
9. Die Subtilität
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Wählen Sie die folgenden Einstellungen für den Verlaufshintergrund:
- Erste Farbe: #8300e9
- Zweite Farbe: rgba(255,255,255,0)
- Verlaufstyp: Radial
- Radiale Richtung: Mitte
- Startposition: 0%
- Endposition: 38%
Registerkarte „Design“
In der Unterkategorie Größenanpassung benötigen Sie die folgenden Einstellungen:
- Teilergewicht: 0
- Höhe: 4px
- Breite: 100%
Schließlich hat die Animation, die wir verwenden werden, die folgenden Einstellungen:
- Animationsstil: Bounce
- Animationswiederholung: Einmal
- Animationsrichtung: Nach oben
- Animationsdauer 1800 ms
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Ändern Sie für den zweiten Teiler die Hintergrundfarbe des ersten Verlaufs in '#0c71c3'.
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Nehmen Sie die gleiche Änderung am dritten Teiler vor, verwenden Sie jedoch stattdessen die violette Farbe '#8300e9'.
10. Das Leuchten
Einstellungen des ersten Teilermoduls
Registerkarte Inhalt
Verwenden Sie die folgenden Verlaufshintergrundeinstellungen für die letzte Reihe von Trennwänden:
- Erste Farbe:
- Zweite Farbe:
- Verlaufstyp: Radial
- Radiale Richtung: Mitte
- Startposition: 0%
- Endposition: 38%
Registerkarte „Design“
Wählen Sie auch die Hintergrundfarbe des Abschnitts als Teilerfarbe aus, in diesem Fall ist es '#f4f4f4'.
Als nächstes verwenden Sie 'Gestrichelt' als Ihren Teilerstil und 'Vertikal zentriert' als Teilerposition.
Verwenden Sie in der Unterkategorie Dimensionierung die folgenden Einstellungen:
- Teilergewicht: 70
- Höhe: 20px
- Breite: 100%
Zuletzt verwenden wir eine Animation mit den folgenden Optionen:
- Animationsstil: Ausblenden
- Animationswiederholung: Einmal
- Animationsdauer: 1800 ms
- Animationsverzögerung: 800 ms
Einstellungen des zweiten Teilermoduls
Registerkarte Inhalt
Ändern Sie für den zweiten Teiler die zweite Hintergrundfarbe des Farbverlaufs in '#0c71c3'.
Registerkarte „Design“
Und fügen Sie eine Animationsverzögerung von '250ms' hinzu.
Einstellungen des dritten Teilermoduls
Registerkarte Inhalt
Ändern Sie für den letzten Teiler die zweite Hintergrundfarbe des Farbverlaufs in '#8300e9'.
Registerkarte „Design“
Und zum Schluss setzen Sie die Animationsverzögerung auf '0ms'.
Abschließende Gedanken
Mit den neuen Divi-Optionen sind viele neue kreative Dinge mit den integrierten Einstellungen jedes Moduls möglich. In diesem Beitrag haben wir Ihnen speziell gezeigt, wie diese Optionen Ihnen helfen können, Ihr Design durch das Divider-Modul zu verbessern. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!
Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!
Ausgewähltes Bild von VikiVector / shutterstock.com