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

Divi Tutorial: Cách sử dụng Mô-đun Divi Builder Person

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

Mô-đun Divi Person là cách tốt nhất để tạo khối hồ sơ cá nhân. Đây là một mô-đun tuyệt vời để sử dụng trên các trang Giới thiệu về tôi hoặc trên các thành viên trong nhóm nơi bạn muốn tạo tiểu sử của các cá nhân. Mô-đun này kết hợp văn bản, hình ảnh và phương tiện truyền thông xã hội liên kết thành một mô-đun mạch lạc.

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 nhảy vào Divi Builder. 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 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 Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động máy phát ở 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 trang web của bạn ở phía trước nếu bạn được kết nối với bảng điều khiển WordPress của bạn.

divi builder

Khi bạn đã nhập Visual Builder, bạn có thể nhấp vào nút cộng màu xám để thêm mô-đun mới vào trang của mình. Các mô-đun mới chỉ có thể được thêm vào bên trong các dòng. Nếu bạn bắt đầu một trang mới, đừng quên thêm một dòng vào trang của bạn trước. Chúng tôi có hướng dẫn tuyệt vời về việc sử dụng các yếu tố của dòng et de phần của Divi.

person module divi.png

Xác định vị trí mô-đun người trong danh sách các mô-đun và nhấp vào nó để thêm nó 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", sau đó nhấp vào enter để tìm kiếm và tự động thêm mô-đun Person! Sau khi mô-đun được thêm vào, bạn sẽ được chào đón bởi danh sách các tùy chọn của mô-đun. Các tùy chọn này được tách thành ba nhóm chính: Nội dung , Conception et tiên tiến .

Ví dụ về trường hợp sử dụng: Thêm phần "Nhóm của chúng tôi" vào trang Giới thiệu

Trang Giới thiệu 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 mô-đun Person. Điều này thêm một liên lạc cá nhân và có thể giúp xây dựng niềm tin với khách hàng mới.

Trong ví dụ này, tôi sẽ chỉ cho bạn cách sử dụng mô-đun Person để thêm phần "Nhóm của chúng tôi" vào một 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ế chung của trang.

trang về us.jpg

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 Person vào cột đầu tiên.

module người wordpress divi.png

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 người] Vị trí: [Nhập tiện ích mở rộng của người] Nhập URL cho Hồ sơ truyền thông xã hội
Mô tả: [Nhập tiểu sử ngắn] Hình ảnh: [Nhập hình ả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, tận dụng
Cỡ chữ của tiêu đề: 30px
Màu văn bản tiêu đề: # 505050
Thư tiêu đề khoảng cách: 1px
Chiều cao của dòng tiêu đề: 1.5em
Kích thước phông chữ cơ thể: 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);

thay đổi hồ sơ cá nhân divi.png

Lưu cài đặt

Bây giờ, sao chép mô-đun Person bạn vừa tạo hai lần và kéo các mô-đun trùng lặp vào cột thứ hai và thứ ba của hàng. Vì thiết kế đã bị hoãn lại cho mỗi mô-đun "Người" trùng lặ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 phương tiện truyền thông xã hội và mô tả. của người

Vậy là xong!

kết quả mô-đun người divi.jpg

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

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ùy chọn nội dung divi.png

Tên riêng

Đây là tên của người bạn đang trình bày. Tên được hiển thị ở đầu mô-đun trong một văn bản lớn hơn.

Chức vụ

Vị trí được hiển thị dưới tên trong một văn bản nhỏ hơn. Điều này thường được sử dụng để chỉ vị trí chuyên nghiệp của một người trong nhóm kinh doanh. Ví dụ: Nick Roach, "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

Đặ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. Các 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 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ễ nhận biết. Khi bạn sử dụng chế độ 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ế 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 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. Đây là tab bạn sẽ sử dụng để thay đổi giao diện của mô-đun. Mỗi mô-đun Divi có một danh sách dài các tham số thiết kế mà bạn có thể sử dụng để thay đổi bất cứ điều gì.

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

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

parametre design module person divi.png

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

Tùy chọn này kiểm soát màu của các biểu tượng phương tiện truyền thô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, mua bạn có thể thay đổi màu này bằng cài đặt này.

Màu sắc biểu tượng trên cầu vượt

Bạn cũng có thể thay đổi màu di chuột của các biểu tượng phương tiện truyền thông xã hội. Chọn màu mong muốn bằng cách sử dụng bộ chọn màu trong cài đặt này.

Màu văn bản

Ở đây bạn có thể chọn giá trị của văn bản của bạn. Nếu bạn đang làm việc trên một nền tối, văn bản của bạn sẽ được bật. Nếu bạn làm việc với một nền tảng rõ ràng, văn bản của bạn sẽ tối.

