Möchten Sie lernen, wie Sie eine Karte mit Portfolio-Effekt erstellen? In diesem neuen Tutorial zeigen wir Ihnen, wie das geht Elementor.
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.
Lesen Sie auch: So zeigen Sie mit Elementor Text über einem Bild an
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 die mittlere Spalte auswählen und in dieser Spalte die ablegen Internes Bereichs-Widget. Das Widget „Interner Abschnitt“ ist standardmäßig mit 2 Spalten konfiguriert. Lassen Sie uns das Widget unter den 2 Spalten ablegen Titel mit dem Titel Restaurant, wählen H4 für das HTML-Tag und Center zum Ausrichten.
In der Registerkarte fortgeschritten des Titel-Widgets, treten wir ein 30 für eine Oberer Rand
Wählen wir noch einmal unsere interne Sektion. Lassen Sie uns im Bedienfeld seine ändern Hauteur von Mindesthöhe und Mindesthöhe Lassen Sie uns den Cursor auf setzen 380. Löschen wir dann die rechte oder linke Spalte des internen Abschnitts
Lassen wir es fallen Bild-Widget im internen Bereich und fügen Sie ein Bild aus unserer Bibliothek ein. wählen wir aus Ganz befolgen für Bildgröße et Center befolgen für Ausrichtung.
NB: Wenn Sie vollständige Seiten wie unsere haben möchten, laden wir Sie ein, die Seiten mit Hilfe der Chrome-Erweiterung GoFullPage zu erfassen, aber Sie können auch eine andere verwenden.
Entdecken Sie auch: So erstellen Sie eine Bildergalerie mit Elementor
Dann im Tab Design, klicke auf PX de Breite, stellen wir den Schieberegler auf ein 260 und die Behandlungsräume. Grenzstrahlen von 10
Als nächstes ändern wir den Box-Schatten, indem wir die Unschärfe auf 40 und die Streuung auf -10 ändern.
Auf der Registerkarte Erweitert im Abschnitt Positionierung, wählen absolute für eine Position, Horizontale Ausrichtung von Linkisch, die Décalage von 0, die Vertikale Ausrichtung von Gering.
Lassen Sie uns unser Bild-Widget zweimal duplizieren. Unweigerlich werden sie alle überlagert. Lassen Sie uns den Navigator aufrufen, damit wir auf die anderen Widgets zugreifen können, die vom ersten verdeckt werden.
Lassen Sie uns das Bild des zweiten Widgets und in seiner Registerkarte ersetzen fortgeschritten, ändern wir sie untere Ränder et Linkisch beim Eintreten 30 für jeden. Sie sehen jetzt eine leichte Verzögerung,
Machen Sie dasselbe für das dritte Bild-Widget, wenden Sie jedoch Ränder von an 60 für den unteren und linken Rand. Sie sollten nun einen Überblick über alle 3 Bild-Widgets haben.
Wählen wir unser internes Abschnitt-Widget aus und gehen Sie zu dessen Registerkarte fortgeschritten und in der Sektion Benutzerdefinierte CSS, kopieren Sie das folgende Code-Snippet und fügen Sie es ein:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Wenn Sie diesen Abschnitt nicht haben, haben Sie die Pro-Version nicht, wenn Sie fortfahren möchten, müssen Sie Ihre Version aktualisieren.)
Wenn Sie jetzt mit der Maus über unsere Karte fahren, haben Sie eine Zoom-Animation
Wählen wir unser erstes Bild-Widget (das unterste) und in seiner Registerkarte fortgeschritten, greifen wir zu Front-img befolgen für CSS-Klassen.
Geben Sie für das zweite Bild-Widget Folgendes ein mittleres Bild für CSS-Klassen.
Geben Sie für das dritte Bild-Widget Folgendes ein letztes Bild für CSS-Klassen.
Siehe auch: So erstellen Sie mit Elementor eine Bildergalerie mit Registerkarten
Wenn wir jetzt mit der Maus über unsere Kolumne fahren, sehen wir eine großartige Animation davon Inhalt unseres internen Bereichs.
Lassen Sie uns unsere Seite im Tablet-Modus anzeigen. Wir werden sehen, dass die Bilder nicht korrekt angezeigt werden.
Wählen Sie das erste Bild-Widget auf der Registerkarte Stil aus, ändern Sie die Breite, indem Sie auf PC klicken und dann 150 als Breite eingeben. Machen wir dasselbe mit den anderen 2 Bild-Widgets.
Wählen wir in seinem Abschnitt unseren internen Abschnitt aus Inhalt, ändern wir die Mindesthöhe von 225.
Lassen Sie uns unsere Seite auch im Smartphone-Modus anzeigen, a priori stellt dies kein Problem dar. Aber wenn es welche gibt, wählen wir in seinem Abschnitt unseren internen Abschnitt aus Inhalt, ändern wir die Mindesthöhe.
Jetzt duplizieren wir unsere mittlere Spalte zweimal und löschen dann die beiden anderen leeren Spalten.
Lassen Sie uns die Titel dieser Spalten ändern und dann die Bilder ändern
Sie müssen einen großartigen Abschnitt haben, von dem hier die Ergebnisse sind:
Los geht's, Sie haben diese Aufgabe gerade einfach erledigt.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
Da ist es ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie eine Karte mit dem Effekt eines Portfolios erstellen. 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.
...
