Möchten Sie herausfinden, wie Sie mit dem Seitenerstellungs-Plugin auf eine Profilkarte zoomen können? Elementor ?
In diesem neuen Tutorial Elementor, zeigen wir Ihnen, wie Sie einen Zoom-Effekt auf eine Profilkarte anwenden, während der Name des Profils sowie die Symbole für soziale Netzwerke angezeigt werden.
Wenn Sie keine Ahnung haben, worüber wir heute sprechen wollen, laden wir Sie ein, sich das folgende Video anzusehen:
Dann lassen Sie uns zurückgehen, warum wir hier sind.
Um dieses Tutorial abzuschließen, benötigen Sie die Pro-Version von Elementor, da wir benutzerdefinierten CSS-Code verwenden werden, der nur von dieser Version von unterstützt wirdElementor.
Lassen Sie uns einen neuen Abschnitt mit einer 3-Spalten-Struktur erstellen und dann im Bedienfeld die definieren Hauteur von Mindesthöheund dann Mindesthöhe lass uns auf klicken VH und stellen Sie den Schieberegler auf ein 100.
Lassen Sie uns ein Widget hinzufügen Interner Abschnitt in der mittleren Spalte. Das Widget „Interne Sektion“ ist standardmäßig mit 2 Spalten konfiguriert, löschen wir eine davon. Lassen Sie uns den Rest im Panel konfigurieren, indem wir es ändern Hauteur von Mindesthöhe und Mindesthöhe Lassen Sie uns den Cursor auf setzen 400.
In der Registerkarte Design, ändern wir die Hintergrundüberlagerung. Klicken Sie auf klassisch auf die Art des Hintergrunds, und wählen Sie ein Bild aus der Bibliothek und in den Bildeinstellungen aus Zentriert Zentriert auf Position Abdeckung auf Größe. Opazität am 1. und
Im Abschnitt Bordures klicken % und eintreten 4 für alle Bordsteinradien.
Stellen Sie den Schieberegler unter Anzahl der Kästchen auf ein 0 von Horizontale, Um 70 von Vertikale, Um 63 von Flou, Um -60 von Diffusor. Sie sollten einen schönen Schatteneffekt unter Ihrem Bild sehen.
in interner Abschnitt schieben Titel-Widget. Geben Sie als Titel Steve Jobs ein, wählen Sie im Reiter Stil die Farbe Weiß aus #FFFFFF. Wählen Sie in der Typografie die Größe aus 20.
Wählen Sie dann die Spalte des Widgets „Interner Abschnitt“ und auf der Registerkarte „Stil“ die Art der Umrandung aus, indem Sie auf „Durchgehend“, alle Breiten auf 1 und die Farben auf „#FFFFFF“ klicken.
In der Registerkarte fortgeschritten, ändern Sie die Ränder in 15 und Innenränder auf 20.
Fügen Sie nun die Social-Media-Symbole ein, indem Sie das Widget „Social-Media-Symbole“ in den Abschnitt „Intern“ ziehen.
Bearbeiten Sie Social-Media-Links auf der Registerkarte Inhalt indem Sie auf „Jedes soziale Netzwerk“ klicken. Wenn Sie weitere soziale Netzwerke hinzufügen möchten, klicken Sie auf die Schaltfläche Hinzufügener ein Element
Klicken Sie im Symbolfeld auf Symbolbibliothek und geben Sie in der Suchleiste die Anfangsbuchstaben Ihres sozialen Netzwerks ein. Sobald Sie es gefunden haben, wählen Sie es aus und klicken Sie auf die Schaltfläche Einfügen.
Gehen Sie dann zur Registerkarte Designim Abschnitt Symbol, ändern Sie die Farbe in personnalisé.
Lesen Sie auch unseren Leitfaden weiter; So fügen Sie eine Paginierung mit Elementor hinzu
auf Hauptfarbe, Transparenz auf Minimum setzen.
auf Sekundäre Farbe, wählen Sie die Farbe aus #FFFFFF. Geben Sie bei Größe ein 20, Interne Marge an 0.4.
Klicken Sie nun auf die Registerkarte fortgeschritten, und im Abschnitt PositionierungKlicken Sie auf personnalisé. auf benutzerdefinierte Breite, eingeben 0.
entdecken Sie auch So verwenden Sie den Farbwähler mit Elementor
auf Position, wählen Sie absolute, auf Schicht 15Auf Vertikale Ausrichtung choisir Geringund Verschiebung von 20.
Wählen Sie erneut die aus Interner Abschnitt und in der Registerkarte fortgeschrittenim Abschnitt Benutzerdefinierte CSS (Wenn Sie diesen Abschnitt nicht haben, aktualisieren Sie schnell auf die Pro-Version von Elementor, um fortzufahren.)
Kopieren Sie den folgenden Code und fügen Sie ihn in diesen Abschnitt ein:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}A priori sollten Sie nicht viel sehen, aber wenn Sie mit der Maus über das Bild fahren, sollten Sie sehen, dass ein Zoom auf das Bild angewendet wird.
Kopieren Sie nun den folgenden Code und fügen Sie ihn nach dem vorherigen Code ein, um bestimmte Elemente der Spalte anzuzeigen oder auszublenden:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Sobald Sie jetzt mit der Maus über das Bild fahren, wird der Zoom auf das Bild angewendet, und die Namen und Symbole sozialer Netzwerke werden angezeigt.
Lassen Sie uns diese Spalte 2 Mal duplizieren und die anderen 2 Spalten löschen.
Ändern Sie das Hintergrundbild von internen Abschnitten sowie den Namen und die Links von sozialen Netzwerken.
Los geht's, Sie haben diese Aufgabe gerade einfach erledigt. Sehen Sie sich einfach Ihre Tablet- und Smartphone-Arbeit an und versuchen Sie, die Ränder so zu ändern, dass sie zu jedem Gerät passen.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie einen Zoom-Effekt auf eine Profilkarte anwenden. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen 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.
...
