Wenn Sie Ihre Info-Seite erstellen, möchten Sie wahrscheinlich auch Ihre Teammitglieder dort vorstellen. Damit gestatten Sie dem Besucher interagieren Sie mit den Menschen hinter Ihrem Unternehmen. Wenn Sie nach einer Möglichkeit suchen, den Bereich Ihrer Teammitglieder beim Scrollen zu animieren, finden Sie dieses Tutorial möglicherweise hilfreich. Wir werden ein automatisch scrollendes Karussell für Teammitglieder erstellen, das sich bewegt, wenn Sie es wünschen Besucher Scrollen Sie die Seite.
Demonstration
Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.
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)
Ü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
Zeile 1 hinzufügen
Spaltenstruktur
Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:
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
Abstand
Wir fügen auch benutzerdefinierte obere und untere Polsterung hinzu.
- Obere Polsterung: 100px
- Polsterung unten: 100px
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 es ein Inhalt H2 Ihrer Wahl.
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)
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.
- Trennzeichen anzeigen: Ja
Linie
Nehmen Sie dann einige Änderungen an den Leitungseinstellungen vor.
- Linienfarbe: # edf000
- Linienstil: solide
- Linienposition: Oben
Sizing
Vervollständigen Sie die Modulparameter, indem Sie die Bemaßungsparameter entsprechend ändern:
- Teilergewicht: 20px
- Breite: 11%
- Ausrichtung des Moduls: links
- Höhe: 20px
Fügen Sie eine Zeile 2 hinzu
Spaltenstruktur
In die nächste Reihe! Verwenden Sie die folgende Spaltenstruktur:
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%
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)
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.
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
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.
- Hintergrundbildgröße: Cover
- Position des Hintergrundbildes: Mitte
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;
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 das Inhalt Ihrer Wahl.
Lösche Bild
Löschen Sie dann das Bild. Wir verwenden stattdessen das Hintergrundbild der Spalte.
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
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%
Body-Text-Einstellungen
Ändern Sie auch die Körpertexteinstellungen.
- Body Schriftart: Open Sans
- Körpertextfarbe: #ffffff
- Körperlinienhöhe: 2,2 em
Positionieren Sie die Texteinstellungen
Nehmen Sie dann einige Änderungen an den Positionstexteinstellungen vor.
- Schriftposition: Öffnen Sie Sans
- Positionieren Sie die Textfarbe: # edf000
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%
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 die ändern Inhalt.
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)
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
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Büro
Abschließende Gedanken
In diesem Tutorial haben wir Ihnen gezeigt, wie Sie mit den integrierten Bildlaufeffekten von kreativ werden können Divi. Konkret haben wir ein wunderschönes, automatisch scrollendes Karussell für Teammitglieder nachgebaut. Wenn das Besucher Wenn Sie die Seite scrollen, erscheint ein weiterer Teil des Karussells.
