Mô-đun Người Divi là cách tốt nhất để tạo khối hồ sơ Cá nhân. Đây là một tiện ích bổ sung tuyệt vời để sử dụng trên các trang Giới thiệu về bản thân hoặc những trang giới thiệu các thành viên trong nhóm nơi bạn muốn tạo tiểu sử của từng người. Mô-đun này kết hợp văn bản, hình ảnh và các liên kết mạng xã hội thành một mô-đun gắn kết.
Cách cấu hình mô-đun Divi Person
Trước khi bạn có thể thêm mô-đun Divi Person 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. 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 người trong danh sách 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ừ "người" và sau đó nhấp vào enter để tự động tìm và thêm mô-đun Người! 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 mẫu: Thêm Phần "Nhóm của chúng tôi" vào Trang Giới thiệu về Chúng tôi
Trang giới thiệu về chúng tôi là một nơi tốt để giới thiệu các thành viên trong nhóm của bạn bằng cách sử dụng mô-đun Người. Nó thêm dấu ấn cá nhân và có thể giúp xây dựng lòng tin với khách hàng mới.
Đối với ví dụ này, tôi sẽ chỉ cho bạn cách sử dụng mô-đun Người để thêm phần "Nhóm của chúng tôi" vào trang về một doanh nghiệp nhỏ. Tôi sẽ sử dụng bố cục ba người, ba cột để giữ cho phần nhỏ gọn hơn và phù hợp với thiết kế tổng thể của trang.
Sử dụng Visual Builder, chèn một phần tiêu chuẩn mới với một hàng ba cột (1/3 1/3 1/3). Sau đó, thêm một mô-đun Người vào cột đầu tiên.
Cập nhật cài đặt mô-đun Person như sau:
Tùy chọn nội dung
Tên: [Nhập tên của người đó]
Chức vụ: [Nhập phần mở rộng của người đó]
Nhập URL cho hồ sơ mạng xã hội
Mô tả: [Nhập tiểu sử ngắn gọn]
Hình ảnh: [Chụp ảnh 600 x 600]
Tùy chọn thiết kế
Biểu tượng màu: # fcbf00
Màu biểu tượng di chuột: # e0a831
Phông chữ tiêu đề: Roboto, in đậm, đòn bẩy in-
Kích thước phông chữ tiêu đề: 30px
Màu văn bản tiêu đề: # 505050
Khoảng cách tiêu đề thư: 1px
Chiều cao hàng tiêu đề: 1.5em
Kích thước phông chữ nội dung: 18px
Kích thước đường cơ thể: 1.4em
Đệm tùy chỉnh: 15px lên, 15px phải, 15px xuống, 15px trái
Tùy chọn nâng cao (CSS tùy chỉnh)
Yếu tố chính:
-webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);
box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);
Lưu cài đặt
Bây giờ sao chép mô-đun Person mà bạn vừa tạo hai lần và kéo các mô-đun đã nhân bản vào cột thứ hai và thứ ba trong hàng. Vì thiết kế đã được thực hiện cho từng mô-đun “Người” được sao chép, tất cả những gì bạn cần làm là cập nhật nội dung với hình ảnh, tiêu đề, vị trí, url mạng xã hội và mô tả. của con người.
Đó là tất cả!
Tùy chọn nội dung người
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.
Tên riêng
Đây là tên của người bạn đang giới thiệu. Tên được hiển thị ở đầu mô-đun bằng văn bản lớn hơn.
Chức vụ
Vị trí được hiển thị bên dưới tên bằng văn bản nhỏ hơn. Điều này thường được sử dụng để chỉ vị trí chuyên môn của một người trong nhóm công ty. Ví dụ, Nick Roach, "Nhà thiết kế đồ họa".
URL tiểu sử trên Facebook
Nhập URL trên trang Facebook của bạn hoặc để trống để tắt biểu tượng Facebook.
URL tiểu sử trên Twitter
Nhập URL trên trang Twitter của bạn hoặc để trống để tắt biểu tượng Twitter.
URL tiểu sử trên Google+
Nhập URL trên trang Google+ của bạn hoặc để trống để tắt biểu tượng Google+.
URL tiểu sử LinkedIn
Nhập URL trên trang LinkedIn của bạn hoặc để trống để tắt biểu tượng LinkedIn.
Mô tả
Nhập nội dung của văn bản chính cho mô-đun của bạn tại đây.
URL hình ảnh
Tại đây bạn có thể tải ảnh để sử dụng trong bio.
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 màu nền, có nghĩa là màu nề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 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ế cho mô-đun Người
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ì.
Màu biểu tượng
Tùy chọn này kiểm soát màu sắc của các biểu tượng mạng xã hội xuất hiện trong hồ sơ của mỗi người. Theo mặc định, các biểu tượng này có màu xám, bạn có thể thay đổi màu này bằng cách sử dụng cài đặt này.
Màu biểu tượng khi di chuột
Bạn cũng có thể thay đổi màu di chuột cho các biểu tượng mạng xã hội. Chọn màu mong muốn bằng công cụ chọn màu trong cài đặt này.
Màu văn bản
Tại đây bạn có thể chọn giá trị văn bản của mình. Nếu bạn đang làm việc trên nền tối, văn bản của bạn sẽ được bật. Nếu bạn đang làm việc với nền sáng, văn bản của bạn phải tối.
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ừ menu thả xuống. Divi đi kèm với hàng chục phông chữ tuyệt vời do Google Fonts cung cấp. 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ị 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 của văn bản 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 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 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 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 trong 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 giá trị 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 chục phông chữ tuyệt vời do Google Fonts cung cấp. 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 văn bản nội dung 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 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 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 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 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 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 trong nội dung 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 của bạ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.
Tùy chọn nâng cao của mô-đun Person
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.
Hoạt hình
Theo mặc định, hình ảnh được làm động khi bạn cuộn trang. Tại đây bạn có thể chọn hướng hoạt ảnh hoặc hủy kích hoạt nó.
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 riêng mô-đun của mình trên máy tính bảng, SmartPhones 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]
Hướng dẫn Divi khác
- trang web 5 để sử dụng hàng Divi chủ đề
- Cách thêm văn bản vào sản phẩm Divi WooCommerce
- Cách thay đổi màu menu giữa các trang Divi
- Cách cá nhân hóa lưới của blog với Divi
- Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
- Cách tạo thanh trượt Divi toàn màn hình
- Cách thay đổi màu của menu giữa các trang Divi
- Các tính năng có thể bạn chưa biết về Divi
- Cách sử dụng Divi Builder trên WordPress
- Cách sử dụng mô-đun cuộn video Divi
- Cách sử dụng mô-đun Divi Builder Flip
- Cách thêm mô-đun chứng thực trên Divi Builder
- Cách sử dụng mô-đun văn bản Divi
- Cách tạo thanh trượt trên Divi
- Cách chỉnh sửa vai trò người dùng Divi
- Cách sử dụng mô-đun Truyền thông xã hội Divi
- Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
- Cách sử dụng mô-đun bên Divi
- Cách sử dụng mô-đun bảng giá Divi
- Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
- Cách thêm mô-đun video của Divi
- Cách sử dụng mô-đun điều hướng bài viết
- Cách sử dụng mô-đun tìm kiếm Divi
- Cách sử dụng mô-đun ví Divi
- Cách sử dụng mô-đun người trên Divi Builder
- Cách sử dụng mô-đun ví với bộ lọc Divi
- Cách sử dụng mô-đun trượt toàn bộ chiều rộng
- Cách sử dụng Mô-đun hình ảnh Divi Builder
- Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
- Cách sử dụng mô-đun thư viện hình ảnh
- Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
- Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
- Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
- Cách sử dụng Module Divi Counter
- Cách sử dụng thanh trượt bài viết trên Divi Builder
- Cách sử dụng mô-đun Optin Email Optin
Bonjour,
Cảm ơn bạn vì những bài viết rất hữu ích.
Cũng giống như URL của Facebook, Twitter, Google+ hoặc LinkedIn, bạn không biết có thể thêm URL vào hồ sơ Instagram của mình không? Cảm ơn bạn 🙂
Salut!
Khi tôi tạo dự án hoặc bài đăng và sử dụng nhóm Người, tại sao trường Vị trí lại biến mất khi tôi xem các dự án hoặc bài đăng bằng blog hoặc nhóm blog có thể lọc?
Làm cách nào để hiển thị trường Vị trí người trong chế độ xem Lưới Blog?
Merci!
Chào buổi tối và cảm ơn bạn đã chờ đợi.
Thông thường, các mô-đun tìm kiếm không thực thi các mã ngắn. Do đó, mô-đun Person (giống như bất kỳ mô-đun nào khác) tạo ra một mã ngắn chỉ có thể được hiển thị bằng cách xem trước bài viết hoặc trang chứ không phải từ mô-đun cung cấp bản xem trước của bài báo hoặc trang đã nói.