Erstellen Sie schöne WordPress-Websites mit Divi und Divi Builder

Wie man einen klebrigen Helden Abschnitt auf Scroll mit Divi entwerfen

Rifat Divi Tutorials May 18, 2021

Heldenabschnitte werden als projizierter Teil einer Webseite betrachtet. Aus diesem Grund nutzen Website-Besitzer diesen Abschnitt als Waffe, um die Aufmerksamkeit der Besucher zu erregen. Wenn Sie auf der Suche nach einer interaktiven Sticky Hero Abschnitt Animation auf Ihrer Website sind, hat Divi Ihren Rücken. Dank Divi Sticky Optionen, weil es sehr einfach ist, eine kreative Helden Abschnitt Scrolling-Effekt mit ihm zu machen.

Heute werden wir sehen, wie wir einen visuell ansprechenden Scrolling-Effekt auf unserer WordPress-Website Heldenabschnitt verwenden können. Im ersten Teil des Tutorials werden wir uns das Gesamtdesign ansehen, und im nächsten Teil werden wir dort Effekte hinzufügen. Beginnen wir also ohne Verzögerung.

Design Ouline

Bevor wir fortfahren, werfen wir einen Blick darauf, wie unser endgültiges Design aussehen wird.

Erstellen von Design framework

Neuer Abschnittszusatz

Hintergrundfarbe

Am Anfang werden wir uns mehr auf die Gestaltung des Designs konzentrieren. Später im zweiten Teil werden wir die klebrigen Effekte anwenden. Erstellen Sie nun eine neue Seite, und fügen Sie ihm einen neuen Abschnitt hinzu. Öffnen Sie die Einstellungen dieses Abschnitts, und fügen Sie eine Hintergrundfarbe hinzu.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen
  • Hintergrundfarbe: rgba(53,44,43,0.17)

Abstand

Lassen Sie uns auf der Entwurfsregisterkarte dieses Abschnitts fortfahren und die Werte wie folgt ändern.

  • Top Polsterung: 13vh
  • Untere Padding 0px

Zeile 1 Hinzufügen

Spaltenstruktur

Fügen Sie nun eine neue Zeile mithilfe der folgenden Spaltenstruktur hinzu.

Größenanpassung

Fügen Sie nun die Zeileneinstellungen hinzu, und bewegen Sie sich auf der Registerkarte Entwurf, um die Größeneinstellung wie folgt zu ändern.

  • Verwenden Sie Custom Gutter Width: Ja
  • Gutter breite: 2
  • Spaltenhöhen ausgleichen: 2
  • Breite: Desktop - 80%, Tab und Telefon - 90%
  • Maximale Breite: 2580px

Abstand

Jetzt entfernen wir alle Polster von oben und unten. Also, Obere und untere Polsterung ist 0px.

Einstellung für Spalte 1 (Zeile 1)

Abstand

Öffnen Sie zu diesem Zeitpunkt die Einstellung für Spalte 1, und ändern Sie die Abstandseinstellungen.

  • 5% Polsterung sowohl auf der linken als auch auf der rechten Seite.

Einstellung für Spalte 2 (Zeile 1)

Hintergrundbild

Fügen Sie als Nächstes ein Hintergrundbild zu Ihrer Auswahl aus den Einstellungen von Spalte 2 hinzu.

  • Hintergrundbildgröße: Abdeckung
  • Hintergrundbildposition: Mitte

Sichtbarkeit

Um sicher zugehen, dass dies auf kleineren Bildschirmgrößen funktioniert, gehen wir auf die erweiterte Registerkarte der zweiten Spalte und deaktivieren die Sichtbarkeit für Tablets und Telefone.

Text-Modul Hinzufügen zu Spalte 1 (Zeile 1)

Headerinhalt

Wir werden jetzt Module hinzufügen. Beginnen wir mit einem Textmodul in Spalte 1. Fügen Sie alle H1-Inhalte hinzu, die Ihnen gefallen!

H1-Texteinstellungen

Ändern Sie nun die H1-Texteinstellungen auf der Registerkarte Modulentwurf.

  • Überschrift Schriftart: Crimson Text
  • Überschrift Textgröße: Desktop 6vh, Tablet 50px, Telefon 40px
  • Richtungslinie Höhe: 1.2 em

Teilteilmodul Hinzufügen zu Spalte 1 (Zeile 1)

Sichtbarkeit

Es ist an der Zeit, unserer ersten Spalte ein Trennmodul hinzuzufügen. Aktivieren Sie auch die Option Show-Teiler.

Linie

Wechseln Sie nun zur Registerkarte Moduldesign und ändern Sie die Linieneinstellungen.

  • Linienfarbe: #35241f

Größenanpassung

Ändern Sie die Werte für Größeneinstellungen.

  • Teiler Gewicht: 5px
  • Breite: 21%
  • Höhe: 5px

Beschreibung Inhalt

Nun fügen wir das letzte Modul hinzu, das wir in Spalte 1 benötigen, und das ist ein weiteres Textmodul. Fügen Sie dort eine Beschreibung hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen der Module wie folgt.

  • Textschriftart: Karla
  • Textgröße: 18px
  • Textzeilenhöhe: 2.1em

Zeile 2 Hinzufügen

Spaltenstruktur

Damit diese Auswirkungen funktionieren, ist es notwendig, dass Sie einfach eine brandneue Zeile unterhalb der primären Zeile unter demselben Abschnitt hinzufügen. Diese Zeile benötigt eine Hintergrundfarbe und eine ausreichende Höhe und Breite, damit die erste Zeile darunter passen kann. Wir verwenden die folgende Spaltenstruktur.

Hintergrundfarbe

