Wenn es um Hintergrundmasken geht, greifen Anwender eher zu Bildbearbeitungssoftware Divi, und laden Sie dann das Bild in die hoch Website die sie erschaffen. Obwohl es eine ziemlich praktische Möglichkeit ist, Ihre anzupassen Website, es ist nicht unbedingt die einzige Lösung. Sie können darin auch Hintergrundmasken erstellen Diviund kombiniert die verschiedenen Designelemente und Filteroptionen auf kreative Weise. Genau das wollen wir in diesem Beitrag tun! Wir verwandeln übergroße Zeichen in Hintergrundmasken, die auf jeder Bildschirmgröße großartig aussehen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihre eigenen Designs mit übergroßen Zeichen und den integrierten Optionen von zu erstellen Divi.
Lassen Sie uns gehen!
Beispielvorschau
Bevor wir uns mit dem Tutorial befassen, sind hier die Arten von Hintergründen aufgeführt, die Sie mit dieser Technik erzielen können.
Technologie
Beginnen wir mit dem Entwurf, indem wir einen schwarzen Hintergrund mit einem Buchstaben erstellen, der ein Bild als Hintergrund enthält.
Einen 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.
- Top Polsterung: 0px
- Polsterung unten: 0px
Überlauf
Wechseln Sie zur Registerkarte Erweitert und blenden Sie die Abschnittsüberläufe 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
Fügen Sie die Zeile 1 hinzu
Spaltenstruktur
Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:
Spalte 1-Hintergrundfarbe
Öffnen Sie die Zeileneinstellungen und fügen Sie der ersten Spalte eine Hintergrundfarbe hinzu, ohne noch Module hinzuzufügen.
- Spalte 1-Hintergrundfarbe: #848484
1-Spalte Hintergrundbild
Fügen Sie auch eine Hintergrundfarbe hinzu. Um die Hintergrundfarbe und das Bild zu kombinieren, wenden wir einen Mischmodus an.
- Spaltenhintergrundbildmischung: Multiplizieren
Sizing
Wechseln Sie zur Registerkarte Design, und lassen Sie die Zeile die gesamte Bildschirmbreite ausfüllen, indem Sie die folgenden Größeneinstellungen anwenden:
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Breite: 100%
- Maximale Breite: 100%
Abstand
Wir werden auch alle benutzerdefinierten Auf- und Ab-Polster in der Reihe los.
- Top Polsterung: 0px
- Polsterung unten: 0px
Fügen Sie einer Spalte einen Textbaustein hinzu
Fügen Sie dem Inhaltsbereich ein Zeichen hinzu
Es ist Zeit, das Textmodul hinzuzufügen, das ein übergroßes Zeichen enthält. Fügen Sie den Buchstaben „o“ in das Feld ein Inhalt.
Hintergrundfarbe
Fahren Sie fort, indem Sie in die Hintergrundeinstellungen gehen und eine schwarze Hintergrundfarbe hinzufügen.
- Hintergrundfarbe: #000000
Texteinstellungen
Gehen Sie zur Registerkarte Design und ändern Sie die Texteinstellungen. Beachten Sie, wie wir einen hohen Wert für die Textgröße verwenden.
- Textschrift: Poppins
- Textgröße: 100vw
- Textausrichtung: Mitte
Abstand
Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte Rand- und Füllwerte hinzu.
- Oberer Rand: -6vw
- Beste Polsterung: 15vw
- Polsterung unten: 49vw
Filter
Es ist Zeit zu zaubern! Greifen Sie auf die Filtereinstellungen des Moduls zu und ändern Sie den Zusammenführungsmodus entsprechend:
- Mischmodus: Multiplizieren
- Helligkeit: Sie können diesen Wert nach Ihren Wünschen ändern
Fügen Sie die 2-Zeile hinzu
Spaltenstruktur
Sobald Ihr übergroßer Charakter dem Entwurf hinzugefügt wurde, können Sie fortfahren, indem Sie die verbleibenden Module hinzufügen, die Sie in dem Abschnitt anzeigen möchten, vorzugsweise indem Sie eine neue Zeile hinzufügen:
Sizing
Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie sie die gesamte Bildschirmbreite ausfüllen.
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Breite: 100%
- Maximale Breite: 100%
Abstand
Entfernen Sie auch alle standardmäßigen Auf- und Abpolsterungen
- Top Polsterung: 0px
- Polsterung unten: 0px
Fügen Sie der Spalte den Textbaustein # 1 hinzu
Fügen Sie H1-Inhalte hinzu
In dieser neuen Reihe 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 hinzu, das enthält Inhalt H1.
H1-Texteinstellungen
Gehen Sie zur Registerkarte Design und ändern Sie die H1-Texteinstellungen.
- Titelschrift: Playfair Display
- Schriftgewicht: Fett
- Titelausrichtung: Mitte
- Titeltextfarbe: #ffffff
- Text Title Size: 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 stellen außerdem sicher, dass links und rechts vom Modul Platz ist, um die Reaktionsfähigkeit zu gewährleisten.
- Oberer Rand: -47vw
- Linker Rand: 1vw
- Rechter Rand: 1vw
Fügen Sie der Spalte ein Unterteilungsmodul hinzu
Sichtbarkeit
Das nächste Modul, das wir brauchen, ist ein Teilungsmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.
- Teiler anzeigen: Ja
Farbe
Gehen Sie als nächstes zur Registerkarte Design und ändern Sie die Farbe des Teilers.
- Farbe: #ffffff
Sizing
Ändern Sie auch die Größenparameter.
- Teilergewicht: 13px
- Breite: 16%
- Ausrichtung des Moduls: Mitte
Abstand
Fügen Sie außerdem einen oberen Rand hinzu, um einen Abstand zwischen dem Textmodul und dem Unterteilungsmodul zu erstellen.
- Oberer Rand: 16vw
Fügen Sie der Spalte den Textbaustein # 2 hinzu
Inhalt hinzufügen
Das nächste Modul, das wir brauchen, ist ein Textmodul mit a Inhalt des Absatzes.
Texteinstellungen
Greifen Sie auf die Texteinstellungen zu und nehmen Sie folgende Änderungen vor:
- Textschrift: Öffnen Sie Sans
- Textfarbe: #ffffff
- Textgröße: 1vw (Desktop), 2vw (Tablet), 2.5vw (Telefon)
- Höhe der Textzeile: 1.9em
- Textausrichtung: Mitte
Abstand
Fügen Sie auch benutzerdefinierte Abstandswerte hinzu.
- Oberer Rand: 3vw
- Unterer Rand: 3vw (Desktop-Computer), 10vw (Tablet und Telefon)
- Linker Rand: 27vw (Desktop), 10vw (Tablet), 8vw (Telefon)
- Rechter Rand: 27vw (Desktop), 10vw (Tablet), 8vw (Telefon)
Fügen Sie der Spalte ein Schaltflächenmodul hinzu
Kopie hinzufügen
Auf dem nächsten und letzten Modul, das ein Tastenmodul ist. Geben Sie eine Kopie Ihrer Wahl ein.
Ausrichtung
Fahren Sie fort, indem Sie die Tastenausrichtung auf der Registerkarte Design ändern.
- Ausrichtung der Tasten: Mitte
Tasteneinstellungen
Wechseln Sie zu den Schaltflächeneinstellungen und passen Sie die Schaltfläche wie gewünscht an.
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
- Schaltflächentextgröße: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telefon)
- Knopftextfarbe: #ffffff
- Breite des Schaltflächenrandes: 1px
- Radius des Randes der Schaltfläche: 0px
- Schaltfläche Schriftart: Öffnen Sie Sans
- Schriftgewicht: Ultra Bold
- Schriftstil: Großbuchstaben
Abstand
Schließlich fügen wir benutzerdefinierte Rand- und Füllwerte hinzu, um das gewünschte Ergebnis zu erzielen.
- Unterer Rand: 10vw
- Auffüllung: 15px
- Polsterung unten: 15px
- Linke Auffüllung: 50px
- Polsterung Rechts: 50px
Endgültiges Ergebnis
So sieht es aus, was wir bisher gebaut haben.
Abschließende Gedanken
In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit übergroßen Zeichen fantastische Hintergrundmasken mit Divi erstellen. Dies ist eine großartige Möglichkeit, ein benutzerdefiniertes Webdesign zu erstellen, ohne eine Bildbearbeitungssoftware verwenden zu müssen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten!
