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.

Divi kết quả có thể xảy ra

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 .

Cài đặt plugin trường tùy chỉnh nâng cao

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.

Tạo trường acf

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 quy tắc

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
Thêm trường ac
Tùy chỉnh trường Divi

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
Định cấu hình các trường acf

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.

Tạo sản phẩm Divi

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.

Điền vào các trường lợi thế divi

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".

Trình tạo chủ đề Divi

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ể.

Thêm tất cả các sản phẩm woocommerce

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".

Xây dựng cơ thể divi

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
Cấu hình nền phần Divi

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
Cấu hình giãn cách phần Divi

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:

Cấu hình bố cục mô-đun dòng

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%
Cài đặt giãn cách mô-đun dòng

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
Cài đặt giãn cách mô-đun dòng Divi

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
Cài đặt mô-đun thông báo giỏ hàng divi

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 divi mô-đun giỏ hàng

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 phông chữ mô-đun Divi

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
Cài đặt màu mô-đun thông báo giỏ hàng Woo
  • Phông chữ: Oswald
  • Kiểu Phông chữ: Shift
Điều chỉnh màu sắc mô-đun thông báo giỏ hàng
  • 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
Mô-đun thiết kế cấu hình thông báo giỏ hàng

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%
Điều chỉnh phía sau mô-đun dòng Divi

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
Cấu hình giãn cách mô-đun dòng Divi

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:

Cấu hình kiểu dòng Divi

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
Mô-đun divi cấu hình máng xối

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
Cấu hình giãn cách mô-đun Divi

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;
Cài đặt kiểu mô-đun dòng Divi

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
Cài đặt mô-đun hình ảnh sản phẩm Woocommerce

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ử
Điều chỉnh mô-đun hình ảnh Divi

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
lưới lợi ích sản phẩm

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
Điều chỉnh thiết kế mô-đun tiêu đề Divi

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%
Cài đặt mô-đun tiêu đề Divi

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 mô-đun mô tả sản phẩm

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
Mô tả mô-đun điều chỉnh màu divi

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)
Divi điều chỉnh chiều rộng mô-đun tóm tắt

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%
Mô-đun mô tả sản phẩm Divi

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
Cài đặt văn bản mô-đun tóm tắt Divi

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ấu hình divi tóm tắt mô-đun hình ảnh

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
Mô-đun điều chỉnh Divi

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
Định cấu hình phông chữ mô-đun tóm tắt divi

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
Định cấu hình tóm tắt mô-đun văn bản div i

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%
Định cấu hình định cỡ mô-đun tóm tắt divi

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)
Định cấu hình giãn cách mô-đun tóm tắt divi

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;
Thêm mô-đun divi mã css

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.

Phần divi tên sản phẩm

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.

Hình ảnh mô-đun tóm tắt Divi

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)
Quy tắc mô-đun tóm tắt Divi

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
Mô-đun tóm tắt cấu hình divi viền tròn

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
Định cấu hình lề dưới divi
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
Tóm tắt mô-đun đường viền cấu hình divi
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
lưới lợi ích sản phẩm

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
Thêm vào cài đặt mô-đun divi thẻ

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
Định cấu hình mô-đun màu phong cách thêm vào giỏ hàng divi
  • 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
Định cấu hình giãn cách phần divi

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
Định cấu hình thiết kế nút divi
  • Phông chữ: Oswald
  • Kiểu phông chữ: chữ hoa
Định cấu hình nút divi
  • Phần đệm trên: 20px
  • Đệm dưới: 20px
  • Đệm trái: 50px
  • Đệm bên phải: 50px
Định cấu hình định cỡ mô-đun divi

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%
Định cấu hình khoảng cách divi

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!

Lưu thiết kế divi
Lưu sửa đổi divi

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.

Kết quả demo

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.