Kreative Möglichkeiten, Rotations-Scroll-Effekte mit kreisförmigen Elementen in Divi . zu kombinieren

Wir sind immer auf der Suche nach neuen und kreativen Möglichkeiten, um vorgestellte Artikel (wie Produkte und Dienstleistungen) bei der Gestaltung einer neuen Website zu präsentieren. Und mit Divis Scroll-Effekten wurden neue Türen geöffnet, um Ihre Klappenlayouts auf eine ganz neue Ebene zu heben. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Klappmodul-Layout mit rotierenden kreisförmigen Elementen beim Scrollen erstellen. Dieses einzigartige Layout bietet eine clevere Verwendung von Farbkombinationen mit mehreren kreisförmigen Elementen, die sich hinter Klappentexten drehen, wenn der Benutzer auf der Seite nach unten scrollt. Zweifellos hätte dieses Design viele Anwendungen für fast jeden Inhalt.

Genießen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Klappenlayout mit rotierenden kreisförmigen Elementen, die wir in diesem Tutorial erstellen.

Laden Sie das Blurb-Layout für rotierende kreisförmige Elemente KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout in Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen des Blurb-Layouts mit rotierenden kreisförmigen Elementen beim Scrollen in Divi

Hinzufügen der Zeile

Fügen Sie dem Abschnitt zunächst eine dreispaltige Zeile hinzu.

Temporärer Abschnittsrand

Als nächstes fügen Sie dem Abschnitt einen oberen und unteren Rand hinzu, um etwas Platz zum Scrollen zu schaffen.

Erstellen eines rotierenden kreisförmigen Elements Blurb-Design #1

Für unser erstes Design werden wir ein Klappenmodul mit drei bunten Trennmodulen erstellen, die hinter dem Klappentext sitzen und sich drehen, während der Benutzer scrollt. Dieses erste Design dient als gute Vorlage für die nächsten beiden Designs, die wir zu den anderen Spalten hinzufügen werden.

So bauen Sie es.

Blurb-Modul hinzufügen

Fügen Sie in Spalte 1 ein Klappenmodul hinzu.

Klappentext 1 Inhalt

Öffnen Sie die Einstellungen für das Klappenmodul und aktualisieren Sie den Inhalt des Hauptteils wie folgt:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Fügen Sie dann ein Symbol Ihrer Wahl hinzu, um das Standardbild zu ersetzen.

Blurb 1 Designeinstellungen

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Hintergrundfarbe: #121212
• Symbolfarbe: #41828d
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 75px
• Textausrichtung: Mitte
• Titelschriftart: Oswald
• Titelschriftart: TT
• Titeltextfarbe: #ffffff
• Titeltextgröße: 22px
• Textkörperfarbe: #ffffff

Um den Klappentext kreisförmig zu gestalten, aktualisieren Sie die Größe und die abgerundeten Ecken wie folgt:

• Breite: 300px
• Maximale Breite: 300px
• Padding: 25px oben, 25px unten, 25px links, 25px rechts
• Abgerundete Ecken: 50%

Die Kombination aus gleicher Breite und Höhe in Kombination mit den abgerundeten Ecken macht den Klappentext rund.

Aktualisieren Sie dann die Position mit einem Offset.

• Position: Relativ
• Vertikaler Versatz: 25px
• Horizontaler Versatz: 25px
• Z-Index: 1

Dadurch wird der Klappentext innerhalb der Trennlinien zentriert, die wir später hinzufügen werden. Der Z-Index stellt sicher, dass der Klappentext auch über den anderen Teilern liegt.

Als nächstes fügen Sie dem Klappentext einen rotierenden Scroll-Effekt hinzu.

Auf der Registerkarte Rotationseffekte…

• Drehen aktivieren: JA
• Startrotation: 45 Grad (bei 0 % Ansichtsfenster)
• Mittlere Drehung: 0deg (bei 40%-60% Ansichtsfenster)
• Enddrehung: -45deg (bei 100 % Ansichtsfenster)

Dadurch wird der Klappentext leicht in eine aufrechte Position zur Mitte der Seite gedreht und dann um weitere 45 Grad gedreht, wenn er den oberen Rand der Seite verlässt.

Kreisteiler Nr. 1 hinzufügen

