Springe zum Hauptinhalt

So zeigen Sie Ihre Bildergalerie mit einem Bildlaufeffekt auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Bildergalerien sind auf den meisten Websites ein bevorzugtes Ziel. In vielen Fällen ist es möglicherweise besser, diese Bildergalerien glücklich und statisch zu halten, damit die Bilder ihre Magie entfalten können.

Fügen Sie jedoch einen gleitenden Puzzle-Scrolling-Effekt hinzu eine Bildergalerie (wie wir es in diesem Tutorial tun werden), kann einem zeitlosen Klassiker einen erfrischenden Touch verleihen.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein einfaches Layout erstellen, das eine Bildergalerie mit einem gleitenden Puzzle-Scrolling-Effekt auf Divi anzeigt.

Der Schlüssel ist zu verstehen, wie die Größe der Bilder mit den vertikalen und horizontalen Versatzwerten jedes Bildlaufeffekts zusammenhängt, um das Bild genau um einen Punkt zu verschieben. Sobald der Vorgang abgeschlossen ist, ist der resultierende Bewegungseffekt scharf und präzise, ​​da er sich allmählich zusammensetzt und auf einzigartige Weise eine Bildergalerie enthüllt.

Mögliches Ergebnis

Hier ist eine Übersicht über das Layout der Bildergalerie mit dem Scrolling-Scrolling-Effekt, den wir in diesem Tutorial erstellen werden.

Mögliche Ergebnisdivi

Erstellung des Header-Abschnitts

Lassen Sie uns zunächst einen kurzen Header-Abschnitt erstellen, der den Benutzer auffordert, nach unten zu scrollen, um die Galerie anzuzeigen, und mit den fantastischen Bildlaufeffekten.

Fügen Sie eine Zeile hinzu

Fügen Sie dem Standardabschnitt eine Zeile aus einer Spalte hinzu.

Einspaltige Zeile

Fügen Sie ein Textmodul hinzu

Fügen Sie innerhalb der Spalte / Zeile ein neues Textmodul hinzu.

Aktualisieren Sie in den Texteinstellungen den Textinhalt wie folgt:

<h1>Image Gallery</h1>

Textmodul hinzufügen

Einstellungen des Textmoduls

Aktualisieren Sie auf der Registerkarte Design das Textdesign wie folgt:

  • Titelschrift: Roboto
  • Schriftgröße des Titels: fett
  • Titelschriftart: TT
  • Ausrichtung des Kopfzeilentextes: Mitte
  • Größe des Kopfzeilentextes: 50 px (Desktop), 40 px (Tablet und Telefon)
  • Titelbuchstabenabstand: 4px
Geänderter Textstil

Fügen Sie ein Klappentext-Modulsymbol hinzu

Sobald der Text vorhanden ist, fügen Sie unter dem Textmodul ein neues Präsentationstextmodul hinzu.

Modul zur Zusammenfassung der Divi-Auswahl

Entfernen Sie dann den gesamten Titel und den Hauptteil des Standardinhalts und wählen Sie das Abwärtspfeilsymbol.

Divi-Zusammenfassungsmodul

Einstellungen für Präsentationstexte

Aktualisieren Sie anschließend die Einstellungen für den Präsentationstext mit einer neuen Farbe und einer sich wiederholenden Folienanimation.

  • Symbolfarbe: # ffb500
  • Animationsstil: Folie
  • Animationsrichtung: nach unten
  • Intensität der Animation: 20%
  • Animation wiederholen: Schleife
Divi-Animationszusammenfassungsmodul

Abschnittsauffüllung

Aktualisieren Sie den Abstand wie folgt, um dem Abschnitt Platz zum Scrollen zu geben:

  • Polsterung: 20vh oben, 50vh unten

Hier verwenden wir die Längeneinheit vh, die relativ zur Höhe des Browserfensters ist, damit sich der Abstand über alle Browsergrößen hinweg einheitlich anpasst.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Konfigurieren Sie den Abstand der Divi-Module

Bildergalerieerstellung mit Bildlaufeffekten

Nachdem unser Header-Bereich vollständig ist, können wir die eigentliche Bildergalerie mit den Bildlaufeffekten des Schiebepuzzles erstellen. Die gesamte Galerie besteht aus drei Zeilen mit 4 Bildern / Spalten in jeder Zeile, um insgesamt 12 Bilder zu erstellen. Sie können dem Layout jedoch problemlos weitere Linien und Bilder hinzufügen, wenn es fertig ist.

Erstellen des Abschnitts und der Linie

Einen neuen Abschnitt hinzufügen

