Cách thêm nền video vào trang web WordPress

Chưa được phân loại

Tìm kiếm cách dễ nhất để thêm nền video WordPress?

Được làm tốt hình nền video thu hút sự chú ý và làm cho các thương hiệu trông mát mẻ ngay từ đầu. Nhưng khi được thực hiện kém, nền video sẽ làm chậm trang web của bạn, chiếm dung lượng và gây nhầm lẫn cho khách truy cập mới. Đó là lý do tại sao chúng tôi thực hiện hướng dẫn này để bạn có thể tránh mọi cạm bẫy và thay vào đó, hãy tìm hiểu cách thêm nền video WordPress đúng cách.

👨 🎓 Hãy tiếp tục đọc để tìm hiểu về các phương pháp hay nhất và các bước để thêm nền video vào trang web WordPress của bạn, tất cả đều không có bất kỳ kiến thức kỹ thuật đặc biệt nào.

Mục lục

Các phương pháp hay nhất để thêm nền video WordPress

  • Giữ kích thước tệp thấp nhưng độ phân giải cao: Không có gì làm giảm hiệu suất trang web của bạn nhiều hơn các video và hình ảnh lớn; Tuy nhiên, tốt hơn là duy trì độ phân giải trong quá trình nén.
  • Đừng lạm dụng nó: Quá nhiều video làm lộn xộn giao diện của bạn; chỉ sử dụng chúng để đưa ra quan điểm hoặc giới thiệu điều gì đó có liên quan.
  • Bao gồm lời kêu gọi hành động với thông tin bổ sung: Đừng để người xem muốn biết thêm, sau đó quên một liên kết dẫn đến các chi tiết khác.
  • Tránh âm thanh bằng mọi giá: Thật chói tai khi tất cả mọi người chỉ muốn xem trang web của bạn.
  • Nếu âm thanh là bắt buộc, đừng để âm thanh đó ở chế độ tự động phát: Cung cấp một tùy chọn để người dùng phát âm thanh.
  • Hãy xem xét phụ đề cho video có âm thanh: Không phải ai cũng có thể nghe âm thanh của bạn, cho dù đó là do vị trí của họ hay khiếm thính.
  • Lưu trữ bên ngoài: Máy chủ lưu trữ trang web của bạn có thể không được thiết kế để phân phát video, vì vậy hãy chọn các trang web như Vimeo và YouTube để duy trì hiệu suất, hoặc xem xét một trang web lưu trữ video đặc biệt.
  • Bám sát các định dạng / độ phân giải tốt nhất: Chúng ta chỉ đang nói về MP4; tối thiểu 720p; codec h264.

Và hãy nhớ rằng, không phải tất cả các trang web đều cần video; đôi khi nó chỉ làm cho giao diện lộn xộn, chậm và không tập trung. Ví dụ: một luật sư nên gắn bó với những bức ảnh chuyên nghiệp hơn là những video bắt tay ngô nghê chắc chắn sẽ làm chậm trang web của họ.

Cách thêm nền video WordPress

Có một số phương pháp kích hoạt các tính năng nền video trong WordPress.

Chúng tôi sẽ tập trung vào bốn giải pháp không có mã khác nhau:

  1. Khối Cover tích hợp
  2. Plugin nền/tiêu đề
  3. Plugin trình tạo trang yêu thích của bạn
  4. Sử dụng chủ đề hỗ trợ tiêu đề hoặc hình nền video

Làm theo các bước cho từng phương pháp dưới đây. 👇

Tùy chọn 1: Khối bìa tích hợp

Trình chỉnh sửa WordPress gốc cung cấp cái được gọi là Che chặn để chèn hình nền phía sau nội dung khác, chẳng hạn như văn bản và các nút.

Điều mà nhiều người dùng WordPress không nhận ra là Che khối cũng hỗ trợ hình nền video.

Bước 1: Thêm khối Cover

Để bắt đầu, hãy đi tới bất kỳ trang nào bạn muốn thêm nền và thêm Che khối.

chọn khối bìa để chèn nền video WordPress

Bước 2: Tải lên video của bạn

Đối với Che, chọn nút Tải lên hoặc Thư viện phương tiện , bất kỳ cái nào bạn định sử dụng để thêm video.

tải lên khối bìa

Các Che khối không nói gì về việc hỗ trợ video, vì vậy bạn chỉ cần đảm bảo chọn một video (như MP4) từ Thư viện phương tiện. Nhấp vào biểu tượng Lựa sau khi bạn đã chọn video.

thêm video tải lên

Bước 3: Chèn nội dung nền trước lớp phủ

Bây giờ bạn sẽ thấy bản xem trước của video nền. Bạn có thể thêm các khối tiền cảnh vào Che, chẳng hạn như văn bản hoặc nút.

nội dung ở nền trước

Bước 4: Chỉnh sửa cài đặt Bìa nếu cần

