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

So zeigen Sie ein Bildraster für den geheimen Heldenabschnitt in Divi . an

Rifat Divi Tutorials Jun 27, 2021

Heldenabschnitte werden immer als großartiges Werkzeug angesehen, um die Aufmerksamkeit der Besucher zu erregen. Außerdem hat es unbewusst einen Ton für die Website in ihrem Kopf gesetzt. Eine kreative Heldenabteilung zu haben, ist also ein Segen für das Geschäft. Divi ist ein wunderbarer WordPress-Theme- und Seitenersteller und bietet viele Möglichkeiten, den Heldenbereich Ihrer Website schön zu gestalten. Zuvor haben wir gesehen, wie man einen klebrigen Heldenabschnitt beim Scrollen entwirft, und heute werden wir sehen, wie man einen Heldenabschnitt entwirft, in dem es ein geheimes Bildraster gibt, das durch Scrollen enthüllt wird. Klingt spannend, oder?

Lassen Sie uns direkt in das Tutorial springen.

Schleichspitze

Dies wird das Design sein, das wir heute erstellen werden, und es wird vollständig responsive sein.

Desktop-Ansicht

Mobile Ansicht

Heldenbereich gestalten

Öffnen Sie eine neue Seite in Ihrem WordPress-Dashboard. Benennen Sie es nach Belieben und öffnen Sie es mit Divi Builder.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Hinzufügen: Neuer Abschnitt

Hintergrundfarbe

Wir werden unserem ersten Abschnitt eine Hintergrundfarbe hinzufügen. Öffnen Sie die Einstellungen für den Abschnitt und fügen Sie die Hintergrundfarbe hinzu.

  • Hintergrundfarbe: #111111

Abstand

Wechseln Sie nun zur Registerkarte Design des Abschnitts und nehmen Sie einige Anpassungen an der unteren Polsterung vor, da wir dadurch mehr Platz für ein besseres Scroll-Erlebnis haben.

  • Untere Polsterung: 120vh

Hinzufügen: Reihe Eins

Spaltenstruktur

Jetzt fügen wir dem vorbereiteten Abschnitt eine neue Zeile hinzu. Folgen Sie der gezeigten Spaltenstruktur.

Größe

Bevor wir nun weitere Module hinzufügen, öffnen Sie die Zeileneinstellung und ändern Sie die folgenden Werte auf der Registerkarte Design.

  • Benutzerdefinierte Dachrinnenbreite verwenden: Ja
  • Dachrinnenbreite: 2
  • Breite: 100%
  • Maximale Breite: 2580px

Abstand

Fügen Sie nun oben etwas Rand hinzu.

  • Obere Marge: Desktop: 10vh, Tablet und Telefon: 5vh

Z-Index

Um unsere Designreihenfolge beizubehalten, müssen wir diese Zeile unter der zweiten Zeile halten. Aus diesem Grund werden wir einige Z-Indexwerte hinzufügen.

  • Z-Index: 10

Alle Spalteneinstellungen

Wie wir mit den Einstellungen für Zeile 1 fertig sind, öffnen Sie nun die Einstellungen für jede Spalte und nehmen Sie die unten erläuterten Änderungen vor.

Hauptelement-CSS

Dieser CSS-Code ist nur für mobile Geräte. Stellen Sie sicher, dass Sie sie jeder Spalte einzeln hinzufügen.

width: 50% !important;
margin: 0 !important;

Spalte 2 Einstellungen

Z-Index

Öffnen Sie dann die Einstellungen von Spalte 2 und fügen Sie den Z-Indexwert hinzu. Dadurch wird die Spalte über die nächste verschoben.

  • Z-Index: 12

Hinzufügen: Bildmodul zu Spalte 1

Bild hochladen

Jetzt fügen wir in Spalte 1 ein Bildmodul hinzu und laden ein Bild unserer Wahl hoch.

Abstand

Auf der Design-Registerkarte des Moduls und ändern Sie die Abstandseinstellungen.

  • Unterer Rand: Tablet und Telefon: 10px
  • Rechte Marge: Tablet und Telefon: 2%

Bildmodul klonen und verbleibende Spalten füllen

Da wir gerade die Moduleinstellungen abgeschlossen haben, duplizieren wir das gesamte Modul dreimal und platzieren es in den verbleibenden Spalten.

Ändern Sie nun die Bilder aus den restlichen Spalten.

Ändern Sie die Abstandseinstellungen für Bild 2 und 4

Öffnen Sie dann die Einstellungen der Bildmodule in Spalte 2 und 4 und wenden Sie die folgenden Abstandswerte darauf an:

  • Unterer Rand: Tablet und Telefon: 10px
  • Linker Rand: Tablet und Telefon: 2%
  • Rechter Rand: /

Hinzufügen: Reihe Zwei

Spaltenstruktur

Fügen Sie nun unserem Hauptbereich eine neue Zeile hinzu.

Hintergrund mit Farbverlauf

Jetzt werden wir dieser neu erstellten Zeile einen Verlaufshintergrund zuweisen. Öffnen Sie also die Einstellung und wenden Sie den Hintergrund an

  • Farbe 1: #111111
  • Farbe 2: rgba(255,255,255,0)

Größe

Ändern Sie als nächstes die Größeneinstellungen.

  • Breite: 100%
  • Maximale Breite: 2580px

Abstand

Fügen Sie dann oben und unten etwas Polsterung hinzu.

  • Obere Polsterung: 20vh
  • Untere Polsterung: 20vh

Position

Da wir nun die zweite Reihe über der ersten platzieren möchten, müssen wir die Positionseinstellungen entsprechend festlegen.

  • Position: Absolut
  • Ort: Top Center
  • Z-Index: 12

