Verwandeln übergroßer Charaktere in Hintergrundmasken mit Divi (Kostenloser Download!)

Wenn es um Hintergrundmasken geht, neigen Leute dazu, Bildbearbeitungssoftware außerhalb von Divi zu verwenden und das Bild dann auf die Website hochzuladen, die sie erstellen. Obwohl dies eine solide Möglichkeit ist, Ihre Website anzupassen und zu personalisieren, ist dies nicht unbedingt der einzige Weg. Sie können auch in Divi selbst Hintergrundmasken erstellen, indem Sie die verschiedenen Designelemente und Filteroptionen kreativ kombinieren. Genau das wollen wir in diesem Beitrag tun! Wir verwandeln übergroße Charaktere in Hintergrundmasken, die auf verschiedenen Bildschirmgrößen großartig aussehen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihre eigenen Designs mit übergroßen Charakteren und den integrierten Optionen von Divi zu erstellen.

Lasst uns anfangen!

Vorschau

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

Beispiel 1

Beispiel #2

Laden Sie The Hero Sections KOSTENLOS herunter

Um die kostenlosen Heldenabschnitte in die Hände zu bekommen, müssen Sie sie 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!

Beispiel 1 neu erstellen

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen wir mit dem ersten Beispiel! Fügen Sie einer neuen oder vorhandenen Seite einen neuen regulären Abschnitt hinzu und fügen Sie diesem Abschnitt einen Hintergrund hinzu:

• Hintergrundfarbe: #000000

Abstand

Gehen Sie dann zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

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

Überlauf

Wechseln Sie zur Registerkarte Erweitert und blenden Sie die Überläufe des Abschnitts aus. Dies wird später in diesem Tutorial wichtig, wenn wir das Textmodul mit dem übergroßen Zeichen neu positionieren.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Zeile 1 hinzufügen

Spaltenstruktur

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

Spalte 1 Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und fügen Sie der ersten Spalte eine Hintergrundfarbe hinzu.

• Spalte 1 Hintergrundfarbe: #848484

Spalte 1 Hintergrundbild

Fügen Sie auch eine Hintergrundfarbe hinzu. Um die Hintergrundfarbe und das Bild zu kombinieren, wenden wir einen Mischmodus an.

• Spalten-Hintergrundbild-Mischung: Multiplizieren

Größe

Wechseln Sie zur Registerkarte Design und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen, indem Sie die folgenden Größeneinstellungen anwenden:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Wir entfernen auch alle benutzerdefinierten oberen und unteren Polster der Reihe.

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

Textmodul zur Spalte hinzufügen

Zeichen zum Inhaltsfeld hinzufügen

Zeit, das Textmodul hinzuzufügen, das ein übergroßes Zeichen enthält. Fügen Sie dem Inhaltsfeld den Buchstaben 'o' hinzu.

Hintergrundfarbe

Fahren Sie fort, indem Sie zu den Hintergrundeinstellungen gehen und eine schwarze Hintergrundfarbe hinzufügen.

• Hintergrundfarbe: #000000

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen. Beachten Sie, dass wir einen hohen Wert für die Textgröße verwenden.

• Textschriftart: Poppins
• Textgröße: 100vw
• Textausrichtung: Mitte

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Obere Marge: -6vw
• Obere Polsterung: 15vw
• Untere Polsterung: 49vw

Filter

Zeit, die Magie zu verwirklichen! Gehen Sie zu den Filtereinstellungen des Moduls und ändern Sie den Mischmodus entsprechend:

• Mischmodus: Multiplizieren

Zeile 2 hinzufügen

Spaltenstruktur

Sobald Ihr übergroßer Charakter dem Design hinzugefügt wurde, können Sie fortfahren, indem Sie die verbleibenden Module hinzufügen, die im Abschnitt angezeigt werden sollen, vorzugsweise durch Hinzufügen einer neuen Zeile:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

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

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Inhalt hinzufügen

