W poprzednim samouczku my przedstawiłeś Divi. Dla tych, którzy nie wiedzą, Divi to WordPress premia zaprojektowana przez zespół eleganckie tematy który oferuje różne usługi związane z WordPress oraz projektowanie wtyczek i motywów.
Divi to responsywny motyw, a ten ostatni jest kompatybilny z kilkoma innymi wtyczkami, między innymi, które mamy WooCommerce . Dziś pokażemy Ci, jak nadać inną animację Twoim produktom WooCommerce .
Czasem styl WooCommerce może być nieco nieodpowiedni, zwłaszcza jeśli Twój styl CSS jest nieco inny. Ten samouczek, który będzie trochę techniczny (trochę CSS i nic więcej), pozwoli Ci to naprawić.
Inne samouczki na temat Divi
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu WooCommerce na Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których nie znasz na temat Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika w Divi
Zacznijmy.
Modyfikowanie ikony tekstu za pomocą myszy
Domyślnie, gdy używasz WooCommerce z Divi i najedziesz kursorem na produkt, zobaczysz małą ikonę `` + '', która jest czcionką (make-ikona) zaproponowane przez Divi i które przedstawia się następująco:
Naprawdę łatwo jest to zmienić na inną ikonę w ustawieniach, ale jeśli chcesz dodać tekst, czy to inna rzecz? Pokażę Ci, jak to osiągnąć za pomocą dzisiejszych fragmentów kodu CSS, a także dołączę opcjonalny kod do dodania do Twojej witryny.
Oto, co raz ukończymy:
Po co właściwie używać tekstu zamiast ikony?
Mogę wymyślić kilka powodów, które mogą cię do tego skłonić:
Aby zdefiniować, nadaj niepowtarzalny wygląd swojemu sklepowi: Wszystko, co możesz zrobić, aby odróżnić swoją witrynę Divi / WooCommerce od innej, jest zawsze dobrą rzeczą.
Użycie takich słów jak „Wyświetl” lub „Kup” może spowodować większą konwersję: Każdy musi zrobić to, co najlepsze dla swojej witryny, i możesz skorzystać ze zintegrowanych testów A / B na Divi, aby Ci w tym pomóc.
Źródło inspiracji
Niedawno przeglądałem witrynę, która zawierała tekst o najechaniu na produkt. Oczywiście widziałem inne witryny e-commerce, które mają słowa zamiast ikon na produkcie, więc nie był to nowy pomysł. Nigdy nie musiałem tego robić na Motyw Divi, a kiedy to zobaczyłem, postawiłem sobie wyzwanie i zdałem sobie sprawę, że rzeczywiście jest to łatwe do zrealizowania. Przy bardzo małej ilości wymaganego kodu na pewno nie wpłyniesz na wydajność swojego bloga.
Implementowanie myszy nad tekstem
Krok 1: nakładka koloru
Najpierw zmienimy kolor nakładki po najechaniu kursorem. Jest to niezwykle łatwe w Divi. W module Twojego sklepu Przejdź do „ zaawansowane zaawansowane parametry projektowe I wybierz swój kolor.
Krok 2: Dodawanie CSS
Poniższy kod CSS w „ Opcje motywu> Niestandardowy CSS Lub na arkuszu stylów motywu podrzędnego.
.woocommerce .et_overlay: before {left: 0; margines lewy: 0; content: „view”; / *** Twój tekst tutaj *** / font-family: 'Source Without Pro', Arial! / *** Wybierz czcionkę *** / text-transform: wielkie litery; rozmiar czcionki: 24px; kolor: #fff; / *** Ustaw kolor tekstu *** / font-weight: pogrubiony; wyrównanie tekstu: środek; szerokość: 100%; wypełnienie: 5px 0; }
Jeśli chcesz, aby Twoje produkty były raczej okrągłe, możesz dodać ten opcjonalny kod:
.woocommerce ul.products li.product a img, .and_overlay {border-radius: 50%; }
To wszystko!
Teraz możesz odwiedzić swój sklep i zobaczyć, jak uwzględniane są zmiany.
[vc_row center_row = "tak"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "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"] POBIERZ TEMAT DIVI [/ vcex_button] [/ vc_column] »vc_column] =» vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expand" 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 "] POBIERZ SZABLONY DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Inne samouczki Divi
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Inny tekst na produkt? mówisz, aby dodać go do nowych produktów? jak i gdzie?
Super artykuł, dziękuję za tę wskazówkę. A jeśli chcemy mieć inny tekst po produkcie, w jaki sposób?
Witaj Brice,
W takim przypadku dodajesz inny tekst do nowego produktu WooCommerce.
Super !! Dziękuję za tę wskazówkę.
nic.