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

Cách sử dụng mô-đun Tóm tắt trên Divi Builder

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

Trước khi bạn có thể thêm mô-đun Tóm tắt vào trang của mình, trước tiên bạn phải truy cập Trình tạo Divi. 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 trang mới. Kích nút này sẽ kích hoạt Divi Builder, cho phép bạn truy cập vào tất cả các module Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo trong chế độ trực quan. Bạn cũng có thể nhấp vào nút Sử dụng Visual Builder khi bạn đang duyệt trang web ngược dòng của mình nếu bạn đã đăng nhập vào trang tổng quan WordPress của mình.

nút divi builder module blog divi

Khi đã nhập 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 bạn. Các mô đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn bắt đầu một trang mới, trước tiên đừng quên thêm một dòng vào trang của bạn.

module resume divi builder.png

Tìm mô-đun Tóm tắt 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ể nhập từ "Tóm tắt", sau đó nhấp vào nhập để tìm kiếm và tự động thêm mô-đun văn bản mô tả! Khi module được thêm vào, bạn sẽ được chào đón với danh sách các tùy chọn của module. 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 .

Trường hợp sử dụng để liệt kê các dịch vụ của công ty trên trang chủ

Vì mô-đun Tóm tắt kết hợp cả hình ảnh và văn bản để trình bày các tính năng nhất định, bạn có thể sử dụng nó để thêm danh sách các dịch vụ của công ty bạn vào trang chủ của bạn. Mô-đun Blurb cũng cho phép bạn chuyển đổi hình ảnh / biểu tượng và tiêu đề của bạn thành một liên kết đến trang dịch vụ của bạn. Trong ví dụ này, tôi sẽ sử dụng mô-đun Blurb để thêm bốn dịch vụ nổi bật vào một trang chủ.

trang dịch vụ divi.png

Để thêm bốn Blurb vào trang của bạn, hãy sử dụng trình xây dựng trực quan để thêm phần tiêu chuẩn với một hàng bốn cột. Sau đó thêm một mô-đun Blurb vào cột đầu tiên của dòng của bạn.

Cập nhật cài đặt Blurb với các mục sau:

Tùy chọn nội dung

Titre: [entrer le titre du service] Contenu: [entrer une brève description du service] URL: [ajouter une URL à la page du service] Utiliser l’icône: OUI
Biểu tượng: [chọn một biểu tượng minh họa dịch vụ của bạn]

Tùy chọn thiết kế

Biểu tượng màu: # 42bb99 (tạo màu như là lời khen ngợi của thiết kế trang web)
Sử dụng biểu tượng kích thước phông chữ: YES
Biểu tượng kích thước phông chữ: 68px (điều chỉnh kích thước của biểu tượng)
Văn bản định hướng: Trung tâm -
đầu Kích thước phông chữ: 24px
Kích thước phông chữ: 18px
Chiều cao đường cơ thể: 1.5em

dịch vụ thiết kế divi.png

Bây giờ văn bản giới thiệu đầu tiên của bạn đã hoàn thành.

danh sách dịch vụ divi builder.jpg

Bây giờ, nhân đôi mô-đun Tóm tắt mà bạn vừa tạo ba lần và kéo từng bản tóm tắt trùng lặp lên ba cột khác. Vì các thông số thiết kế của bạn đã được tích hợp vào các mô-đun trùng lặp, tất cả những gì bạn phải làm là sửa đổi nội dung (tiêu đề, nội dung, biểu tượng, URL, v.v.) và sửa đổi màu sắc cho phù hợp với từng dịch vụ của bạn.

danh sách đầy đủ các dịch vụ divi.jpg

Tùy chọn nội dung tóm tắt

Trong tab nội dung, bạn sẽ tìm thấy tất cả các phần 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ả các điều khiển đó cái gì xuất hiện trong mô-đun của bạn sẽ luôn nằm trong tab này.

thông số mô-đun tóm tắt wordpress.png

Tiêu đề

Đặt tiêu đề cho văn bản của bạn sẽ xuất hiện phía trên văn bản theo kiểu văn bản in đậm. Tùy chọn URL trong trường Tiêu đề sẽ cho phép bạn đặt tiêu đề của mình là siêu liên kết.

Nội dung

Trường này là nơi bạn có thể nhập nội dung của văn bản. Blurb Text cũng sẽ bao gồm toàn bộ chiều rộng của cột của bạn lên đến 550px.

URL

Đặt một URL web hợp lệ trong trường này để biến tiêu đề Blurb của bạn thành một liên kết. Việc để trống trường này sẽ chỉ để lại tiêu đề của bạn dưới dạng phần tử tĩnh.

