Trong một hướng dẫn trước, chúng tôi bạn đã giới thiệu Divi. Đối với những người chưa biết, Divi là một theme WordPress cao cấp được thiết kế bởi nhóm Elegant Themes cung cấp các dịch vụ khác nhau trên WordPress và thiết kế các plugin và chủ đề.
Divi là một chủ đề đáp ứng và sau này tương thích với một số plugin khác trong số những plugin khác mà chúng tôi có WooCommerce. Hôm nay chúng tôi sẽ hướng dẫn bạn cách tạo hoạt ảnh khác cho sản phẩm của bạn WooCommerce.
Đôi khi phong cách của WooCommerce có thể hơi thiếu sót, đặc biệt nếu phong cách CSS của bạn hơi khác một chút. Hướng dẫn này sẽ có một chút kỹ thuật (một chút CSS và không có gì khác), sẽ cho phép bạn khắc phục điều này.
Các hướng dẫn khác về chủ đề Divi
- trang web 5 để sử dụng hàng Divi chủ đề
- Làm thế nào để thêm văn bản trên một Divi sản phẩm WooCommerce
- Cách thay đổi màu trình đơn giữa các trang trên Divi
- Các tính năng bạn chưa biết về Divi
- Cách tạo thanh trượt trên Divi
- Cách chỉnh sửa vai trò người dùng trên Divi
Chúng ta hãy bắt đầu.
Sửa đổi một biểu tượng cho văn bản qua chuột
Theo mặc định, khi bạn sử dụng WooCommerce với Divi và di chuột qua một sản phẩm, bạn sẽ thấy một biểu tượng '+' nhỏ là một phông chữ (make-icon) được đề xuất bởi Divi và như sau:
Thực sự dễ dàng để thay đổi biểu tượng đó thành một biểu tượng khác trong cài đặt, nhưng nếu bạn muốn thêm một số văn bản, đó có phải là điều khác không? Tôi sẽ chỉ cho bạn cách đạt được điều này với các đoạn CSS ngày hôm nay và tôi cũng sẽ bao gồm mã tùy chọn để thêm vào trang web của bạn.
Đây là những gì chúng ta sẽ có một khi hoàn thành:
Tại sao lại sử dụng văn bản thay vì một biểu tượng?
Tôi có thể nghĩ ra một số lý do có thể khiến bạn làm điều này:
Để xác định cung cấp một cái nhìn độc đáo cho cửa hàng của bạn: Bất cứ điều gì bạn có thể làm để phân biệt trang web Divi / WooCommerce của mình với trang web khác luôn là một điều tốt.
Sử dụng một từ như "Xem" hoặc "Mua" có thể dẫn đến nhiều chuyển đổi hơn: Mọi người cần phải làm những gì tốt nhất cho trang web của họ và bạn có thể tận dụng thử nghiệm A / B tích hợp trên Divi để giúp đỡ điều đó.
Nguồn cảm hứng
Gần đây tôi đã duyệt qua một trang web có văn bản về sản phẩm đang di chuột. Tất nhiên, tôi đã thấy các trang web thương mại điện tử khác có chữ thay vì biểu tượng trên sản phẩm di chuột, vì vậy đây không phải là một khái niệm mới. Tôi chưa bao giờ phải làm điều này trên một Chủ đề Divi, và khi tôi nhìn thấy điều này, tôi đã đặt ra cho mình một thử thách và nhận ra rằng thực sự dễ dàng để thực hiện điều này. Với rất ít mã được yêu cầu, bạn chắc chắn không ảnh hưởng đến hiệu suất blog của mình.
Thực hiện chuột trên văn bản
Bước 1: Lớp phủ màu
Trước tiên, chúng tôi sẽ thay đổi màu của lớp phủ khi di chuột. Điều này cực kỳ dễ thực hiện trên Divi. Trong mô-đun cửa hàng của bạn, hãy chuyển đến phần " thông số thiết kế tiên tiến tiên tiến Và chọn màu của bạn.
Bước 2: Thêm CSS
Mã CSS sau trong " Tùy chọn chủ đề> CSS tùy chỉnh Hoặc trên bảng phong cách của chủ đề con bạn.
.wooc Commerce .et_overlay: trước {left: 0; lề trái: 0; nội dung: 'xem'; / *** Văn bản của bạn ở đây *** / font-family: 'Source Without Pro', Arial! / *** Chọn phông chữ của bạn *** / text-Transform: chữ hoa; cỡ chữ: 24px; màu: #fff; / *** Đặt màu văn bản *** / font-weight: bold; văn bản-align: trung tâm; chiều rộng: 100%; phần đệm: 5px 0; }
Nếu bạn muốn sản phẩm của mình khá tròn, bạn có thể thêm mã tùy chọn này:
.woocommerce ul.products li.product a img, .et_overlay {bán kính biên giới: 50%; }
Đó là tất cả!
Bây giờ bạn có thể truy cập cửa hàng của mình và xem các thay đổi của bạn được xem xét.
[vc_row center_row = "yes"] [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"] TẢI XUỐNG TRANG CHỦ [/ vcex_button] [/ width_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 "] TẢI XUỐNG DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Hướng dẫn Divi khác
- trang web 5 để sử dụng hàng Divi chủ đề
- Cách thêm văn bản vào sản phẩm Divi WooCommerce
- Cách thay đổi màu menu giữa các trang Divi
- Cách cá nhân hóa lưới của blog với Divi
- Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
- Cách tạo thanh trượt Divi toàn màn hình
- Cách thay đổi màu của menu giữa các trang Divi
- Các tính năng có thể bạn chưa biết về Divi
- Cách sử dụng Divi Builder trên WordPress
- Cách sử dụng mô-đun cuộn video Divi
- Cách sử dụng mô-đun Divi Builder Flip
- Cách thêm mô-đun chứng thực trên Divi Builder
- Cách sử dụng mô-đun văn bản Divi
- Cách tạo thanh trượt trên Divi
- Cách chỉnh sửa vai trò người dùng Divi
- Cách sử dụng mô-đun Truyền thông xã hội Divi
- Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
- Cách sử dụng mô-đun bên Divi
- Cách sử dụng mô-đun bảng giá Divi
- Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
- Cách thêm mô-đun video của Divi
- Cách sử dụng mô-đun điều hướng bài viết
- Cách sử dụng mô-đun tìm kiếm Divi
- Cách sử dụng mô-đun ví Divi
- Cách sử dụng mô-đun người trên Divi Builder
- Cách sử dụng mô-đun ví với bộ lọc Divi
- Cách sử dụng mô-đun trượt toàn bộ chiều rộng
- Cách sử dụng Mô-đun hình ảnh Divi Builder
- Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
- Cách sử dụng mô-đun thư viện hình ảnh
- Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
- Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
- Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
- Cách sử dụng Module Divi Counter
- Cách sử dụng thanh trượt bài viết trên Divi Builder
- Cách sử dụng mô-đun Optin Email Optin
Văn bản khác nhau cho mỗi sản phẩm? bạn nói để thêm nó vào sản phẩm mới? như thế nào và ở đâu?
Super article, cảm ơn bạn về mẹo này. Và nếu chúng ta muốn một văn bản khác nhau theo sản phẩm, làm thế nào?
Xin chào Brice,
Trong trường hợp này, bạn thêm một văn bản khác trên sản phẩm WooCommerce mới.
Siêu !! Cảm ơn bạn về mẹo này.
không có gì.