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 600.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 es beheben.

Andere Tutorials zum Thema Divi

Lassen Sie uns beginnen.

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

Wenn Sie WooCommerce mit Divi verwenden und den Mauszeiger über ein Produkt halten, wird standardmäßig ein kleines "+" angezeigt, das eine Schriftart ist (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]

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

Folgendes werden wir einmal fertigstellen:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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-Website von 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 durchsucht, auf der sich Text über das schwebende Produkt befand. Ich habe natürlich auch andere E-Commerce-Sites gesehen, auf denen eher Wörter als Symbole auf dem Produkt zu sehen sind. Es war also kein neues Konzept. Ich musste das nie für ein Divi-Thema tun, 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 benötigt wird, werden Sie die Leistung Ihres Blogs nicht beeinträchtigen.

Implementieren Sie den Mauszeiger über den Text

Schritt 1: Die Farbüberlagerung

Wir werden zuerst die Farbe der stationären Überlagerung ändern. Dies ist mit Divi extrem einfach zu bewerkstelligen. In Ihrem Shop-Modul Gehen Sie zur Registerkarte « erweiterte erweiterte Design-Parameter Und wähle deine Farbe.

Schritt 2: CSS hinzufügen

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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

.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