In dieser neuen Zeile können Sie die Module Ihrer Wahl hinzufügen. Um das genaue Beispiel, das in der Vorschau dieses Beitrags geteilt wurde, nachzubilden, fügen Sie zunächst ein Textmodul mit H1-Inhalten hinzu.

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H1-Texteinstellungen.

• Überschrift Schriftart: Playfair Display
• Schriftstärke der Überschrift: Fett
• Ausrichtung des Überschriftentextes: Mitte
• Textfarbe der Überschrift: #ffffff
• Überschriftstextgröße: 6vw

Abstand

Fahren Sie mit den Abstandseinstellungen fort und lassen Sie das Textmodul das übergroße Zeichen überlappen, indem Sie einen negativen oberen Rand hinzufügen. Wir achten auch darauf, dass links und rechts des Moduls etwas Platz ist, um die Reaktionsfähigkeit zu gewährleisten.

• Obere Marge: -47vw
• Linker Rand: 1vw
• Rechter Rand: 1vw

Trennmodul zur Spalte hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Gehen Sie als nächstes zum Design-Tab und ändern Sie die Teilerfarbe.

• Farbe: #ffffff

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 13px
• Breite: 16%
• Modulausrichtung: Mitte

Abstand

Fügen Sie einen oberen Rand hinzu, um Platz zwischen dem Textmodul und dem Trennmodul zu schaffen.

• Oberer Rand: 16vw

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein Textmodul mit einigen Absatzinhalten.

Texteinstellungen

Gehen Sie zu den Texteinstellungen und nehmen Sie die folgenden Änderungen vor:

• Textschriftart: Open Sans
• Textfarbe: #ffffff
• Textgröße: 1vw (Desktop), 2vw (Tablet), 2.5vw (Telefon)
• Textzeilenhöhe: 1.9em
• Textausrichtung: Mitte

Abstand

Fügen Sie auch einige benutzerdefinierte Abstandswerte hinzu.

• Oberer Rand: 3vw
• Unterer Rand: 3vw (Desktop), 10vw (Tablet & Telefon)
• Linker Rand: 27vw (Desktop), 10vw (Tablet), 8vw (Telefon)
• Rechter Rand: 27vw (Desktop), 10vw (Tablet), 8vw (Telefon)

Schaltflächenmodul zur Spalte 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

Fahren Sie fort, indem Sie die Schaltflächenausrichtung auf der Registerkarte "Design" ändern.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Gehen Sie zu den Schaltflächeneinstellungen und gestalten Sie die Schaltfläche wie gewünscht.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Breite des Tastenrahmens: 1px
• Schaltflächenrandradius: 0px
• Schaltflächenschrift: Open Sans
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Zu guter Letzt fügen wir auch einige benutzerdefinierte Margin- und Padding-Werte hinzu, um das gewünschte Ergebnis zu erzielen.

• Unterer Rand: 10vw
• Obere Polsterung: 15px
• Untere Polsterung: 15px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Beispiel 2 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum zweiten Beispiel! Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzu.

Überlauf

Blenden Sie den Überlauf des Abschnitts in der Registerkarte "Erweitert" aus.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Zeile 1 hinzufügen

Spaltenstruktur

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

Spalte 1 Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und fügen Sie der ersten Spalte eine Hintergrundfarbe hinzu.

• Spalte 1 Hintergrundfarbe: #dddddd

Spalte 1 Hintergrundbild

Fügen Sie auch ein Hintergrundbild hinzu und kombinieren Sie die Hintergrundfarbe mit dem Bild mithilfe eines Mischmodus.

• Spalten-Hintergrundbild-Überblendung: Bildschirm

Größe

Gehen Sie dann zu den Größeneinstellungen der Zeile und lassen Sie sie die gesamte Breite des Bildschirms einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes die obere und untere Polsterung.

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

Textmodul zur Spalte hinzufügen

Zeichen zum Inhaltsfeld hinzufügen

