So erstellen Sie schöne Schnittübergänge mit den neuen Designfunktionen von Divi

In diesem Divi-Tutorial zeigen wir Ihnen, wie Sie mit nichts anderem als den integrierten Divi-Optionen schöne Schnittübergänge erstellen.

Abschnitte sind die Grundlage für alle Inhalte, die Sie auf Ihrer Website teilen. Jeder Abschnitt ist ein Kapitel und der Übergang von einem Abschnitt zum anderen ist Teil des Storytelling-Prozesses. Wenn Sie diesen Übergang so reibungslos wie möglich gestalten, wird die Botschaft, die Sie zu artikulieren versuchen, hervorgehoben. Um Ihnen dabei zu helfen, zeigen wir Ihnen, wie Sie schöne Abschnittsübergänge für Ihr nächstes Website-Projekt erstellen können.

Vorgeschmack

Bevor wir in die verschiedenen Abschnittsübergänge einzeln eintauchen, werfen wir einen Blick darauf, was Sie erwartet:

So erstellen Sie schöne Schnittübergänge mit den neuen Designfunktionen von Divi

Abonnieren Sie unseren Youtube-Kanal

Abschnitte neu erstellen

Wir beginnen damit, die beiden Abschnitte neu zu erstellen, die wir in allen Beispielen verwenden werden. In diesen beiden Abschnitten haben wir das erforderliche Padding verwendet, um das Beste aus den Übergängen herauszuholen. Wenn Sie jedoch Abschnitte mit einer anderen Höhe verwenden, müssen Sie möglicherweise die verwendeten Farbverlaufshintergründe leicht anpassen, damit sie perfekt zu den Abschnitten passen.

Ersten Abschnitt erstellen

Beginnen Sie damit, den ersten Standardabschnitt zu erstellen und eine Zeile mit voller Breite auszuwählen.

Abschnittseinstellungen

Wir benötigen eine obere und untere Auffüllung von '300px', die Sie in der Unterkategorie "Abstand" der Registerkarte "Design" hinzufügen können.

Erstes Textmodul

Dann fügen wir unserer Zeile mit voller Breite ein Textmodul hinzu. Geben Sie den Text ein, der angezeigt werden soll, und gehen Sie zur Registerkarte Design. Verwenden Sie auf der Registerkarte Design die folgenden Einstellungen für die Unterkategorie Text:

• Textschriftart: Comfortaa
• Schriftgröße des Textes: 50
• Textzeilenhöhe: 1.7em
• Textausrichtung: Mitte

Zweites Textmodul

Machen Sie dasselbe für das zweite Textmodul, verwenden Sie jedoch stattdessen die folgenden Einstellungen:

• Textschriftart: Comfortaa
• Schriftgröße des Textes: 16
• Textzeilenhöhe: 1.7em
• Textausrichtung: Mitte

Tastenmodul

Schließlich werden wir auch ein Button-Modul hinzufügen. Beginnen Sie mit der Auswahl der mittleren Ausrichtung auf der Registerkarte Design.

Öffnen Sie dann die Unterkategorie Schaltfläche, aktivieren Sie die Option "Benutzerdefinierte Stile für Schaltfläche verwenden" und wählen Sie "20" als Schaltflächentextgröße.

Verwenden Sie, während Sie sich noch in der Unterkategorie Schaltfläche befinden, den folgenden Verlaufshintergrund für die Schaltfläche:

• Erste Farbe: #2b87da
• Zweite Farbe: #29c4a9
• Verlaufstyp: Linear
• Verlaufsrichtung: 162deg
• Startposition: 0%
• Endposition: 100%

Zweite Sektion erstellen

Fügen Sie einen weiteren Standardabschnitt hinzu, wählen Sie jedoch stattdessen eine dreispaltige Zeile.

Abschnittseinstellungen

Der zweite Abschnitt verwendet ebenfalls eine '300px'-Auffüllung für den oberen und unteren Rand.

Blurb-Modul

Als Nächstes fügen wir der ersten Spalte der Zeile ein Blurb-Modul hinzu. Wenn Sie sich für den Text entschieden haben, der angezeigt werden soll, scrollen Sie auf der Registerkarte Inhalt nach unten, aktivieren Sie die Option "Symbol verwenden" und wählen Sie ein Symbol aus.

Wenn Sie dies getan haben, gehen Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen für die Symbolunterkategorie:

