Springe zum Hauptinhalt

Wie man Text auf einem WooCommerce Produkt auf Divi hinzufügt

Divi: das am einfachsten zu verwendende WordPress-Theme

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. [Empfohlen]

In einem vorherigen Tutorial haben wir Du hast Divi vorgestellt. Für diejenigen, die nicht wissen, ist Divi ein Premium-WordPress-Theme, das vom Team entworfen wurde Elegant Themes das verschiedene Dienste für WordPress und Design Plugins und Themes anbietet.

Divi ist ein ansprechendes Thema und das letztere ist mit mehreren anderen Plugins kompatibel, unter anderem mit WooCommerce. Heute zeigen wir Ihnen, wie Sie Ihren WooCommerce-Produkten eine andere Animation verleihen können.

Manchmal ist der Stil von WooCommerce etwas unpassend, besonders wenn Ihr CSS-Stil etwas anders ist. Dieses Tutorial, das ein bisschen technisch sein wird (ein bisschen CSS und sonst nichts), können Sie dies beheben.

Andere Tutorials zum Thema Divi

Lassen Sie uns beginnen.

So fügen Sie einem Woocommerce-Produkt ein Bild hinzu

Ändern eines Symbols für Text mit der Maus über

Wenn Sie WooCommerce mit Divi verwenden und mit der Maus über ein Produkt fahren, wird standardmäßig ein kleines '+' Symbol angezeigt, bei dem es sich um eine Schriftart handelt (Make-Symbol) von Divi vorgeschlagen und wie folgt:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Standard-Woocommerce-Symbol

Es ist wirklich einfach, dies in den Einstellungen in ein anderes Symbol zu ändern. Wenn Sie jedoch Text hinzufügen möchten, ist das eine andere Sache? Ich werde Ihnen zeigen, wie Sie dies mit den heutigen CSS-Snippets erreichen können, und ich werde auch optionalen Code einfügen, der Ihrer Site hinzugefügt werden kann.

Folgendes werden wir einmal fertigstellen:

Endergebnis der Wordpress-Produktänderung

Warum überhaupt Text anstelle eines Symbols verwenden?

Ich kann mir einige Gründe vorstellen, die Sie dazu bringen können:

So definieren Sie, wie Ihr Shop einzigartig aussehen soll: Alles, was Sie tun können, um Ihre Divi / WooCommerce-Site von einer anderen zu unterscheiden, ist immer eine gute Sache.

Die Verwendung eines Wortes wie "Anzeigen" oder "Kaufen" kann zu mehr Conversion führen: Jeder muss das tun, was für seine Website am besten ist, und Sie können die integrierten A / B-Tests von Divi nutzen, um dabei zu helfen.

Quelle der Inspiration

Ich habe kürzlich eine Website mit Text zum Hover-Produkt durchsucht. Ich habe es natürlich von anderen E-Commerce-Websites gesehen, die eher Wörter als Symbole auf dem schwebenden Produkt haben, daher war dies kein neues Konzept. Ich hatte dies noch nie bei einem Divi-Thema tun müssen, und als ich das sah, stellte ich mich einer Herausforderung und erkannte, dass es in der Tat einfach ist, dies umzusetzen. Da nur sehr wenig Code erforderlich ist, können Sie die Leistung Ihres Blogs mit Sicherheit nicht beeinträchtigen.

Beispielwebsite

Implementieren Sie den Mauszeiger über den Text

Schritt 1: Die Farbüberlagerung

Wir werden zuerst die Farbe der Überlagerung beim Schweben ändern. Dies ist auf Divi extrem einfach. Gehen Sie in Ihrem Geschäftsmodul zu " erweiterte erweiterte Design-Parameter Und wähle deine Farbe.

Auswahl der Divifarben

Schritt 2: CSS hinzufügen

Der folgende CSS-Code in " Themenoptionen> Benutzerdefiniertes CSS Oder auf dem Stylesheet Ihres Kinderthemas.

.woocommerce .et_overlay: before {left: 0; ganz links: 0; Inhalt: 'Ansicht'; / *** Your Text Here *** / Schriftfamilie: 'Source Without Pro', Arial! / *** Wähle deine Schriftart *** / text-transform: uppercase; Schriftgröße: 24px; Farbe: #fff; / *** Stellen Sie die Textfarbe ein *** / font-weight: fett; Textausrichtung: Mitte; Breite: 100%; Polsterung: 5px 0; }

Wenn Ihre Produkte eher rund sein sollen, können Sie diesen optionalen Code hinzufügen:

.woocommerce ul.products li.product a img, .et_overlay {border-radius: 50%; }

Das ist es!

Jetzt können Sie in Ihrem Geschäft nachsehen, wie Ihre Änderungen berücksichtigt werden.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 5

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
10 Aktien
Aktie6
tweet
Registrieren4