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.

Möchten Sie mit Elementor einen Teammitgliederbereich erstellen?

Nun, Sie sind an der richtigen Stelle. Heute zeigen wir Ihnen, wie Sie mit dem Elementor Builder-Seite.

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 Elementor möglich ist. Falls noch nicht geschehen, 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 3-Spalten-Struktur ein, setzen Sie dann im Panel unter der Registerkarte Inhalt die Höhe auf Min. Höhe und wählen Sie VH Minimale 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.

Lassen Sie uns ein Widget für den inneren Abschnitt in diese Spalte einfügen, dann eine der Spalten entfernen, die im inneren Abschnitt enthalten sind, und dann im Bedienfeld unter der Registerkarte Inhalt auch die Höhe auf Min Height und den Schieberegler auf 450px einstellen.

Erstellen Sie einen Teammitgliedsbereich mit Elementor

Auf derVertikale Ausrichtung wählen Gering und Überlauf wählen Maske.

In der Registerkarte Style Ä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

Erstellen Sie einen Teammitgliedsbereich mit Elementor

In Grenzen definieren die Bordures von 12.

Lassen Sie uns Schatteneffekte hinzufügen. Lassen Sie uns in Shade of Box ändern Vertikal 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 Style, 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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

Erstellen Sie einen Teammitgliedsbereich mit Elementor

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

Erstellen Sie einen Teammitgliedsbereich mit Elementor

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.

Erstellen Sie einen Teammitgliedsbereich mit Elementor

Gehen wir zur Registerkarte Style, ä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

Erstellen Sie einen Teammitgliedsbereich mit Elementor

Wählen Sie dann die Spalte des Inneren Abschnitts aus, um sie zu ändern, und klicken Sie auf die Registerkarte Style 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

Erstellen Sie einen Teammitgliedsbereich mit Elementor

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;

}

Erstellen Sie einen Teammitgliedsbereich mit Elementor

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!

Fazit

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.

...

0 Aktien
Aktie
tweet
Registrieren