Divi cho phép bạn đặt các thanh trượt trong các phần có chiều rộng đầy đủ, làm cho các thanh trượt của bạn kéo dài toàn bộ chiều rộng của trình duyệt. Thanh trượt Divi (Sliders) hỗ trợ nền thị sai, cũng như nền video!

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ô-đun thanh trượt có chiều rộng đầy đủ vào trang của mình, trước tiên bạn phải chuyển đến 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 Builderphí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 ở trong Trình tạo trực quan, 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.

Xác định vị trí mô-đun thanh trượt đầy đủ độ rộng 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 mod có thể tìm kiếm được, có nghĩa là bạn cũng có thể nhập từ "Slide" và sau đó nhấp vào Enter để tự động tìm và thêm mô-đun trượt toàn chiều rộng! 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 .

Ví dụ về trường hợp sử dụng: Thêm Phần anh hùng thanh trượt có độ rộng đầy đủ vào Trang chủ của bạn

Thanh trượt có chiều rộng đầy đủ là một 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 lại cho phần của bạn một cảm giác chuyên nghiệp và nổi bật.

Đối với ví dụ này, tôi sẽ thêm một trang chiếu có chiều rộng đầy đủ để làm phần chính trên trang chủ.

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

Trong cài đặt trang chiếu của trang chiếu đầu tiên của bạ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ẽ làm 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 làm tối một chút hình nền để làm cho văn bản dễ đọc hơn.

Lưu cài đặt slide

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

Đó là tất cả. Trong ví dụ này, tôi chỉ bao gồm hai trang trình bày nhưng kết quả là một thanh trượt chính có chiều rộng đầy đủ hiệu quả với nhiều lời kêu 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 Website, Tôi khuyên bạn nên chạy thử nghiệm phân tách trên trang chiếu có chiều rộng đầy đủ bằng Divi Leads và xem cái nào chuyển đổi tốt nhất.

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

mũi tên

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

đ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ễ 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ế 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 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ì.

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

Theo mặc định, một bóng bên trong được hiển thị trong con trỏ. Nếu bạn muốn tắt bóng này, bạn có thể làm như vậ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ẽ cung cấp cho hình nền của bạn một vị trí cố định khi bạn cuộn. Hãy nhớ 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 theo 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 đề 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ó.

Cảnh sát 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ó.

Lớp đệm trên

Tham số này kiểm soát không gian bên trong giữa phần trên cùng 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 vào đây. Ví dụ: để giảm không gian và kích thước tổng thể của con trỏ, bạn có thể nhập giá trị 100px. Bạn cũng có thể nhập giá trị phần trăm, chẳng hạn như 10%, để làm cho chiều cao động hơn.

Đệm đáy

Tham số này kiểm soát không gian bên trong giữa phần dưới cùng 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 vào đây. Ví dụ: để giảm không gian và kích thước tổng thể của con trỏ, bạn có thể nhập giá trị 100px. Bạn cũng có thể nhập giá trị phần trăm, chẳng hạn như 10%, để làm cho chiều cao động hơn.

Sử dụng các 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 nút khác nhau mà bạn có thể sử dụng để thay đổi giao diện của nút mô-đun của mình.

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 điều chỉnh khi kích thước 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 sử dụng màu nhấn của chủ đề của bạn như được xác định trong Công cụ tùy chỉnh 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 của 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 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 từ bộ chọn màu.

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

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

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

Theo mặc định, các đường viền nút sử dụng màu nhấn của chủ đề của bạn như được xác định trong Trình tùy chỉnh 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 của 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 đường viền ả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 3 pixel. Bạn có thể giảm giá trị này xuống 0 để tạo nút 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 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 nút 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ó.

Phông chữ nút

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

Thêm một biểu tượng nút

Bị vô hiệu hóa, 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ẽ sử dụng trong nút của mình. Divi có các biểu tượng khác nhau để bạn lựa chọn.

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

Điều chỉnh 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 biểu tượng giống với màu văn bản nút của bạn, nhưng cài đặt này cho phép bạn điều chỉnh màu độc lập.

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