Fügen Sie der Zeile nun eine Hintergrundfarbe hinzu.

  • Hintergrundfarbe: #35241f

Größenanpassung

Ändern Sie die Werte in den Größeneinstellungen auf der Registerkarte Entwurf.

  • Breite: 100%
  • Maximale Breite: 3000px

Abstand

Ändern Sie für die Abstandseinstellung die Werte auf ähnliche Weise.

  • Untere Polsterung: 30vh
  • Linke Polsterung: 10%
  • Rechte Polsterung: 10%

Bildmodul auf Spalte 1 (Zeile 2)

Bild hochladen (nur Mobile und Tab)

Nun fügen wir der ersten Spalte ein Bildmodul hinzu. Können Sie sich erinnern, dass wir die Sichtbarkeit des Bildes für Tablets und Telefon deaktiviert haben? Dieses Bildmodul ersetzt das Bild, das in der ersten Zeile auf kleineren Bildschirmgrößen verwendet wird. Verwenden Sie ein Bild nur für Tablets und Telefon!

Wechseln Sie zu den Tablets und der mobilen Ansicht, und fügen Sie ein Bild hinzu.

Abstand

Fahren Sie mit der Registerkarte Modulentwurfs fort, und ändern Sie den unteren Rand wie folgt.

Teilteilmodul Hinzufügen zu Spalte 1 (Zeile 2)

Sichtbarkeit

Fügen Sie nun ein neues Divider-Modul unter dem Bild hinzu und aktivieren Sie die Option "Divider anzeigen".

Linie

Wechseln Sie zur Entwurfsregisterkarte des Moduls, und ändern Sie die Linienfarbe.

  • Linienfarbe: #ffffff

Größenanpassung

Ändern Sie auch die Größeneinstellung aus dem Entwurfsabschnitt.

  • Teiler Gewicht: 5px
  • Höhe: 5px

Text-Modul Hinzufügen zu Spalte 1 (Zeile 2)

Headerinhalt

Fügen Sie ein neues Textmodul mit h2-Inhalten hinzu.

Kopfzeilentexteinstellungen

Ändern Sie die H2-Texteinstellungen wie folgt:

  • Überschrift 2 Schriftart: Crimson Text
  • Überschrift 2 Textfarbe: #ffffff
  • Überschrift 2 Textgröße: Desktop 6vh, Tablet 50px, Telefon 40px.

Text-Modul Hinzufügen zu Spalte 2 (Zeile 2)

Beschreibung Inhalt

Das einzige Modul, das wir in Spalte 2 hinzufügen werden, ist ein Textmodul, in dem es einen Beschreibungsinhalt geben wird.

Texteinstellungen

Ändern Sie die Einstellung der Textmodule wie unten angegeben.

  • Textschriftart: Karla
  • Textschriftgewicht: Regular
  • Textzeilenhöhe: 2.2em
  • Textfarbe: Licht

Sticky Effects anwenden

Änderung seramleriert Zeilen Z Indexwerte

Zeile 1

Nun, da wir die Basis unseres Designs orientiert haben, werden wir uns nun auf einen weiteren Schritt konzentrieren, um den Helden-Cover-Effekt zu erzielen. Öffnen Sie die Einstellungen der ersten Zeile, und ändern Sie den Z-Index auf der erweiterten Registerkarte.

  • Z-Index: 1

Zeile 2

Ändern Sie den Z-Indexwert der zweiten Zeile. Der Wert muss höher sein als die erste Zeile.

  • Z-Index: 2

Sticky-Effekt auf Zeile 1

Öffnen Sie nun die Einstellung der ersten Zeile erneut und wenden Sie den Sticky-Effekt von der erweiterten Registerkarte an. Seine obligatorische make bottom sticky Limit ist auf Abschnitt gesetzt.

Sticky-Einstellung für Spalte 1 (Hintergrundfarbe)

Nun, da die gesamte Reihe klebrig geworden ist, werden wir einige klebrige Wirkung auf die untergeordneten Elemente der Zeile anwenden. Öffnen Sie die Einstellungen für Spalte 1, und wenden Sie die folgende klebrige Hintergrundfarbe an.

  • Sticky Hintergrundfarbe: #edeaea

Sticky Einstellung für Spalte 1 (Sticky Transform Skew)

Wechseln Sie nun zur Entwurfsregisterkarte, und wenden Sie den folgenden klebrigen Neigungswert an.

  • Sticky Bottom Skew: -4deg

Sticky Einstellung für Spalte 2 (Sticky Transform Skew)

Wenden Sie denselben klebrigen Neigungswert aus den Transformationseinstellungen für Spalte 2 an.

  • Sticky Bottom Skew: -4deg

Sticky Settings für Text-Modul x2 (Sticky Transform Skew)

Wir befinden uns am letzten Teil unseres Designs. Wir vervollständigen das Design und den Effekt, indem wir den unteren Neigungswert für beide Textmodule in Spalte 1 in einem klebrigen Zustand ändern. Dadurch wird der schiefe Wert für die Navigation in der klebrigen Spalte ausgeglichen.

  • Sticky Bottom Skew: 4deg

Endergebnis

Da wir alle Schritte durchlaufen und getan haben, was wir gefordert haben, wird unser Endprodukt so aussehen.

Letzte Worte

Divi hat eine große Möglichkeit, eine Website schöner als andere zu machen. Unser heutiges Tutorial ist eine großartige Möglichkeit, kurze Beschreibungen, Dienste und vieles mehr anzuzeigen! Wenn Sie Fragen oder Anregungen haben, zögern Sie nicht, einen Kommentar im Kommentarbereich zu hinterlassen. Auch, wenn Sie dieses Tutorial hilfreich fanden, wird ein Anteil großartig sein!