Zeit, das Textmodul hinzuzufügen, das die übergroßen Zeichen enthält! Kopieren Sie die folgenden Zeichen: '◊◊◊' und fügen Sie diese dem Inhaltsfeld hinzu. Sie können jede beliebige Art von Zeichen verwenden, indem Sie die Zeichentabelle (Windows) oder die Zeichenpalette (Mac) auf Ihrem Computer aufrufen.

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe dieses Moduls in Weiß.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Poppins
• Textfarbe: #0c0c0c
• Textgröße: 80vw
• Textausrichtung: Mitte

Abstand

Ändern Sie auch die oberen und unteren Padding-Werte.

• Obere Polsterung: 27.8vw
• Untere Polsterung: 27.8vw

Filter

Und erstellen Sie den Hintergrundmaskeneffekt, indem Sie dem Modul ein benutzerdefiniertes Mischmodul hinzufügen.

• Mischmodus: Bildschirm

Zeile 2 hinzufügen

Spaltenstruktur

Sobald Ihr übergroßer Charakter an seinem Platz ist, können Sie eine neue Reihe mit den verbleibenden Modulen hinzufügen.

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

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

• Obere Polsterung: 1vw
• Untere Polsterung: 1vw
• Linke Polsterung: 3vw
• Rechte Polsterung: 3vw

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Inhalt hinzufügen

Zeit, die restlichen Module hinzuzufügen. Wenn Sie genau das gleiche Design erstellen möchten, das Sie in der Vorschau dieses Beitrags gesehen haben, fügen Sie zunächst ein Textmodul mit H1-Inhalten hinzu.

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H1-Texteinstellungen.

• Überschrift Schriftart: Poppins
• Schriftstärke der Überschrift: Halbfett
• Ausrichtung des Überschriftentextes: Mitte
• Überschriftstextfarbe: #000000
• Überschriftstextgröße: 5vw

Abstand

Erstellen Sie eine Überlappung zwischen diesem Modul und dem Textmodul, das die übergroßen Zeichen enthält, indem Sie einen negativen oberen Rand hinzufügen.

• Obere Marge: -38vw

Trennmodul zur Spalte hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Teilerfarbe.

• Farbe: #000000

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 13px
• Breite: 16px
• Modulausrichtung: Mitte

Abstand

Zusammen mit den Abstandswerten in den Abstandseinstellungen.

• Oberer Rand: 2vw
• Unterer Rand: 2vw

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein weiteres Textmodul. Geben Sie einen Absatzinhalt Ihrer Wahl ein.

Texteinstellungen

Gehen Sie dann zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

• Textschriftart: Open Sans
• Textfarbe: #000000
• Textgröße: 1vw (Desktop), 2vw (Tablet), 2.5vw (Telefon)
• Textzeilenhöhe: 1.9em
• Textausrichtung: Mitte

Abstand

Fügen Sie auch einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: 3vw
• Unterer Rand: 3vw (Desktop), 10vw (Tablet & Telefon)
• Linker Rand: 27vw (Desktop), 10vw (Tablet), 8vw (Telefon)
• Rechter Rand: 27vw (Desktop), 10vw (Tablet), 8vw (Telefon)

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir brauchen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Gestalten Sie die Schaltfläche so, dass sie genau so aussieht, wie Sie es möchten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 50px
• Schaltflächenschrift: Open Sans
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Und vervollständigen Sie das Design, indem Sie der Schaltfläche benutzerdefinierte Rand- und Abstandswerte hinzufügen.

• Unterer Rand: 10vw
• Obere Polsterung: 15px
• Untere Polsterung: 15px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Vorschau

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

Beispiel 1

Beispiel #2

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie übergroße Charaktere verwenden, um mit Divi schöne Hintergrundmasken zu erstellen. Dies ist eine großartige Möglichkeit, ein individuelles und personalisiertes Webdesign zu erstellen, ohne eine Bildbearbeitungssoftware verwenden zu müssen. 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.