Beginnen wir mit dem Hinzufügen eines neuen regulären Abschnitts unter dem Titelabschnitt.

Auswahlbereich divi

Fügen Sie eine Zeile hinzu

Fügen Sie dann dem Abschnitt eine Zeile mit vier Spalten hinzu.

Abschnitt hat 4 Divi-Spalten

Leitungseinstellungen

Aktualisieren Sie unter den Zeileneinstellungen Folgendes:

  • Dachrinnenbreite: 1
  • Breite: 100%
  • Maximale Breite: 1200 Pixel (Desktop), 600 Pixel (Tablet), 300 Pixel (Telefon)
Divi-Linienparameter
Wie die Linienbreite die Bildgröße bestimmt

Die Breite der Linie ist für dieses Design sehr wichtig, da sie die Breite jeder der vier Spalten bestimmt. Sobald wir die Breite der Rinne auf 1 gesetzt haben, gibt es keinen Rand mehr zwischen den Bildern.

Wenn wir die maximale Breite auf 1200 Pixel einstellen, wird durch das Layout mit vier Spalten jede der Spalten / Bilder genau 300 Pixel breit (1200 Pixel / 4 = 300 Pixel).

Da jedes Bild quadratisch ist, wissen wir außerdem, dass die Höhe jedes Bildes ebenfalls 300 Pixel beträgt. Wir müssen es nicht so halten, wenn wir nicht wollen.

Zum Beispiel könnten wir uns auch für ein dreispaltiges Layout mit Bildern von 400 x 400 Pixel entscheiden. Die Kenntnis der Bildbreite (300 px) und der Höhe (ebenfalls 300 px) ist der Schlüssel zum späteren Erstellen des Bildlaufeffekts.

Bilder hinzufügen

Bild hinzufügen 1

Bildmodul hinzufügen div

Bild 1 Bildlaufeffekte

Divi-Scrolling-Effekt
Verknüpfung zwischen Bildgröße und Bildlaufeffekt-Offsets

Bei Verwendung des vertikalen und horizontalen Bildlaufeffekts ist es wichtig zu verstehen, was der eingegebene numerische Wert darstellt. In diesem Beispiel haben wir einen vertikalen Bewegungsstartversatz von -3. Diese -3 ist tatsächlich -300px (oder 300px nach unten), was der Breite des Bildes entspricht.

Der Versatz erreicht dann 0 (die Ausgangsposition), wenn der Benutzer einen Bildlauf durchführt. Dies erzeugt den Bildlaufeffekt, der das Bild über genau einen Block / ein Bild bewegt. Die horizontale Bewegung beginnt bei 3 (300 Pixel von rechts) und endet an der Standardposition. Diese beiden Effekte ergeben zusammen einen einzigartigen zweiteiligen Bildlaufeffekt.

Bild hinzufügen 2

Sobald die Bildlaufeffekte zu Bild 1 hinzugefügt wurden. Fügen Sie Spalte 2 ein neues Bild hinzu.

Wir werden dieses statische Bild ohne Bildlaufeffekt belassen.

Bild hinzufügen 3

Fügen Sie dann ein weiteres Bildmodul zu Spalte 3 hinzu und aktualisieren Sie das Modul mit einem neuen Bild.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Bild 3 Bildlaufeffekte

Aktualisieren Sie unter den Bildeinstellungen die folgenden Bildlaufeffekte:

Unter der Registerkarte Horizontale Bewegung ...

  • Horizontale Bewegung aktivieren: JA
  • Startoffset: -3 (bei 0% des Fensters)
  • Durchschnittlicher Versatz: 0 (bei 15% des Anzeigefensters)
  • Endversatz: 0 (bei 100% des Anzeigefensters)
Bildmodul-Divi-Scrolling-Effekt

Bild hinzufügen 4

Um das letzte Bild zu erstellen, kopieren Sie Bild 1 und fügen Sie es in Spalte 4 ein.

Laden Sie ein neues Bild in den Bildeinstellungen hoch.

Laden Sie ein neues Divi-Image hoch

Bild 4 Bildlaufeffekte

Aktualisieren Sie dann die folgenden Bildlaufeffekte:

Unter der Registerkarte Vertikale Bewegung ...

  • Vertikale Bewegung aktivieren: JA
  • Startversatz: 3 (bei 0% des Fensters)
  • Durchschnittlicher Versatz: 0 (bei 15% -28% des Anzeigefensters)
  • Endversatz: 0 (bei 40% des Anzeigefensters)

