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

Divi hướng dẫn: Cách sử dụng mô-đun cửa hà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 701.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ị]

Divi được thiết kế để tương thích với WooCommerce. Để tích hợp WooCommerce, bạn cần cài đặt phiên bản WooCommerce mới nhất.

WooCommerce là plugin thương mại điện tử mà chúng tôi khuyên dùng vì nó có bộ tính năng, giao diện đẹp nhất và tuân theo các phương pháp hay nhất về mã hóa. Sau khi kích hoạt plugin, bạn sẽ thấy hai phần mới “WooCommerce” và “Sản phẩm” được thêm vào bảng điều khiển WordPress của bạn. Bạn có thể sử dụng các khu vực này để điều chỉnh cài đặt thương mại điện tử của mình và đăng sản phẩm mới. Bạn có thể tìm thấy tài liệu hướng dẫn hoàn toàn trên WooCommerce tại đây .

Xin lưu ý rằng mặc dù trình tạo bao gồm các mô-đun WooCommerce khác nhau, bạn cũng có thể sử dụng WooCommerce một mình mà không cần trình tạo. Bạn có thể tạo các trang tiêu chuẩn cho Checkout, Giỏ hàng, v.v. như được hiển thị trong tài liệu của họ. Bạn cũng có thể liên kết trực tiếp đến các danh mục thương mại điện tử của mình hoặc sử dụng Mã ngắn WooCommerce trong một mô-đun văn bản Divi. Nó cho phép bạn tự do làm bất cứ điều gì.

Cách thêm mô-đun cửa hàng vào trang của bạn

Trước khi bạn có thể thêm mô-đun cửa hàng vào trang của mình, trước tiên bạn phải chuyển sang Divi Builder. Khi chủ đề Divi được cài đặt trên trang web của bạn, bạn sẽ thấy một nút Sử dụng Divi Builder phía trên trình chỉnh sửa bài đăng bất cứ khi nào bạn tạo một trang mới. Nhấp vào nút này để kích hoạt Divi Builder và truy cập tất cả các mô-đun của Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo ở chế độ trực quan. Bạn cũng có thể nhấp vào nút Sử dụng Visual Builder khi bạn duyệt trang web của bạn ở phía trước nếu bạn được kết nối với bảng điều khiển WordPress của bạn.

divi builder

Khi bạn đã vào Visual Builder, bạn có thể nhấp vào nút dấu cộng màu xám để thêm mô-đun mới vào trang của mình. Mô-đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn đang bắt đầu một trang mới, hãy nhớ thêm một hàng vào trang của bạn trước. Chúng tôi có các hướng dẫn tuyệt vời về cách sử dụng các phần tử đường và phần của Divi.

shop module divi.png

Tìm mô-đun cửa hàng trong danh sách mô-đun và nhấp vào mô-đun đó để thêm mô-đun đó vào trang của bạn. Danh sách các mô-đun có thể tìm kiếm được, có nghĩa là bạn cũng có thể gõ từ "cửa hàng" và sau đó nhấn enter để tự động tìm kiếm và thêm mô-đun cửa hàng! Sau khi mô-đun được thêm vào, bạn sẽ được chào đón bởi danh sách tùy chọn mô-đun. Các tùy chọn này được chia thành ba nhóm chính: Nội dung , Conception et tiên tiến .

Ví dụ trường hợp sử dụng: trưng bày các sản phẩm gần đây nhất trên trang chủ bằng mô-đun Shop

Đối với ví dụ này, tôi sẽ sử dụng mô-đun cửa hàng để hiển thị các sản phẩm gần đây nhất trên trang chủ.

Đây là trang với bốn sản phẩm được trình bày.

hiển thị sản phẩm trên trang tăng tốc divi.jpg

Chúng ta hãy bắt đầu.

Sử dụng trình tạo trực quan để thêm phần thông thường với hàng có chiều rộng đầy đủ (1 cột). Thay đổi thông số hàng để làm cho nó có chiều rộng đầy đủ với chiều rộng rãnh tùy chỉnh là 2.

tùy chọn vùng divi.png

Sau đó thêm một mô-đun cửa hàng vào dòng.

chèn mô-đun cửa hàng divi.png

Cập nhật cài đặt mô-đun như sau:

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í]

Tùy chọn nội dung

Loại: Sản phẩm gần đây
Số lượng sản phẩm: 4

Tùy chọn thiết kế

Màu Hover của Biểu tượng: # ea1d63
Cảnh sát tiêu đề: Mở mà không có
Kích thước phông chữ tiêu đề: 24px
Giải thưởng cảnh sát: Không có
Kích thước phông chữ giá: 20px

Tùy chọn nâng cao (CSS tùy chỉnh)

Hiệu giá:

text-align: center;
nền: #fff;
margin-top: -10px! đáng kể;

Prix:

text-align: center;
nền: #fff;
bọc xuống: 15px;

