В предишен урок, ние ти представи Divi. За тези, които не знаят, Divi е a WordPress тема премия, проектирана от екипа Елегант Палитри която предлага различни услуги за WordPress и дизайнерски приставки и теми.

Divi е отзивчива тема и последната е съвместима с няколко други плъгина сред другите, които имаме WooCommerce. Днес ще ви покажем как да придадете различна анимация на вашите продукти WooCommerce.

Понякога стилът на WooCommerce може да е малко неадекватен, особено ако вашият CSS стил е малко по-различен. Този урок, който ще бъде малко технически (малко CSS и нищо друго), ще ви позволи да отстраните това.

Други уроци по тема Divi

Нека да започнем.

Как да добавите изображение към продукт на woocommerce

Промяна на икона за текст над мишката

По подразбиране, когато използвате WooCommerce с Divi и задържите курсора на мишката върху продукт, ще видите малка икона „+“, която е шрифт (грим икона), предложена от Divi и която е следната:

Наистина е лесно да промените това на различна икона в настройките, но ако искате да добавите малко текст, това друго ли е? Ще ви покажа как да постигнете това с днешните CSS фрагменти и ще включа и незадължителен код, който да добавите към вашия сайт.

Ето какво ще свършим веднъж:

Краен резултат от модификация на продукта на Wordpress

Защо така или иначе да използвате текст вместо икона?

Мога да измисля някои причини, които могат да ви накарат да направите това:

За да определите, придайте уникален вид на вашия магазин: Всичко, което можете да направите, за да различите вашия сайт Divi / WooCommerce от друг, винаги е добро нещо.

Използването на дума като „Преглед“ или „Купуване“ може да доведе до повече конверсия: Всеки трябва да направи най-доброто за своя уебсайт и можете да се възползвате от интегрираното A / B тестване на Divi, за да помогнете за това.

Източник на вдъхновение

Наскоро разглеждах сайт, който имаше задържащ се текст за продукта. Разбира се, виждал съм и други сайтове за електронна търговия, които имат думи, а не икони върху продукта, който се задържа над курсора, така че това не е нова концепция. Никога не ми се е налагало да правя това на Divi тема и когато го видях, си поставих предизвикателство и осъзнах, че всъщност е лесно за изпълнение. С много малко необходим код, можете да сте сигурни, че това няма да повлияе на производителността на вашия блог.

Изпълнение на мишката върху текст

Стъпка 1: Цветното наслагване

Първо ще променим цвета на наслагването при нанасяне на курсора на мишката. Това е изключително лесно да се направи на Divi. В модула на вашия магазин отидете на „ модерни разширени параметри на дизайна И изберете цвета си.

Стъпка 2: Добавяне на CSS

Следният CSS код в „ Опции на темата> Персонализиран CSS Или на стила на вашата детска тема.

.woocommerce .et_overlay: преди {left: 0; поле отляво: 0; съдържание: 'изглед'; / *** Твоят текст тук *** / семейство шрифтове: „Източник без професионалисти“, Arial! / *** Изберете вашия шрифт *** / преобразуване на текст: главни букви; размер на шрифта: 24px; цвят: #fff; / *** Задайте цвят на текста *** / font-weight: bold; подравняване на текст: център; ширина: 100%; подплънки: 5px 0; }

Ако искате вашите продукти да са доста кръгли, можете да добавите този незадължителен код:

.woocommerce ul.products li.product на IMG, .et_overlay {граница радиус: 50%; }

Това е!

Сега можете да посетите вашия магазин и да видите как вашите промени се вземат предвид.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "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 [/ vcex_button] [/ colu width_m»n_colum » 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_download "] EM DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Други уроци по Диви

Блеър Jersyer

Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Вижте пълната биография

5 Коментари

яхта на 8 август 2019 г. в 22:58 ч.

Различен текст за продукт? казвате да го добавите към нови продукти? как е това и къде?
Отговор
brice bayle на 30 май 2018 г. в 5:18 ч.

Супер статия, благодаря ви за този съвет. И ако искаме различен текст по продукт, как?
Отговор
- Thierry Bertrand на 31 май 2018 г. в 6:12 ч.
  
  Здравейте Брайс,
  
  В този случай добавяте нов текст към новия продукт на WooCommerce.
  Отговор
Лора на 26 април 2018 г. от 16:48 ч.

Супер !! Благодаря ви за този съвет.
Отговор
- Thierry Bertrand на 26 април 2018 г. от 17:21 ч.
  
  от нищо.
  Отговор