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

Hướng dẫn Divi: Cách sử dụng mô-đun Slide

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

Divi cho phép bạn đặt các thanh trượt trong các phần có chiều rộng đầy đủ, do đó các con trỏ của bạn sẽ mở rộng theo chiều rộng của trình duyệt. Sliders (Slides) Divi hỗ trợ nền thị sai cũng như nền video!

sử dụng thanh trượt trên divi.png

Làm thế nào để thêm một mô-đun Diapo đầy đủ chiều rộng từ Divi

Trước khi bạn có thể thêm một mô-đun trượt đầy đủ chiều rộng vào trang của mình, trước tiên bạn phải nhảy vào Divi Builder. Sau 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 Builderphía trên nhà xuất bản mỗi khi bạn tạo trang mới. Nhấn nút này để kích hoạt Divi Builder và truy cập tất cả các module Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo trong 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 mình ở nền trước nếu bạn được kết nối với trang tổng quan WordPress của mình.

sử dụng trình tạo hình ảnh divi.png

Khi bạn đang ở trong 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 bạn. Các mô-đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn bắt đầu một trang mới, trước tiên đừng quên thêm một dòng vào trang của bạn.

tạo một slide divi tutorial wordpress.png

Định vị mô-đun con trỏ fullwidth 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, điều đó có nghĩa là bạn cũng có thể nhập từ "Trang trình bày", sau đó bấm Enter để tự động tìm và thêm mô-đun trượt đủ độ rộng! Khi module được thêm vào, bạn sẽ được chào đón bởi danh sách tùy chọn module. 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 .

Ví dụ về trường hợp sử dụng: Thêm mục Anh hùng toàn phần trượt vào Trang chủ của bạn

Thanh trượt chiều rộng đầy đủ là cách tuyệt vời để hiển thị nhiều CTA trên ngưỡng trang chủ của bạn. Sự kết hợp giữa hình ảnh và nội dung thực sự có thể mang đến cho phần của bạn một cảm giác chuyên nghiệp nổi bật.

Trong ví dụ này, tôi sẽ thêm một slide toàn chiều rộng để phục vụ như là phần chính trên một trang chủ.

tạo một slide toàn màn hình example.jpg

Sử dụng Visual Builder, thêm một phần Fullwidth vào đầu trang web của bạn. Sau đó chèn mô-đun Fullwidth Slider vào phần mới của bạn. Trong tab Nội dung Nội dung của trang trình bày đầy đủ, nhấp vào + Thêm mục mới để tạo trang chiếu đầu tiên của bạn.

tạo một slide divi.png

Trong cài đặt trang trình bày của trang trình bày đầu tiên, hãy cập nhật các tùy chọn sau:

Tùy chọn nội dung

En-đầu : [nhập tiêu đề của trang trình bày] Văn bản nút : [nhập văn bản nút] Nội dung : [nhập nội dung văn bản của trang trình bày] URL nút : [nhập URL đích của nút Trang trình bày] Hình nền : [nhập hình ảnh sẽ dùng làm phông nền cho trang trình bày]

Tùy chọn thiết kế

Sử dụng lớp phủ nền : CÓ
Màu lớp phủ nền : rgba (0,0,0,0.2) Lớp phủ này hơi làm tối hình nền để làm cho văn bản dễ đọc hơn.

slide divi blogpascher.png

Lưu cài đặt trang trình bày

Bây giờ sao chép trang trình bày bạn vừa tạo và cập nhật trang trình bày mới với nội dung mới nếu cần. Lặp lại thao tác này cho tất cả các trang trình bày bạn muốn thêm.

lặp lại một slide divi.png

Đó là tất cả. Đối với ví dụ này, tôi chỉ bao gồm hai trang trình bày, nhưng kết quả là một con trỏ anh hùng fullwidth hiệu quả với nhiều lời gọi hành động thu hút người dùng nhấp vào nút để biết thêm thông tin. Vì đây là lời kêu gọi hành động chính của bạn cho trang web của bạn, tôi khuyên bạn nên chạy thử nghiệm phân tách trên trang chiếu toàn chiều rộng bằng Divi Leads và xem cái nào chuyển đổi tốt nhất.

