Trước khi 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 Divi Builder. Một khi Chủ đề Divi cài đặt trên của bạn Website, bạn sẽ nhận 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. Bằng cách nhấp vào nút này, bạn kích hoạt Divi Builder, cho phép bạn truy cập vào tất cả các mô-đun 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 qua Website ngược dòng nếu bạn đã đăng nhập vào bảng điều khiển WordPress của mình.

Sau khi 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.

Tìm mô-đun Tóm tắt trong danh sách các mô-đun và nhấp vào mô-đun đó để thêm 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" và sau đó nhấp vào enter để tự động tìm và thêm mô-đun văn bản mô tả! Sau khi mô-đun được thêm vào, bạn sẽ được chào đón với danh sách các 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 .

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 để giới thiệu một số tính năng nhất định, bạn có thể sử dụng mô-đun này để thêm danh sách các dịch vụ kinh doanh vào trang chủ của mình. Mô-đun Blurb cũng cho phép bạn biến hình ảnh / biểu tượng và tiêu đề của mình thành một liên kết đến trang dịch vụ của bạn. Đối với 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 trang chủ.

Để thêm bốn phần Làm mờ vào trang của bạn, hãy sử dụng trình tạo 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ô-đun Blurb vào cột đầu tiên của hàng của bạn.

Cập nhật cài đặt Blurb bằng cách sau:

Tùy chọn nội dung

Tiêu đề: [nhập tiêu đề dịch vụ]
Nội dung: [nhập mô tả ngắn gọn về dịch vụ]
URL: [thêm URL vào trang dịch vụ]
Sử dụng biểu tượng: CÓ
Biểu tượng: [chọn biểu tượng minh họa dịch vụ của bạn]

Tùy chọn thiết kế

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

Bây giờ văn bản giới thiệu đầu tiên của bạn đã kết thúc.

Bây giờ hãy sao chép 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 vào ba cột còn lại. Vì cài đặt thiết kế của bạn đã được tích hợp vào các mô-đun trùng lặp nên tất cả những gì bạn cần 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 để điều chỉnh chúng cho phù hợp với từng dịch vụ của bạn.

Tóm tắt 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ả những điều đó cái gì xuất hiện trong mô-đun của bạn sẽ luôn ở trong tab này.

Tiêu đề

Đặt cho văn bản của bạn một tiêu đề sẽ xuất hiện phía trên văn bản trong một kiểu văn bản in đậm. Tùy chọn URL nằm dưới trường Tiêu đề sẽ cho phép bạn đặt tiêu đề của mình thành một 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 nội dung của văn bản. Văn bản Blurb cũng sẽ bao phủ 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ệ vào trường này để biến tiêu đề Blurb của bạn thành một liên kết. Để 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ở

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

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 một biểu tượng, thay vào đó bạn sẽ được nhắc tải lên một hình ảnh.

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 nội dung chính 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.

Hình ảnh

Nếu bạn không chọn sử dụng một biểu tượng, cài đặt này sẽ xuất hiện. Đặt một url hình ảnh hợp lệ tại đây hoặc chọn / tải lên một hình ảnh qua thư viện phương tiện WordPress. 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à trải dài toàn bộ chiều rộng của 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 lên ban đầu. Chiều cao của hình ảnh trình chiếu được xác định bởi tỷ lệ co của hình ảnh gốc của bạn. Do đó, bạn nên đặt tất cả các hình ảnh trình chiếu của bạn ở cùng một độ cao nếu bạn đặt chúng cạnh nhau.

Màu nền

Xác định 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 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 nhãn mô-đun trong bộ tạo để dễ dàng nhận biết. Khi sử dụng dạng 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óm tắt tùy chọn thiết kế mô-đun

Trong tab Thiết kế, bạn sẽ tìm thấy tất cả các tùy chọn kiểu 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 sửa đổ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 để điều chỉnh bất kỳ thứ gì.

Màu 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 sắc của biểu tượng. Theo mặc định, các biểu tượng được đặt thành màu nhấn cho chủ đề của bạn.

Biểu tượng vòng 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 mình trong một vòng tròn màu. Nếu bạn chọn "có" cho cài đặt này, bạn sẽ được cung cấp các tùy chọn bổ sung để tùy chỉnh màu sắc và đường viền của vòng tròn 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 tròn", tùy chọn này sẽ xuất hiện. Tại đâ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 đó. Biểu tượng của bạn, với màu sắc của nó, sẽ xuất hiện bên trong một vòng tròn với 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 tròn", 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 mình. 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 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

