Thêm video vào trang của bạn trong Divi rất đơn giản khi bạn sử dụng mô-đun Video. Mô-đun này cho phép bạn nhúng video từ bất kỳ nguồn nào, nhưng cũng có thể tùy chỉnh hình ảnh thu nhỏ và nút phát.

Cách thêm mô-đun video vào trang của bạn

Trước khi bạn có thể thêm mô-đun video 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 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 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 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 đã 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.

video module divi.png

Tìm mod video trong danh sách mod và nhấp vào mod đó để thêm nó 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ể gõ từ "video" và sau đó nhấn enter để tự động tìm và thêm mod video! 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 video vào trang đích của bạn

Thêm video vào trang đích của bạn là một cách tuyệt vời để khuyến khích sản phẩm của bạn và tăng chuyển đổi. Trong ví dụ này, tôi sẽ chỉ cho bạn cách bạn có thể sử dụng mô-đun video để thêm video vào trang đích của mình. Tôi đặt một vòng tròn màu đỏ nơi video sẽ xuất hiện.

tạo video trên divi exemple.jpg

Sử dụng Visual Builder, tôi thêm một phần mới với một hàng có chiều rộng đầy đủ (1 cột). Trong cài đặt hàng, dưới tab Thiết kế, tôi chọn tùy chọn "Sử dụng chiều rộng tùy chỉnh". Đối với tùy chọn Chiều rộng tùy chỉnh xuất hiện, tôi nhập chiều rộng tùy chỉnh là 767px. Điều này đảm bảo rằng mô-đun video mà tôi sắp thêm vào hàng này không vượt quá chiều rộng này và quá lớn trên kích thước màn hình lớn hơn.

sử dụng chiều rộng tùy chỉnh divi.png

Sau đó, tôi thêm mô-đun video vào hàng. Trong tab Nội dung của cài đặt Mô-đun Video, tôi nhập URL video của video mà tôi muốn nhúng vào trang đích của mình. Tôi đang sử dụng URL của video YouTube cho ví dụ này.

thêm video vào divi.png

Sau đó, tôi thêm url lớp phủ hình ảnh cho video của mình bằng cách nhấp vào nút "Tạo video". Thao tác này tự động kéo một khung từ video để phân phát dưới dạng lớp phủ với biểu tượng video tùy chỉnh mới.

thêm một lớp phủ divi video.jpg

Trong tab Thiết kế, tôi thay đổi màu của biểu tượng phát để phù hợp với trang đích của mình.

chỉnh sửa biểu tượng trình phát divi video.jpg

Bây giờ tôi có một video cho trang đích của mình trông sạch sẽ và phù hợp với thiết kế của tôi.

thiết kế cuối cùng với nội dung video.jpg

Bây giờ bạn đã thấy mod video hoạt động, hãy đi sâu vào tất cả các cài đặt của nó trong các phần bên dưới. Chúng tôi đã cung cấp một cái nhìn chi tiết về những gì bạn sẽ tìm thấy trong mỗi tab cài đặt của mô-đun và giải thích về chức năng của từng tab.

Tùy chọn nội dung

module tham số divi.png

URL của video

Mô-đun Divi Video cho phép bạn thêm video bằng hai phương pháp khác nhau. Bạn có thể tải xuống tệp video của riêng mình từ máy tính bằng cách nhấp vào nút “Tải xuống video” và chọn tệp mong muốn hoặc bạn có thể nhập bất kỳ url video nào từ nguồn video của bên thứ ba chẳng hạn như Youtube hoặc Vimeo. Chỉ cần sao chép và dán URL từ trình duyệt của bạn và dán vào trường URL Video và Divi sẽ lo phần còn lại!

Url lớp phủ hình ảnh

Nếu bạn muốn đặt hình ảnh thu nhỏ video tùy chỉnh, hình ảnh này sẽ được đặt trên giao diện video tiêu chuẩn với nút phát tùy chỉnh để tạo giao diện sắc nét và cách điệu hơn, bạn có thể chọn làm như vậy bằng cách sử dụng trường Lớp phủ Hình ảnh. Điều khiển này cho phép bạn tải lên hình ảnh được cá nhân hóa của riêng mình hoặc tự động cho phép Divi tạo một hình ảnh từ URL của video của bạn. Hầu hết các nhà cung cấp video đều hỗ trợ tùy chọn này, như Youtube và Vimeo. Chỉ cần nhấp vào nút “Tạo video” và để Divi lo phần còn lại!

Nhãn quản trị

Theo mặc định, mô-đun video của bạn sẽ xuất hiện với nhãn 'Video' trong trình tạo. Thẻ quản trị cho phép bạn thay đổi thẻ này để dễ dàng nhận biết.

Tùy chọn thiết kế

thay đổi màu biểu tượng

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

Nếu bạn chỉ định lớp phủ hình ảnh cho nhóm video của mình, video được hiển thị sẽ chứa biểu tượng phát trên video. Bạn có thể chỉ định màu của biểu tượng này tại đây để phù hợp với màu trên trang của bạn.

Tùy chọn avancées

mô-đun video nâng cao part.png

Mã định danh CSS và các lớp

Điều này có thể được sử dụng để thêm CSS ID hoặc một lớp vào mô-đun của bạn. Sau đó, chúng có thể được sử dụng trong biểu định kiểu của bạn hoặc trong hộp Tùy chọn chủ đề CSS tùy chỉnh để áp dụng kiểu tùy chỉnh cho mô-đun. Các ID CSS cũng có thể được nhắm mục tiêu bằng các liên kết cố định để liên kết đến các khu vực nhất định trên trang của bạn.

CSS tùy chỉnh

Tại đây bạn có thể thêm CSS tùy chỉnh vào mô-đun video của mình.

tầm nhìn

Nếu bạn muốn ẩn mô-đun video của mình trên một số thiết bị, bạn có thể chọn các thiết bị mà bạn muốn tắt mô-đun video.

[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