URL mở

Bạn có thể chọn tại đây liên kết của bạn có mở trong cửa sổ mới hay không.

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ả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

Sử dụng biểu tượng

Khi sử dụng Blurbs, bạn có thể chọn sử dụng biểu tượng hoặc hình ảnh với văn bản của mình. Nếu bạn chọn "Có" cho tùy chọn "Sử dụng biểu tượng", bạn sẽ được cung cấp các tùy chọn sau để tùy chỉnh biểu tượng của mình. Nếu bạn không chọn sử dụng biểu tượng, bạn sẽ được nhắc tải lên hình ảnh thay thế.

biểu tượng

Nếu bạn chọn "Có" cho cài đặt "Sử dụng biểu tượng", tùy chọn này sẽ xuất hiện. Tùy chọn này hiển thị cho bạn danh sách các biểu tượng có sẵn mà bạn có thể sử dụng với văn bản bản trình bày của mình. Chỉ cần nhấp vào biểu tượng bạn muốn sử dụng và nó sẽ xuất hiện trong văn bản của bạn.

sử dụng các biểu tượng divi builder.png

Hình ảnh

Nếu bạn chưa chọn sử dụng biểu tượng, cài đặt này sẽ xuất hiện. Đặt URL hình ảnh hợp lệ tại đây hoặc chọn / tải lên hình ảnh qua Thư viện phương tiện WordPress. Các hình ảnh trong mô-đun Tóm tắt luôn xuất hiện ở giữa các cột của chúng và bao trùm toàn bộ chiều rộng cột của bạn lên đến 550px. Tuy nhiên, hình ảnh của bạn sẽ không bao giờ lớn hơn kích thước tải xuống ban đầu của nó. Chiều cao của hình ảnh trình bày được xác định bởi tỷ lệ co của hình ảnh gốc của bạn. Do đó, nên đặt tất cả các hình ảnh trình bày của bạn ở cùng độ cao nếu bạn đặt chúng cạnh nhau.

Màu nền

Đặt màu nền tùy chỉnh cho mô-đun của bạn hoặc để trống để sử dụng màu mặc định.

Hình nền

Nếu được đặt, hình ảnh này sẽ được sử dụng làm nền cho mô-đun này. Để xóa hình nền, chỉ cần xóa URL khỏi trường Cài đặt. Hình nền sẽ xuất hiện phía trên các màu nền, có nghĩa là màu nền của bạn sẽ không hiển thị khi áp dụng hình nền.

Nhãn quản trị

Điều này sẽ thay đổi thẻ của mô-đun trong trình tạo để dễ nhận biết. Khi sử dụng khung nhìn 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ế mô-đun tóm tắt

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. Tab này cho phép bạn thay đổi giao diện của mô-đun. Mỗi mô-đun Divi có một danh sách dài các thông số thiết kế mà bạn có thể sử dụng để sửa đổi bất cứ thứ gì.

mô-đun thiết kế tùy chọn tiếp tục divi.png

Màu sắc của biểu tượng

Nếu bạn chọn "Có" cho cài đặt "Sử dụng biểu tượng", tùy chọn này sẽ xuất hiện. Tùy chọn này cho phép bạn tùy chỉnh màu của biểu tượng. Theo mặc định, các biểu tượng được đặt thành màu nhấn của chủ đề của bạn.

Biểu tượng hình tròn

Nếu bạn chọn "Có" cho cài đặt "Sử dụng biểu tượng", tùy chọn này sẽ xuất hiện. Tùy chọn này cho phép bạn đặt biểu tượng của bạn trong một vòng tròn màu. Nếu bạn chọn "có" cho cài đặt này, các tùy chọn bổ sung sẽ có sẵn để tùy chỉnh màu và đường viền của vòng kết nối của bạn.

Màu của vòng tròn

Nếu bạn chọn "Có" cho cài đặt "Biểu tượng vòng kết nối", tùy chọn này sẽ xuất hiện. Ở đây bạn có thể chọn màu để sử dụng cho vòng kết nối của mình. Màu này độc lập với màu của biểu tượng bạn đã chọn trước đây. Biểu tượng của bạn, có màu sắc, sẽ xuất hiện bên trong một vòng tròn có màu bạn chọn ở đây.

Hiển thị đường viền của vòng kết nối

Nếu bạn chọn "Có" cho cài đặt "Biểu tượng vòng kết nối", tùy chọn này sẽ xuất hiện. Tùy chọn này cho phép bạn kích hoạt đường viền cho vòng kết nối của bạn. Nếu tùy chọn này được chọn, một tùy chọn bổ sung sẽ xuất hiện để chọn màu đường viền của bạn.

Màu đường viền vòng tròn

Nếu bạn chọn "Có" cho cài đặt "Hiển thị đường viền vòng tròn", tùy chọn này sẽ xuất hiện. Ở đây bạn có thể điều chỉnh màu của đường viền của hình tròn.

Vị trí hình ảnh / biểu tượng

Ở đây bạn có thể chọn vị trí của hình ảnh / biểu tượng của bạn. Nó có thể xuất hiện phía trên văn bản hoặc bên trái văn bản. Bằng cách đặt hình ảnh / biểu tượng ở bên trái văn bản của bạn, hình ảnh sẽ nhỏ hơn nếu nó được đặt ở trên cùng.

Sử dụng kích thước phông chữ của biểu tượng

Nếu tùy chọn này được bật, bạn có thể nhập kích thước tùy chỉnh cho biểu tượng được hiển thị ở trên hoặc hai ở bên trái văn bản bản trình bày của bạn.

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

Tải xuống các plugin và chủ đề WordPress tốt nhất từ ​​Envato và dễ dàng tạo trang web của bạn. Đã có hơn 49.720.000 lượt tải xuống. [ĐỘC QUYỀN]

Màu văn bản

Nếu văn bản trình bày của bạn được đặt trên nền tối, màu văn bản sẽ được đặt thành "Tối". Ngược lại, nếu văn bản thuyết trình của bạn được đặt trên nền sáng, màu văn bản sẽ được đặt thành "Ánh sáng".

Định hướng văn bản

Trình đơn thả xuống này cho phép bạn chỉ định hướng của văn bản để văn bản được canh lề, căn giữa hoặc canh lề trái.

Phông chữ tiêu đề

Bạn có thể thay đổi phông chữ của tiêu đề bằng cách chọn phông chữ bạn chọn từ trình đơn thả xuống. Divi có hàng tá phông chữ tuyệt vời được hỗ trợ 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, chữ hoa và gạch chân.

Kích thước của phông chữ đầu trang

Ở đâ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 khoảng thời gian để tăng hoặc giảm kích thước văn bản của mình hoặc bạn có thể 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 nhập 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" theo kích thước của bạn để thay đổi loại đơn vị đo.

module tóm tắt phần style.png

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

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

Khoảng cách của đầu thư

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống 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 của văn bản tiêu đề, hãy sử dụng thanh trượt khoảng thời gian để điều chỉnh khoảng trắng hoặc nhập kích thước của khoảng cách mong muốn vào trường nhập ở bên phải của thanh trượt. Các trường nhập 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" theo kích thước của bạn để thay đổi loại đơn vị đo.

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

Chiều cao dòng ảnh hưởng đến khoảng trống giữa mỗi dòng của văn bản tiêu đề 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 khoảng thời gian để đ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 ở bên phải con trỏ. Các trường nhập 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" theo kích thước của bạn để thay đổi loại đơn vị đo.

Phông chữ cơ thể

Bạn có thể thay đổi phông chữ của cơ thể bằng cách chọn phông chữ bạn chọn từ trình đơn thả xuống. Divi có hàng tá phông chữ tuyệt vời được hỗ trợ 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, chữ hoa và gạch chân.

Kích thước phông chữ cơ thể

Ở đây bạn có thể điều chỉnh kích thước của văn bản. Bạn có thể kéo thanh trượt khoảng thời gian để tăng hoặc giảm kích thước văn bản của mình hoặc bạn có thể 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 nhập 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" theo kích thước của bạn để thay đổi loại đơn vị đo.

Màu văn bản nội dung

Theo mặc định, tất cả các màu văn bản trong Divi xuất hiện bằng 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 nội dung, hãy chọn màu mong muốn trong bộ chọn màu bằng cách sử dụng tùy chọn này.

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

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống 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 nội dung của bạn, hãy sử dụng thanh trượt khoảng thời gian để điều chỉnh khoảng trắng hoặc nhập kích thước của khoảng cách mong muốn vào trường nhập ở bên phải của thanh trượt. Các trường nhập 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" theo kích thước của bạn để thay đổi loại đơn vị đo.

Chiều cao của đường kẻ

Chiều cao dòng ảnh hưởng đến không gian giữa mỗi dòng của văn bản nội dung. 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 khoảng thời gian để đ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 ở bên phải của thanh trượt. Các trường nhập 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" theo kích thước của bạn để thay đổi loại đơn vị đo.

Sử dụng đường viền

Bật tùy chọn này sẽ đặt đường viền xung quanh mô-đun của bạn. Đường viền này có thể được tùy chỉnh bằng các tham số có điều kiện sau.

Màu của đường viền