ví dụ: slide divi dem.gif

Trượt tùy chọn nội dung đầy đủ

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

slide divi section content.png

mũi tên

Chọn có hay không muốn hiển thị mũi tên điều hướng bên trái và bên phải.

điều khiển

Chọn có hay không hiển thị các nút tròn / chỉ báo trượt ở cuối con trỏ.

Nhãn quản trị viên

Điều này sẽ thay đổi nhãn mô-đun trong hàm tạo để dễ nhận dạng. Khi bạn sử dụng khung nhìn 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ế mô-đun trượt

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 trắng. Đâ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 thông số thiết kế mà bạn có thể sử dụng để thay đổi bất cứ điều gì.

phần trượt thiết kế divi.png

Loại bỏ bóng bên trong

Theo mặc định, một bóng nội bộ được hiển thị trong thanh trượt. Nếu bạn muốn tắt bóng này, bạn có thể thực hiện việc này bằng cách sử dụng cài đặt này.

Hiệu ứng Parallax

Bật tùy chọn này sẽ cho hình nền của bạn vị trí cố định khi bạn cuộn. Xin lưu ý rằng khi cài đặt này được bật, hình ảnh của bạn sẽ chia tỷ lệ hình ảnh của bạn thành chiều cao của trình duyệt.

Phông chữ tiêu đề

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ừ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn được hỗ trợ 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, chữ hoa và gạch chân.

thiết kế phông chữ phần trượt của lentete.png

Kích thước của phông chữ đầu trang

Ở đâ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 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 ở bên phải thanh trượt. Các trường nhập 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ị của kích thước của bạn để thay đổi loại đơn vị của nó.

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 bằng 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 trong bộ chọn màu bằng cách sử dụng tùy chọn này.

Khoảng cách của đầu thư

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống 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 đề, 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 ở bên phải thanh trượt. Các trường nhập 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ị của 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 trống giữa mỗi dòng của văn bản tiêu đề 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 trắng hoặc nhập kích thước khoảng cách mong muốn trong dòng. trường đầu vào ở bên phải con trỏ. Các trường nhập 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ị của kích thước của bạn để thay đổi loại đơn vị của nó.

Cảnh sát 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ừ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn được hỗ trợ 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, chữ 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 nội dung 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 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 ở bên phải thanh trượt. Các trường nhập 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ị của kích thước của bạn để thay đổi loại đơn vị của nó.

phần thiết kế slide module divi.png

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 bằng 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, hãy chọn màu mong muốn trong 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 trống 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, 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 ở bên phải thanh trượt. Các trường nhập 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ị của 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 không gian giữa mỗi dòng văn bản cơ thể của bạn Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, sử dụng thanh trượt để điều chỉnh phạm vi không gian hoặc nhập kích thước khoảng cách mong muốn trong lĩnh vực đầu vào nằm ở bên phải của con trỏ. Các lĩnh vực đầ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ị của kích thước của bạn để thay đổi kiểu của đơn vị.

Upper padding

Tham số này kiểm soát không gian bên trong giữa phần đầu của mô-đun và nội dung văn bản trong mô-đun. Nếu bạn muốn tăng hoặc giảm không gian này, hãy nhập giá trị mong muốn của bạn tại đây. Ví dụ: để giảm không gian tổng thể và kích thước của thanh trượt, bạn có thể nhập giá trị của 100 px. Bạn cũng có thể nhập giá trị phần trăm, ví dụ: 10%, để làm cho chiều cao động hơn.

Đệm đáy

Cài đặt này kiểm soát không gian bên trong giữa phần dưới của mô-đun và nội dung văn bản trong mô-đun. Nếu bạn muốn tăng hoặc giảm không gian này, hãy nhập giá trị mong muốn của bạn tại đây. Ví dụ: để giảm không gian tổng thể và kích thước của thanh trượt, bạn có thể nhập giá trị của 100 px. Bạn cũng có thể nhập giá trị phần trăm, ví dụ: 10%, để làm cho chiều cao động hơn.

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

Sử dụng kiểu tùy chỉnh cho nút

