Khi bạn đang tạo trang đích cho các sản phẩm cụ thể, cho dù đó là lần ra mắt mới hay đợt giảm giá mà bạn đang chuẩn bị, thì rất có thể bạn sẽ sử dụng mô-đun Cửa hàng vào một thời điểm nào đó. Mô-đun Divi 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ác tùy chọn tích hợp 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ế cuộn dọc và hiển thị các yếu tố theo sở thích của bạn. khách là sử dụng thẻ từ. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách biến Mô-đun Divi Shop thành thẻ sản phẩm động trên kích thước màn hình nhỏ hơn mà không cần sử dụng plugin.
Chúng ta sẽ bắt đầu bằng cách chuẩn bị các thành phần khác nhau của phần sản phẩm và sử dụng một lượng nhỏ mã CSS để kích hoạt hiệu ứng vuốt. Đó là một cách tuyệt vời để giới thiệu nhiều loại sản phẩm trong trang đích của bạn mà không làm bạn choáng ngợp. khách.
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.
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 được cài đặt và kích hoạt trên Website. Nếu bạn chưa làm như vậy, 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.
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ả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.
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.
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)
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à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ị.
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
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)
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
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
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ã 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>
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
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.
Để 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ột snap vào cuộn
Nếu bạn muốn nâng cao trải nghiệm người dùng hơn một chút trong thiết kế thẻ quẹt của mình, bạn cũng có thể thêm ảnh chụp cuộn. Chụp cuộn cho phép bạn khách để cuộn bằng cách sửa vào phần đầ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
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.
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.
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!
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!
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.
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.