• Symbolfarbe: #515151
• Bild-/Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 55px

Stellen Sie dann sicher, dass die folgenden Einstellungen für die Unterkategorie Kopfzeilentext gelten:

• Header-Schriftart: Comfortaa
• Ausrichtung des Kopfzeilentextes: Mitte
• Header-Schriftgröße: 18

Und zu guter Letzt sind dies die Einstellungen für die Unterkategorie Textkörper:

• Körperschriftart: Comfortaa
• Ausrichtung des Textkörpers: Mitte
• Schriftgröße des Körpers: 14
• Körperlinienhöhe: 1.7em

Blurb-Modul klonen

Nachdem Sie das Blurb-Modul erstellt haben, klonen Sie es zweimal und fügen Sie es in die anderen beiden Spalten der Zeile ein.

1. Die ganze Diagonale

Nachdem wir die Abschnitte erstellt haben, ist es an der Zeit, die Abschnittsübergänge hinzuzufügen. Im ersten Beispiel zeigen wir Ihnen, wie Sie aus einfachen diagonalen Linien bestehen.

Verlaufshintergrundeinstellungen des ersten Abschnitts

Öffnen Sie die Einstellungen des ersten Abschnitts und fügen Sie den folgenden Verlaufshintergrund hinzu:

• Erste Farbe: #dddddd
• Zweite Farbe: #f7f7f7
• Verlaufstyp: Linear
• Verlaufsrichtung: 183deg
• Startposition: 85%
• Endposition: 70,05 %

Verlaufshintergrundeinstellungen des zweiten Abschnitts

Der zweite Abschnitt benötigt stattdessen die folgenden Verlaufshintergrundeinstellungen:

• Erste Farbe: #f7f7f7
• Zweite Farbe: #dddddd
• Verlaufstyp: Linear
• Verlaufsrichtung: 183deg
• Startposition: 85%
• Endposition: 69,05%

Entfernen Sie die obere Polsterung des zweiten Abschnitts

Das letzte, was Sie für dieses Beispiel tun müssen, ist, die obere Polsterung des zweiten Abschnitts zu entfernen.

2. Triff mich auf halbem Weg

Das nächste Beispiel, das wir teilen möchten, ist ein sehr elegantes Beispiel, bei dem zwei entgegengesetzte Farbverlaufshintergründe verwendet werden. Durch die Verwendung dieses Effekts fühlen sich die Abschnitte an, als würden sie aufeinander folgen.

Verlaufshintergrundeinstellungen des ersten Abschnitts

Für den ersten Abschnitt benötigen wir die folgenden Verlaufshintergrundeinstellungen:

• Erste Farbe: rgba(255,255,255,0)
• Zweite Farbe: rgba(224,43,32,0.07)
• Verlaufstyp: Radial
• Radiale Richtung: Oben links
• Startposition: 60%
• Endposition: 50%

Verlaufshintergrundeinstellungen des zweiten Abschnitts

Der zweite Abschnitt wird den folgenden Verlaufshintergrund genießen:

• Erste Farbe: rgba(255,255,255,0)
• Zweite Farbe: rgba(224,43,32,0.33)
• Verlaufstyp: Radial
• Radiale Richtung: Unten rechts
• Startposition: 58%
• Endposition: 50%

3. Fusion

Das nächste Beispiel unterscheidet sich ein wenig von den anderen. Es wird ein zusätzlicher Abschnitt zwischen beiden Abschnitten benötigt, um das Ergebnis zu erzielen, das Sie im Bild unten sehen können.

Verlaufshintergrundeinstellungen des ersten Abschnitts

Für Ihren ersten Abschnitt benötigen Sie den folgenden Verlaufshintergrund:

• Erste Farbe: rgba(12,113,195,0,19)
• Zweite Farbe: rgba(255,255,255,0.39)
• Verlaufstyp: Radial
• Radiale Richtung: Unten links
• Startposition: 50%
• Endposition: 50%

Verlaufshintergrundeinstellungen des zweiten Abschnitts

Für den zweiten Abschnitt verwenden wir die folgenden Verlaufshintergrundeinstellungen:

• Erste Farbe: rgba(224,43,32,0.17)
• Zweite Farbe: rgba(255,255,255,0.39)
• Verlaufstyp: Radial
• Radiale Richtung: Oben rechts
• Startposition: 50%
• Endposition: 50%