Bật tùy chọn này sẽ hiển thị các cài đặt tùy chỉnh khác nhau cho các nút mà bạn có thể sử dụng để thay đổi giao diện của nút trên mô-đun của bạn.

Kích thước văn bản nút

Cài đặt này có thể được sử dụng để tăng hoặc giảm kích thước của văn bản trong nút. Nút thay đổi khi kích thước của văn bản tăng và giảm.

Màu văn bản nút

Theo mặc định, các nút áp dụng màu nhấn của chủ đề của bạn như được xác định trong tùy biến của chủ đề. Tùy chọn này cho phép bạn gán màu văn bản tùy chỉnh cho nút trên mô-đun này. Chọn màu tùy chỉnh của bạn bằng bộ chọn màu để thay đổi màu của nút.

màu nút divi.png

Màu nền nút

Theo mặc định, các nút có màu nền trong suốt. Điều này có thể được thay đổi bằng cách chọn màu nền mong muốn trong bộ chọn màu.

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

Tất cả các nút Divi đều có đường viền 2px mặc định. Đường viền này có thể được tăng hoặc giảm bằng cách sử dụng tham số này. Biên giới có thể được xóa bằng cách nhập một giá trị của 0.

Màu đường viền nút

Theo mặc định, đường viền nút thay đổi màu nhấn của chủ đề của bạn như được xác định trong tùy biến của chủ đề. Tùy chọn này cho phép bạn gán màu viền tùy chỉnh cho nút trên mô-đun này. Chọn màu tùy chỉnh của bạn bằng cách sử dụng công cụ chọn màu để thay đổi màu của đường viền nút.

Bán kính đường viền nút

Bán kính của biên giới ảnh hưởng đến độ tròn của các góc của các nút của bạn. Theo mặc định, các nút trong Divi có bán kính đường viền nhỏ làm tròn các góc của 3 pixel. Bạn có thể giảm giá trị này thành 0 để tạo một nút hình vuông hoặc tăng đáng kể để tạo các nút có cạnh tròn.

Khoảng cách giữa các chữ cái của nút

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống 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út của văn bản, sử dụng thanh trượt để điều chỉnh phạm vi không gian hoặc nhập kích thước khoảng cách mong muốn trong lĩnh vực đầu vào phía bên phải của con trỏ. Các lĩnh vực đầ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ị của kích thước của bạn để thay đổi kiểu của đơn vị.

Phông chữ nút

Bạn có thể thay đổi phông chữ của văn bản nút 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ữ lớn được hỗ trợ 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, chữ hoa và gạch chân.

Biểu tượng nút thêm

Đã tắt, cài đặt này sẽ xóa các biểu tượng khỏi nút của bạn. Theo mặc định, tất cả các nút Divi hiển thị biểu tượng mũi tên trên di chuột.

Biểu tượng nút

Nếu các biểu tượng được bật, bạn có thể sử dụng cài đặt này để chọn biểu tượng để sử dụng trong nút của mình. Divi có các biểu tượng khác nhau để lựa chọn.

Nút biểu tượng màu

Đặt cài đặt này sẽ thay đổi màu của biểu tượng xuất hiện trên nút của bạn. Theo mặc định, màu của biểu tượng giống như màu văn bản của các nút, nhưng cài đặt này cho phép bạn điều chỉnh màu một cách độc lập.

Nút vị trí biểu tượng

Bạn có thể chọn hiển thị biểu tượng nút của bạn ở bên trái hoặc bên phải nút của bạn.

Chỉ hiển thị biểu tượng khi nút cuộn qua

Theo mặc định, các biểu tượng nút chỉ được hiển thị trong khi di chuột qua. Nếu bạn muốn biểu tượng luôn xuất hiện, hãy tắt cài đặt này.

Màu văn bản di chuột của nút

Khi nút được di chuyển bằng chuột của khách truy cập, màu đó sẽ được sử dụng. Màu sắc sẽ thay đổi từ màu cơ sở được xác định trong các cài đặt trước đó.

Màu nền của nút trên chuột

Khi nút được di chuyển bằng chuột của khách truy cập, màu đó sẽ được sử dụng. Màu sắc sẽ thay đổi từ màu cơ sở được xác định trong các cài đặt trước đó.

Nút viền màu di chuột

Khi nút được di chuyển bằng chuột của khách truy cập, màu đó sẽ được sử dụng. Màu sắc sẽ thay đổi từ màu cơ sở được xác định trong các cài đặt trước đó.

Nút bán kính biên giới di chuột

Khi nút được di chuyển bằng chuột của khách truy cập, giá trị này sẽ được sử dụng. Giá trị sẽ thay đổi từ giá trị cơ sở được xác định trong các tham số trước đó.

Nút trỏ khoảng cách ghi chú

Khi nút được di chuyển bằng chuột của khách truy cập, giá trị này sẽ được sử dụng. Giá trị sẽ thay đổi từ giá trị cơ sở được xác định trong các tham số trước đó.

Tùy chọn nâng cao full-width slide module

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. Ở đây bạn có thể áp dụng CSS tùy chỉnh cho một trong nhiều thành phần 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 của bạn.

mô-đun trượt phần trước divi.png

ID CSS

Nhập mã định danh CSS tùy chọn để sử dụng cho mô-đun này. Có thể sử dụng ID để 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 một 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 bảng đị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 các 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 thành phần bên trong của mô-đun. Trong phần Custom CSS, bạn sẽ tìm thấy một trường văn bản, trong đó bạn có thể thêm các bảng định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục CSS trong các tham số này đã được gói 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 ảnh tự động

Nếu bạn muốn con trỏ tự động trượt, không có khách truy cập phải nhấp vào nút tiếp theo, hãy bật tùy chọn này, sau đó điều chỉnh tốc độ quay bên dưới nếu bạn muốn.

Tốc độ hoạt ảnh tự động (tính bằng ms)

Ở đây bạn có thể chỉ định con trỏ mất dần nhanh như thế nào giữa mỗi trang, nếu tùy chọn 'Tự động hoạt hình' được bật ở trên. Số càng cao, thời gian dừng giữa mỗi lần quay càng dài.

Tiếp tục Tự động trượt trên Hover

Bật tính năng này sẽ cho phép tự động trượt để tiếp tục trên di chuột.

Ẩn nội dung trên thiết bị di động

Khi kích thước của màn hình trở nên nhỏ hơn trên thiết bị di động, màn hình bất động sản trở nên có giá trị hơn. Đôi khi, nên tắt một số yếu tố thanh trượt quan trọng hơn để giảm kích thước của thanh trượt và làm cho nó dễ đọc hơn. Bật cài đặt này sẽ ẩn văn bản của văn bản con trỏ trên thiết bị di động.

Ẩn CTA trên thiết bị di động

Khi kích thước của màn hình trở nên nhỏ hơn trên thiết bị di động, màn hình bất động sản trở nên có giá trị hơn. Đôi khi, nên tắt một số yếu tố thanh trượt quan trọng hơn để giảm kích thước của thanh trượt và làm cho nó dễ đọc hơn. Bật cài đặt này sẽ ẩn cuộc gọi con trỏ tới các nút tác vụ di động.

Xem hình ảnh / video trên thiết bị di động

