Bỏ qua đến nội dung chính

Chuyển đổi mô-đun Divi Shop thành bản đồ sản phẩm động trên thiết bị di động

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Khi bạn tạo trang đích cho các sản phẩm cụ thể, cho dù đó là sản phẩm mới ra mắt hay chương trình giảm giá mà bạn đang chuẩn bị, khả năng cao là bạn sẽ sử dụng mô-đun Shop tại một số điểm. Mô-đun Divi's Shop cho phép bạn trích xuất động các sản phẩm từ plugin WooCommerce và tạo kiểu cho chúng bằng cách sử dụng các tùy chọn có sẵn của Divi. 

Bây giờ theo mặc định, mô-đun cửa hàng đi kèm với một số cấu trúc cột mà tất cả đều chuyển sang hai cột trên kích thước màn hình nhỏ hơn. Điều này có nghĩa là bạn càng chọn hiển thị nhiều sản phẩm, thì càng cần phải cuộn theo chiều dọc để đến phần tiếp theo của trang đích.

Trong thiết kế web hiện đại, một kỹ thuật thường được sử dụng để hạn chế các yếu tố cuộn dọc và hiển thị theo sở thích của khách truy cập là sử dụng thẻ từ. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách chuyển mô-đun cửa hàng Divi thành bản đồ sản phẩm động trên các kích thước màn hình nhỏ hơn mà không cần sử dụng plugin. 

Chúng tôi sẽ bắt đầu bằng cách chuẩn bị các yếu tố khác nhau trong phần sản phẩm của mình và sử dụng một lượng nhỏ mã CSS để kích hoạt hiệu ứng quét. Đó là một cách tuyệt vời để giới thiệu nhiều loại sản phẩm trên trang đích của bạn mà không làm choáng ngợp khách truy cập. 

Kết quả có thể

Trước khi đi sâu vào phần hướng dẫn, chúng ta hãy xem kết quả. Chúng tôi chỉ kích hoạt thẻ từ của sản phẩm trên máy tính bảng và điện thoại di động. Trên máy tính để bàn, chúng tôi giữ cấu trúc cột mà chúng tôi xác định trong mô-đun Shop.

Hoạt hình cửa hàng mô-đun sản phẩm Divi

1. Cấu hình trang sản phẩm và thương mại WooC

Trước khi vào phần Divi của hướng dẫn này, điều quan trọng là plugin WooCommerce phải được cài đặt và kích hoạt trên trang web của bạn. Nếu bạn chưa có, hãy thêm nhiều sản phẩm, tùy thuộc vào số lượng sản phẩm bạn muốn hiển thị trong mô-đun Shop của mình.

Tạo sản phẩm gỗ thương mại

2. Tạo một trang mới và tải về bố cục trang văn phòng phẩm

Tạo một trang mới

Khi các sản phẩm đã sẵn sàng, hãy thêm một trang mới vào phần phụ trợ WordPress của bạn. Đặt tiêu đề cho trang của bạn, xuất bản trang và kích hoạt Trình tạo trực quan Divi.

Tạo một trang divi
Tạo một trang divi mới

Tải xuống bố cục trang đích

Khi ở bên trong trang mới của bạn, hãy điều hướng đến bố cục đặt trước của bạn và tải xuống bố cục trang đích văn phòng phẩm. Mặc dù chúng tôi sử dụng bố cục cụ thể này, nhưng bạn có thể tự do sử dụng bất kỳ bố cục nào khác mà bạn muốn, miễn là bạn thêm hoặc định vị mô-đun cửa hàng bên trong bố cục này.

Chọn một bố cục divi

3. Sửa đổi phần cửa hàng

Xác định vị trí phần với mô-đun Cửa hàng

Nếu chúng ta cuộn xuống trang mới mà chúng ta đã tạo bằng cách sử dụng bố cục trang chủ văn phòng phẩm, chúng ta sẽ bắt gặp một phần có mô-đun cửa hàng. Chúng tôi sẽ sử dụng phần này trong suốt các bước tiếp theo của hướng dẫn này.

Tìm mô-đun cửa hàng

Cài đặt dòng

Kích thước đáp ứng

Bắt đầu bằng cách mở cài đặt hàng của hàng có chứa mô-đun Shop. Như đã đề cập trước đây, chúng tôi giữ nguyên thiết kế trên máy tính để bàn, chúng tôi sẽ chỉ kích hoạt thẻ quẹt của sản phẩm trên kích thước màn hình nhỏ hơn. 

