Möchten Sie Ihrem eine andere Dimension verleihen? Webseite mit Hintergrundmaske Divi Klebrig?
Die Sticky-Optionen von Divi ermöglichen es Ihnen, eine Menge verschiedener Designs für Ihre Websites zu erstellen. Das heutige Tutorial fügt die Liste der Dinge hinzu, die Sie tun können. Hoffentlich wird dies dazu beitragen, Ihre Kreativität anzuregen.
Wir zeigen Ihnen, wie Sie eine klebrige Hintergrundmaske erstellen.
Dieses Tutorial kombiniert die Sticky-Optionen von Divi mit Filtermischmodi.
Übersicht
Bevor wir in dieses Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.
Büro
Mobil
Erstellen Sie ein Design in Divi
Einen neuen Abschnitt hinzufügen
Hintergrundbild
Beginnen Sie, indem Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzufügen.
- Laden Sie ein Hintergrundbild Ihrer Wahl hoch.
- Hintergrundbildgröße: Cover
Abstand
Wechseln Sie zur Registerkarte Abschnittsdesign und entfernen Sie die folgenden Standardeinstellungen für den Abstand:
- Polsterung (oben und unten): 0px
Überläufe
Blenden Sie dann die Überläufe des Abschnitts in der Registerkarte aus Fortgeschrittener.
- Horizontaler Überlauf: Ausgeblendet
- Vertikaler Überlauf: Ausgeblendet
Zeile 1 hinzufügen
Struktur der Spalte
Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Sizing
Öffnen Sie, ohne Module hinzuzufügen, die Leitungseinstellungen und ändern Sie die Größeneinstellungen entsprechend:
- Breite: 100 %
- Maximale Breite: 100 %
Abstand
Entfernen Sie auch alle Standardränder.
- Polsterung (oben und unten): 0px
Filter
Wir fügen dieser Linie auch einen Mischmodus hinzu. Dieser Mischmodus hilft uns später im Tutorial beim Erstellen einer Maske.
- Mischmodus: Bildschirm
Z-Index
Um sicherzustellen, dass diese Zeile unter der zweiten Zeile bleibt, die wir dem Abschnitt hinzufügen, ändern wir den Z-Index auf der Registerkarte Fortgeschrittener.
- Z-Index: 9
Spaltenparameter
Als nächstes öffnen wir die Spalteneinstellungen.
Hintergrundfarbe
Wir verwenden eine komplett weiße Hintergrundfarbe.
- Hintergrundfarbe: #ffffff
CSS Hauptelement
Wir fügen dem Hauptelement in der Registerkarte auch einen Höhenwert hinzu Fortgeschrittener.
height: 100vh;
Fügen Sie der Zeile ein "Text"-Modul hinzu
Lassen Sie den Inhaltsbereich leer
Wenn Sie mit den Zeileneinstellungen fertig sind, fügen Sie seiner Spalte ein Textmodul hinzu.
Verlassen Sie den Bereich Inhalt leer. Stattdessen verwenden wir dieses Modul, um eine Form zu erstellen, die einen Teil des Hintergrundbilds des Abschnitts sichtbar macht.
Hintergrundfarbe
Wir werden für dieses Modul eine dunklere Hintergrundfarbe verwenden.
- Hintergrundfarbe: #0b3835
Sizing
Als nächstes werden wir auf die Registerkarte zugreifen Design und ändern Sie die Größenparameter wie folgt:
- Breite :
- Desktop: 20vw
- Tablet und Telefon: 70 vw
- Höhe:
- Desktop: 30vh
- Tablet und Telefon: 10vh
Abstand
Wir fügen auch einen oberen Rand hinzu.
- Rand (oben): 3vh
Grenze
Und wir werden abgerundete Ecken einschließen.
- Abgerundete Ecken: 15px
Zeile 2 hinzufügen
Struktur der Spalte
Fahren Sie fort, indem Sie dem Abschnitt eine weitere Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:
Sizing
Öffnen Sie die Leitungseinstellungen und nehmen Sie die folgenden Änderungen in den Optionen vor Größe folgendes:
- Breite: 100 %
- Maximale Breite: 100 %
Z-Index
Erhöhen Sie außerdem den Z-Index der Zeile. Dadurch wird sichergestellt, dass die Inhalt der Zeile bleibt über der vorherigen Zeile.
- Z-Index: 12
Fügen Sie der Zeile ein "Text"-Modul hinzu
Fügen Sie H2-Inhalte hinzu
Es ist Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul, das Folgendes enthält Inhalt H2 Ihrer Wahl.
H2-Texteinstellungen
Passen Sie die H2-Texteinstellungen wie folgt an:
- Schriftart: Playfair Display
- Textausrichtung: Zentriert
- Textfarbe: #0b3835
- Größe :
- Desktop: 150px
- Tablet und Telefon: 45px
- Zeilenhöhe: 1,2 cm
Sizing
Navigieren Sie als Nächstes zu den Größeneinstellungen und wenden Sie die folgenden Einstellungen an:
- Maximale Breite: 980 Pixel
- Ausrichtungsmodul: Mitte
Abstand
Fügen Sie auch einen negativen oberen Rand hinzu.
Fügen Sie der Zeile ein "Button"-Modul hinzu
Inhalt zur Schaltfläche hinzufügen
Das nächste und letzte Modul, das wir in dieser Reihe brauchen, ist ein Button-Modul. Fügen Sie Inhalte Ihrer Wahl hinzu.
Schaltflächenausrichtung
Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Ausrichtung der Schaltfläche.
- Tastenausrichtung: Mitte
Tasteneinstellungen
Gehen Sie als Nächstes zu den Schaltflächeneinstellungen und wenden Sie die folgenden Stile an:
- Benutzerdefinierte Stile für die Schaltfläche verwenden: Ja
- Schaltflächentextgröße: 15px
- Textfarbe der Schaltfläche: #ffffff
- Hintergrundfarbe der Schaltfläche: #000000
- Rahmenbreite der Schaltfläche: 0 Pixel
- Randradius der Schaltfläche: 100px
- Button Schriftart: Montserrat
- Schriftstärke der Schaltfläche: Halbfett
- Schriftstil: TT
Abstand
Wir fügen den Abstandseinstellungen auch benutzerdefinierte Rand- und Auffüllwerte hinzu.
- Rand (unten): 60vh
- Polsterung (oben und unten): 15px
- Polsterung (links und rechts): 40px
Klebeeffekte anwenden
Linie 1 öffnen
Nachdem wir die Basis unseres Designs geschaffen haben, ist es an der Zeit, die klebrigen Stile anzuwenden. Öffnen Sie die Einstellungen der ersten Zeile.
Wenden Sie Sticky-Optionen an
Gehen Sie zur Registerkarte Fortgeschrittener und wenden Sie die folgenden dauerhaften Einstellungen an:
- Sticky-Position: Oben bleiben
- Untere Sticky-Grenze: Abschnitt
- Versatz von umgebenden klebrigen Elementen: JA
- Übergangsstandard- und Sticky-Stile: JA
Sticky-Optionen für Textbausteine
Jetzt, da die Zeile Sticky ist, können wir Stile auf das Textmodul innerhalb der Zeile anwenden. Öffnen Sie die Moduleinstellungen.
Klebrige Größe
Gehen Sie als Nächstes zu den Größeneinstellungen und wenden Sie die folgenden Größenwerte an:
- Breite (klebrig): 80 vw
- Höhe (klebrig): 90vh
Übergangszeit
Navigieren Sie schließlich zur Registerkarte Fortgeschrittener und verlängern Sie die Dauer des Übergangs.
- Übergangsdauer: 500 ms
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Büro
Laden Sie DIVI jetzt herunter!!!
Mobil
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen noch einmal gezeigt, wie Sie mit den Sticky-Optionen von Divi kreativ werden können.
Insbesondere haben wir Ihnen gezeigt, wie Sie die Filtereinstellungen und Sticky-Optionen von Divi kombinieren können.
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.
...