Đó là tất cả! Đây là kết quả cuối cùng.

phần sản phẩm divi.jpg

Mua các tùy chọn nội dung

Trong tab Nội dung, bạn sẽ tìm thấy tất cả các yếu tố nội dung của mô-đun, chẳng hạn như văn bản, hình ảnh và biểu tượng. Tất cả điều khiển cái gì xuất hiện trong mô-đun của bạn sẽ luôn được tìm thấy trong tab này.

Kiểu

Chọn loại sản phẩm bạn muốn hiển thị trong nguồn cấp dữ liệu sản phẩm của mình. Bạn có thể chọn từ Sản phẩm gần đây sẽ hiển thị tất cả các sản phẩm của bạn theo thứ tự thời gian, Sản phẩm nổi bật, Sản phẩm bán chạy, Sản phẩm bán chạy nhất hoặc Sản phẩm được xếp hạng cao nhất.

Số lượng sản phẩm

Xác định số lượng sản phẩm bạn muốn hiển thị. Bạn sẽ cần phải có các sản phẩm được tạo ra để xuất hiện trong mô-đun này.

Bao gồm danh mục

Chọn danh mục bạn muốn bao gồm.

Số cột

Chọn số lượng cột để hiển thị trong mô-đun cửa hàng của bạn. 4 cột nên được sử dụng cho một hàng 1 cột. 3 cột nên được sử dụng cho một cột chiếm 3/4 không gian hàng. Cột 2 nên được sử dụng cho cột chiếm 1/2 không gian của ánh sáng. Một cột nên được sử dụng cho cột 1/4 không gian hàng.

Sắp xếp lại theo

Chọn cách bạn muốn sản phẩm của mình được đặt hàng. Chọn sắp xếp theo mặc định Sắp xếp, Mức độ phổ biến, Xếp hạng, Ngày tháng, Giá thấp đến cao, Giá cao đến thấp, cũ nhất đến mới nhất, mới nhất đến cũ nhất.

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]

Nhãn quản trị

Điều này sẽ thay đổi nhãn mô-đun trong hàm tạo để dễ dàng nhận biết. Khi bạn sử dụng dạng xem WireFrame trong Visual Builder, các nhãn này xuất hiện trong khối mô-đun của giao diện Divi Builder.

Tùy chọn thiết kế hội thảo

Trong tab Thiết kế, bạn sẽ tìm thấy tất cả các tùy chọn tạo kiểu mô-đun, chẳng hạn như phông chữ, màu sắc, định cỡ và khoảng cách. Đây là tab bạn sẽ sử dụng để thay đổi giao diện của mô-đun của mình. Mỗi mô-đun Divi có một danh sách dài các cài đặt thiết kế mà bạn có thể sử dụng để thay đổi bất kỳ điều gì.

setting shop divi.png

Biểu tượng lớp phủ

Khi bạn di chuột qua một mặt hàng trong mô-đun Cửa hàng, biểu tượng lớp phủ sẽ xuất hiện. Bạn có thể điều chỉnh màu được sử dụng cho biểu tượng này bằng cách sử dụng công cụ chọn màu trong cài đặt này.

Màu của lớp phủ

Khi bạn di chuột qua một mặt hàng trong mô-đun Cửa hàng, một lớp phủ màu sẽ xuất hiện ở đầu hình ảnh và bên dưới văn bản và biểu tượng tiêu đề cửa hàng. Theo mặc định, màu trắng nửa trong suốt được sử dụng. Nếu bạn muốn sử dụng màu khác, bạn có thể điều chỉnh màu bằng công cụ chọn màu trong cài đặt này

Biểu tượng chọn

Tại đây, bạn có thể chọn một biểu tượng tùy chỉnh để hiển thị khi khách di chuột qua các mặt hàng trong cửa hàng trong mô-đun.

Màu của huy hiệu bán hàng

Khi một mặt hàng được giảm giá, huy hiệu bán hàng sẽ xuất hiện trên hình ảnh sản phẩm. Với cài đặt này, bạn có thể điều chỉnh màu được sử dụng cho nền huy hiệu.

Phông chữ tiêu đề

Bạn có thể thay đổi phông chữ của văn bản tiêu đề của mình bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi cung cấp hàng tá phông chữ tuyệt vời do Google Fonts cung cấp. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, viết hoa và gạch chân.

Kích thước phông chữ tiêu đề

Tại đây bạn có thể điều chỉnh kích thước của văn bản tiêu đề của mình. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản của mình hoặc nhập trực tiếp giá trị của kích thước văn bản mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị của nó.

Màu văn bản tiêu đề

Theo mặc định, tất cả các màu văn bản trong Divi đều có màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu văn bản của tiêu đề, hãy chọn màu mong muốn từ bộ chọn màu bằng cách sử dụng tùy chọn này.