Bạn có thể chọn hiển thị biểu tượng của nút ở 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 di chuột qua nút

Theo mặc định, các biểu tượng nút chỉ được hiển thị khi di chuột. 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 con chuột của khách truy cập di chuột qua nút, màu này sẽ được sử dụng. Màu sẽ thay đổi so với màu cơ bản được xác định trong cài đặt trước đó.

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

Khi con chuột của khách truy cập di chuột qua nút, màu này sẽ được sử dụng. Màu sẽ thay đổi so với màu cơ bản được xác định trong cài đặt trước đó.

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

Khi con chuột của khách truy cập di chuột qua nút, màu này sẽ được sử dụng. Màu sẽ thay đổi so với màu cơ bản được xác định trong cài đặt trước đó.

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

Khi chuột của khách truy cập di chuột qua, giá trị này sẽ được sử dụng. Giá trị sẽ thay đổi so với giá trị cơ bản được xác định trong cài đặt trước đó.

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

Khi chuột của khách truy cập di chuột qua, giá trị này sẽ được sử dụng. Giá trị sẽ thay đổi so với giá trị cơ bản được xác định trong cài đặt trước đó.

Tùy chọn nâng cao mô-đun trượt toàn chiều rộng

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 của mình hoặc vào trang web của bạn 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à 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 ả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 mili giây)

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

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

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

Khi kích thước màn hình nhỏ hơn trên thiết bị di động, bất động sản màn hình trở nên có giá trị hơn. Đôi khi bạn nên tắt một số thành phần con trỏ ít quan trọng hơn để giảm kích thước con trỏ 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 trang trình bày 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 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.

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

Tiêu đề

Đặt văn bản của tiêu đề con trỏ của bạn ở đâ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 trang chiếu của mình, hãy nhập văn bản nút vào đây. Để trống trường này nếu bạn không muốn hiển thị một nút.

Nội dung

Nhập nội dung cơ thể của con trỏ của bạn tại đây. Lưu ý rằng lượng văn bản bạn nhập vào đâ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 hình ảnh trang chiếu, nó sẽ xuất hiện ở bên trái văn bản trang chiếu phía trên nền trang chiếu của bạn. Nếu bạn không chỉ định hình ảnh trang chiếu, bạn sẽ ở bên trái với một trang chiếu chỉ có văn bản, được căn giữa. Bởi vì chiều cao của mỗi trang trình bày được xác định bởi văn bản, nếu hình ảnh trang trình bày của bạn đủ cao, nó sẽ nằm dưới đáy của trang trình bày, tạo ra một hình ảnh được căn chỉnh ở phía dưới.

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

Trượt video

Nếu bạn thêm video slide, nó sẽ xuất hiện ở bên trái văn bản slide phía trên nền slide của bạn. Nếu bạn không chỉ định video trang trình bày, bạn sẽ ở bên trái với một trang trình bày chỉ có văn bản, được căn giữa. Vì chiều cao của mỗi trang trình bày được xác định bởi văn bản, nếu hình ảnh trang trình bày của bạn đủ cao, nó sẽ nằm dưới cuối trang trình bày, tạo ra một hình ảnh được 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 phát

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 một trang chiếu được xác định bởi 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, thanh trượt 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ủa bạn đượ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 tiêu chuẩn, chúng tôi khuyên bạn nên để hình ảnh của bạn có kích thước tối thiểu là 1280px x 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, trái, phải hoặc ở bất kỳ góc nào trong bốn góc của trang trình bày.

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

Theo mặc định, hình nền sẽ được phóng to theo tỷ lệ để đảm bảo rằng chúng lấp đầy toàn bộ trang chiếu. Tuy nhiên, bạn có thể sử dụng tùy chọn này để thay đổi hành vi mặc định. "Che phủ" là hành vi mặc định, quy mô hình ảnh để bao phủ toàn bộ khu vực trang chiếu. “Fit” cũng sẽ buộc hình ảnh bao 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ải khớp với chiều cao và chiều rộng của con trỏ. Điều này có thể dẫn đến hình ảnh bị méo, nhưng nó sẽ ngăn hình ảnh bị cắt. "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.