Khi kích thước của màn hình trở nên nhỏ hơn trên thiết bị di động, màn hình bất động sản trở nên có giá trị hơn. Đôi khi, nên tắt một số yếu tố thanh trượt quan trọng hơn để giảm kích thước của thanh trượt và làm cho nó dễ đọc hơn. Bật cài đặt này sẽ hiển thị hình ảnh và video trên thiết bị di động (chúng bị tắt theo mặc đị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. Bạn có thể chọn tắt 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 rất 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.

Tùy chọn nội dung cho các phần tử mô-đun trình chiếu có chiều rộng đầy đủ

mô-đun phần tử riêng lẻ divi diapo.png

Tiêu đề

Đặt văn bản tiêu đề của con trỏ ở đây.

Văn bản nút

Nếu bạn muốn hiển thị một nút bên dưới nội dung của trang chiếu, hãy nhập văn bản nút ở đây. Để trống trường này nếu bạn không muốn hiển thị nút.

Nội dung

Nhập nội dung của con trỏ vào đây. Lưu ý rằng số lượng văn bản bạn nhập ở đây sẽ xác định chiều cao của các trang trình bày của bạn.

URL nút

Nếu bạn hiển thị một nút, hãy chèn URL web hợp lệ vào trường này để đặt liên kết đích.

Kéo hình ảnh

Nếu bạn thêm một hình ảnh slide, nó sẽ xuất hiện ở bên trái của văn bản của trang chiếu của bạn phía trên nền trang chiếu của bạn. Nếu bạn không chỉ định một hình ảnh slide, bạn sẽ bị bỏ lại với một slide trung tâm, chỉ văn bản. Bởi vì chiều cao của mỗi trang được xác định bởi văn bản, nếu hình ảnh trên trang chiếu của bạn đủ cao, nó sẽ rơi xuống dưới cùng của trang chiếu, tạo ra một hình ảnh căn chỉnh ở phía dưới.

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

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

kéo một hình ảnh divi.png

Lưu ý rằng chiều cao của trang chiếu có hình ảnh trượt có thể được xác định bằng một trang trình bày lớn hơn trong thanh trượt. Đảm bảo hình ảnh trên trang chiếu của bạn đủ lớn để vừa với nhau nếu bạn muốn căn chỉnh hình ảnh ở dưới cùng. Để dễ đọc, hình ảnh slide chỉ xuất hiện trong cột, cột hoặc cột trượt của cột 1. Tương tự, hình ảnh trang trình bày sẽ không hiển thị trên độ rộng trình duyệt nhỏ hơn 768 pixel. Chiều rộng hình ảnh trượt được xác định bên dưới. Chúng tôi khuyên bạn nên sử dụng hình ảnh trang chiếu của mình ít nhất là rộng.

Trang trình bày video

Nếu bạn thêm một video trình chiếu, nó sẽ xuất hiện ở bên trái của văn bản trang trình bày phía trên trang chiếu của bạn. Nếu bạn không chỉ định một slide video, bạn sẽ được trái với một slide trung tâm, chỉ văn bản. Bởi vì chiều cao của mỗi trang được xác định bởi văn bản, nếu hình ảnh trên trang chiếu của bạn đủ cao, nó sẽ rơi xuống dưới cùng của trang chiếu, tạo ra một hình ảnh căn chỉnh ở phía dưới.

Tạm dừng video

Cho phép người chơi khác tạm dừng video khi họ bắt đầu chơi

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.

Chiều cao của trang chiếu được xác định bằng số lượng văn bản bạn thêm vào. Nếu bạn có nhiều trang trình bày, con trỏ sẽ lấy chiều cao của trang trình bày cao nhất.

Chiều rộng của con trỏ được xác định bởi chiều rộng của trình duyệt. Dựa trên kích thước màn hình chuẩn, chúng tôi khuyên bạn nên sử dụng 1280px ít nhất 768px.

Vị trí của hình nền

Theo mặc định, hình nền được hiển thị ở giữa trang chiếu. Bạn có thể sử dụng cài đặt này để thay đổi vị trí ở trên cùng, dưới cùng, bên trái, bên phải hoặc ở một trong bốn góc của trang trình bày.

Kích thước của hình nền

Theo mặc định, hình ảnh nền sẽ được phóng to tương ứng để đảm bảo rằng chúng lấp đầy toàn bộ trang trình bày. Tuy nhiên, bạn có thể sử dụng tùy chọn này để thay đổi hành vi mặc định. "Bìa" là hành vi mặc định, điều chỉnh tỷ lệ hình ảnh để bao phủ toàn bộ vùng trượt. "Fit" cũng sẽ buộc hình ảnh che phủ toàn bộ khu vực, tuy nhiên, nó sẽ buộc chiều cao và chiều rộng của hình ảnh phù hợp với chiều cao và chiều rộng của thanh trượt. Điều này có thể dẫn đến một hình ảnh bị méo, nhưng điều này sẽ ngăn ngừa xén hình ảnh. "Kích thước thực" không chia tỷ lệ hình ảnh và hiển thị hình ảnh ở kích thước gốc của nó.

Màu nền

Nếu bạn chỉ muốn sử dụng nền màu đồng nhất cho trang chiếu của mình, hãy sử dụng công cụ chọn màu để đặt màu nền.

Video nền MP4

Tất cả các video phải được tải xuống ở cả hai định dạng .MP4 .WEBM để đảm bảo khả năng tương thích tối đa trong tất cả các trình duyệt. Tải xuống phiên bản .MP4 tại đây. Lưu ý quan trọng: Hình nền video bị tắt từ thiết bị di động. Thay vào đó, hình ảnh bkacground của bạn sẽ được sử dụng. Vì lý do này, bạn cần đặt cả hình nền và video nền để đảm bảo kết quả tốt hơn.

Video nền WEBM

Tất cả các video phải được tải xuống ở cả hai định dạng .MP4 .WEBM để đảm bảo khả năng tương thích tối đa trong tất cả các trình duyệt. Tải xuống phiên bản .WEBM tại đây. Lưu ý quan trọng: Hình nền video bị tắt từ thiết bị di động. Thay vào đó, hình ảnh bkacground của bạn sẽ được sử dụng. Vì lý do này, bạn cần đặt cả hình nền và video nền để đảm bảo kết quả tốt hơn.

Chiều rộng video nền

Để video có kích thước phù hợp, bạn phải nhập chiều rộng chính xác (tính bằng pixel) của video tại đây.

Nền chiều cao của video

Để video có kích thước phù hợp, bạn phải nhập chiều cao chính xác (tính bằng pixel) của video tại đây.

Tùy chọn thiết kế phần tử trang trình bày

phần kiểu module divi.png

Sử dụng lớp phủ nền

Khi được bật, màu lớp phủ tùy chỉnh sẽ được thêm vào hình nền của bạn và phía sau nội dung thanh trượt của bạn.

Màu lớp phủ nền

Sử dụng công cụ chọn màu để chọn màu cho nền.

Sử dụng lớp phủ văn bản

Khi tùy chọn này được bật, màu nền được thêm vào phía sau văn bản con trỏ để làm cho chữ dễ đọc hơn trên hình nền.

Màu lớp phủ văn bản

Sử dụng công cụ chọn màu để chọn màu cho lớp phủ văn bản.

Bán kính biên giới lớp phủ văn bản

Bán kính của biên giới ảnh hưởng đến làm tròn các góc của vùng phủ văn bản. Theo mặc định, các góc có một cạnh hơi tròn của 3 pixel. Bạn có thể giảm giá trị này thành 0 để tạo một hộp hình chữ nhật hoặc tăng giá trị để làm cho các góc tròn hơn.

Mũi tên màu tùy chỉnh

Khi di chuột qua mô-đun con trỏ, các mũi tên xuất hiện để cho phép khách truy cập điều hướng qua từng trang trình bày. Theo mặc định, các mũi tên này kế thừa màu của văn bản chính của trang trình bày. Tuy nhiên, bạn có thể đặt màu tùy chỉnh cho các mũi tên này bằng cách sử dụng cài đặt này.

Màu tùy chỉnh của Dot Nav

Trong mỗi thanh trượt, các phần tử điều hướng điểm xuất hiện bên dưới nội dung con trỏ. Những yếu tố này cho phép người dùng điều hướng con trỏ. Bạn có thể xác định màu tùy chỉnh để sử dụng cho các mục này bằng bộ chọn màu trong cài đặt này.

Căn chỉnh theo chiều dọc của hình ảnh trang trình bày

Cài đặt này xác định căn chỉnh theo chiều dọc của hình ảnh trang trình bày của bạn. Hình ảnh của bạn có thể được căn giữa theo chiều dọc hoặc căn chỉnh ở cuối trang chiếu của bạn.

Màu văn bản

Nếu nền của trang chiếu của bạn tối, màu văn bản sẽ được đặt thành "Ánh sáng". Ngược lại, nếu nền của trang chiếu rõ ràng, màu văn bản sẽ được đặt thành "Tối".

Phông chữ đầu trang

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ừ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn được hỗ trợ 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, chữ hoa và gạch chân.

Kích thước của phông chữ đầu trang

Ở đâ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 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 ở bên phải thanh trượt. Các trường nhập 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ị của kích thước của bạn để thay đổi loại đơn vị của nó.

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 bằng 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 trong bộ chọn màu bằng cách sử dụng tùy chọn này.

màu của phần header design module dispo divi.png

Khoảng cách của đầu thư

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống 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 đề, 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 ở bên phải thanh trượt. Các trường nhập 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ị của 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 trống giữa mỗi dòng của văn bản tiêu đề 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 trắng hoặc nhập kích thước khoảng cách mong muốn trong dòng. trường đầu vào ở bên phải con trỏ. Các trường nhập 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ị của kích thước của bạn để thay đổi loại đơn vị của nó.

Body Font

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ừ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn được hỗ trợ 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, chữ 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 nội dung 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 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 ở bên phải thanh trượt. Các trường nhập 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ị của 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 Divi xuất hiện bằng 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, hãy chọn màu mong muốn trong 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 trống 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, 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 ở bên phải thanh trượt. Các trường nhập 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ị của kích thước của bạn để thay đổi loại đơn vị của nó.

dòng cơ thể divi module diapo.png

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

Chiều cao dòng ảnh hưởng đến không gian giữa mỗi dòng văn bản cơ thể của bạn Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, sử dụng thanh trượt để điều chỉnh phạm vi không gian hoặc nhập kích thước khoảng cách mong muốn trong lĩnh vực đầu vào nằm ở bên phải của con trỏ. Các lĩnh vực đầ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ị của kích thước của bạn để thay đổi kiểu của đơn vị.

Sử dụng kiểu tùy chỉnh cho nút

Bật tùy chọn này sẽ hiển thị các cài đặt tùy chỉnh khác nhau cho các nút mà bạn có thể sử dụng để thay đổi giao diện của nút trên mô-đun của bạn.

Kích thước văn bản nút

Cài đặt này có thể được sử dụng để tăng hoặc giảm kích thước của văn bản trong nút. Nút thay đổi khi kích thước của văn bản tăng và giảm.

Màu văn bản nút

Theo mặc định, các nút áp dụng màu nhấn của chủ đề của bạn như được xác định trong tùy biến của chủ đề. Tùy chọn này cho phép bạn gán màu văn bản tùy chỉnh cho nút trên mô-đun này. Chọn màu tùy chỉnh của bạn bằng bộ chọn màu để thay đổi màu của nút.

Màu nền nút

Theo mặc định, các nút có màu nền trong suốt. Điều này có thể được thay đổi bằng cách chọn màu nền mong muốn trong bộ chọn màu.

Nút chiều rộng đường viền

Tất cả các nút Divi đều có đường viền 2px mặc định. Đường viền này có thể được tăng hoặc giảm bằng cách sử dụng tham số này. Biên giới có thể được xóa bằng cách nhập một giá trị của 0.

Màu đường viền nút

Theo mặc định, đường viền nút thay đổi màu nhấn của chủ đề của bạn như được xác định trong tùy biến của chủ đề. Tùy chọn này cho phép bạn gán màu viền tùy chỉnh cho nút trên mô-đun này. Chọn màu tùy chỉnh của bạn bằng cách sử dụng công cụ chọn màu để thay đổi màu của đường viền nút.

Bán kính đường viền nút

Bán kính của biên giới ảnh hưởng đến độ tròn của các góc của các nút của bạn. Theo mặc định, các nút trong Divi có bán kính đường viền nhỏ làm tròn các góc của 3 pixel. Bạn có thể giảm giá trị này thành 0 để tạo một nút hình vuông hoặc tăng đáng kể để tạo các nút có cạnh tròn.

module nút cấu hình divi.png

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

Tải xuống WooC Commerce miễn phí, 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. [Khuyến nghị]

Khoảng cách giữa các chữ cái của nút

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống 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út của văn bản, sử dụng thanh trượt để điều chỉnh phạm vi không gian hoặc nhập kích thước khoảng cách mong muốn trong lĩnh vực đầu vào phía bên phải của con trỏ. Các lĩnh vực đầ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ị của kích thước của bạn để thay đổi kiểu của đơn vị.

Phông chữ nút

Bạn có thể thay đổi phông chữ của văn bản nút 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ữ lớn được hỗ trợ 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, chữ hoa và gạch chân.

Biểu tượng nút thêm

Đã tắt, cài đặt này sẽ xóa các biểu tượng khỏi nút của bạn. Theo mặc định, tất cả các nút Divi hiển thị biểu tượng mũi tên trên di chuột.

Biểu tượng nút

Nếu các biểu tượng được bật, bạn có thể sử dụng cài đặt này để chọn biểu tượng để sử dụng trong nút của mình. Divi có các biểu tượng khác nhau để lựa chọn.

Nút biểu tượng màu

Đặt cài đặt này sẽ thay đổi màu của biểu tượng xuất hiện trên nút của bạn. Theo mặc định, màu của biểu tượng giống như màu văn bản của các nút, nhưng cài đặt này cho phép bạn điều chỉnh màu một cách độc lập.

Nút vị trí biểu tượng

Bạn có thể chọn hiển thị biểu tượng nút của bạn ở bên trái hoặc bên phải nút của bạn.

Chỉ hiển thị biểu tượng khi nút cuộn qua

Theo mặc định, các biểu tượng nút chỉ được hiển thị trong khi di chuột qua. Nếu bạn muốn biểu tượng luôn xuất hiện, hãy tắt cài đặt này.

Màu văn bản di chuột của nút

Khi nút được di chuyển bằng chuột của khách truy cập, màu đó sẽ được sử dụng. Màu sắc sẽ thay đổi từ màu cơ sở được xác định trong các cài đặt trước đó.

Màu nền của nút trên chuột

Khi nút được di chuyển bằng chuột của khách truy cập, màu đó sẽ được sử dụng. Màu sắc sẽ thay đổi từ màu cơ sở được xác định trong các cài đặt trước đó.

Nút viền màu di chuột

Khi nút được di chuyển bằng chuột của khách truy cập, màu đó sẽ được sử dụng. Màu sắc sẽ thay đổi từ màu cơ sở được xác định trong các cài đặt trước đó.

Nút bán kính biên giới di chuột

Khi nút được di chuyển bằng chuột của khách truy cập, giá trị này sẽ được sử dụng. Giá trị sẽ thay đổi từ giá trị cơ sở được xác định trong các tham số trước đó.

Nút trỏ khoảng cách ghi chú

Khi nút được di chuyển bằng chuột của khách truy cập, giá trị này sẽ được sử dụng. Giá trị sẽ thay đổi từ giá trị cơ sở được xác định trong các tham số trước đó.

Tùy chọn con trỏ nâng cao

phần trượt trước phần tử cá nhân phần tử divi.png

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 thành phần bên trong của mô-đun. Trong phần Custom CSS, bạn sẽ tìm thấy một trường văn bản, trong đó bạn có thể thêm các bảng định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục CSS trong các tham số này đã được gói 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.

Văn bản thay thế của hình ảnh

Văn bản thay thế cung cấp tất cả thông tin cần thiết nếu hình ảnh không tải, không 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ác công cụ tìm kiếm đọc và nhận ra hình ảnh.

Hướng dẫn Divi khác

Bài viết này chứa comments 5
  1. Xin chào

    Cảm ơn bạn cho hướng dẫn này, nó thực sự hoàn thành!
    Bạn có biết nếu có thể thay đổi hoặc thậm chí loại bỏ hình ảnh động khỏi văn bản? bởi vì không mặc định nó đi từ dưới lên trên trên ảnh nền và tôi nghĩ nó không đẹp lắm.

    Merci

  2. Xin chào ! cảm ơn bài viết của bạn vấn đề của tôi là không hiển thị video nền trên thiết bị di động, khách hàng của tôi hoàn toàn muốn nó. Tôi nghĩ rằng tôi đã tìm thấy câu trả lời của mình vì theo bài viết của bạn, trong phần "Nâng cao" có khả năng kích hoạt video trên thiết bị di động bị tắt theo mặc định. nhưng tôi không tìm thấy khả năng này trên divi của tôi. Cảm ơn bạn vì câu trả lời…

    Yanis

Để 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 chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
6 cổ phiếu
cổ phiếu4
tweet
Enregistrer2