Wollten Sie schon immer mal eine Produktkarte mit präsentieren Elementor ?
Das zeigen wir Ihnen in diesem Tutorial. Um eine ziemlich genaue Vorstellung davon zu bekommen, worüber wir heute sprechen werden, laden wir Sie ein, sich das folgende Video anzusehen:
In diesem Tutorial geht es darum, Produkte zu präsentieren, bei denen es sich um Schuhe handelt, indem ihre Größen, Farben und der jeweilige Kauf-Button hervorgehoben werden. Wenn Sie den Mauszeiger über jede der Karten bewegen, werden diese Informationen angezeigt. Hier ist eine kurze Zusammenfassung dessen, was wir tun werden.
Um diesem Tutorial zu folgen, laden wir Sie ein, Bilder von Schuhen zu finden und zu haben eine Pro-Version von Elementor. Wenn Sie es noch nicht haben, klicken Sie auf diesen Link, um es zu erhalten.
Aber kommen wir zurück zu dem, wofür wir hier sind.
Lassen Sie uns eine Seite erstellen und mit ändern Elementor.
In diesem wählen wir eine Struktur mit 3 Spalten. Lass es uns klären hauteur von Mindesthöhe , die minimale Höhe auf VH und stellen Sie den Cursor auf 100
Wählen Sie auf der Registerkarte Stil die Hintergrundfarbe für #130640
Fügen Sie in der mittleren Spalte a . ein Bild-Widget indem Sie ein Schuhbild aus Ihrer Bibliothek auswählen.
Gehen Sie zur Registerkarte Stil und legen Sie in der Bildeigenschaft die Breite auf 80 . fest
Dann ziehen Sie a Titel-Widget und geben Sie den Titel ein Nike Schuhe - Dies ist ein Beispiel, es könnte eine ganz andere Marke sein -
Lesen Sie auch: So optimieren Sie Ihr Website-Layout mit Elementor
Setzen Sie das HTML-Tag auf H3 und zentrieren Sie die Ausrichtung
Gehen Sie zur Registerkarte Stil und ändern Sie die Textfarbe in weiße Farbe
Ändere auch die Typografie
Dann ziehen Sie a Widget für den inneren Abschnitt unter dem Titel-Widget die du oben eingefügt hast.
Standardmäßig bietet Ihnen dieses Widget 2 Spalten, löschen Sie eine davon. In diesem Widget für den inneren Abschnitt, Einfügen a Titel-Widget.
Gib es als Titel Schnitt : und setze das HTML-Tag auf Spannweite.
Ändern Sie auf der Registerkarte Stil die Titelfarbe, Größe auf 15 und Fett auf 300
Setzen Sie auf der Registerkarte Erweitert nur den rechten Rand auf 5 und in der Eigenschaft Positionierung wählen Inline (automatisch).
Fügen Sie im gleichen inneren Abschnitt ein Schaltflächen-Widget mit für Text 8 und dem Symbolabstand auf 0 hinzu.
Lesen Sie auch: So scrollen Sie mit Elementor durch ein langes Portfolio-Bild
Ändern Sie auf der Registerkarte „Stil“ die Textfarbe bzw. die Hintergrundfarbe der Schaltfläche in „Schwarz“ und „Weiß“ und geben Sie im Feld „Innenrand“ jeweils 6-10-6-10 für die Innenränder oben-rechts-unten – links ein.
Legen Sie auf der Registerkarte Erweitert nur den linken Rand auf 5 fest, und wählen Sie in der Eigenschaft Positionierung die Option Inline (Auto).
Duplizieren Sie diesen Button 3 mal und ändern Sie den Text der letzten 3 Buttons auf 9,10,11 - Sie können dies auch mit den Buchstaben S, M, L, XL, XXL tun.
Klicken Sie auf den Abschnitt bearbeiten und stellen Sie die horizontale Ausrichtung auf Mitte
Dann duplizieren Sie diesen internen Abschnitt - Innerer Abschnitt - und ändern Sie die Größe nach Farbe, entfernen Sie 3 Schaltflächen und löschen Sie auf der einen, der übrig bleibt, den Schaltflächentext.
In der Registerkarte Inhalt Wählen Sie neben der Schaltfläche das Symbol „Kreis“ aus der Symbolbibliothek aus und klicken Sie auf „Einfügen“, um es der Schaltfläche hinzuzufügen.
Geben Sie auf der Registerkarte Stil der Typografie die Größe 24 und verknüpfen Sie die Innenränder und geben Sie 0 ein. Stellen Sie in der Hintergrundfarbe die Transparenz auf min und dann können Sie die Farbe des Textes beispielsweise auf Blau ändern.
Dann duplizieren Sie diese Schaltfläche dreimal und ändern Sie die Farben der anderen beiden in Gelb und Rot. Klicken Sie dann auf den inneren Abschnitt, um ihn zu bearbeiten, und setzen Sie auf der Registerkarte Erweitert die oberen und unteren Ränder auf -3 und 5.
Jetzt fügen wir ein Button-Widget unter dem zweiten Inner Section Widget hinzu, geben Sie es als Text ein Jetzt kaufen und Ausrichtung zur Mitte. Setzen Sie auf der Registerkarte Stil die Schaltfläche auf Weiß und den Schaltflächentext auf Schwarz, und legen Sie dann alle Randradien auf 20 fest.
Wählen Sie die Hauptspalte aus, an der wir gearbeitet haben, und legen Sie die Ausrichtung fest Vertikale von Mitte, wählen Sie auf der Registerkarte Stil den Hintergrundtyp als Degradieren und als Typ auswählen Radial Stellen Sie dann auf der Hauptfarbe die Transparenz und die Position auf 94. Stellen Sie für die zweite Farbe die Position auf ein 77 und der Radius der Kanten über 10.
Legen Sie auf der Registerkarte Erweitert die Ränder auf 0-35-0-35 und die inneren Ränder auf 50-20-50-20 fest.
Sie können das Panel dann ausblenden, um zu sehen, wie Ihre Arbeit aussieht. Sie werden sehen, dass Ihre Karte sehr schön ist, aber wir werden sie zum Leben erwecken, indem wir bestimmte Abschnitte animieren. Und dafür werden wir die Größe, die Farbe und den Kaufen-Button animieren.
Siehe auch: So ändern Sie die Kopfzeile beim Seitenscrollen auf Elementor
Lassen Sie uns zuerst den ersten internen Abschnitt, der die Größe des Produkts anzeigt, und auf der Registerkarte Erweitert definieren Einblenden als Bewegungseffekt - Einstiegsanimation und Animationsverzögerung an 300.
Machen wir dasselbe mit dem internen Abschnitt, der die Farben anzeigt, jedoch mit einer Animationsverzögerung von 800. Für die Schaltfläche "Kaufen" beträgt die Verzögerung 1000
Jetzt werden wir die Klasse zuweisen zuerst verstecken Innerer Abschnitt und Buy-Button. Wählen Sie den ersten Inneren Abschnitt, in der Registerkarte Erweitert und geben Sie in der Eigenschaft Erweitert hide-first im Feld CSS-Klassen ein. Machen Sie dasselbe für den anderen inneren Abschnitt und für den Kauf-Button.
Wir werden daher CSS-Code hinzufügen, der die gesamte Spalte animiert. Kopieren Sie den folgenden Code:
Selektor {
Höhe: 400px;
Anzeige: Flex;
}
/ * CSS für Anzeigen / Ausblenden * /
Selektor .hide-first {
display: none;
}
Selektor: hover .hide-first {
Bildschirmsperre;
}
/ * Bildtransformation * /
Auswahlbild {
Übergang: leicht .5s;
}
Selektor: hover img {
transformieren: übersetzen (-20px, -40px) drehen (-25deg) skalieren (1.4);
}
/ * Mobile Übersicht * /
@media (max-Breite: 767px) {
Selektor: hover img {
transformieren: übersetzen (-20px, 0px) drehen (-10deg) skalieren (1);
}
Selektor {
Rand: 50px 10px;
}
}
Wählen Sie die Spalte aus, um sie zu ändern, gehen Sie zur Registerkarte Erweitert und fügen Sie diesen Code in das Feld Benutzerdefiniertes CSS ein.
Hinweis: Sie sollten wissen, dass diese Option nur verfügbar ist, wenn Sie die Pro-Version von habenElementor.
Wenn dies erledigt ist, wird Ihre Karte beim Mouseover animiert, während standardmäßig die Größen, Farben und die Schaltfläche zum Kaufen ausgeblendet werden.
Bezüglich der Erklärung des Codes gibt der Kommentarteil einen Überblick. Aber wenn Sie die Werte ändern, werden Sie verstehen, wozu jede Anweisung dient.
Siehe auch: So fügen Sie zwei Schaltflächen nebeneinander in derselben Spalte hinzu mit Elementor
Wenn alles normal funktioniert, duplizieren Sie diese Spalte zweimal und löschen Sie die anderen leeren Spalten.
Sie müssen lediglich die Bilder und Titel der anderen Blöcke ersetzen und schließlich eine Vorschau Ihrer Arbeit anzeigen.
Sie haben gerade eine schöne Produktkarte erstellt.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
So ! Das war's für dieses Tutorial, das Ihnen zeigt, wie Sie mit Elementor eine Produktkarte 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.
...