Fügen Sie dazwischen einen neuen Standardabschnitt hinzu

Nachdem Sie beiden Abschnitten die Farbverlaufshintergründe hinzugefügt haben, ist es an der Zeit, einen Abschnitt direkt dazwischen hinzuzufügen.

Hintergrundfarbe mit Farbverlauf zum neuen Abschnitt hinzufügen

Dieser neue Abschnitt benötigt ebenfalls einen Verlaufshintergrund mit den folgenden Einstellungen:

• Erste Farbe: rgba(12,113,195,0,19)
• Zweite Farbe: rgba(224,43,32,0.17)
• Verlaufstyp: Linear
• Verlaufsrichtung: 92deg
• Startposition: 43%
• Endposition: 62%

4. Invers

Dann haben wir auch einen Abschnittsübergang, der nicht so auffällig ist wie die anderen, aber dennoch Ihren Abschnitten eine subtile Note verleiht.

Verlaufshintergrundeinstellungen des ersten Abschnitts

Der Verlaufshintergrund für den ersten Abschnitt ist der folgende:

• Erste Farbe: #f2f2f2
• Zweite Farbe: rgba(104,153,193,0,58)
• Verlaufstyp: Radial
• Radiale Richtung: Unten rechts
• Startposition: 7,9%
• Endposition: 7,9%

Verlaufshintergrundeinstellungen des zweiten Abschnitts

Und der zweite Farbverlaufshintergrund benötigt die folgenden Farbverlaufshintergrundeinstellungen:

• Erste Farbe: rgba(104,153,193,0,58)
• Zweite Farbe: #f2f2f2
• Verlaufstyp: Radial
• Radiale Richtung: Oben rechts
• Startposition: 8%
• Endposition: 8%

5. Hinweise

Das fünfte Beispiel sieht etwas sauberer und minimalistischer aus als die anderen. Sie können den Übergang auf zwei Arten wahrnehmen, indem Sie entweder die Zeiger oder die Kreise (oder beides) sehen.

Verlaufshintergrundeinstellungen des ersten Abschnitts

Verwenden Sie den folgenden Verlaufshintergrund für den ersten Abschnitt:

• Erste Farbe: #f4f4f4
• Zweite Farbe: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Oben
• Startposition: 88%
• Endposition: 88,05%

Verlaufshintergrundeinstellungen des zweiten Abschnitts

Wenden Sie schließlich die folgenden Verlaufshintergrundeinstellungen auf den zweiten Abschnitt an:

• Erste Farbe: rgba(43,135,218,0)
• Zweite Farbe: rgba(12,113,195,0.43)
• Verlaufstyp: Radial
• Radiale Richtung: Unten
• Startposition: 87%
• Endposition: 87%

6. Rätsel

Das letzte Beispiel gibt den Abschnitten definitiv das Gefühl, dass sie zusammengehören.

Verlaufshintergrundeinstellungen des ersten Abschnitts

Öffnen Sie die Einstellungen des ersten Abschnitts und verwenden Sie den folgenden Verlaufshintergrund:

• Erste Farbe: rgba(160,181.193,0.46)
• Zweite Farbe: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Oben
• Startposition: 56,3%
• Endposition: 43%

Verlaufshintergrundeinstellungen des zweiten Abschnitts

Verwenden Sie dann die folgenden Verlaufshintergrundeinstellungen für den zweiten Abschnitt:

• Erste Farbe: rgba(242,242,242,0)
• Zweite Farbe: rgba(160,181,193,0.46)
• Verlaufstyp: Radial
• Radiale Richtung: Oben
• Startposition: 56%
• Endposition: 40%

Polsterung des ersten Abschnitts ändern

Damit die beiden Abschnitte besser passen, ändern wir die obere und untere Auffüllung des ersten Abschnitts in '150px'.

Entfernen Sie die obere Polsterung des zweiten Abschnitts

Schließlich werden wir auch die obere Polsterung des zweiten Abschnitts entfernen.

Abschließende Gedanken

Abschnittsübergänge helfen, verschiedene Abschnitte und ihren Zweck zu verbinden. In diesem Beitrag haben wir 6 Beispiele geteilt, die Sie neu erstellen können, indem Sie nichts anderes als die integrierten Divi-Optionen verwenden. Wenn Sie Fragen oder Anregungen haben; Hinterlasse gerne einen Kommentar im Kommentarbereich unten!

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 NikVector / shutterstock.com