Cài đặt bìa bao gồm:

  • Lớp phủ màu: lý tưởng để làm cho nó dễ dàng hơn để đọc văn bản
  • Opacity: cũng hữu ích cho việc tiết lộ nội dung tiền cảnh
  • Chiều cao tối thiểu của bìa: đôi khi cần thiết để làm cho nền video WordPress bao phủ nhiều không gian hơn
độ mờ đục của phủ

Bước 5: Xem nền video WordPress của bạn đang hoạt động

Khi bạn đã hoàn tất, hãy lưu trang và chuyển đến giao diện người dùng để xem nền video WordPress của bạn!

Khá nhiều plugin tồn tại để thêm hình nền video WordPress, một số plugin cung cấp hình nền trang web đầy đủ, trong khi một số plugin khác được phục vụ để cung cấp cho bạn tiêu đề video.

Đây là những plugin nền video tốt nhất:

➡️ Yêu thích của chúng tôi là Plugin Hình nền WordPress Nâng cao; chúng tôi sẽ chỉ cho bạn cách thêm nền video WordPress bằng plugin đó chỉ trong vài bước.

Bước 1: Cài đặt AWB và thêm khối nội dung của nó

Để bắt đầu, hãy cài đặt Advanced WordPress Backgrounds (AWB).

Đi tới trang mà bạn muốn thêm video nền.

Sử dụng trình chỉnh sửa WordPress, nhấp để thêm khối nội dung. Tìm kiếm và chọn nút Bối cảnh (AWB) khối.

Khối plugin AWB

Bước 2: Thêm video của bạn

Điều này cung cấp cho bạn các tùy chọn để thêm màu sắc, hình ảnh hoặc hình nền video vào phần tử.

Xỉa Video, sau đó dán URL video từ YouTube hoặc Vimeo. Thay vào đó, plugin có một Tự lưu trữ để tải video địa phương lên.

thêm liên kết video vào youtube hoặc nền video WordPress cục bộ

Bước 3: Mở rộng chiều cao và chiều rộng của nền video

Theo mặc định, khối nội dung không kéo dài để bao phủ phần lớn khu vực trang. Bạn phải nhấp vào biểu tượng Chiều cao đầy đủ trong trình chỉnh sửa. Ngoài ra còn có một nút để mở rộng nền video thành fullwidth.

Bạn cũng có thể kéo hoặc chèn nội dung, chẳng hạn như văn bản, nút hoặc hình ảnh, lên trên cùng của video nền.

chiều cao đầy đủ

Bước 4: Sửa đổi cài đặt nền video WordPress

Điều chỉnh bất kỳ cài đặt nào bạn muốn trong Khối tab: thời gian bắt đầu, thời gian kết thúc, lặp lại, luôn phát, độ mờ của video.

cài đặt bổ sung cho nền video WordPress

Thật khôn ngoan khi thêm lớp phủ màu nền với độ mờ giảm; điều này làm cho văn bản lớp phủ dễ đọc hơn.

Làm điều này bằng cách đi tới Khối tab và thay đổi màu thành màu trắng hoặc đen bên dưới Nền Màu. Di chuyển các Opacity trượt xuống một chút để đảm bảo nền vẫn hiển thị.

điều chỉnh độ mờ

Bước 5: Xem kết quả

Kết quả là một video phát trước nội dung khác, lý tưởng nhất là một video lặp lại, không có âm thanh và vẫn giữ hầu hết sự tập trung vào nội dung tiền cảnh.

Tùy chọn 3: Plugin trình tạo trang yêu thích của bạn

Hầu hết các trình tạo trang, như Elementor, WPBakery và Divi, cung cấp các tính năng nền để thêm hình nền hình ảnh hoặc video vào bất kỳ mô-đun nội dung nào.

➡️ Hãy thoải mái chọn trình tạo trang theo ý thích của bạn, nhưng chúng tôi đề xuất Elementor do tính dễ sử dụng của nó.

Hãy chắc chắn cài đặt Elementor hoặc bất kỳ trình tạo nào bạn định sử dụng trước khi bắt đầu.

Bước 1: Mở một trang bằng trình chỉnh sửa Elementor

Đi tới Trang trên WordPress và chọn trang được chỉ định là của bạn Trang chủ. Nhấp vào biểu tượng Chỉnh sửa với Elementor nút.

chỉnh sửa với elementor

Bước 2: Thêm khối nội dung Phần

Hầu hết các mô-đun nội dung trong Elementor đều cung cấp cài đặt nền, nhưng chúng tôi khuyên bạn nên chèn một Phần. Bằng cách đó, bạn có thể thêm nhiều mục vào mục, như văn bản, hình ảnh và nút. Sau đó, bạn thêm nền video vào phần đó để nó ở phía sau mọi thứ ở nền trước.