Khoảng cách của các chữ cái đầu

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng cách giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái trong văn bản tiêu đề của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị của nó.

Chiều cao của dòng tiêu đề

Chiều cao dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong văn bản tiêu đề của bạn. Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập nằm ở bên phải của con trỏ. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị của nó.

Chính sách giá

Bạn có thể thay đổi phông chữ của văn bản giá của mình bằng cách chọn phông chữ bạn muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ tuyệt vời được cung cấp bởi Google Fonts. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, viết hoa và gạch chân.

Cỡ chữ

Tại đây, bạn có thể điều chỉnh kích thước văn bản giá của mình. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản của mình hoặc nhập trực tiếp giá trị kích thước văn bản mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị của nó.

Màu văn bản giá

Theo mặc định, tất cả các màu văn bản trong Divi đều có màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản giá, hãy chọn màu mong muốn từ bộ chọn màu bằng cách sử dụng tùy chọn này.

Khoảng cách của các chữ cái giá

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng cách giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái trong văn bản giá của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị của nó.

Chiều cao của đường giá

Chiều cao hàng ảnh hưởng đến khoảng cách giữa mỗi hàng trong văn bản giá của bạn Nếu bạn muốn tăng khoảng cách giữa mỗi hàng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập nằm ở bên phải của con trỏ. Các trường đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị kích thước của bạn để thay đổi loại đơn vị của nó.

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]

Tùy chọn nâng cao của cửa hàng

Trên tab nâng cao, bạn sẽ tìm thấy các tùy chọn mà các nhà thiết kế web có kinh nghiệm hơn có thể thấy hữu ích, chẳng hạn như các thuộc tính CSS và HTML tùy chỉnh. Tại đây, bạn có thể áp dụng CSS tùy chỉnh cho bất kỳ phần tử nào trong số nhiều phần tử của mô-đun. Bạn cũng có thể áp dụng các lớp CSS và ID tùy chỉnh cho mô-đun, có thể được sử dụng để tùy chỉnh mô-đun trong tệp style.css của chủ đề con của bạn.

tùy chọn nâng cao boutique divi.png

ID CSS

Nhập một ID CSS tùy chọn để sử dụng cho mô-đun này. ID có thể được sử dụng để tạo kiểu CSS tùy chỉnh hoặc để liên kết đến các phần cụ thể trên trang của bạn.

Lớp CSS

Nhập các lớp CSS tùy chọn để sử dụng cho mô-đun này. Một lớp CSS có thể được sử dụng để tạo kiểu CSS tùy chỉnh. Bạn có thể thêm nhiều lớp, cách nhau bằng dấu cách. Các lớp này có thể được sử dụng trong chủ đề con Divi của bạn hoặc trong biểu định kiểu CSS tùy chỉnh mà bạn thêm vào trang của mình hoặc vào trang web của bạn bằng cách sử dụng các tùy chọn chủ đề Divi hoặc cài đặt trang Divi Builder.

CSS tùy chỉnh

CSS tùy chỉnh cũng có thể được áp dụng cho mô-đun và bất kỳ nội dung nào của mô-đun. Trong phần CSS tùy chỉnh, bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm các biểu định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục nhập CSS trong các cài đặt này đã được bao bọc trong các thẻ kiểu. Vì vậy, chỉ cần nhập các quy tắc CSS được phân tách bằng dấu chấm phẩy.

tầm nhìn

Tùy chọn này cho phép bạn kiểm soát các thiết bị mà mô-đun của bạn xuất hiện trên đó. Bạn có thể chọn tắt từng mô-đun của mình trên máy tính bảng, điện thoại thông minh hoặc máy tính để bàn. Điều này hữu ích nếu bạn muốn sử dụng các mod khác nhau trên các thiết bị khác nhau hoặc nếu bạn muốn đơn giản hóa thiết kế di động bằng cách loại bỏ một số yếu tố nhất định khỏi trang.

Hướng dẫn Divi khác

Bài viết này chứa 1 bình luận

  1. Bair thân mến,

    Cảm ơn vì đóng góp của bạn.
    Tôi có một câu hỏi về mô-đun cửa hàng và sẽ rất vui nếu bạn có thể trả lời cho tôi.
    Và tôi muốn các sản phẩm được chọn riêng lẻ được hiển thị trong mô-đun cửa hàng của tôi. Tôi nghĩ rằng điều này có thể đạt được bằng cách áp dụng "sản phẩm ngôi sao". Nhưng sau khi chọn tùy chọn này, tôi không thể tìm thấy bất kỳ cách nào để chọn các sản phẩm mong muốn của mình cho mô-đun. Tui bỏ lỡ điều gì vậy? Bạn có một lời giải thích?

    Trân trọng, Frederik

Để 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
12 cổ phiếu
cổ phiếu4
tweet2
Enregistrer6