Hướng dẫn Divi: Cách sử dụng mô-đun Chức danh Công việc

Mô-đun Chức danh Công việc của Divi hiển thị tiêu đề của bài đăng hiện tại của bạn và, nếu có, hình ảnh bài đăng và siêu dữ liệu một cách trang nhã. Điều này cho phép bạn tạo nhiều bài đăng độc đáo hơn khi tạo bài đăng của mình bằng Divi Builder.

Cách thêm mô-đun Tiêu đề bài đăng vào trang của bạn

Trước khi bạn có thể thêm mô-đun tiêu đề vào trang của mình, trước tiên bạn phải chuyển sang 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. 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 qua Website ở phía trước nếu bạn đã đăng nhập vào bảng điều khiển WordPress của mình.

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.

Tìm mô-đun tiêu đề bài viế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ừ “tiêu đề bài đăng” và sau đó nhấp vào enter để tự động tìm và thêm mô-đun chức danh công việc! 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 .

Trường hợp sử dụng ví dụ: định dạng mô-đun tiêu đề bài đăng cho bài đăng trên blog

Đối với ví dụ này, tôi sẽ cho bạn thấy việc tùy chỉnh tiêu đề bài đăng cho bài đăng trên blog dễ dàng như thế nào.

Điều đầu tiên bạn cần làm là truy cập trang "Chỉnh sửa bài viết" của bảng điều khiển WordPress. Trong khu vực Cài đặt bài viết Divi ở trên cùng bên phải, hãy đặt bố cục thành Chiều rộng đầy đủ và ẩn tiêu đề bài viết.

Sử dụng Visual Builder, thêm Phần thông thường với một hàng chiều rộng đầy đủ (1 cột). Sau đó, thêm mô-đun Tiêu đề bài đăng vào hàng.

Cập nhật cài đặt tiêu đề bài đăng như sau:

Tùy chọn nội dung

Hiển thị danh mục bài đăng: KHÔNG Hiển thị Số bình luận: KHÔNG Hiển thị Ảnh nổi bật: CÓ Ảnh nổi bật Vị trí: Tiêu đề / Ảnh nền meta

Tùy chọn thiết kế

Hướng văn bản: trung tâm Màu văn bản: Sáng Màu văn bản nền: CÓ Màu nền văn bản: rgba (0,0,0,0.35) Phông chữ Tiêu đề: Roboto (đậm) Tiêu đề Kích thước phông chữ: 50px Tiêu đề Khoảng cách giữa các chữ: tiêu đề 2px Chiều cao dòng: 1em Meta Phông chữ: Raleway Light Meta Kích thước phông chữ: 24px Meta Màu phông chữ: # e0ba67

Lưu cài đặt

Đó là tất cả. Bây giờ bạn không bao giờ phải giải quyết cho một chức danh công việc nhàm chán nữa!

Đăng tùy chọn nội dung tiêu đề

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.

Hiển thị tiêu đề

Tại đây bạn có thể chọn hiển thị hoặc không hiển thị tiêu đề của bài viết.

Hiển thị Meta

Tại đây bạn có thể chọn có hiển thị Meta bài đăng hay không.

Hiển thị tác giả

Tại đây bạn có thể chọn hiển thị tên tác giả trong Post Meta.

Hiển thị ngày

Tại đây bạn có thể chọn hiển thị ngày hoặc không.

Định dạng ngày tháng

Tại đây bạn có thể đặt định dạng ngày trong Post Meta. Giá trị mặc định là 'M j, Y'

Hiển thị các danh mục bài viết

Tại đây bạn có thể chọn hiển thị hoặc không hiển thị các danh mục trong Post Meta. Lưu ý: Tùy chọn này không hoạt động với các loại bài đăng tùy chỉnh.

Xem nhận xét

Tại đây bạn có thể chọn hiển thị số lượng bình luận trong Post Meta hay không.

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

Tại đây bạn có thể chọn hiển thị hoặc không hiển thị hình ảnh đã chọn.

Vị trí Hình ảnh Nổi bật

Tại đây bạn có thể chọn nơi đặt ảnh đã chọn.

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.

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ế chức danh công việc

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

Sử dụng hiệu ứng thị sai

Nếu vị trí của hình ảnh đã chọn được đặt thành "tiêu đề / Hình nền Meta", bạn có thể chọn sử dụng hoặc không sử dụng hiệu ứng thị sai cho hình ảnh đã chọn.

Phương pháp thị sai

Tại đây, bạn có thể chọn phương pháp thị sai để sử dụng cho hình ảnh đã chọn - CSS hoặc True Parallax.

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

Tại đây bạn có thể chọn hướng cho văn bản Tiêu đề / Meta.

Màu văn bản

Tại đây bạn có thể chọn màu cho văn bản Tiêu đề / Meta.

Sử dụng màu nền văn bản

Tại đây bạn có thể chọn có sử dụng màu nền cho tiêu đề / meta-tex hay không.

Màu nền văn bản

Nếu màu nền được bật, hãy chọn màu nền mong muốn tại đây.

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ừ 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 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ó.

Phông chữ Metas

Bạn có thể thay đổi phông chữ của văn bản meta 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 siêu văn bản 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 dữ liệu 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 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 giữa các chữ cái trong siêu dữ liệ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 siêu văn bản 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 dòng meta

Chiều cao hàng ảnh hưởng đến khoảng cách giữa mỗi hà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 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ó.

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ừ bộ 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 như em, vh, vw, v.v.

Kiểu đường viền

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

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 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. Để loại bỏ 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

Infill 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. Để loại bỏ 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.

Hiển thị các tùy chọn tiêu đề 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. 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 hoặc trang web của mình. 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ỳ 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.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG CHỦ ĐỀ DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Divi Tutorial: Cách sử dụng module Job Title