Với Divi, ngay cả blog cũng là một mô-đun và “blog” của bạn có thể được đặt ở bất kỳ đâu trên thiết bị của bạn. Website và ở các định dạng khác nhau. Bạn có thể kết hợp các mô-đun blog và thanh bên để tạo các thiết kế blog cổ điển. Có thể tạo 1 cột, 2 cột hoặc 3 cột bằng blog và mô-đun thanh bên.

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

Trước khi có thể thêm mô-đun blog 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 sẽ có thể kích hoạt Divi Builder, điều này sẽ cung cấp cho bạn quyề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, đừng quên 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 yếu tố của dòng et de phần bởi Divi.

Tìm mô-đun blog 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ừ "blog" và sau đó nhấp vào enter để tự động tìm và thêm mô-đun blog! Sau khi mô-đun được thêm vào, bạn sẽ được chào đón bằng 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 của mô-đun blog với bố cục dạng lưới trong phần chuyên biệt với thanh bên phải

Đối với ví dụ này, tôi sẽ thêm một mô-đun blog vào một trang blog. Trang blog này có tiêu đề đầy đủ với mô-đun tìm kiếm bên dưới. Trong mô-đun tìm kiếm, tôi sẽ thêm một phần chuyên biệt với mô-đun blog ở bên trái và một phần thanh bên ở bên phải. Thanh bên ở bên phải chứa tiện ích con bài đăng gần đây, mô-đun chọn email và mô-đun người.

Đây là trang ví dụ trông như thế nào.

Lưu ý rằng mô-đun blog nằm trong một bố cục lưới ở phía bên trái của phần đặc biệt.

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

Sử dụng trình xây dựng trực quan để thêm một phần chuyên biệt với bố cục sau:

Bạn sẽ được nhắc thêm một cột hoặc một hàng hai cột cho phía bên trái. Chọn hàng 1 cột.

Sau đó thêm mô-đun blog vào dòng.

Cập nhật cài đặt blog như sau:

Tùy chọn nội dung

Số bài viết: 6
Tìm hiểu thêm Nút: BẬT
Hiển thị phân trang: KHÔNG
Màu nền lưới: #ffffff

Tùy chọn thiết kế

Bố cục: Lưới
Sử dụng Dropshadow: ON
Biểu tượng màu lớp phủ: #ffffff
Màu lớp phủ di chuột: Tiêu đề rgba (224,153,0,0.51)
Cảnh sát:
Tiêu đề cỡ chữ: 21px
Tiêu đề Màu văn bản: # 333333
Khoảng cách chữ: 1px
Chiều cao hàng tiêu đề: 1.2 em
Đường viền: YES
Màu của đường viền: # f0f0f0
Chiều rộng của đường viền: 1px
Kiểu viền: Rắn

Tùy chọn avancées

CSS tùy chỉnh (nút Đọc thêm):

màu: # e09900;
xem khối;
text-align: center;
margin-top: 10px;
border: 1px solid #ccc;
padding: 5px;
Chuyển đổi văn bản: Viết hoa;
khoảng cách chữ: 1px;

Nút CSS tùy chỉnh nâng cao cho nút Đọc thêm tạo giao diện tùy chỉnh phù hợp với thiết kế.

Trong phần thanh bên bên phải của bố cục phần chuyên gia, bạn sẽ cần thêm một mô-đun thanh bên để chèn tiện ích các bài đăng gần đây. Bên dưới, bạn sẽ cần thêm một mô-đun Email Optin. Và sau đó trong Email Optin, bạn cần thêm mô-đun Người với thông tin tác giả.

Đó là tất cả!

Tùy chọn nội dung blog

Trong tab Nội dung, bạn sẽ tìm thấy tất cả 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 ở trong tab này.

Số mặt hàng (Số mặt hàng)

Đặt số lượng tin nhắn bạn muốn hiển thị. Bạn sẽ cần có thông báo cho mọi thứ xuất hiện trong mô-đun này.

Chọn các danh mục bạn muốn đưa vào nguồn cấp dữ liệu bài đăng. Tất cả các danh mục tin nhắn bạn đã tạo sẽ xuất hiện ở đây để bạn chọn / bỏ chọn.

