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 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.

Ä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:

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:

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.

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.

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

5 Kommentare

yacht auf 8 August 2019 zu 22 h 58 min

Unterschiedlicher Text pro Produkt? Sie sagen, es zu neuen Produkten hinzuzufügen? wie und wo?
Antworten
Brice Bayle auf 30 Mai 2018 zu 5 h 18 min

Super Artikel, danke für diesen Tipp. Und wenn wir einen anderen Text nach Produkt wünschen, wie?
Antworten
- Thierry Bertrand auf 31 Mai 2018 zu 6 h 12 min
  
  Hallo Brice,
  
  In diesem Fall fügen Sie dem neuen WooCommerce-Produkt einen anderen Text hinzu.
  Antworten
Laura auf 26 April 2018 zu 16 h 48 min

Super !! Danke für diesen Tipp.
Antworten
- Thierry Bertrand auf 26 April 2018 zu 17 h 21 min
  
  von nichts.
  Antworten

Veröffentlichen Sie den Kommentar Annuler la réponse

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

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

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