Hinzufügen: Textmodul zu Spalte

H1-Inhalt hinzufügen

Fügen Sie nun der Spalte einen Textbaustein und einen Inhalt Ihrer Wahl hinzu.

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H1-Texteinstellungen entsprechend:

  • Überschrift Schriftart: Kumbh Sans
  • Schriftstärke der Überschrift: Fett
  • Überschrift-Schriftart: Großbuchstaben
  • Ausrichtung des Überschriftentextes: Mitte
  • Textfarbe der Überschrift: #ffdbaa
  • Überschrift Textgröße: Desktop: 120px, Tablet: 60px und Telefon: 40px
  • Abstand der Überschriftsbuchstaben: Desktop: -3px, Tablet und Telefon: 0px
  • Überschriftstextschatten: Wählen Sie: Dritte Option und Überschriftstextschattenfarbe: rgba(0,0,0,0.4)

Größe

Passen Sie nun die Modulausrichtung und die maximale Breite aus den Größeneinstellungen an.

  • Maximale Breite: 1070px
  • Modulausrichtung: Mitte

Hinzufügen:; Tastenmodul

Kopie hinzufügen

Das letzte Modul, das wir in dieser Zeile hinzufügen, ist ein Utton-Modul. Schreiben Sie etwas nach Ihrem Bedarf.

Tastenausrichtung

Auf der Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

  • Tastenausrichtung: Mitte

Tasteneinstellungen

Stylen Sie dann die Schaltfläche.

  • Benutzerdefinierte Stile für Schaltfläche verwenden: Ja:
  • Schaltflächentextgröße: Desktop: 20px, Tablet: 16px und Telefon: 14px
  • Schaltflächentextgröße: #111111
  • Hintergrundfarbe der Schaltfläche: #ffffff
  • Breite des Tastenrahmens: 0px
  • Schaltflächenrandradius: 100px
  • Button-Schriftart: Kumbh Sans
  • Schriftstärke der Schaltfläche: Fett

Abstand

Fügen Sie Abstandswerte aus den Abstandseinstellungen hinzu.

  • Obere Polsterung: Desktop und Tablet: 20px, Telefon: 15px.
  • Untere Polsterung: Desktop und Tablet: 20px, Telefon: 15px.
  • Linke Polsterung: Desktop und Tablet: 50px, Telefon: 40px.
  • Rechte Polsterung: Desktop und Tablet: 50px, Telefon: 40px.

Sticky-Einstellungen im Heldenbereich

Row One Sticky-Einstellungen One

Jetzt ist unser Design fertig und es ist Zeit, sich auf klebrige Einstellungen zu konzentrieren. Die folgenden Sticky-Einstellungen werden auf die erste Reihe angewendet, also öffnen Sie die Einstellungen für die erste Reihe.

  • Klebrige Position: Bleiben Sie oben
  • Untere Klebrigkeitsgrenze: Abschnitt
  • Versatz von umgebenden klebrigen Elementen: Ja
  • Übergangsstandard- und Sticky-Stile: Ja

Klebrige Deckkraft

Ändern Sie dann die Deckkraft in den Filtereinstellungen.

  • Standard: 20%
  • Klebrig: 100%

Bildmodul One Sticky-Einstellung

Abstand

Wechseln Sie in den Bildmoduleinstellungen zur Registerkarte Design und fügen Sie einige Sticky-Abstände hinzu.

  • Sticky Top-Marge: -20%
  • Klebriger rechter Rand: -20%

Überleitung

Erhöhen Sie auch die Übergangsdauer.

  • Übergangsdauer: 700ms

Bildmodul 2 Sticky-Einstellung

Abstand

Nehmen Sie in den Einstellungen des Bildmoduls 2 auch einige Anpassungen an den Abständen vor.

  • Sticky Top-Marge: 20%
  • Klebriger linker Rand: -30%

Überleitung

Erhöhen Sie auch hier die Übergangsdauer.

  • Übergangsdauer: 1000ms

Bildmodul Drei Sticky Spacing

Abstand

Verwenden Sie nun für das dritte Bildmodul die folgenden Sticky-Abstandswerte:

  • Sticky Top-Marge: -10%
  • Klebriger linker Rand: -25%
  • Klebriger rechter Rand: -25%

Überleitung

Passen Sie die Übergangsdauer entsprechend an:

  • Übergangsdauer: 700ms

Bildmodul Vier Sticky Spacing

Abstand

Öffnen Sie nun das letzte Bildmodul und nehmen Sie die Änderungen vor.

  • Sticky Top-Marge: -20%
  • Klebriger linker Rand: -30%

Überleitung

Beenden Sie nun den heutigen Job, indem Sie die Übergangsdauer für das vierte Bildmodul erhöhen.

  • Übergangsdauer: 1000ms

Und wir sind fertig! Speichern und verlassen Sie die Seite, um unser heutiges Designergebnis zu sehen.

Letzter Blick

Hier also unser heutiges Design. Der Hintergrund mit Farbverlauf der zweiten Reihe bewegt sich durch Scrollen nach oben und die Bilder aus der ersten Reihe werden angezeigt, während wir die Werte festlegen. Auf diese Weise sieht es interaktiver aus.

Desktop-Ansicht

Mobile Ansicht

Fazit

Im heutigen Tutorial haben wir versucht, Ihnen zu zeigen, wie kreativ Sie mit den Sticky-Optionen von Divi im Heldenbereich einer Website Innovationen schaffen können. Wir hoffen, Sie finden das Tutorial nützlich. Sie können den Beitrag teilen, damit auch andere davon profitieren können. Danke, dass du diesen Beitrag gelesen hast.