Màu nền

Nếu bạn chỉ muốn sử dụng nền đồ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ả 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 trên mọi trình duyệt. Tải xuống phiên bản .MP4 tại đây. Lưu ý quan trọng: Nền video bị tắt trên 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 nên đặt cả ảnh nền và video nền để đảm bảo kết quả tốt hơn.

Video nền WEBM

Tất 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 trên mọi trình duyệt. Tải xuống các phiên bản .WEBM tại đây. Lưu ý quan trọng: Nền video bị tắt trên 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 nên đặt cả ả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 chính xác, 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.

Video chiều cao nền

Để video có kích thước chính xác, 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ử slide

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 phía trên hình nề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 sẽ được thêm vào phía sau văn bản con trỏ để làm cho nó 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 đường viền ảnh hưởng đến độ tròn của các góc của vùng lớp phủ văn bản. Theo mặc định, các góc có cạnh hơi tròn là 3 pixel. Bạn có thể giảm giá trị này xuống 0 để tạo hình hộp 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 bạn di chuột qua mô-đun thanh trượt, 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 chiếu. Tuy nhiên, bạn có thể xác định 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 Dot Nav

Trong mỗi con trỏ, các mục điều hướng điểm xuất hiện bên dưới nội dung con trỏ. Các phần 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 phần tử này bằng cách sử dụng công cụ 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 chiếu

Cài đặt này xác định căn chỉnh theo chiều dọc của hình ảnh trang chiếu 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 ở cuối trang trình bày.

Màu văn bản

Nếu nền trang chiếu của bạn tối, màu văn bản phải được đặt thành “Sáng”. Ngược lại, nếu nền của trang chiếu sáng, màu văn bản nên đượ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 đề 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ó.

Body Font

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 các 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 nút khác nhau mà bạn có thể sử dụng để thay đổi giao diện của nút mô-đun của mình.

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 điều chỉnh khi kích thước 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 sử dụng màu nhấn của chủ đề của bạn như được xác định trong Công cụ tùy chỉnh 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 của 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 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 từ bộ chọn màu.

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

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

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

Theo mặc định, các đường viền nút sử dụng màu nhấn của chủ đề của bạn như được xác định trong Trình tùy chỉnh 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 của 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 đường viền ả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 3 pixel. Bạn có thể giảm giá trị này xuống 0 để tạo nút 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 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 nút 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ó.

Phông chữ nút

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

Thêm một biểu tượng nút

Bị vô hiệu hóa, 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ẽ sử dụng trong nút của mình. Divi có các biểu tượng khác nhau để bạn lựa chọn.

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

Điều chỉnh 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 biểu tượng giống với màu văn bản nút của bạn, nhưng cài đặt này cho phép bạn điều chỉnh màu độc lập.

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

Bạn có thể chọn hiển thị biểu tượng của nút ở 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 di chuột qua nút

Theo mặc định, các biểu tượng nút chỉ được hiển thị khi di chuột. 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 con chuột của khách truy cập di chuột qua nút, màu này sẽ được sử dụng. Màu sẽ thay đổi so với màu cơ bản được xác định trong cài đặt trước đó.

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

Khi con chuột của khách truy cập di chuột qua nút, màu này sẽ được sử dụng. Màu sẽ thay đổi so với màu cơ bản được xác định trong cài đặt trước đó.

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

Khi con chuột của khách truy cập di chuột qua nút, màu này sẽ được sử dụng. Màu sẽ thay đổi so với màu cơ bản được xác định trong cài đặt trước đó.

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

Khi chuột của khách truy cập di chuột qua, giá trị này sẽ được sử dụng. Giá trị sẽ thay đổi so với giá trị cơ bản được xác định trong cài đặt trước đó.

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

Khi chuột của khách truy cập di chuột qua, giá trị này sẽ được sử dụng. Giá trị sẽ thay đổi so với giá trị cơ bản được xác định trong cài đặt trước đó.

Tùy chọn con trỏ nâng cao Toàn băng thông

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.

Văn bản Hình ảnh Thay thế

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, 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 dạng hình ảnh.

[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