Tại đây bạn có thể chọn vị trí của hình ảnh / biểu tượng của mình. 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 đặt ở trên cùng.

Sử dụng kích thước phông chữ 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 biểu tượng ở bên trái vùng ngoại ô của bạn.

Màu văn bản

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

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

Menu thả xuống này cho phép bạn chỉ định hướng văn bản của bạn là căn trái, căn giữa hoặc căn phả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ữ mong muốn từ trình đơn 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.

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 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 đầ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 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 của tiêu đề, hãy chọn màu bạn 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 giữa các chữ cái tiê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 khoảng cách để điều chỉnh khoảng cách hoặc nhập kích thước của khoảng cách mà bạn muốn vào trường nhập ở 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 kích thước của bạn để thay đổi loại đơn vị của nó.

Chiều cao hàng tiêu đề

Chiều cao hàng ảnh hưởng đến khoảng cách giữa mỗi hà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 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 ở 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 kích thước của bạn để thay đổi loại đơn vị của nó.

Phông chữ cơ thể

Bạn có thể thay đổi phông chữ nội dung 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ữ 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ữ cơ thể

Tại đây, bạn có thể điều chỉnh kích thước của nội dung 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 đầ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 kích thước của bạn để thay đổi loại đơn vị của nó.

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 đều có màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của nội dung, 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 chữ cái

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 nội dung văn bản, hãy sử dụng thanh trượt khoảng cách để đ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 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 kích thước của bạn để thay đổi loại đơn vị của nó.

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

Chiều cao dòng ảnh hưởng đến khoảng cách giữa mỗi dòng văn bản nội dung. 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 khoảng để đ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 kích thước của bạn để thay đổi loại đơn vị của nó.

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

Bật tùy chọn này sẽ đặt mộ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ách sử dụng các tham số đ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ột màu tùy chỉnh từ công cụ chọn màu để áp dụng nó cho đường viền của bạn.

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

Theo mặc định, các đường viền có chiều rộng 1 pixel. Bạn có thể tăng giá trị này bằng cách kéo thanh trượt 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. Hỗ trợ các đơn vị đo lường tùy chỉnh, có nghĩa là bạn có thể thay đổi đơn vị mặc định từ "px" thành một cái gì đó khác như em, vh, vw, v.v.

Kiểu đường viền

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

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

Việc á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 trình chiếu. Điều này chỉ ảnh hưởng đến các vệt mờ không ở chế độ biểu tượng.

Ký quỹ 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 bên trên, bên dưới hoặc bên trái và bên phải của nó. Bạn có thể thêm các giá trị lề tùy chỉnh vào bất kỳ cạnh nào trong bốn cạnh của mô-đun. Để xóa một lề tùy chỉnh, hãy xóa giá trị gia tăng khỏi trường nhập. Theo mặc định, các giá trị này được đo bằng pixel, nhưng bạn có thể nhập các đơn vị đo lường tùy chỉnh vào các trường đầu vào.

Đệm tùy chỉnh

Phần đệm là không gian đượ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ị đệm tùy chỉnh vào bất kỳ mặt nào trong bốn mặt của mô-đun. Để xóa một lề tùy chỉnh, hãy xóa giá trị gia tăng khỏi trường nhập. Theo mặc định, các giá trị này được đo bằng pixel, nhưng bạn có thể nhập các đơn vị đo lường tùy chỉnh vào các trường đầu vào.

Tùy chọn nâng cao Mô-đun tóm tắt

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.

ID CSS

Nhập một ID CSS tùy chọn để sử dụng cho mô-đun này. Một 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ởi dấu cách. Các lớp này có thể được sử dụng trong Chủ đề Divi Con hoặc trong CSS tùy chỉnh mà bạn thêm vào trang của mình hoặc Website 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à bất kỳ phần tử bên trong 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 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 với các thẻ kiểu. Vì vậy, 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.

Hoạt ảnh hình ảnh / biểu tượng

Điều này kiểm soát hướng của hoạt ảnh tải lười biếng.

ALT văn bản từ hình ảnh

Nếu bạn không chọn sử dụng một 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 nào cần thiết nếu hình ảnh không được tải, 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ông cụ tìm kiếm đọc và nhận dạng 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 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 xóa một số phần tử khỏi 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.