Khi tạo trang sản phẩm trong Divi, chúng ta có thể sử dụng mô-đun accordion để hiển thị thông tin sản phẩm bằng nội dung động. Điều này sẽ cung cấp cho bạn một thiết kế độc đáo cho các trang sản phẩm, đồng thời duy trì không gian có giá trị trên trang.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng tính năng nội dung động của Divi để tạo đàn accordion thông tin sản phẩm, cũng như cách thiết kế đàn accordion (và nội dung của nó) bằng Divi Visual Builder.
Chúng ta hãy bắt đầu.
khảo sát
Dưới đây là bản xem trước của thiết kế mà chúng tôi sẽ xây dựng trong hướng dẫn này.
Hãy nhớ rằng bạn phải thiết lập sản phẩm như được mô tả trong hướng dẫn này để đạt được kết quả tương tự.
Commencer
Để bắt đầu, bạn sẽ cần làm như sau:
- Nếu bạn chưa có, hãy cài đặt và kích hoạt Chủ đề Divi đã cài đặt (hoặc plugin Divi Builder nếu bạn không sử dụng Chủ đề Divi).
- Cài đặt và kích hoạt plugin WooCommerce. Nếu bạn cấu hình WooCommerce lần đầu tiên, bạn sẽ cần chạy trình hướng dẫn thiết lập cơ bản để chuẩn bị cho cửa hàng của mình. Sau khi hoàn thành, bạn đã sẵn sàng để thêm các sản phẩm mới của mình.
- Tạo một sản phẩm mới như hình dưới đây.
Thiết lập sản phẩm mẫu
Để định cấu hình sản phẩm mẫu cho hướng dẫn này, hãy chuyển đến Sản phẩm> Thêm mới. Đặt tiêu đề cho sản phẩm là “Massage (một buổi)” và nhấp để sử dụng Divi Builder.
Sau đó cập nhật cài đặt trang sản phẩm và thông tin sản phẩm sau:
1. Trong Cài đặt trang Divi, chọn bố cục Không có thanh bên.
2. Thêm / chọn danh mục sản phẩm
3. Thêm hình ảnh sản phẩm
4. Thêm nội dung của mô tả.
5. Dưới Dữ liệu của sản phẩm, hãy thay đổi loại sản phẩm thành Sản phẩm biến đổi.
6. Thêm thuộc tính có tên “Loại” với các giá trị sau: Tiếng Thụy Điển | Đá nóng | Liệu pháp hương thơm | Mô sâu. Đảm bảo chọn "Được sử dụng cho các biến thể".
7. Sau đó, trong tab Biến thể dưới sự chuyển đổi của données của sản phẩm, hãy sử dụng mục thả xuống để tạo các biến thể từ tất cả các thuộc tính.
8. Chọn "Đặt giá thông thường" từ menu thả xuống để đặt giá thông thường cho ba biến.
9. Trong hộp thoại, nhập giá trị "50" và chọn OK.
10. một Một khi bạn đã hoàn thành, lưu hoặc xuất bản sản phẩm.
Bây giờ bạn đã sẵn sàng để bắt đầu thiết kế bố cục của mình với Sản phẩm phù hợp tùy chỉnh.
Tạo đàn accordion Thông tin sản phẩm với nội dung động trong Divi
Bố cục sản phẩm mặc định hiển thị thông tin sản phẩm bằng cách sử dụng các mô-đun Woo khác nhau. Đối với ví dụ này, chúng tôi muốn sử dụng đàn accordion để hiển thị ba thông tin chính về sản phẩm: mô tả sản phẩm, thông tin sản phẩm bổ sung và đánh giá sản phẩm. Ba phần nội dung này hiện được hiển thị trong mô-đun các tab woo. Tất cả những gì chúng ta phải làm là loại bỏ mô-đun woo tabs và thay thế nó bằng một mô-đun đàn accordion có cùng thông tin được giới thiệu qua nội dung động.
Đây là cách để làm điều đó.
Đầu tiên, nhấp để sử dụng Divi trên hệ thống front-end để triển khai trình tạo trực quan. Sau đó, loại bỏ mô-đun Woo Tabs.
Sau đó thêm một mô-đun Accordion mới để thay thế các tab.
Trong cửa sổ bật lên Cài đặt Accordion, nhấp vào biểu tượng bánh răng trên đàn accordion đầu tiên để mở cài đặt đàn accordion riêng lẻ.
Nhập tiêu đề "Giới thiệu về sản phẩm".
Tiếp theo, di chuột qua hộp nhập nội dung nội dung và nhấp vào biểu tượng nội dung động.
Chọn "Mô tả sản phẩm" từ danh sách nội dung động.
Điều này sẽ hiển thị mô tả dài về sản phẩm chúng tôi đã xác định cho sản phẩm trên phụ trợ.
Khi đã có nội dung accordion đầu tiên, hãy mở cài đặt accordion thứ hai và cập nhật các thông tin sau:
- Tiêu đề: Thông số kỹ thuật
Sau đó thêm nội dung động "Thông tin sản phẩm bổ sung" vào phần thân.
Khi nội dung accordion thứ hai đã sẵn sàng, hãy thêm một yếu tố accordion mới và cập nhật cài đặt accordion như sau:
- Tiêu đề: Thông tin bổ sung
Sau đó thêm nội dung động "Đánh giá sản phẩm" vào phần nội dung để nhúng mục / nội dung đánh giá sản phẩm.
LƯU Ý: Đảm bảo bạn đã thêm ít nhất một bài đánh giá sản phẩm để xem nội dung trên trang trực tiếp.
Thiết kế sản phẩm và thỏa thuận nội dung với Divi
Bây giờ, accordion thông tin sản phẩm của chúng tôi có nội dung động để hiển thị thông tin sản phẩm, chúng tôi đã sẵn sàng tùy chỉnh nó bằng cách sử dụng cài đặt của mô-đun accordion tích hợp.
Mở cài đặt mô-đun Accordion và cập nhật các thông tin sau:
- Màu biểu tượng: # ff9375
- Sử dụng kích thước phông chữ biểu tượng: CÓ
- Kích thước phông chữ biểu tượng: 26px
- Chuyển đổi màu nền: #ffffff
- Mở tiêu đề văn bản Màu: #ff9375
- Tiêu đề văn bản: #222222
- Phông chữ: Lato
- Phông chữ: In đậm
- Tiêu đề Kiểu chữ: TT
- Kích thước tiêu đề văn bản: 20px
- Không gian của các chữ cái của tiêu đề: 0.2em
- Chiều cao của dòng tiêu đề: 2em
- Phông chữ cơ thể: Lato
- Kích thước văn bản cơ thể: 16px
- Chiều cao cơ thể: 1.8em
- Màu văn bản liên kết: #ff9375
Điều này sẽ nhắm mục tiêu tất cả các liên kết bạn có trong nội dung động cho mỗi accordion, như xếp hạng sao.
- Màu văn bản của danh sách không có thứ tự: # ff9375
- Kiểu kiểu danh sách không sắp xếp: Circle
- Thụt lề mục danh sách không có thứ tự: 5%
- Chiều rộng của đường viền: 0px
- Chiều rộng của đường viền trên cùng: 1px
- Màu của đường viền trên cùng: #222222
Và cho bước cuối cùng, hãy thêm một trích xuất css nhỏ để trích xuất lề mặc định giữa các tỷ lệ accordion.
Trên tab Nâng cao, thêm CSS sau vào phần tử Toggle:
margin-bottom: 0px;
Bây giờ chúng ta hãy nhìn vào thiết kế cuối cùng của đàn accordion thông tin sản phẩm.
Điều chỉnh cuối cùng cho bố cục
Một số điều chỉnh có thể được thực hiện đối với bố cục để phù hợp với thiết kế của đàn accordion. Ví dụ: chúng tôi có thể điều chỉnh phông chữ của từng mô-đun thành Lato, thêm đường viền và bán kính đường viền tùy chỉnh xung quanh danh sách thả xuống biến và cập nhật nút Thêm vào giỏ hàng với màu nền đồng nhất Phù hợp với anh ta.
Sau khi thực hiện, đây là kết quả cuối cùng.
Tôi đã bao gồm thiết kế này dưới dạng tải xuống miễn phí ở trên. Xin vui lòng kiểm tra nó cho chính mình. Lưu ý rằng bạn phải có cấu hình sản phẩm được mô tả trong hướng dẫn này để đạt được kết quả tương tự.
LƯU Ý: Màu mặc định cho hầu hết các mục WooCommerce của sản phẩm trong Divi được kế thừa từ giá trị màu phụ của cài đặt tùy chỉnh chủ đề. Việc cập nhật màu phụ này có thể dễ dàng hơn sau khi mô-đun màu sắc được cung cấp bởi woo.
cuối cùng suy nghĩ
Như chúng ta đã biết, Woo Mods không phải là thứ duy nhất có thể được sử dụng để trích xuất thông tin sản phẩm động. Accordion Thông tin Sản phẩm là một ví dụ tuyệt vời về cách bạn có thể sử dụng bất kỳ mô-đun Divi nào để hiển thị thông tin sản phẩm một cách độc đáo và ngắn gọn. Hãy tự do khám phá các thiết kế đàn accordion mới, thú vị cho các trang sản phẩm của bạn. Và, tất nhiên, bạn có thể sử dụng nhiều mô-đun rocker thay vì một đàn accordion để đạt được kết quả tương tự.