Phông chữ

Bạn có thể thay đổi phông chữ của văn bản tiêu đề 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ữ lớn đượ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 của 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 bạn. 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 giá trị của kích thước văn bản mong muốn trực tiếp vào trường nhập vào 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 giá trị kích thước của bạn để thay đổi loại đơn vị.

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 Divi xuất hiện với màu trắng hoặc xám đen. 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 trong bộ chọn màu bằng tùy chọn này.

Khoảng cách của tiêu đề thư

Khoảng cách củ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 trắng 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 trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập vào 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 giá trị kích thước của bạn để thay đổi loại đơn vị.

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

Chiều cao của dòng ảnh hưởng đến khoảng trắng giữa mỗi dòng của văn bản tiêu đề của bạn Nếu bạn muốn tăng khoảng trắng giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong dòng. trường nhập vào 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ị.

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ữ mong muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ lớn đượ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ể

Ở đây bạn có thể điều chỉnh kích thước của văn bản cơ thể của bạn. 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 giá trị của kích thước văn bản mong muốn trực tiếp vào trường nhập vào 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 giá trị kích thước của bạn để thay đổi loại đơn vị.

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

Theo mặc định, tất cả các màu văn bản Divi xuất hiện với màu trắng hoặc xám đen. 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 trong bộ chọn màu bằng tùy chọn này.

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

Khoảng cách củ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 trắng 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 trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập vào 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ị.

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

Chiều cao của dòng ảnh hưởng đến khoảng trắng giữa mỗi dòng văn bản trong cơ thể của bạn Nếu bạn muốn tăng khoảng trắng giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để đ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 liệu nằm 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 giá trị kích thước của bạn để thay đổi loại đơn vị.

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

Kích hoạ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 đây.

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

Tùy chọn này ảnh hưởng đến màu sắc của đường viền của bạn. Chọn một màu tùy chỉnh trong 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 của pixel 1. 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 trong trường nhập vào bên phải thanh trượt. Các đơ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 của "px" thành một thứ khác, như em, vh, vw, v.v.

Kiểu đường viền

Biên giới hỗ trợ tám phong cách khác nhau: rắn, rải rác, tiêu tan, đôi, rãnh, sườn núi, inlay và bắt đầu. Chọn kiểu bạn muốn từ menu thả xuống để áp dụng nó cho đường viền của bạn.

Lề tùy chỉnh

Ký quỹ 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à mục tiếp theo ở trên, bên dưới hoặc bên trái và bên phải của mô-đun. Bạn có thể thêm các giá trị lề tùy chỉnh vào một trong bốn phía của mô-đun. Để loại bỏ lề tùy chỉnh, hãy xóa giá trị được thêm vào từ trường đầu vào. 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 trong các trường đầu vào.

Đệm tùy chỉnh

Fill 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 thành phần bên trong của mô-đun. Bạn có thể thêm các giá trị điền tùy chỉnh vào một trong bốn phía của mô-đun. Để loại bỏ lề tùy chỉnh, hãy xóa giá trị được thêm vào từ trường đầu vào. 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 trong các trường đầu vào.

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

Tải xuống miễn phí WooCommerce, 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. [Đề xuất]

Tùy chọn nâng cao của mô-đun Person

Trong 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 một trong nhiều yếu tố 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 bạn.

module thiết kế tùy chọn divi.png

ID CSS

Nhập một định danh 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 để 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 kiểu CSS tùy chỉnh. Bạn có thể thêm nhiều lớp, cách nhau bởi một khoảng trắng. 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 bằng cách 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à một trong các yếu tố bên trong của mô-đun. Trong phần Tùy chỉnh CSS bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm tùy chỉnh CSS trực tiếp cho từng hạng mục. Các mục CSS trong các tham số này đã được 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 xuống trang. Tại đây bạn có thể chọn hướng của hình ảnh động hoặc vô hiệu hóa nó.

tầm nhìn

Tùy chọn này cho phép bạn điều khiển 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, SmartPhones hoặc máy tính để bàn riêng lẻ. Điều này 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.

Hướng dẫn Divi khác

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

  1. Salut!
    Khi tôi tạo dự án hoặc xuất bản và sử dụng mô-đun Person, tại sao trường Vị trí biến mất khi tôi xem các dự án hoặc ấn phẩm sử dụng mô-đun blog hoặc 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!

    1. Chào buổi tối và cảm ơn bạn đã chờ đợi.
      Nói chung, các mô-đun tìm kiếm không chạy shortcodes. 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 viết hoặc trang.

Để 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 đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
19 cổ phiếu
cổ phiếu10
tweet3
Enregistrer6