So erstellen Sie eine Überschrift im Split-Mischmodus mit Divi

Es ist kein Geheimnis, dass Mischmodi Ihnen dabei helfen können, der Ästhetik des Designs, an dem Sie arbeiten, besondere Aufmerksamkeit zu schenken. In der Vergangenheit haben wir Tipps und Tricks zu Mischmodi behandelt, mit denen Sie einzigartige und wunderschöne Designs erstellen können. Da das Spalten-Update jetzt herausgekommen ist, gibt es ein paar zusätzliche Dinge, die Sie mit diesen Mischmodi tun können. Eines dieser Dinge ist das Erstellen einer Überschrift für den geteilten Mischmodus. In diesem Beitrag zeigen wir Ihnen, wie Sie durch die Kombination von Modul- und Spaltenüberblendungsmodi, Spaltenhintergrundfarben und negativen Rändern ein beeindruckendes Ergebnis erzielen können. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Laden Sie den Split-Blend-Modus-Heldenabschnitt KOSTENLOS herunter

Um den kostenlosen Mischmodus-Heldenabschnitt in die Hände zu bekommen, müssen Sie ihn 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!

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Abstand

Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzu und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

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

Box Schatten

Gehen Sie zu den Boxschattenoptionen und fügen Sie einen subtilen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 70px
• Schattenfarbe: rgba(0,0,0,0.07)

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und wenden Sie einen Verlaufshintergrund an. Im nächsten Schritt dieses Beitrags werden wir den Verlaufshintergrund mithilfe eines Mischmodus mit einem Hintergrundbild zusammenführen.

• Farbe 1: #00cbff
• Farbe 2: #bf35ff
• Verlaufsrichtung: 96deg

Hintergrundbild

Fügen Sie der Zeile ein Hintergrundbild hinzu und verwenden Sie es in Kombination mit den folgenden Hintergrundbildeinstellungen:

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Bildschirm

Größe

Gehen Sie als nächstes zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Auffüllungen der Zeile. Dadurch wird sichergestellt, dass die Hintergrundfarbe von Spalte 2, die wir später in diesem Beitrag hinzufügen, den oberen und unteren Rand der Zeilen- und Abschnittscontainer berührt.

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

Anzeige

Um sicherzustellen, dass beide Spalten auf kleineren Bildschirmgrößen nebeneinander angezeigt werden, fügen wir dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzu.

display: flex;

Spalte 2 Einstellungen

Hintergrundfarbe

Sobald Sie die allgemeinen Zeileneinstellungen abgeschlossen haben, öffnen Sie die Einstellungen der zweiten Spalte. Beginnen Sie mit dem Hinzufügen einer weißen Hintergrundfarbe.

• Hintergrundfarbe: #FFFFFF

Filter

Wechseln Sie zur Registerkarte Design und fügen Sie der gesamten Spalte einen Mischmodus hinzu.

• Mischmodus: Bildschirm

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Zeit, Module hinzuzufügen! Das einzige Modul, das wir in der ersten Spalte benötigen, ist ein Divider-Modul. Dieses Modul hilft uns, Platz in der ersten Spalte zu schaffen, ohne dass ein Modul angezeigt wird. Stellen Sie sicher, dass die Option "Teiler anzeigen" des Teilers deaktiviert ist.

• Teiler anzeigen: Nein

Abstand

Gehen Sie zu den Abstandseinstellungen und fügen Sie einen unteren Rand hinzu, um Platz in der ersten Spalte zu schaffen.

• Unterer Rand: 50vw

Textmodul Nr. 1 zu Spalte 2 hinzufügen

H1-Schlagzeile hinzufügen

Auf zur zweiten Spalte! Hier beginnen wir mit dem Headline-Textmodul. Geben Sie H1-Inhalte Ihrer Wahl ein.

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Überschrift Schriftart: Poppins
• Schriftstärke der Überschrift: Fett
• Textfarbe der Überschrift: #FFFFFF
• Überschriftstextgröße: 12vw
• Abstand der Überschriftsbuchstaben: -0.2vw

Abstand

Wir schaffen auch etwas Platz um das Modul herum und schieben es nach links, indem wir einige benutzerdefinierte Randwerte anwenden. Der negative linke Rand spielt eine wichtige Rolle beim Erstellen des Split-Mischmodus. Dadurch kann ein Teil der Kopie unterhalb der ersten Spalte erscheinen, der keine Hintergrundfarbe enthält.

• Oberer Rand: 18vw
• Unterer Rand: 2vw
• Linker Rand: -27.3vw

Filter

Jetzt, in diesem nächsten Schritt, wird die Magie passieren! Wir kombinieren einen Modul- und Spaltenmischmodus, damit der Zeilenhintergrund durchscheinen kann. Stellen Sie sicher, dass Sie den folgenden Mischmodus für das Textmodul auswählen:

• Mischmodus: Unterschied

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Auf zum zweiten Modul! Fügen Sie Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Poppins
• Textausrichtung: Ausrichten
• Textfarbe: #000000
• Textgröße: 0,8 vw (Desktop), 1,5 vw (Tablet), 2,3 vw (Telefon)
• Textzeilenhöhe: 2,5 em (Desktop & Tablet), 2,2 em (Telefon)

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Randwerte hinzu.

• Unterer Rand: 1vw
• Linker Rand: 5vw
• Rechter Rand: 14vw (Desktop), 4vw (Tablet), 5vw (Telefon)

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Weiter zum nächsten Modul, das ein Teilermodul ist. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zur Registerkarte Design und ändern Sie die Linieneinstellungen entsprechend:

• Linienfarbe: #FFFFFF
• Linienstil: Solid
• Linienposition: Oben

Größe

Ändern Sie auch die Größeneinstellungen des Teilers.

• Teilergewicht: 0.7vw
• Breite: 9%
• Höhe: 0px

Abstand

Und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Marge: 2vw (Desktop), 5vw (Tablet & Telefon)
• Unterer Rand: 3vw (Desktop), 6vw (Tablet & Telefon)
• Linker Rand: 5vw

Filter

Wenden Sie zu guter Letzt einen Mischmodus an, damit das Hintergrundbild und der Farbverlauf der Zeile durchscheinen.

• Mischmodus: Unterschied

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Weiter zum nächsten und letzten Modul, das ein Button-Modul ist. Geben Sie eine Kopie Ihrer Wahl ein.

Ausrichtung

Wechseln Sie zur Registerkarte Design und stellen Sie sicher, dass die Schaltflächenausrichtung auf links eingestellt ist.

• Tastenausrichtung: Links

Tasteneinstellungen

Ändern Sie auch die Tasteneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #000000
• Schaltflächenrandradius: 0px
• Schaltflächenschriftart: Poppins

Abstand

Und schließlich fügen Sie den Abstandseinstellungen einige benutzerdefinierte Rand- und Abstandswerte hinzu.

• Unterer Rand: 10vw (Desktop), 15vw (Tablet & Telefon)
• Linker Rand: 5vw
• Obere Polsterung: 1vw
• Untere Polsterung: 1vw
• Linke Polsterung: 3vw
• Rechte Polsterung: 3vw

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den neuen Spaltenoptionen von Divi atemberaubende Überschriften im Split-Blending-Modus erstellen können. Dieses Tutorial zeigt nur, wie vielseitig die integrierten Optionen von Divi sind und wie mit jedem Divi-Update die Designsoftware von Drittanbietern überflüssig wird. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.