Danh mục bao gồm

Chọn danh mục bạn muốn đưa vào nguồn cấp dữ liệu.

Định dạng siêu ngày

Đặt định dạng ngày bạn muốn hiển thị trên các bài đăng trên blog của mình tại đây. Bố cục mặc định là M j, định dạng Y (ngày 6 tháng 2014 năm XNUMX) Xem WordPress codex trên các định dạng ngày để có thêm tùy chọn.

Nội dung

Hiển thị nội dung đầy đủ sẽ không cắt ngắn các bài viết của bạn trên trang chỉ mục. Show Snippet sẽ chỉ hiển thị đoạn văn bản của bạn.

Số bù

Chọn số lượng tin nhắn bạn muốn bù trừ. Ví dụ: nếu bạn bù đắp bằng 3 bài đăng, thì XNUMX bài đăng đầu tiên trong nguồn cấp dữ liệu blog của bạn sẽ không hiển thị.

Hiển thị hình ảnh nổi bật

Tùy chọn này cho phép bạn chọn có hay không muốn hình thu nhỏ xuất hiện trong mô-đun blog của bạn.

Đọc thêm nút

Tại đây, bạn có thể đặt có hiển thị liên kết "đọc thêm" sau đoạn mã hay không.

Hiển thị tác giả

Chọn xem bạn có muốn hiển thị tác giả của mỗi bài đăng trên blog trong hộp meta bài đăng bên dưới tiêu đề bài đăng hay không.

Hiển thị ngày

Chọn xem bạn có muốn hiển thị ngày mỗi bài viết được tạo trong hộp Mục Meta bên dưới tiêu đề thư hay không.

Hiển thị danh mục

Chọn có hay không hiển thị các danh mục bài đăng trong khu vực bài đăng bên dưới tiêu đề xuất bản.

Hiển thị số lượng nhận xét

Chọn xem bạn có muốn hiển thị số lượng bình luận trong hộp meta bài viết bên dưới tiêu đề của bài đăng hay không.

Xem phân trang

Chọn xem bạn có muốn hiển thị phân trang cho nguồn cấp dữ liệu này hay không. Để bật phân trang được đánh số, bạn sẽ cần cài đặt plugin Trang WP Navi .

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ùy chọn thiết kế blog

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

Bố trí

Bạn có thể chọn hiển thị các bài đăng trên blog của mình dưới dạng lưới hoặc bố cục toàn chiều rộng.

Hình ảnh chồng

Nếu tùy chọn này được bật, màu và biểu tượng lớp phủ sẽ hiển thị khi khách truy cập di chuột qua hình ảnh đã chọn của thư.

Màu biểu tượng lớp phủ

Tại đây, bạn có thể đặt màu tùy chỉnh cho biểu tượng lớp phủ.

Che phủ màu lơ lửng

Tại đây bạn có thể xác định màu tùy chỉnh cho lớp phủ.

Trình chọn biểu tượng di chuột

Tại đây bạn có thể xác định một biểu tượng tùy chỉnh cho lớp phủ.

Màu văn bản

Si blog của bạn được đặt trên nền sáng, màu văn bản phải được đặt thành “Tối”. Thị thực, vâng blog của bạn được đặt trên nền tối, màu văn bản phải được đặt thành “Sáng”.

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 của nội dung, 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 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 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 dòng, hãy sử dụng thanh trượt khoảng thời gian để điều chỉnh khoảng cách hoặc nhập kích thước khoảng trống 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ó.

Phông chữ Metas

Bạn có thể thay đổi phông chữ của siêu văn bản 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.

Cỡ chữ Metas

Tại đây bạn có thể điều chỉnh kích thước của văn bản meta 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 cho meta

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 siêu văn bản của mình, 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 các chữ cái meta

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 siêu văn bản 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 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 dòng Meta

Chiều cao dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong siêu văn bản 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 ở 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 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. Đơn vị đo lường tùy chỉnh được hỗ trợ, 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, ví dụ 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.

Tùy chọn blog nâng cao

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 hoặc trang web của mình bằng Tùy chọn Chủ đề Divi hoặc Cài đặt Trang Trình tạo Divi.

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.

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.