Divi , das beliebte WordPress-Theme, ist für seine vielseitigen Module bekannt, mit denen Website-Designer und -Entwickler mühelos atemberaubende Layouts erstellen können. Unter seinem beeindruckenden Arsenal an Modulen sticht das Divi Divider-Modul als einzigartiges Tool hervor, mit dem Benutzer faszinierende Trenner erstellen können. In diesem Blogbeitrag tauchen wir in die faszinierende Welt der Farbverlaufsteiler ein und erkunden, wie Sie das Divi Divider-Modul nutzen können, um Ihre Designs zu verbessern. Wir werden uns genauer ansehen, wie Farbverlaufsteiler funktionieren, und Ihnen inspirierende Beispiele liefern, um Ihre Kreativität zu entfachen.
Vorschau
Hier ist eine Vorschau, wie unser Verlaufsdesign am Ende aussehen wird.
So erstellen Sie Farbverlaufsteiler mit dem Teilermodul von Divi
Es gibt mehrere Methoden zum Erstellen eines Trennzeichens mit dem Trennzeichenmodul von Divi. Standardmäßig zeigt das Modul eine Linie als Trennzeichen an. Es ist jedoch möglich, diese Linie zu deaktivieren und die Hintergrundeinstellungen des Moduls zu verwenden, um ein Trennzeichen zu erstellen, das mit verschiedenen Hintergrundoptionen wie Farben, Farbverläufen, Bildern und mehr angepasst werden kann. Anstatt das eigentliche Trennzeichen anzuzeigen, konzentrieren wir uns auf die Gestaltung des Containers des Trennzeichens, um ein einzigartig gestaltetes Trennzeichen zu erstellen.
Trenner ausblenden
Das Verfahren ist einfach. Fügen Sie Ihrem Layout zunächst ein Trennmodul hinzu und verbergen Sie dann unter der Registerkarte „Inhalt“ den Trenner.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangen
Teiler-Hintergrund
Wählen Sie als Nächstes den gewünschten Hintergrundtyp aus dem Menü „Hintergrundeinstellungen“ auf der Registerkarte „Inhalt“. In diesem Beitrag konzentrieren wir uns auf die Optionen für den Hintergrundverlauf.
Größe und Abstand hinzufügen
Um einen stilvollen Teiler in nahezu jeder Größe oder Form zu erstellen, verwenden Sie die Optionen „Größe und Abstand“ auf der Registerkarte „Design“, um die Höhe und Breite des Teilercontainers anzupassen. Um die gewünschte Größe zu erzeugen, verwenden Sie Breite und Höhe, maximale Breite und maximale Höhe, Modulausrichtung und obere und untere Polsterung.
Randradius hinzufügen
Um die Form weiter zu gestalten, fügen Sie Randoptionen wie den Randradius hinzu. Ecken können gemeinsam oder einzeln angepasst werden, um faszinierende Formen zu erzeugen. Für ein spezielles Design können Sie zusätzlich Randbreite, Stile usw. hinzufügen.
Farbverlaufsteiler
Für unseren ersten Farbverlaufsteiler verwenden wir die Landingpage aus dem kostenlosen Home Baker Layout Pack, das in Divi enthalten ist. Die Grafik dieses Layout Packs weist braune Farbverläufe und kräftige, dunkle Umrisse auf. Wir werden dies mit unserem Farbverlauf nachbilden, indem wir die Farbpalette des Layout Packs verwenden. Für unsere erste Illustration verwenden wir das Teilermodul, das bereits im Hero-Bereich vorhanden ist. Dieses ist unkompliziert, hat aber eine große visuelle Wirkung. Hier ist das Layout, bevor wir das Teilermodul als Referenz hinzugefügt haben.
Sichtweite
Wählen Sie unter den Sichtbarkeitsoptionen für das Trennermodul die Option „Nein“ für „Trenner anzeigen“.
- Trenner anzeigen: Nein
Gradient
Wählen Sie die Registerkarte „Hintergrundverlauf“, indem Sie nach unten zu „Hintergrund“ scrollen. Wir werden hierfür fünf Verlaufsstopps hinzufügen. Für die anderen Verlaufsparameter werden die Standardwerte verwendet. Die Parameter für jeden Verlaufsstopp sind unten aufgeführt.
- Erster Farbverlaufsstopp: 0px, #dcc087
- Zweiter Verlaufsstopp: 16px, #e6b060
- Dritter Verlaufsstopp: 22px, #f19d33
- Vierter Verlaufsstopp: 31px, #f49826
- Fünfter Verlaufsstopp: 48px, #3b261e
Als Gradienteneinheit sollten Pixel verwendet werden. Die gewünschten Farbtöne sind nun verfügbar. Jetzt muss nur noch die Größe optimiert werden.
- Gradienteneinheit: Pixel
Größen
Wählen Sie anschließend die Registerkarte Design. Geben Sie unter Größe 100 % für die Breite ein. Bei allen drei Gerätegrößen sollte die Höhe auf 40 Pixel eingestellt sein. Der modulare Verschluss speichert Ihre Einstellungen.
- Breite: 100 %
- Höhe: 40px
Letzte Vorschau
Hier haben wir nun eine letzte Vorschau unseres Verlaufsdesigns in Aktion.
Abschließende Gedanken
Damit schließen wir unsere Diskussion über die Verwendung des Divider-Moduls von Divi zum Erstellen von Farbverlaufsteilern ab. Um benutzerdefinierte Farbverlaufsteiler zu erstellen, verwenden Sie die Farbverlaufsoption im Divider-Modul. Wir können Farbverlaufsteiler in verschiedenen Größen und Formen erstellen, indem wir die Optionen für Randecken, Abstände und Größen verwenden. Wir können mit nur wenigen grundlegenden Entscheidungen unverwechselbare Farbverlaufsteiler entwerfen, die sich von der Masse abheben.
