Möchten Sie einen Teammitgliederbereich mit erstellen Elementor ?
Nun, Sie sind an der richtigen Stelle. Heute zeigen wir Ihnen, wie Sie mit dem Builder-Seite Elementor.
Um dieses Tutorial abzuschließen, benötigen Sie ein Elementor Pro-Version, weil wir benutzerdefinierten CSS-Code verwenden was nur mit der Pro-Version von möglich istElementor. Wenn Sie dies noch nicht getan haben, aktualisieren Sie es.
Und um zu verstehen, worüber wir in diesem Tutorial sprechen, laden wir Sie ein, sich das folgende Video anzusehen:
Erstellen Sie zunächst eine Seite und bearbeiten Sie sie mit Elementor.
Fügen Sie dann eine Struktur mit 3 Spalten in letzterem und dann im Panel unter der Registerkarte ein Inhalt, stellen Sie „Höhe“ auf „Min. Höhe“ ein, wählen Sie „VH Min. Höhe“ und stellen Sie dann den Schieberegler auf „100“.
Wählen wir die mittlere Spalte aus, um sie zu bearbeiten, und gehen Sie zur Registerkarte Erweitert. Lassen Sie uns alle internen Ränder auf 30 setzen.
Fügen wir ein Widget „Innerer Abschnitt“ in diese Spalte ein und löschen dann eine der im Inneren Abschnitt enthaltenen Spalten und anschließend im Bedienfeld unter der Registerkarte Inhalt, stellen wir auch die Höhe auf „Min. Höhe“ und den Schieberegler auf 450 Pixel ein.
Auf derVertikale Ausrichtung wählen Gering und Überlauf wählen Maske.
In der Registerkarte Design Ändern Sie den Hintergrund in klassisch und wählen Sie ein Bild aus Ihrer Bibliothek aus.
Lesen Sie unseren Leitfaden zu: So erstellen Sie eine Produktkarte mit Elementor
auf Position wählen Überlegen zentriert, Anhangsdatei von Scrolling, Sag es noch einmal von Nicht wiederholt et Größe von Abdeckung
In Grenzen definieren die Bordures von 12.
Lassen Sie uns Schatteneffekte hinzufügen. Lassen Sie uns in Shade of Box ändern Vertikale von 22, Flou von 40 et Diffuser von -10.
Lassen Sie uns ein hinzufügen Titel-Widget im Bereich Intern und geben Sie unserem Mitglied einen Namen und Centrons das Widget.
Lesen Sie auch: So ändern Sie die Kopfzeile beim Seitenscrollen mit Elementor
In der Registerkarte Design, Lass es uns ändern Textfarbe und Typografie wählen 22 für die Schriftgröße und 500 für eine Fett, Transformation von Großbuchstaben et Buchstaben-Abstand von 1.2
Dann duplizieren wir die Titel-Widget und ändern Sie den Titel des zweiten Widgets und wählen Sie in der Typografie 15 für die Schriftgröße und 500 für die Breite, Transformation an Defekt und Buchstabenabstand ein 1.2
Gehen wir zur Registerkarte fortgeschritten und definiere die Oberer Rand von -15. Lassen Sie uns das Social Media Icons-Widget zu unserem Inner-Bereich hinzufügen.
Gehen wir zur Registerkarte Design, ändern Sie die Farbe in Benutzerdefiniert, machen Sie die Primärfarbe transparent und stellen Sie die inneren Ränder auf 0.30 Zoll ein
In der Registerkarte fortgeschritten, Definieren Sie die Ränder High auf -15 und Low auf 20
Wählen Sie dann die Spalte des Inneren Abschnitts aus, um sie zu ändern, und klicken Sie auf die Registerkarte Design Art auswählen klassisch und auf Farbe greifen wir zu # FFFFFF28.
Lesen Sie auch: So scrollen Sie mit Elementor durch ein langes Portfolio-Bild
Wählen Sie dann die Spalte des Inneren Abschnitts aus, um sie zu ändern, und klicken Sie auf die Registerkarte fortgeschritten auf dem Gebiet CSS-Klassen, greifen wir zu Mitglieder-Info
Dann wählen Sie Innerer Abschnitt dann in der Registerkarte fortgeschritten auf dem Gebiet Benutzerdefinierte CSS, fügen Sie den folgenden Code ein:
/ * CSS-Glaseffekt * /
Selektor {
–Höhe: 150px;
–Unten: -150px;
Überlauf: versteckt! wichtig;
}
Selektor .Mitgliederinfo {
Höhe: var (–Höhe);
position: absolute;
Hintergrundfilter: Unschärfe (15px);
unten: 0;
Übergang: 5s Easy-In-Out;
}
Fügen Sie nach dem ersten CSS-Code Folgendes ein:
/ * CSS zum Ein- oder Ausblenden beim Schweben * /
Selektor .Mitgliederinfo {
unten: var (–unten);
}
Selektor: Bewegen Sie den Mauszeiger über .member-info {
unten: 0px;
}
Wenn Sie nun mit der Maus über das Bild fahren, werden Mitgliedsinformationen angezeigt.
Dupliziere die Spalte 2 Mal und lösche die anderen leeren Spalten
Wählen Sie dann den Inneren Abschnitt und ändern Sie das Hintergrundbild in das Bild eines anderen Teammitglieds, ändern Sie deren Namen und Beruf, machen Sie dasselbe mit der anderen Spalte.
Zeigen Sie eine Vorschau Ihrer Arbeit auf Tablets und Mobilgeräten an und verbessern Sie gleichzeitig die Margen und mehr für eine bessere Anzeige.
Und so können Sie einen wunderbaren Bereich für Teammitglieder erstellen
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
So ! Das war's für dieses Tutorial, das Ihnen zeigt, wie Sie einen Teammitgliedsbereich erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, teilen Sie uns dies im commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
