Cách bạn thiết kế trang sản phẩm của mình có tác động ngay lập tức đến hành vi của khách hàng. khách. Thiết kế trang sản phẩm được thiết kế tốt và được cá nhân hóa có thể cho phép khách dễ dàng hơn để quyết định xem họ có muốn mua sản phẩm của bạn hay không. Nếu bạn đang tìm cách làm cho trang sản phẩm của mình hấp dẫn hơn, có thể bạn sẽ thích hướng dẫn này.
Chúng tôi sẽ chỉ cho bạn cách đưa lưới lợi ích sản phẩm động vào thiết kế của bạn bằng cách sử dụng Divi và plugin Trường tùy chỉnh nâng cao. Chúng ta sẽ bắt đầu bằng cách tạo một nhóm lĩnh vực để hưởng lợi. Sau đó, chúng tôi sẽ điền vào các trường tùy chỉnh trên trang sản phẩm của mình và bao gồm nội dung năng động trong mẫu trang sản phẩm của chúng tôi.
Kết quả có thể
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả trên các kích thước màn hình khác nhau.
1. Cài đặt plugin ACF Plugin và Nhóm lợi ích sản phẩm
Cài đặt plugin Trường tùy chỉnh nâng cao
Để hiển thị các lợi ích khác nhau của sản phẩm trong phần phụ trợ của sản phẩm, chúng tôi sẽ sử dụng plugin tự do Trường tùy chỉnh nâng cao. Truy cập của bạn Phần phụ trợ WordPress> Plugin> Thêm mới> Tìm plugin ACF> Cài đặt> Kích hoạt .
Chuyển đến các trường tùy chỉnh và thêm một nhóm các trường mới
Khi bạn đã cài đặt và kích hoạt plugin ACF, bạn sẽ có thể truy cập các trường tùy chỉnh của mình và thêm một nhóm trường mới.
Cài đặt nhóm trường
Đặt tiêu đề cho nhóm trường mới của bạn và chỉ cho phép nó xuất hiện trên các trang sản phẩm.
- "Loại tin nhắn" bằng "Sản phẩm"
Thêm một trường đầu tiên
Tiếp tục thêm một lĩnh vực mới cho tiêu đề lợi ích sản phẩm đầu tiên của bạn.
- Nhãn Trường: Tiêu đề Quyền lợi 1
- Loại trường: văn bản
Lặp lại bước cho các trường còn lại
Làm tương tự đối với các lợi ích khác của sản phẩm và mô tả của chúng. Tất cả các trường này yêu cầu loại trường "Văn bản" được gán cho chúng.
- Tiêu đề của dịch vụ 1
- Mô tả lợi ích 1
- Tiêu đề của dịch vụ 2
- Mô tả lợi ích 2
- Tiêu đề của dịch vụ 3
- Mô tả lợi ích 3
- Tiêu đề của dịch vụ 4
- Mô tả lợi ích 4
2. Thêm lợi ích cho sản phẩm
Mở hoặc thêm một sản phẩm mới
Khi nhóm lĩnh vực và các trường của bạn được tạo, bạn có thể thêm các lợi ích sản phẩm vào sản phẩm của mình ở cấp độ cá nhân. Mở một sản phẩm bạn chọn hoặc tạo một sản phẩm mới.
Hoàn thành các trường Lợi ích sản phẩm
Và đáp ứng những lợi ích của sản phẩm.
3. Tạo mẫu trang sản phẩm trong Trình tạo chủ đề Divi
Chuyển đến Trình tạo chủ đề Divi và thêm một mẫu mới
Đã đến lúc bắt đầu với Divi! Để tạo một mẫu mới, hãy chuyển đến Trình tạo chủ đề Divi và nhấp vào "Thêm mẫu mới".
Sử dụng một mẫu trên tất cả các sản phẩm
Chúng tôi sử dụng mẫu này trên tất cả các sản phẩm, nhưng thay vào đó, hãy chọn các sản phẩm có danh mục hoặc nhãn cụ thể.
Nhập trình chỉnh sửa mẫu nội dung mô hình
Sau đó nhập phần thân của mô hình bằng cách nhấp vào "Thêm phần thân tùy chỉnh" và chọn "Tạo phần thân tùy chỉnh".
Chỉnh sửa phần # 1
Màu nền
Khi ở trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần. Mở phần đó và thay đổi màu nền thành màu đen.
- Màu nền: # 000000
khoảng cách
Chuyển sang tab thiết kế của phần và thêm một số phần đệm trên và dưới tùy chỉnh.
- Đệm hàng đầu: 10px
- Đệm dưới: 10px
Thêm một dòng mới
Cấu trúc cột
Hãy tiếp tục bằng cách thêm một dòng mới vào phần có cấu trúc sau:
khoảng cách
Không cần thêm bất kỳ mod nào, hãy mở cài đặt hàng và thực hiện một số điều chỉnh khoảng cách.
- Sử dụng máng xối cá nhân: Có
- Chiều rộng máng xối: 1
- Chiều rộng: 90%
- Chiều rộng tối đa: 100%
khoảng cách
Loại bỏ tất cả khoảng cách bên trong trên và dưới.
- Ký quỹ nội bộ cao: 0px
- Ký quỹ nội bộ thấp: 0px
Thêm mô-đun Thông báo Woo Cart vào cột
Nội dung động
Mô-đun duy nhất chúng tôi cần trên dòng và phần này là mô-đun Thông báo giỏ hàng. Đảm bảo rằng “Sản phẩm này” được chọn trong phần động.
- Sản phẩm: Sản phẩm này
Màu nền
Sau đó mở cài đặt mô-đun và sử dụng nền trong suốt.
- Màu nền: rgba (0,0,0,0)
Cài đặt văn bản
Chuyển sang tab "Thiết kế" và thay đổi phông chữ văn bản.
- Phông chữ: Karla
Cài đặt nút
Kết thúc cài đặt plugin bằng cách xác định cài đặt kiểu:
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 20px
- Màu văn bản nút: # 000000
- Nền nút: # ffd623
- Độ rộng đường viền nút: 0px
- Nút viền tròn: 0px
- Phông chữ: Oswald
- Kiểu Phông chữ: Shift
- Ký quỹ nội bộ cao: 20px
- Ký quỹ nội bộ thấp: 20px
- Ký quỹ nội bộ bên trái: 50px
- Ký quỹ bên phải: 50px
Thêm phần # 2
Nền Gradient
Thêm một phần thông thường bên dưới phần trước. Sau đó mở cài đặt và sử dụng nền gradient như sau:
- Màu 1: # 000000
- Màu 2: #ffffff
- Vị trí bắt đầu:
- Máy tính để bàn: 30%
- Máy tính bảng: 57%
- Điện thoại: 54%
- Vị trí cuối:
- Máy tính để bàn: 30%
- Máy tính bảng: 57%
- Điện thoại: 54%
khoảng cách
Hãy chuyển đến tab Thiết kế và thêm lợi nhuận nội bộ cao.
- Đệm hàng đầu: 150px
Thêm một dòng mới
Cấu trúc cột
Tiếp tục bằng cách thêm một dòng mới có cấu trúc tương tự như hình dưới đây:
kích thước
Nếu không thêm bất kỳ mod nào, chúng tôi sẽ mở cài đặt và thay đổi khoảng cách như sau:
- Sử dụng máng xối tùy chỉnh: Có
- Không gian máng xối: 1
- Chiều rộng: 95%
- Chiều rộng tối đa: 2560px
- Căn chỉnh dòng: Trung tâm
Khoảng cách
Chúng tôi cũng sẽ loại bỏ lề nội bộ hàng đầu.
- Đệm hàng đầu: 0px
Yếu tố chính
Và để tập trung vào nội dung cột trên DeskTop, chúng ta sẽ sử dụng hai dòng mã CSS trong thành phần chính của dòng mô-đun.
Desktop:
hiển thị: flex; align-items: centre;
Máy tính bảng & Điện thoại:
display: block;
Thêm mô-đun Woo Image vào cột 1
Nội dung động
Đã đến lúc thêm mô-đun, chúng ta sẽ bắt đầu với mô-đun Woo Images trong cột 1. Đảm bảo rằng “Sản phẩm này” được chọn.
- Sản phẩm: Sản phẩm này
Hiệu ứng hoạt hình cuộn dọc
Chúng tôi thêm chuyển động tinh tế vào hình ảnh bằng cách sử dụng hiệu ứng cuộn chuyển động ngang trong tab nâng cao.
- Kích hoạt chuyển động dọc: Có
- Bắt đầu bù:
- Văn phòng: -4
- Máy tính bảng và điện thoại: 0
- Độ lệch trung bình: 0
- Kết thúc bù: 0
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Thêm mô-đun tiêu đề Woo vào cột 2
Nội dung động
Ở cột 2, mô-đun đầu tiên chúng ta cần là mô-đun tiêu đề Woo. Đảm bảo chọn “Sản phẩm này” trong hộp nội dung năng động.
- Sản phẩm: Sản phẩm này
Cài đặt văn bản tiêu đề
Sau đó, chuyển đến tab thiết kế và tạo kiểu cho văn bản tiêu đề như sau:
- Phông chữ: Oswald
- Kiểu chữ tiêu đề: chữ hoa
- Màu văn bản tiêu đề: # ffd623
- Kích thước văn bản tiêu đề: 80px
khoảng cách
Hoàn thành mô-đun tiêu đề Woo bằng cách thêm lề trái và phải.
- Lề trái: 5%
- Lề phải: 5%
Thêm mô-đun mô tả Woo vào cột 2
Nội dung động
Hãy chuyển sang mô-đun tiếp theo, đó là mô-đun mô tả Woo. Chúng tôi sử dụng nội dung động sau cho việc này:
- Sản phẩm: Sản phẩm này
- Loại mô tả: Mô tả ngắn
Cài đặt văn bản
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: Karla
- Màu văn bản: #dbdbdb
- Kích thước văn bản: 17 px (máy tính để bàn và máy tính bảng), 15 px (điện thoại)
- Chiều cao dòng văn bản: 1,9 em
kích thước
Sau đó, thay đổi chiều rộng trên các kích thước màn hình khác nhau.
- Chiều rộng: 59% (máy tính để bàn), 82% (máy tính bảng và điện thoại)
khoảng cách
Hoàn thành mô-đun mô tả Woo bằng cách thêm các giá trị lề tùy chỉnh trong cài đặt khoảng cách.
- Lề trên: 50px
- Lề dưới: 100px
- Lề trái: 5%
- Lề phải: 5%
Thêm mô-đun Blurb vào cột 2
Nội dung động
Để hiển thị các lợi ích sản phẩm mà chúng tôi đã thêm trong phần đầu tiên của hướng dẫn này, chúng tôi sẽ sử dụng các mô-đun Blurb. Thêm một mô-đun Blurb đầu tiên và sử dụng nội dung động của lợi ích đầu tiên được tạo ra cho tiêu đề và phần thân.
- Tiêu đề: Tiêu đề lợi ích 1
- Cơ thể: Lợi ích Mô tả 1
Tải lên ảnh
Tải lên một hình ảnh hoặc sử dụng một biểu tượng của sự lựa chọn của bạn tiếp theo. Bạn có thể tìm thấy những cái chúng tôi đã sử dụng trong suốt hướng dẫn này trong thư mục tải xuống mà bạn có thể tải xuống ở đầu hướng dẫn này.
Cài đặt hình ảnh / biểu tượng
Chuyển sang tab thiết kế của mô-đun và thay đổi cài đặt hình ảnh / biểu tượng như sau:
- Vị trí hình ảnh / biểu tượng: Hàng đầu
- Sắp xếp hình ảnh / biểu tượng: Trái
Cài đặt văn bản tiêu đề
Chúng tôi đang sửa đổi cài đặt văn bản tiêu đề tiếp theo.
- Phông chữ: Oswald
- Kiểu chữ tiêu đề: Chữ hoa
- Kích thước văn bản tiêu đề: 25px
Cài đặt nội dung
Cùng với các cài đặt văn bản cơ thể.
- Phông chữ cơ thể: Karla
- Kích thước văn bản: 17 px (máy tính để bàn và máy tính bảng), 15 px (điện thoại)
- Chiều cao cơ thể: 1,9 em
kích thước
Sau đó, chuyển đến cài đặt định cỡ và thay đổi độ rộng. Điều quan trọng là sử dụng chiều rộng chính nhỏ hơn 50%, điều này sẽ cho phép chúng tôi hiển thị hai mô-đun Blurb cạnh nhau trong các bước tiếp theo.
- Chiều rộng hình ảnh: 25%
- Chiều rộng: 49%
khoảng cách
Chúng tôi cũng sẽ thêm khoảng trắng xung quanh mô-đun Blurb bằng cách sử dụng các giá trị đệm tùy chỉnh trên các kích thước màn hình khác nhau.
- Phần đệm trên: 8%
- Đệm dưới: 8%
- Đệm trái: 8% (máy tính để bàn và máy tính bảng), 2% (điện thoại)
- Đệm bên phải: 8% (máy tính để bàn và máy tính bảng) 2% (điện thoại)
Yếu tố chính
Bây giờ chúng ta sẽ đảm bảo rằng mô-đun Tóm tắt hiển thị văn bản bên cạnh nhau, theo hai bước. Trước tiên, chúng tôi sẽ đảm bảo chiều rộng mô-đun nhỏ hơn 50% (như chúng tôi đã làm trong bước trước). Tiếp theo, chúng ta sẽ sử dụng thuộc tính trên hàng. Chúng tôi sẽ thêm thuộc tính CSS này vào phần tử chính trong phần nâng cao.
display: inline-block;
Sao chép mô-đun tóm tắt 3 lần
Khi bạn đã hoàn thành bản mod Blurb đầu tiên, bạn có thể sao chép nó ba lần. Bạn sẽ tự động nhận thấy rằng các mô-đun Blurb xuất hiện trong một lưới.
Chỉnh sửa hình ảnh mô-đun Blurb
Chỉnh sửa hình ảnh trong mỗi nhóm Blurb trùng lặp. Bạn có thể tìm thấy chúng trong thư mục tải xuống mà bạn có thể đã tải xuống ở đầu bài viết này.
Sửa đổi nội dung động của mô-đun Blurb
Đồng thời sửa đổi nội dung động của từng mô-đun Blurb trùng lặp.
- Tiêu đề: Tiêu đề của dịch vụ (2,3 hoặc 4)
- Thân bài: mô tả về những lợi thế (2,3 hoặc 4)
Thêm đường viền vào các mô-đun Blurb riêng lẻ
Mô-đun Blurb 1 cài đặt viền
Bây giờ, để hoàn thành việc thiết kế lưới của chúng ta, chúng ta sẽ thêm đường viền cho các mô-đun Blurb ở cấp độ cá nhân. Mở mod Blurb đầu tiên và sử dụng đường viền thẳng.
- Độ rộng đường viền phải: 1px
- Màu viền bên phải: # ffd623
Ngoài ra, thêm một đường viền dưới cùng cho mô-đun Blurb đầu tiên.
- Chiều rộng đường viền dưới cùng: 1px
- Màu đường viền dưới cùng: # 000000
Mô-đun Blurb 2 cài đặt viền
Sau đó mở mô-đun Blurb thứ hai và sử dụng đường viền dưới cùng.
- Chiều rộng đường viền dưới cùng: 1px
- Màu đường viền dưới cùng: # 000000
Mô-đun Blurb 3 cài đặt viền
Hoàn thành thiết kế lưới bằng cách thêm đường viền thẳng vào mô-đun Blurb thứ ba.
- Độ rộng đường viền phải: 1px
- Màu viền bên phải: # ffd623
Thêm Woo Thêm vào giỏ Mô-đun trong cột 2
Nội dung động
Mô-đun cuối cùng chúng tôi cần trong thiết kế của mình là mô-đun Woo Thêm vào giỏ hàng. Đảm bảo rằng "Sản phẩm này" được chọn trong vùng nội dung động.
- Sản phẩm: Sản phẩm này
Cài đặt trường
Chuyển đến tab thiết kế tiếp theo và thay đổi cài đặt trường.
- Màu nền của trường: #ffffff
- Màu văn bản trường: # 000000
- Các trường được làm tròn: 0px (tất cả các góc)
- Chiều rộng của đường viền dưới của các trường: 1px
- Màu của viền dưới cùng của các trường: # 000000
Cài đặt nút
Sau đó, tạo kiểu cho nút phù hợp:
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 20 pixel
- Màu văn bản nút: # 000000
- Màu nền của nút: # ffd623
- Độ rộng đường viền nút: 0px
- Bán kính đường viền nút: 0px
- Phông chữ: Oswald
- Kiểu phông chữ: chữ hoa
- Phần đệm trên: 20px
- Đệm dưới: 20px
- Đệm trái: 50px
- Đệm bên phải: 50px
khoảng cách
Và hoàn thành các tham số mô-đun bằng cách thêm các giá trị lề tùy chỉnh.
- Lề trên: 100px
- Lề trái: 5%
3. Lưu các sửa đổi của trình tạo chủ đề và xem trước kết quả
Sau khi hoàn thành thiết kế mẫu trang sản phẩm, bạn có thể lưu tất cả các thay đổi của Trình tạo chủ đề và hiển thị kết quả trên các sản phẩm của mình!
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 sáng tạo với mẫu trang sản phẩm Divi tiếp theo của bạn. Cụ thể, chúng tôi đã chỉ cho bạn cách bao gồm lưới lợi ích sản phẩm động để thêm các lợi ích bổ sung vào trang sản phẩm của bạn. Chúng tôi đã tạo hướng dẫn này bằng Divi kết hợp với plugin Trường tùy chỉnh nâng cao. Bạn cũng có thể tải xuống tệp JSON 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.