Để tạo trải nghiệm dễ dàng, chúng tôi sẽ cho phép hàng chạm vào bên trái và bên phải màn hình của chúng tôi bằng cách thay đổi độ rộng trong cài đặt kích thước.

  • Sử dụng chiều rộng máng tùy chỉnh: 1
  • Chiều rộng: 80% (máy tính để bàn), 100% (máy tính bảng và điện thoại)
Sửa đổi thiết kế đáp ứng

tầm nhìn

Chúng tôi cũng sẽ đảm bảo rằng không có gì vượt quá vùng chứa hàng bằng cách đặt cài đặt hiển thị thành ẩn.

  • Tràn ngang: ẩn
  • Tràn dọc: ẩn
Cấu hình hiển thị Divi

Cài đặt mô-đun cửa hàng

Chọn số lượng sản phẩm và cấu trúc cột văn phòng bạn chọn

Tiếp theo, chúng ta sẽ mở cài đặt mô-đun Shop. Những thay đổi chúng tôi thực hiện đối với mã CSS của mình (chúng tôi sẽ bổ sung sau) tùy thuộc vào số lượng sản phẩm mà chúng tôi đang hiển thị. 

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Chúng tôi sẽ bắt đầu bằng cách hướng dẫn bạn cách biến mô-đun cửa hàng có 8 sản phẩm thành thẻ sản phẩm. Bạn có thể chọn bất kỳ bố cục cột nào bạn muốn cho màn hình.

  • Số lượng sản phẩm: 8
  • Bố cục cột: 4 cột
Sửa đổi thiết kế cột divi

Kích thước đáp ứng

Để tăng kích thước của mô-đun cửa hàng của chúng tôi, chúng tôi sẽ thay đổi các thông số định cỡ trong tab thiết kế. Lưu ý rằng chúng tôi chỉ làm điều này cho máy tính bảng và điện thoại.

  • Chiều rộng: 100% (máy tính để bàn), 250% (máy tính bảng và điện thoại)
  • Chiều rộng tối đa: 100% (bàn), 250% (máy tính bảng và điện thoại)
Cấu hình thiết kế đáp ứng

Lớp CSS

Chúng tôi cũng sẽ thêm một lớp CSS vào mô-đun cửa hàng của chúng tôi. Sau đó, khi chúng ta thêm mã CSS, chúng ta có thể chuyển đổi mô-đun Shop vốn chỉ mang lớp CSS này. Nói cách khác, nếu bạn muốn một mô-đun Shop khác xuất hiện ở trạng thái bình thường, việc loại bỏ lớp CSS này sẽ cho phép bạn làm như vậy.

  • Lớp CSS: thẻ quẹt sản phẩm
Thay đổi thuộc tính module css divi shop

Phản ứng tràn

Chúng tôi sẽ bổ sung cài đặt dòng bằng cách thay đổi cài đặt hiển thị trên các kích thước màn hình khác nhau. Như bạn có thể thấy trong phần cài đặt, chúng tôi chỉ muốn hiệu ứng cuộn xảy ra trên các kích thước màn hình nhỏ hơn.

  • Tràn ngang: ẩn (bàn), cuộn (máy tính bảng và điện thoại)
  • Tràn dọc: ẩn
Cấu hình tràn

Thêm một mô-đun mã trong mô-đun Cửa hàng

Khi bạn đã sửa đổi mô-đun Cửa hàng, bạn có thể thêm mô-đun mã ngay bên dưới.

Thêm mô-đun mã dưới mô-đun cửa hàng divi

Thêm mã CSS vào mô-đun

Mã CSS sau đây sẽ tự động chuyển đổi mô-đun 8 cửa hàng của chúng tôi thành thẻ từ phản ứng:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Thêm mã css divi

Khớp các tài khoản sản phẩm khác nhau

Bây giờ, nếu bạn đang muốn thêm ít (hoặc nhiều) sản phẩm hơn vào mô-đun cửa hàng của mình, thì mã sẽ thay đổi một chút ở hai vị trí. Cả hai vị trí này phải được thay đổi thủ công để phù hợp với kết quả mong muốn. Ví dụ: hãy thay đổi số lượng sản phẩm trong mô-đun cửa hàng của chúng tôi thành '4'.

  • Số lượng sản phẩm: 4
Khớp tài khoản sản phẩm khác nhau

Khi quay lại mã, chúng ta cần thực hiện hai thay đổi. Đầu tiên, chúng ta sẽ cần sửa đổi các cột của mẫu lưới. Thay vì 8, chúng tôi sử dụng 4 (cùng số với số sản phẩm của chúng tôi). Chúng tôi cũng đang tăng tỷ lệ phần trăm kích thước mà các sản phẩm này chiếm trong bảng sản phẩm của chúng tôi (càng nhiều sản phẩm, càng ít không gian).

