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 600.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 WooC Commerce. Để tích hợp WooC Commerce, bạn cần cài đặt phiên bản WooC Commerce mới nhất.

WooC Commerce 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 thực tiễn tốt nhất về mã hóa. Sau khi kích hoạt plugin, bạn sẽ thấy hai phần mới "WooC Commerce" và "Products" đượ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 trường này để điều chỉnh cài đặt thương mại điện tử của mình và xuất bản các 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ù nhà sản xuất bao gồm các mô-đun WooC Commerce khác nhau, bạn cũng có thể tự sử dụng WooC Commerce mà không cần nhà xây dựng tốt. Bạn có thể tạo các trang tiêu chuẩn cho Checkout, Giỏ hàng, v.v., như được nêu 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. Điều này 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 nhảy vào 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 nhà xuất bản mỗi khi 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 Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động máy phát ở 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 đã nhập Visual Builder, bạn có thể nhấp vào nút cộng màu xám để thêm mô-đun mới vào trang của mình. Các mô-đun mới chỉ có thể được thêm vào bên trong các dòng. Nếu bạn bắt đầu một trang mới, đừng quên thêm một dò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ề việc sử dụng các yếu tố dòng và phần Divi.

shop module divi.png

Xác định vị trí mô-đun cửa hàng trong danh sách các mô-đun và nhấp vào nó để thêm nó 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ể nhập từ "cửa hàng", sau đó nhấp vào để tìm kiếm và tự động 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 các tùy chọn của mô-đun. Các tùy chọn này được tách thành ba nhóm chính: Nội dung , Conception et tiên tiến .

Ví dụ về trường hợp sử dụng: Trình bày các sản phẩm mới nhất trên trang chủ bằng mô-đun Store

Trong 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 mới 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 xây dựng trực quan để thêm phần thông thường với dòng có chiều rộng đầy đủ (cột 1). Sửa đổi tham số dòng để làm cho nó toàn băng thông với độ rộng máng xối tùy chỉnh của 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 bạn. Bạn có thể chọn từ các 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, sản phẩm bán chạy nhất hoặc sản phẩm được xếp hạng hàng đầu.

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 sản xuất để mọi thứ 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. Các cột 4 nên được sử dụng cho một hàng các cột 1. Các cột 3 nên được sử dụng cho một cột chiếm không gian 3 / 4 trong hàng. Cột 2 nên được sử dụng cho một cột chiếm không gian ánh sáng 1 / 2. Một cột nên được sử dụng cho một cột không gian 1 / 4 của dòng.

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]

Sắp xếp lại theo

Chọn cách bạn muốn sản phẩm của bạn đượ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, Giá từ 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.

Nhãn quản trị

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

Tùy chọn thiết kế xưởng

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

setting shop divi.png

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

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

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

Khi một mặt hàng được bán, một huy hiệu bán hàng 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 của 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 đề 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 đượ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.

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

Ở đây bạn có thể điều chỉnh kích thước của văn bản tiêu đề của bạn. 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 giá trị của kích thước văn bản mong muốn trực tiếp vào trường nhập vào bên phải của 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ị.

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

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

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

Khoảng cách củ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 trắng 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 trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập vào bên phải của 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ị.

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

Chiều cao của dòng ảnh hưởng đến khoảng trắng giữa mỗi dòng của văn bản tiêu đề của bạn Nếu bạn muốn tăng khoảng trắng giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập liệu nằm bên phải 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ị.

Chính sách giá

Bạn có thể thay đổi phông chữ của văn bản giải thưởng của mình bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ lớn đượ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ữ

Ở đây bạn có thể điều chỉnh kích thước của văn bản giá của bạn. 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 giá trị của kích thước văn bản mong muốn trực tiếp vào trường nhập vào bên phải của 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ị.

Màu văn bản giá

Theo mặc định, tất cả các màu văn bản Divi xuất hiện với màu trắng hoặc xám đen. Nếu bạn muốn thay đổi màu của văn bản giá của mình, hãy chọn màu mong muốn trong bộ chọn màu bằng tùy chọn này.

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

Khoảng cách củ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 trắng 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 trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập vào bên phải của 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ị.

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

Chiều cao của dòng ảnh hưởng đến khoảng trắng giữa mỗi dòng của văn bản giá của bạn Nếu bạn muốn tăng khoảng trắng giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập liệu nằm bên phải 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ị.

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

Trong 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 một trong nhiều yếu tố của mô-đun. Bạn cũng có thể áp dụng các lớp tùy chỉnh và ID CSS cho mô-đun, có thể được sử dụng để tùy chỉnh mô-đun trong tệp style.css của chủ đề con bạn.

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

ID CSS

Nhập một định danh 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 để tạo 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ởi một khoảng trắng. 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 hoặc trang web của mình bằng cách sử dụng 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à một trong các yếu tố bên trong của mô-đun. Trong phần Tùy chỉnh CSS bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm tùy chỉnh CSS trực tiếp cho từng hạng mục. Các mục CSS trong các tham số này đã được 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 điều khiển các thiết bị mà mô-đun của bạn xuất hiện. Bạn có thể chọn tắt 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 riêng lẻ. Này rất hữu ích nếu bạn muốn sử dụng các module khác nhau trên các thiết bị khác nhau, hoặc muốn đơn giản hóa thiết kế điện thoại di động bằng cách loại bỏ các yếu tố trang nhất định.

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 nó cho tôi.
    Và tôi muốn trong mô-đun cửa hàng của mình, các sản phẩm được chọn riêng lẻ sẽ hiển thị. Tôi nghĩ rằng có thể đạt được bằng cách áp dụng "sản phẩm 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 sản phẩm mong muốn cho mô-đun. Tôi đã bỏ lỡ một cái gì đó? 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
11 cổ phiếu
cổ phiếu4
tweet2
Enregistrer5