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

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

Manchmal ist der Stil von WooCommerce kann etwas unzureichend sein, insbesondere wenn Ihr CSS-Stil etwas anders ist. Dieses Tutorial, das ein wenig 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:

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 durchsucht, auf der Text über das Produkt schwebte. Ich habe natürlich andere E-Commerce-Websites gesehen, bei denen Wörter statt Symbole über dem Produkt schweben, also war dies kein neues Konzept. Ich hatte dies noch nie bei einem tun müssen Divi-Thema, und als ich das sah, stellte ich mich einer Herausforderung und stellte fest, dass es in der Tat einfach ist, dies umzusetzen. Da nur sehr wenig Code erforderlich ist, wird die Leistung Ihres Blogs mit Sicherheit nicht beeinträchtigt.

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.

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "erweitert" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI-THEMA HERUNTERLADEN [/ vcex_button] [/ width_column] [»vc_col] vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700 "style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andere Divi Tutorials