lưới-mẫu-cột: lặp lại (4, 14%)! quan trọng;

Sau đó, chúng tôi cũng sẽ thay đổi chiều rộng của thùng chứa các sản phẩm được đặt. Đối với 4 sản phẩm, con số này bằng 150%. Các giá trị này không cố định, chúng có được bằng cách chơi và tìm sự hài hòa giữa các cột của mô hình lưới và chiều rộng của vùng chứa. 

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Để tìm số dư phù hợp, hãy chuyển sang chế độ xem di động bên trong Visual Builder và cẩn thận điều chỉnh các giá trị trong khi xem kết quả của những thay đổi đó.

width: 150%!important;

Thêm mã css divi bổ sung

Thêm một snap vào cuộn

Nếu bạn muốn nâng cao trải nghiệm người dùng lên một bước nữa trong thiết kế thẻ quẹt của mình, bạn cũng có thể thêm một thao tác nhanh khi cuộn. Chụp cuộn cho phép khách truy cập của bạn cuộn bằng cách nhìn chằm chằm vào phần bắt đầu của sản phẩm mới.

 Điều này có nghĩa là quá trình quét của họ không cần phải chính xác, nút cuộn sẽ tiếp quản tại một số điểm và hiển thị điều chỉnh vị trí của nó bên trong cơ chế cuộn bên. 

Để bật tính năng chụp cuộn trên thẻ quẹt của sản phẩm, hãy thêm một dòng mã CSS cho từng sản phẩm riêng lẻ trong mã CSS (xem màn hình in bên dưới).

cuộn-snap-align: bắt đầu

Chúng tôi cũng sẽ kích hoạt tính năng chụp cuộn trên mô-đun cửa hàng của mình bằng cách thêm dòng mã CSS sau:

cuộn-snap-type: x bắt buộc

Tùy chỉnh mã css

Sử dụng lại mô-đun hội thảo để hiển thị các danh mục khác

Nhân bản toàn bộ một dòng

Khi bạn đã hoàn thành bộ thẻ từ đầu tiên, bạn có thể sao chép toàn bộ dòng một lần.

Sử dụng lại mô-đun xưởng divi

Xóa mô-đun mã trong dòng trùng lặp

Miễn là mô-đun cửa hàng của bạn chứa cùng lớp CSS với lớp trước đó, một mô-đun mã sẽ hoạt động. Hãy tiếp tục và xóa mô-đun mã trong dòng trùng lặp của bạn.

Nhân bản mô-đun mã divi

Sao chép dòng trùng lặp nhiều như bạn muốn

Và sao chép dòng trùng lặp bây giờ nhiều lần nếu cần, tùy thuộc vào số lượng bộ thẻ quẹt bạn muốn hiển thị trên trang đích của mình!

Sao chép mô-đun càng nhiều càng tốt
Mô-đun divi trùng lặp

4. Lưu thay đổi trang và xem kết quả trên thiết bị di động

Đảm bảo rằng sau khi hoàn tất việc thêm các thẻ quẹt của sản phẩm, bạn sẽ lưu trang của mình trước khi thoát khỏi Visual Builder và bạn đã hoàn tất!

Bản xem trước demo trên thiết bị di động

khảo sát

Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Hoạt hình cửa hàng mô-đun sản phẩm Divi

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã hướng dẫn bạn cách biến module Divi Shop tích hợp thành thẻ từ của sản phẩm trên kích thước màn hình nhỏ hơn. Trên máy tính để bàn, chúng tôi đã giữ cấu trúc cột ban đầu được gán cho mô-đun Shop. 

Sử dụng bản đồ vuốt sản phẩm cho phép bạn thêm vô số sản phẩm vào cơ chế vuốt ngang mà không làm choáng ngợp khách truy cập cuộn dọc của bạn.

Đây là xu hướng thường được sử dụng trong thiết kế trang web hiện đại vì nó tập trung vào hành vi của người dùng và giúp bạn dễ dàng truy cập vào nhiều loại yếu tố trên màn hình nhỏ hơn.

 Bạn có thể sử dụng các tờ sản phẩm này trên bất kỳ trang nào, nhưng nó đặc biệt hữu ích cho bất kỳ trang đích sản phẩm nào bạn tạo. Bạn cũng có thể tải xuống tệp JSON cho bố cục miễn phí! 

Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
0 cổ phiếu
cổ phiếu
tweet
Enregistrer