Jetzt werden wir unser erstes von drei Teilermodulen hinzufügen, aus denen unser rotierendes kreisförmiges Elementdesign bestehen wird.

Fügen Sie ein Trennmodul unter dem Klappenmodul hinzu.

Teiler 1 Einstellungen

Öffnen Sie die Teilereinstellungen und aktualisieren Sie Folgendes:

• Teiler anzeigen: NEIN
• Hintergrund Farbverlauf links: #311847
• Hintergrund mit Farbverlauf rechts: #ec4067
• Startposition: 50%
• Endposition: 50%

Und jetzt machen wir es zirkulär wie folgt:

• Breite: 350px
• Maximale Breite: 350px
• Höhe: 350px
• Abgerundete Ecken: 50%

Beachten Sie, dass der Teiler etwas größer ist als das Klappenmodul, sodass wir den äußeren Rand des Teilers sehen können, sobald er hinter dem Klappentext positioniert ist.
Jetzt aktualisieren wir einfach die Position des Teilers auf absolut und er sitzt perfekt hinter dem Klappentext.

• Position: Absolut

Wenn sich Ihr Teiler über dem Klappentext befindet, stellen Sie sicher, dass Sie den Klappentext z-Index auf 1 aktualisiert haben.

Als nächstes fügen Sie dem Teiler die folgenden Scroll-Effekte hinzu:

Unter der Registerkarte Rotationseffekt…

• Drehen aktivieren: JA
• Startrotation: 0deg (bei 0% Ansichtsfenster)
• Mittlere Drehung: 45 Grad (bei 50% Ansichtsfenster)
• Enddrehung: -180deg (bei 100 % Ansichtsfenster)

Kreisteiler 2 . hinzufügen

Um den zweiten kreisförmigen Teiler zu erstellen, öffnen Sie die Ebenenbox, indem Sie im Einstellungsmenü auf das Ebenensymbol klicken. Dann duplizieren Sie das Teilermodul, um ein neues zu erstellen.

Trenner 2 Designeinstellungen aktualisieren

Für diesen Teiler geben wir ihm wie folgt eine andere Verlaufshintergrundfarbe:

• Hintergrundfarbe links: rgba(160,26,125,0.5)
• Hintergrundfarbe rechts: rgba(255,255,255,0)

HINWEIS: Es ist wichtig, hier halbtransparente Farben zu verwenden, um den Hintergrund dahinter freizulegen. Dadurch entsteht eine schöne Farbkombination.

Aktualisieren Sie als Nächstes die Bildlaufeffekte wie folgt:

Unter der Registerkarte Rotationseffekte…

• Mittlere Drehung: 90 Grad (bei 50% Ansichtsfenster)
• Enddrehungg: 180deg (bei 100 % Ansichtsfenster)

Kreisteiler 3 . hinzufügen

Fahren Sie mit dem gleichen Vorgang fort, um den dritten und letzten Teiler zu erstellen, indem Sie Teiler 2 duplizieren.

Trenner 3 Designeinstellungen aktualisieren

Für diesen Teiler geben wir ihm auch eine andere Verlaufshintergrundfarbe wie folgt:

• Hintergrundfarbe links: rgba(255,255,255,0)
• Hintergrundfarbe rechts: rgba(41,196,169,0.5)

Aktualisieren Sie dann die Scroll-Effekte wie folgt:

Unter der Registerkarte Rotationseffekte…

• Mittlere Drehung: 180 Grad (bei 50% Ansichtsfenster)
• Enddrehung: 360 Grad (bei 100 % Ansichtsfenster)

Auf der Registerkarte „Skalieren nach oben und unten“…

• Skalierung nach oben und unten aktivieren: JA
• Startskala: 110 % (bei 0 % Ansichtsfenster)
• Mittlere Skala: 110 % (bei 50 % Ansichtsfenster)
• Endskala: 100 % (bei 100 % Ansichtsfenster)

Erstellen eines rotierenden kreisförmigen Elements Blurb-Design #2

Da wir bereits ein fertiges Design in Spalte 1 haben, starten wir das zweite Design, indem wir die gesamte erste Spalte duplizieren. Damit werden auch die vier Module übernommen. Sie müssen eine der leeren Spalten löschen, um das dreispaltige Layout beizubehalten.

Aktualisieren Sie das Blurb-Moduldesign