Chúng tôi đã thêm một số văn bản và một nút vào một phần trong hướng dẫn của chúng tôi. Hãy tiếp tục và chọn Chỉnh sửa phần , sau đó chọn biểu tượng Phong cách Tab.

kiểu cho phần

Bước 3: Chèn nền video của bạn

Tại đây, bạn sẽ thấy một Nền khu vực thả xuống. Chọn tùy chọn Video bên cạnh Nền Kiểu. Sau đó, dán URL từ YouTube, Vimeo hoặc tệp cục bộ vào Video Liên kết trường.

thêm nền video WordPress

Bước 4: Chỉnh sửa cài đặt nền video

Bạn có thể cần phải mở rộng nền video để chiếm nhiều màn hình hơn. Để làm như vậy, hãy chuyển sang Bố trí và điều chỉnh Chiều caoChiều cao tối thiểu.

chiều cao tối thiểu cho nền video WordPress

Trở lại dưới Phong cách , xem xét thay đổi cài đặt cho video nền:

  • Thời gian bắt đầu
  • Thời gian kết thúc
  • Chơi một lần
  • Chơi trên thiết bị di động
  • Chế độ riêng tư
Cài đặt

Hơn nữa, hãy suy nghĩ về việc thêm một Nền Phủ— thường là màu trung tính như đen hoặc trắng và một số thay đổi về độ mờ — để làm cho văn bản, nút và hình ảnh ở tiền cảnh dễ nhìn thấy hơn.

thay đổi lớp phủ màu cho nền video WordPress

Bước 5: Xem nền video WordPress trên giao diện người dùng

Khi bạn hoàn tất, video sẽ phát đằng sau tất cả nội dung trong phần!

Tùy chọn 4: Sử dụng chủ đề WordPress hỗ trợ hình nền / tiêu đề video

Các chủ đề WordPress khác nhau cung cấp tiêu đề, thanh trượt và cài đặt phương tiện toàn trang được tích hợp sẵn; những điều này cho phép bạn tải lên hình ảnh, GIF hoặc video để chiếm toàn bộ màn hình, thường được sử dụng làm tiêu đề cho trang chủ của bạn.

Để tìm chủ đề có tính năng nền video, hãy tìm kiếm “nền video” trên các thị trường phổ biến:

➡️ Hãy chắc chắn quét danh sách tính năng hoặc thậm chí hỏi nhà phát triển trước khi tải xuống / mua, để đảm bảo chủ đề có chức năng nền video.

Ví dụ, Chủ đề Colibri WP cung cấp hình nền video.

Bước 1: Cài đặt và kích hoạt chủ đề

Để kích hoạt nền video, hãy cài đặt chủ đề Colibri WP, sau đó chuyển đến Bề ngoài > Cài đặt Colibri > Bắt Đầu. Tại đây, bạn có thể kích hoạt Tính năng tạo trang Colibri.

thêm tính năng trình tạo trang

Bước 2: Thêm trang web demo

Nhấp vào Trang web demo tab và Nhập khẩu mẫu demo mà bạn chọn.

trang web demo

Bước 3: Tùy chỉnh hình ảnh Anh hùng

Điều hướng đến Bề ngoài > Tùy chỉnhvà chọn nút Cài đặt biểu tượng bánh răng bên cạnh biểu tượng Anh hùng Module.

cài đặt cho hình ảnh anh hùng

Bước 4: Thêm nền video

Chọn nút Phong cách và chuyển đổi Nền đến Video.

nhấp vào kiểu và video để thêm nền video WordPress

Cuối cùng, một trong hai chọn Kênh YouTube để dán vào một Ngoài Video Địa chỉ URL hoặc Tự lưu trữ để tải video địa phương lên.

Do đó, bạn sẽ thấy nền video đang chuyển động trên bản xem trước Của trình tùy chỉnh.

Bắt đầu với nền video hoàn hảo

Không phải lúc nào bạn cũng nên thêm nền video WordPress, nhưng bạn nên cân nhắc nếu bạn có nội dung video chất lượng cao phản ánh thương hiệu của mình và sẽ không cản trở hiệu suất trang web của bạn.

Trong bài đăng này, bạn đã học được bốn phương pháp khác nhau, ít nhất một trong số đó sẽ phù hợp với tình huống của bạn.

i️ Đối với một số cách khác để cải thiện trang web của bạn, hãy xem bài đăng với 10 yếu tố của một thiết kế trang chủ thành công.

Đối với bất kỳ câu hỏi nào về hình nền video WordPress, hãy chia sẻ suy nghĩ của bạn trong phần bình luận bên dưới.

Hướng dẫn miễn phí

5 mẹo cần thiết để tăng tốc độ
Trang web WordPress của bạn

Giảm thời gian tải của bạn thậm chí 50-80%
chỉ bằng cách làm theo các mẹo đơn giản.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *