Möchten Sie die Masken und Muster für Ihren Heldenbereich in verwenden Divi ?
Divis neue Masken und Hintergrundmuster sind eines unserer bisher coolsten neuen Designmerkmale. Jede der Masken und Muster kann mit nur wenigen Klicks mit anderen Hintergrundelementen (wie Farben, Bildern und Farbverläufen) für unzählige einzigartige Kombinationen kombiniert werden.
Heute zeigen wir Ihnen, wie man es benutzt Divi und seine neuen Masken und Hintergrundmuster, um einen Heldenabschnitt zu entwerfen.
In diesem Lernprogramm behandeln wir die wichtigen Schritte zum Erstellen von Masken und Hintergrundmustern.
Wir zeigen sogar, wie man Hintergrundbilder passend zu einem Maskendesign positioniert. Dies sollte Ihnen die geben outils Sie müssen in wenigen Minuten den perfekten Hero-Bereich für Ihre Website erstellen.
Übersicht
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.
Lesen Sie auch: Divi: So erstellen Sie ein responsives Bildraster mit Links und Hover-Effekten
Beispielabschnitt von Hero mit einer weißen Maske und einem Muster.
Hier ist eine dunkle Version desselben Heldenabschnitts mit einer schwarzen Maske und einem Muster.
Mit diesem Design können Sie Masken und Maskenpositionen mit nur wenigen Klicks ändern!
Erstellen Sie eine neue Seite mit Divi Builder
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie die Divi Baumeister
klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, auf der Sie mit dem Entwerfen beginnen können Divi.
So verwenden Sie die Masken und Hintergrundmuster von Divi in Ihrem Heldenbereich
1. Erstellen Sie die Layoutstruktur
Für diesen Heldenabschnitt verwenden wir eine klassische Layoutstruktur mit dem Titel und der Handlungsaufforderung auf der linken Seite und einem Bild (oder visuellen Design) auf der rechten Seite.
Für dieses Beispiel wird unser visuelles Design mit den Hintergrundoptionen von Divi erstellt. Aber bevor wir zum Wesentlichen kommen, müssen wir eine zweispaltige Zeile erstellen, um Platz auf der rechten Seite der Seite zu sparen, um unsere Abschnittshintergrundmasken und das Musterdesign zu präsentieren.
2. Fügen Sie den Titel und den Aufruf zum Handeln hinzu
Fügen Sie in der linken Spalte (Spalte 1) ein Textmodul für Ihren Haupttitel, ein Textmodul für Ihren Untertiteltext und ein Schaltflächenmodul für Ihre Schaltfläche hinzu.
3. Fügen Sie dem Abschnitt einen vertikalen Abstand hinzu
Damit unser Hintergrunddesign groß und schön aussieht, müssen wir dem Abschnitt vertikale Höhe hinzufügen. Eine einfache Möglichkeit, dies zu tun, besteht darin, am oberen und unteren Rand des Abschnitts Polsterung hinzuzufügen. Denken Sie daran, dass wir die Polsterung auf dem Tablet- und Telefonbildschirm anpassen müssen, um Platz für unser Hintergrunddesign zu schaffen, sobald die Spalten vertikal gestapelt sind.
Bereichseinstellungen öffnen. Aktualisieren Sie auf der Registerkarte Design die Polsterung wie folgt:
- Polsterung:
- Desktop: Top 20vw, Bottom 20vw
- Tablet: Oben 8vw, Unten 48vw
- Telefon: Oben 8vw, Unten 70vw
4. Hintergrundbild und Farbverlauf hinzufügen
Als nächstes können wir dem Abschnitt ein Hintergrundbild und einen Farbverlauf hinzufügen. Denken Sie daran, dass der Hauptfokus des Hintergrundbilds auf der rechten Seite des Abschnitts angezeigt wird. Verwenden Sie also ein Bild, das das enthält, was Sie auf der rechten Seite sehen möchten.
Für dieses Beispiel verwenden wir ein Bild mit der Skyline einer Stadt. Die rechte Seite des Bildes hat nähere und besser aussehende Gebäude, also funktioniert es wirklich gut.
Unter der Registerkarte Hintergrundbild, laden Sie das Bild im Bereich Hintergrund hoch.
In Divi können Sie dem Hintergrundbild ganz einfach einen Farbverlauf hinzufügen. Unter der Registerkarte Hintergrundverlauf, fügen Sie den folgenden Farbverlauf zum Hintergrund des Abschnitts hinzu:
- Gradientenstopps:
- 0%: #3e22ff
- 100 %: klar
- Quadratische Steigung über Hintergrundbild: JA
5. Erstellen Sie ein Hintergrundmuster für den Abschnitt
Nachdem wir nun unser Hintergrundbild und den Farbverlauf fertig haben, können wir ein Hintergrundmuster hinzufügen, um das Design zu vervollständigen.
In diesem Beispiel verwenden wir ein subtiles Muster, das nur ein wenig Textur hinzufügt, um ihm ein einzigartigeres Aussehen zu verleihen.
Unter der Registerkarte Hintergrundmuster, aktualisieren Sie Folgendes:
- Hintergrundmuster: Getuftet
TRICK: Bei Hintergrundmustern ist es normalerweise am besten, es dezent zu halten. Versuchen Sie, benutzerdefinierte Größen für kleinere Designs zu verwenden, und verringern Sie dann die Farbdeckkraft.
6. Erstellen Sie eine Hintergrundmaske für den Abschnitt
Mit unserem Hintergrundmuster sind wir endlich bereit, eine brandneue Hintergrundmaske für unser Design zu testen. Es gibt eine Reihe von Optionen und Variationen zur Auswahl. Für dieses Beispiel verwenden wir die Wabenmaske.
Unter der Registerkarte Hintergrundmaske, aktualisieren Sie Folgendes:
- Maske: Wabe
- Maskenfarbe: #ffffff
- Größe: Abdeckung
7. Passen Sie die Position des Hintergrundbilds an
Da wir eine Hintergrundmaske verwenden, ist ein Teil unseres Hintergrundbildes maskiert (oder "maskiert").
In diesem Beispiel stellen wir sicher, dass die untere rechte Ecke des Bildes am besten sichtbar ist, und verschieben es etwas nach rechts, um mehr Gebäude anzuzeigen.
Aktualisieren Sie auf der Registerkarte Bild Folgendes:
- Position des Hintergrundbilds: Unten rechts
- Hintergrundbild Horizontaler Versatz: -4vw
8. Verwenden Sie einen Mischmodus
Eine Möglichkeit, mit all diesen Hintergrundelementen kreativ zu werden, besteht darin, einen Mischmodus hinzuzufügen. Mischmodi können zu jeder der Hintergrundoptionen hinzugefügt werden, und sie können verwendet werden, um mehrere Hintergrundebenen (Bild, Farbverlauf, Maske usw.) auf kreative Weise zu mischen.
In diesem Beispiel mischen wir das Hintergrundbild mit der Verlaufsfarbe. Klicken Sie dazu auf die Registerkarte Hintergrundbild und fügen Sie einen Mischmodus hinzu, um die Verlaufsfarbe wie folgt mit dem Hintergrundbild zu mischen:
- Hintergrundbildmischung: Multiplizieren
9. Passen Sie die Hintergrundmaske für Mobilgeräte an
Es ist darauf zu achten, dass das Design der Hintergrundmaske auch auf Mobilgeräten gut aussieht. Glücklicherweise erleichtern die integrierten Optionen diesen Vorgang.
Denken Sie daran, dass wir bereits die zusätzliche Polsterung auf dem Tablet und Telefon hinzugefügt haben, um Platz für unser Hintergrunddesign zu schaffen.
Jetzt müssen wir nur noch die Optionen für die Hintergrundtransformation und das Seitenverhältnis verwenden, um die Maske für Mobilgeräte anzupassen.
Unter der Registerkarte Hintergrundmaske, aktivieren Sie responsive Optionen und aktualisieren Sie Folgendes:
Tablet-Version
- Maskentransformation: Vertikal spiegeln, Horizontal spiegeln, Drehen
- Seitenverhältnis der Maske: quadratisch
Telefonversion
- Maskentransformation: Vertikal spiegeln, Horizontal spiegeln, Drehen
- Seitenverhältnis der Maske: Hochformat
Das Ergebnis
Schauen Sie sich das Design an, das wir bisher erstellt haben.
Desktop-Computer
Tablet-Version
Telefonversion
10. Erstellen Sie eine dunkle Version
Wenn Sie eine dunkle Version dieses Designs wünschen, ändern Sie einfach die Hintergrundmaskenfarbe in eine dunkle Farbe (z. B. Schwarz).
Ändern Sie dann die Farbe des Musters in Schwarz.
Ändern Sie dann den Titel- und Untertiteltext in Weiß. Und vielleicht möchten Sie auch die Schaltflächenfarbe aktualisieren.
So sieht die dunkle Version aus.
Endergebnisse
Siehe auch: Divi: So passen Sie den „Weiterlesen“-Link eines Blogs an
Hier ist ein weiterer Blick auf unsere Endergebnisse.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Entwerfen Sie einen Heldenabschnitt für Ihren Website macht großen Spaß damit Masken und Hintergrundmuster von Divi. Hintergrundoptionen können einfach geändert werden, um das perfekte Design zu erhalten. Und es gibt viele andere Optionen, die Sie verwenden können (z. B. Mischmodi), um noch einzigartigere Hintergründe zu erstellen.
Darüber hinaus können Sie Masken und Muster zu jedem Divi-Element hinzufügen, nicht nur zu Abschnitten. Also viel Spaß beim Experimentieren!
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