Für dieses Design verwenden wir einen weißen Klappenhintergrund, damit wir den Bildschirmfiltereffekt verwenden können, um die sich bewegenden Farben hinter dem Klappentext anzuzeigen. Wir werden auch einen Skalierungs-Scroll-Effekt hinzufügen, um den hinteren Teiler zu vergrößern.

So geht's.

Öffnen Sie die Einstellungen des Klappenmoduls in Spalte 2 und aktualisieren Sie Folgendes:

• Hintergrund: #ffffff

Ändern Sie dann die Titel- und Textkörperfarbe in Schwarz.

• Titel Textfarbe: #000000
• Textkörperfarbe: #000000

Fügen Sie dann den folgenden Mischmodus hinzu:

• Mischmodus: Bildschirm

Aktualisieren Sie die Scroll-Effekte von Divider 1

Öffnen Sie die Einstellungen des Teilermoduls direkt unter dem Klappenmodul in Spalte 2 und aktualisieren Sie die folgenden Scroll-Effekte:
Auf der Registerkarte Effekte nach oben und unten skalieren…

• Skalierung nach oben und unten aktivieren: JA
• Startskala: 100 % (bei 0 % Ansichtsfenster)
• Mittlere Skala: 120 % (bei 40 %-60 % Ansichtsfenster)
• Endskala: 100 % (bei 100 % Ansichtsfenster)

Dadurch wird der Teiler in der Mitte um 20 % seiner ursprünglichen Größe vergrößert, wenn der Benutzer auf der Seite nach unten scrollt.

Erstellen eines rotierenden kreisförmigen Elements Blurb-Design #3

Für dieses letzte Design erstellen wir einen rotierenden kreisförmigen Klappentext ähnlich dem in Spalte 1. Wir fügen jedoch einen anderen Mischmodus hinzu, um Farben durch den weißen Text auf einem dunklen Hintergrund zu zeigen.

So geht's.

Spalte duplizieren 1

Da wir bereits ein fertiges Design in Spalte 1 haben, starten wir das dritte Design, indem wir die gesamte erste Spalte duplizieren und mit dem Ebenenfeld in die dritte Spaltenplatzierung verschieben. Löschen Sie dann die zusätzliche leere Spalte.

Einstellungen des Blurb-Moduls aktualisieren

Fügen wir zunächst den Mischmodus Multiplizieren hinzu, um die Teilerfarben wie folgt durch den weißen Text anzuzeigen:

• Mischmodus: mehrere

Aktualisieren Sie dann auch die Symbolfarbe auf Weiß.

• Symbolfarbe: #ffffff

Aktualisieren Sie die Einstellungen von Divider 3

Nehmen wir nun den Skalierungs-Scroll-Effekt am letzten (dritten) Teiler in Spalte 3 heraus.
Öffnen Sie die Einstellungen für den dritten Teiler und aktualisieren Sie Folgendes:

Auf der Registerkarte Effekte nach oben und unten skalieren…

• Skalierung nach oben und unten aktivieren: NEIN

Position von Spalte 2 auf dem Handy anpassen

Im Moment werden die drei Klappendesigns auf Tablet- und Telefondisplays links am Bildschirm ausgerichtet. Um das Design auszugleichen, können wir die mittlere Spalte mit der Transformationsskala einfach nach rechts verschieben.

Öffnen Sie die Einstellungen für Spalte 2 und aktualisieren Sie Folgendes:

Transform Scale X-Achse: 40 % (auf Tablet), 15 % (auf Telefon)

Endergebnis

Das ist es! Schauen wir uns das Endergebnis auf einer Live-Seite an.

Hier ist das Design auf dem Desktop, während der Benutzer durch das Layout scrollt.

Hier ist das Design auf dem Tablet.

Und hier ist es am Telefon.

Abschließende Gedanken

Eine der besten Eigenschaften dieses Layouts ist, wie kreativ Sie mit den Scroll-Effekten und Farbkombinationen werden können, die mit den integrierten Optionen von Divi leicht angepasst werden können. Und sobald Sie die Einbindung von Filtereffekten besser im Griff haben, fangen die Dinge wirklich an zu knallen. Hoffentlich gibt Ihnen dies etwas Inspiration für das nächste Klappenlayout, das Sie erstellen.

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

Danke schön!