Unter der Registerkarte Horizontale Bewegung ...

  • Horizontale Bewegung aktivieren: JA
  • Startversatz: 3 (bei 0% des Fensters)
  • Durchschnittlicher Versatz: 3 (bei 28% des Anzeigefensters)
  • Endversatz: 0 (bei 40% des Anzeigefensters)
Divi Scroll Option

Doppelte Zeile

Nachdem die Bildlaufeffekte für die erste Zeile abgeschlossen sind, müssen wir nur noch die Zeile duplizieren, um weitere Bilder und die entsprechenden Bildlaufeffekte zu erstellen. In diesem Beispiel duplizieren wir die Zeile zweimal, um insgesamt drei Zeilen zu erstellen.

Ersetzen und ordnen Sie die Bilder nach Bedarf neu

Dann können wir die Bilder per Drag & Drop an die gewünschte Stelle verschieben. Hier können Sie kreativ werden und sehen, wie sich die Bilder bewegen. Sobald die Bilder vorhanden sind, können Sie den Inhalt des Bildmoduls durch neue Bilder ersetzen, die den Anforderungen der Website entsprechen.

Gesamtbilddivi

Letzte Ausbesserungen

Abschnittssichtbarkeit

Da sich unsere Bilder wahrscheinlich außerhalb des Abschnitts / Fensters erstrecken, maskieren wir den Überlauf, um ihn ein wenig zu bereinigen. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt
Sichtbarkeit divi

Abschnittsauffüllung

Wir möchten, dass der vertikale Bildlaufeffekt des oberen Bilds (das sich über den Abschnitt erstreckt) trotz des versteckten Überlaufs sichtbar ist. Fügen wir also einen oberen und einen unteren Abstand hinzu, der der Höhe des Bildes (300 Pixel) entspricht.

Divi Polsterung

Ergebnis bisher

Im Moment können wir hier anhalten, wenn Sie das Galeriedesign ohne Abstand zwischen den Bildern beibehalten möchten. So sieht das Ergebnis bisher aus. Beachten Sie, wie genau sich die Bilder vertikal und horizontal um genau einen Block / Bild bewegen.

Platz zwischen Bildern hinzufügen

Da wir die Breite der Rinne auf 1 gesetzt haben, haben wir keinen Rand mehr zwischen unseren Spalten oder unseren Bildern. Um einen ähnlichen Abstand wiederherzustellen, können wir jedem Bild einen Abstand hinzufügen.

Auf diese Weise können wir den erforderlichen Abstand erstellen, ohne die Funktionalität der Bildlaufeffekte zu beeinträchtigen. Dies ist möglich, da durch Hinzufügen von Auffüllungen zum Bild die Breite oder Höhe des Bildcontainers nicht erhöht wird. Sie können einen ähnlichen Effekt auch erzielen, indem Sie auch Rahmen verwenden.

Bild 1 Polsterung

Öffnen Sie die Einstellungen in Bild 1 und aktualisieren Sie Folgendes:

  • Auffüllen: 10 Pixel oben, 10 Pixel unten, 10 Pixel links, 10 Pixel rechts
Divi-Rand hinzufügen

Erweitern Sie die Füllung auf alle Bilder

Klicken Sie vor dem Speichern mit der rechten Maustaste auf die Auffülloption und wählen Sie "Auffüllen erweitern". Klicken Sie im Popup-Fenster "Stile erweitern" auf die Schaltfläche "Erweitern", um diese Füllung auf alle Bilder auf der Seite auszudehnen.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Erweitern Sie die Divi-Ränder

Endergebnis

Hier ist das Ergebnis all der Arbeit, die wir bisher geleistet haben.

Divi Desktop Endergebnis

Abschließende Gedanken

Der in diesem Artikel vorgestellte Sliding-Puzzle-Scrolling-Effekt bietet mehr als nur ein einzigartiges Design für eine Bildergalerie. Er weist auch darauf hin, dass horizontale und vertikale Bewegungsversätze für präzisere Bildlaufeffekte verwendet werden können.

Sie können verschiedene Variationen dieses Layouts erkunden, indem Sie die Offsets ändern und die Positionen der Bilder mischen.

Sie können auch die Anzahl der Spalten ändern, solange Sie wissen, wie sich die Größe der Spalten / des Bilds ändert, und dann die Offsets des Bildlaufeffekts mit dem entsprechenden Wert aktualisieren.

Einige empfohlene Ressourcen

Sie werden diese Ressourcen wahrscheinlich interessant finden, da Sie damit auch Fotogalerien in Ihrem WordPress-Blog erstellen können.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren