Springe zum Hauptinhalt

So erstellen Sie mit Divi ein Scrolling-Karussell für ein Teammitglied

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.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]

Wenn Sie Ihre Info-Seite erstellen, möchten Sie wahrscheinlich auch Ihre Teammitglieder vorstellen. Auf diese Weise können Besucher mit den Personen interagieren, die hinter Ihrem Unternehmen stehen. Wenn Sie nach einer Möglichkeit suchen, den Bereich Ihrer Teammitglieder beim Scrollen zu beleben, ist dieses Tutorial möglicherweise für Sie geeignet. Wir erstellen ein Karussell eines Teammitglieds mit automatischem Bildlauf, das sich bewegt, wenn Ihre Besucher die Seite scrollen. 

Demonstration

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Scroll Divi Teammitglied

Beginn der Empfängnis

Einen neuen Abschnitt hinzufügen

Abstand

Fügen Sie zunächst der Seite, an der Sie arbeiten, einen neuen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie benutzerdefinierte Auffüllungen für verschiedene Bildschirmgrößen hinzu.

  • Obere Polsterung: 200px (Schreibtisch), 100px (Tablet und Telefon)
  • Bodenpolsterung: 200px (Schreibtisch), 100px (Tablet und Telefon)
Parameterkonfiguration

Überlauf

Um sicherzustellen, dass in unserem Design keine horizontale Bildlaufleiste angezeigt wird, werden Abschnittsüberläufe auf der Registerkarte "Erweitert" ausgeblendet.

  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt
Überlaufkonfiguration

Zeile 1 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Wählen Sie das Divi-Layout

Sizing

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, wechseln Sie zur Registerkarte Design und ändern Sie die Breite und maximale Breite in den Größeneinstellungen.

  • Breite: 90%
  • Maximale Breite: 1580px
Divi-Linienparameter

Abstand

Wir fügen auch benutzerdefinierte obere und untere Polsterung hinzu.

  • Obere Polsterung: 100px
  • Polsterung unten: 100px
Divi-Konfiguration für Zeilenabstände

Fügen Sie der Spalte einen Textbaustein hinzu

Fügen Sie H2-Inhalte hinzu

Es ist Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul. Geben Sie den H2-Inhalt Ihrer Wahl ein.

Triff das Team

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H2-Texteinstellungen wie folgt:

  • Schriftart Titel 2: Treibsand
  • Schrifttitel 2: halb fett
  • Textfarbe von Punkt 2: # 000000
  • Header 2 Textgröße: 70px (Desktop), 50px (Tablet), 40px (Telefon)
Divi Textabstand

Fügen Sie der Säule ein Trennmodul hinzu

Sichtbarkeit

Fügen Sie dann ein Trennmodul hinzu. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.

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]

  • Trennzeichen anzeigen: Ja
Divi-Trennzeichen anzeigen

Linie

Nehmen Sie dann einige Änderungen an den Leitungseinstellungen vor.

  • Linienfarbe: # edf000
  • Linienstil: solide
  • Linienposition: Oben
Divi Abstand Stil

Sizing

Vervollständigen Sie die Modulparameter, indem Sie die Bemaßungsparameter entsprechend ändern:

  • Teilergewicht: 20px
  • Breite: 11%
  • Ausrichtung des Moduls: links
  • Höhe: 20px
Dimensionierung des Divi-Line-Moduls

Fügen Sie eine Zeile 2 hinzu

Spaltenstruktur

In die nächste Reihe! Verwenden Sie die folgende Spaltenstruktur:

Divi-Spaltenkonfiguration

Sizing

Öffnen Sie die Zeilenparameter und ändern Sie die Größenparameter wie folgt, ohne weitere Module hinzuzufügen:

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 2
  • Breite: 100%
  • Maximale Breite: 100%
Konfiguration der Dachrinnenbreite

Abstand

Fügen Sie dann die linke und rechte Polsterung nur auf den kleineren Bildschirmen hinzu.

  • Linke Polsterung: 5% (nur Tablet und Telefon)
  • Rechte Polsterung: 5% (nur Tablet und Telefon)
Konfiguration des Zeilenabstandsstils

Spaltenparameter (5x)

In den nächsten drei Schritten dieses Tutorials werden wir einige Änderungen an den Spalten vornehmen. Wenden Sie die drei Schritte auf jede der Spalten in Ihrer Zeile an.

Konfiguration der Divi-Parameterleitung

Hintergrund mit Farbverlauf

Fügen Sie zunächst jeder Spalte einen Verlaufshintergrund hinzu.

  • 1-Farbe: rgba (255,255,255,0)
  • 2-Farbe: rgba (0,0,0,0,84)
  • Verlaufstyp: linear
  • Startposition: 25%
  • Endposition: 86%
  • Platzieren Sie den Farbverlauf über dem Hintergrundbild: Ja
Divi hintere Säulenkonfiguration

Hintergrundbild

Laden Sie dann ein Hintergrundbild Ihrer Wahl hoch. Dieses Hintergrundbild stellt jedes Teammitglied dar. Verwenden Sie daher für jede Spalte ein anderes 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]

  • Hintergrundbildgröße: Cover
  • Position des Hintergrundbildes: Mitte
Hintergrundbild der Divi-Spalte hinzufügen

Hauptelement

Vervollständigen Sie die Spalteneinstellungen, indem Sie dem Haupt-Tablet-Element jeder Spalte benutzerdefiniertes CSS hinzufügen. Diese Zeilen CSS-Code helfen uns, die Spalten übereinander auf dem Tablet zu platzieren, anstatt zwei nebeneinander zu haben.

Breite: 100%! wichtig; Rand: 50px 0px 50px 0px! wichtig;
Code CSS Divi Spalte

Fügen Sie der Spalte ein Personenmodul hinzu

Inhalt hinzufügen

Um Informationen über Teammitglieder auszutauschen, verwenden wir ein Personenmodul. Fügen Sie das erste Personenmodul zu Spalte 1 hinzu und verwenden Sie den gewünschten Inhalt.

Personenname divi

Lösche Bild

Löschen Sie dann das Bild. Wir verwenden stattdessen das Hintergrundbild der Spalte.

Divi-Bild entfernen

Hintergrundbild

Wir werden dann eine Bildüberlagerung als Hintergrundbild des Moduls hinzufügen. Sie finden den Ordner, den wir verwenden, indem Sie den Ordner zu Beginn dieses Tutorials herunterladen.

  • Hintergrundbildgröße: Cover
  • Position des Hintergrundbildes: Mitte
Hintergrundkonfiguration des Personenmoduls

Einstellungen für den Titeltext

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Einstellungen für den Titeltext wie folgt:

  • Titelstufe: H3
  • Titelschrift: Treibsand
  • Schriftgröße des Titels: fett
  • Titeltextfarbe: #ffffff
  • Titeltextgröße: 230%
Anpassung des Divi-Modultitels

Body-Text-Einstellungen

Ändern Sie auch die Körpertexteinstellungen.

  • Body Schriftart: Open Sans
  • Körpertextfarbe: #ffffff
  • Körperlinienhöhe: 2,2 em
Divi Körper Anpassung

Positionieren Sie die Texteinstellungen

Nehmen Sie dann einige Änderungen an den Positionstexteinstellungen vor.

  • Schriftposition: Öffnen Sie Sans
  • Positionieren Sie die Textfarbe: # edf000
Divi Position

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie den Abstandseinstellungen benutzerdefinierte Füllwerte hinzufügen.

  • Obere Polsterung: 70%
  • Untere Polsterung: 10%
  • Linke Polsterung: 10%
  • Rechte Polsterung: 10%
Abstand der Divi-Personenmodule

Duplizieren Sie das Personenmodul viermal

Sobald Sie das Personenmodul abgeschlossen haben, können Sie das gesamte Modul viermal klonen.

Platzieren Sie Duplikate in den verbleibenden Spalten

Platzieren Sie doppelte Module in den verbleibenden vier Spalten der Zeile. Stellen Sie sicher, dass Sie auch den Inhalt bearbeiten.

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]

Verwandeln Sie Row in ein Auto Scroll Carousel

Ändern Sie die Größe von Zeile 2

Um diese Zeile in ein Karussell für Teammitglieder mit automatischem Bildlauf zu verwandeln, müssen wir die Zeileneinstellungen erneut öffnen und die Breite und maximale Breite in den Größeneinstellungen ändern.

  • Breite: 180%
  • Maximale Breite: 220% (Schreibtisch), 100% (Tablet und Telefon)
Zeilenabteilungs-Änderungsabstand

Fügen Sie die horizontale Bewegung der Linie 2 hinzu

Vervollständigen Sie die Linieneinstellungen, indem Sie den Einstellungen für den Bildlaufeffekt auf der Registerkarte "Erweitert" eine horizontale Bewegung hinzufügen. Fertig!

  • Horizontale Bewegung aktivieren: Ja
  • Startoffset:
    • Büro: 2,5
    • Tablet und Telefon: 0
  • Durchschnittlicher Offset: 0 (bei 40%)
  • Endversatz:
    • Büro: -25 (bei 62%)
    • Tablet und Telefon: 0
  • Bewegungseffekt auslösen: Mitte des Elements
Konfiguration der Divi-Scrolling-Animation

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Büro

Scroll Divi Teammitglied

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie mit den integrierten Bildlaufeffekten von Divi kreativ werden können. Insbesondere haben wir ein wunderschönes Karussell für Teammitglieder mit automatischem Bildlauf neu erstellt. Wenn Besucher die Seite nach unten scrollen, wird ein weiterer Teil des Karussells angezeigt.

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