Tùy chọn này ảnh hưởng đến màu của đường viền của bạn. Chọn màu tùy chỉnh trong bộ chọn màu để áp dụng màu đó cho đường viền của bạn.

Chiều rộng của đường viền

Theo mặc định, đường viền có chiều rộng là 1 pixel. Bạn có thể tăng giá trị này bằng cách kéo thanh trượt trong phạm vi hoặc nhập giá trị tùy chỉnh vào trường nhập ở bên phải thanh trượt. Đơn vị tùy chỉnh của các biện pháp hỗ trợ, có nghĩa là bạn có thể thay đổi đơn vị mặc định là "px" thành một thứ khác, như em, vh, vw, v.v.

cấu hình của sbourdires module resume divi builder.png

Kiểu đường viền

Các đường viền hỗ trợ tám kiểu khác nhau, bao gồm: rắn, chấm, chấm, đôi, rãnh, đỉnh, inset và bắt đầu. Chọn kiểu bạn chọn từ trình đơn thả xuống để áp dụng cho đường viền của bạn.

Chiều rộng hình ảnh tối đa

Áp dụng giá trị chiều rộng tối đa ở đây sẽ giới hạn chiều rộng của hình ảnh bản trình bày. Điều này chỉ áp dụng cho các hình mờ không ở chế độ biểu tượng.

Lề tùy chỉnh

Lề là khoảng trống được thêm vào bên ngoài mô-đun của bạn, giữa mô-đun và phần tử tiếp theo ở trên, bên dưới hoặc bên trái và bên phải của phần tử đó. Bạn có thể thêm các giá trị lề tùy chỉnh vào một trong bốn mặt của mô đun. Để xóa lề tùy chỉnh, hãy xóa giá trị được thêm từ trường nhập. Theo mặc định, các giá trị này được tính theo pixel, nhưng bạn có thể nhập đơn vị đo lường tùy chỉnh trong các trường nhập.

Đệm tùy chỉnh

Vùng đệm là khoảng trống được thêm vào bên trong mô-đun của bạn, giữa cạnh của mô-đun và các phần tử bên trong của nó. Bạn có thể thêm các giá trị điền tùy chỉnh vào một trong bốn mặt của mô-đun. Để xóa lề tùy chỉnh, hãy xóa giá trị được thêm từ trường nhập. Theo mặc định, các giá trị này được tính theo pixel, nhưng bạn có thể nhập đơn vị đo lường tùy chỉnh trong các trường nhập.

Tùy chọn nâng cao

Trong tab Advanced, 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ể tìm thấy hữu ích, chẳng hạn như các thuộc tính CSS và HTML tùy chỉnh. Ở đây bạn có thể áp dụng một CSS tùy chỉnh cho một trong nhiều thành phần 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 của bạn.

Dễ dàng tạo cửa hàng trực tuyến của bạn

Tải xuống WooC Commerce miễn phí, 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. [Khuyến nghị]

phần tóm tắt mô-đun advance.png

ID CSS

Nhập ID CSS tùy chọn để sử dụng cho mô-đun này. Mã định danh 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 một 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ủ đề Divi Child của bạn hoặc trong CSS tùy chỉnh mà bạn thêm vào trang hoặc 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

Một CSS tùy chỉnh cũng có thể được áp dụng cho module và một trong các thành phần bên trong của module. 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 CSS trực tiếp vào từng phần tử. Các mục CSS trong các cài đặt này đã được nhúng trong các thẻ kiểu. Bạn chỉ cần nhập các quy tắc CSS được phân tách bằng dấu chấm phẩy.

Hình ảnh / Biểu tượng Hoạt ảnh

Điều này điều khiển hướng của hoạt ảnh bằng cách tải chậm.

Văn bản ALT của hình ảnh

Nếu bạn chưa chọn sử dụng biểu tượng, cài đặt này sẽ xuất hiện. Văn bản khác cung cấp bất kỳ thông tin cần thiết nào nếu hình ảnh không tải, được hiển thị chính xác hoặc trong bất kỳ tình huống nào khác mà người dùng không thể nhìn thấy hình ảnh. Nó cũng cho phép các công cụ tìm kiếm đọc và nhận ra hình ảnh.

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. 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. Điều này rất hữu ích nếu bạn muốn sử dụng các mô-đun 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ỏ các yếu tố nhất định của trang.

Đó là nó cho hướng dẫn này. Chúng tôi hy vọng đã chỉ cho bạn cách sử dụng mô-đun tóm tắt trên Divi.

Bài viết này chứa comments 0

Để 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 chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
13 cổ phiếu
cổ phiếu6
tweet2
Enregistrer5