Cách Thêm Hình Nền Động Vào WordPress (2 Phương Pháp)

Mục lục

Bạn có muốn tạo hình nền động cho website WordPress của mình không?

Nền động có thể tăng thêm sức hấp dẫn trực quan cho website của bạn. Nó sẽ làm cho website của bạn hấp dẫn và đáng nhớ hơn, để lại ấn tượng lâu dài cho người dùng.

Trong hướng dẫn này, WPBeginner Việt Nam sẽ chỉ cho bạn cách thêm nền hạt vào WordPress bằng cách sử dụng particle.js, một thư viện hoạt ảnh JavaScript.

Cách Thêm Hình Nền Động Vào WordPress

Tại sao nên thêm hình nền động vào WordPress?

Việc custom hình nền website của bạn có vẻ không quan trọng. Tuy nhiên, nó thực sự có thể định hình ấn tượng đầu tiên của người dùng về thương hiệu của bạn và ảnh hưởng đến trải nghiệm của họ trên website của bạn.

Nền động có thể tăng cường sức hấp dẫn trực quan của website, khiến website tương tác và bắt mắt hơn đối với người dùng. Nó tạo ấn tượng rằng website WordPress của bạn sử dụng thiết kế chất lượng cao và sáng tạo.

Nhiều website cũng sử dụng hiệu ứng hoạt hình khi họ muốn welcome một dịp đặc biệt nào đó.

Ví dụ, bạn có thể thấy các cửa hàng eCommerce thêm hình ảnh bông tuyết động hoặc cây thông Noel rơi trên website của họ để tạo không khí lễ hội cho mùa lễ.

Một ví dụ về nền hạt Giáng sinh

Một số website cũng sử dụng hình ảnh động nền tải trước trên website của họ.

Với điều này, người dùng có thể có cảm giác rằng website đang tải, khiến họ có nhiều khả năng kiên nhẫn chờ đợi các thành phần của website xuất hiện. Bạn có thể đọc bài viết của WPBeginner Việt Nam về cách thêm hoạt ảnh nền tải trước để biết thêm thông tin.

Trong hướng dẫn này, WPBeginner Việt Nam sẽ chỉ cho bạn cách thêm nền hoạt hình bằng cách sử dụng particle.js. Nếu bạn muốn tìm hiểu đó là gì, hãy tiếp tục đến phần tiếp theo.

Particle.js là gì?

particle.js là một thư viện JavaScript cho phép bạn tạo ra những hiệu ứng hình ảnh tuyệt đẹp bằng các hạt, là những phần tử đồ họa nhỏ, hoạt hình.

Các hạt này có thể được custom theo kích thước, màu sắc, hình dạng và chuyển động. Chúng cũng phản hồi tương tác của người dùng, chẳng hạn như chuyển động chuột hoặc nhấp chuột, để thêm một lớp tương tác vào website của bạn.

Bây giờ bạn đã biết particle.js là gì, hãy cùng xem cách bạn có thể sử dụng nó để thêm nền động trong WordPress. Có hai phương pháp dành cho người mới bắt đầu và bạn có thể điều hướng qua hướng dẫn này bằng các link nhanh bên dưới:

Phương pháp đầu tiên là sử dụng Hạt giốnglà plugin xây dựng trang WordPress tốt nhất trên thị trường. Nó cung cấp tính năng nền hạt tích hợp và có thể custom cao.

Với nó, bạn có thể chọn một trong những hoạt ảnh hạt đã có sẵn hoặc tự thêm một hoạt ảnh custom. Bạn cũng có thể sửa đổi số lượng hạt, chuyển động hoạt ảnh và hiệu ứng di chuột để phù hợp với sở thích của mình.

Để biết thêm thông tin về SeedProd, bạn có thể xem bài đánh giá chuyên sâu về SeedProd của WPBeginner Việt Nam. Chúng tôi đã đề cập đến mọi thứ, bao gồm các option custom, lựa chọn mẫu và block, và tích hợp của bên thứ ba.

Plugin xây dựng trang SeedProd cho WordPress

Trong hướng dẫn này, WPBeginner Việt Nam sẽ sử dụng phiên bản cao cấp của SeedProdvì tính năng nền của hạt có sẵn ở đó.

Để sử dụng SeedProd, trước tiên bạn cần cài đặt và kích hoạt plugin. Bạn có thể tìm thêm thông tin chi tiết về điều này trong hướng dẫn dành cho người mới bắt đầu về cách cài đặt plugin WordPress.

Sau đó, chỉ cần sao chép-dán khóa cấp phép của bạn vào plugin. Chỉ cần vào dashboard WordPress của bạn, điều hướng đến SeedProd » Settings, và nhập khóa cấp phép vào trường thích hợp. Sau đó, nhấp vào ‘Xác minh khóa’.

Thêm khóa cấp phép SeedProd vào WordPress

Nếu bạn muốn custom theme trước khi thêm nền hạt vào WordPress, bạn có thể làm theo hướng dẫn của WPBeginner Việt Nam về cách dễ dàng tạo theme custom bằng SeedProd.

Bây giờ, bạn cần mở trình tạo kéo thả cho trang bạn muốn chèn nền hạt vào. Nếu bạn đã tạo theme bằng SeedProd, thì bạn sẽ có một số trang được thêm vào WordPress cho bạn.

Tiếp theo, chỉ cần đi tới Trang » Tất cả các trang và di con trỏ chuột qua một trang, như trang chủ, trang giới thiệu hoặc trang nào đó khác. Sau đó, chọn nút ‘Chỉnh sửa bằng SeedProd’.

Nhấp vào Chỉnh sửa bằng SeedProd trên trang WordPress

Nếu option này không xuất hiện ở phía bạn, đừng lo lắng.

Chỉ cần nhấp vào nút ‘Chỉnh sửa’ và trong trình chỉnh sửa block, nhấp vào nút ‘Chỉnh sửa bằng SeedProd’.

Nhấp vào Chỉnh sửa bằng SeedProd bên trong trình chỉnh sửa block WordPress

Bây giờ bạn sẽ vào được page builder của SeedProd.

Chỉ cần di con trỏ chuột qua phần trang mà bạn muốn thêm nền hạt trong WordPress và chọn phần đó. Bạn sẽ biết mình đã chọn phần đó nếu đường viền màu tím và thanh công cụ xuất hiện ở đầu phần đó.

Sau khi bạn nhấp vào một phần, sidebar Phần ở bên trái sẽ hiển thị.

Bây giờ tất cả những gì bạn phải làm là chuyển sang tab ‘Nâng cao’ và bật cài đặt ‘Bật nền hạt’.

Bật cài đặt nền hạt trong SeedProd

Có một số thiết lập Nền hạt mà bạn có thể cấu hình.

Một là Kiểu, nơi bạn có thể chọn bất kỳ hiệu ứng hoạt hình nào có sẵn, bao gồm Đa giác, Không gian, Tuyết, Bông tuyết, Giáng sinh, Halloween và Tùy chỉnh.

Chúng tôi sẽ nói thêm về việc thêm hiệu ứng nền hạt custom ở phần sau của bài viết.

Cấu hình cài đặt nền hạt cơ bản trong SeedProd

Ngoài ra còn có Opacity, kiểm soát mức độ mờ đục của hình ảnh động và Flow Direction, thiết lập hướng mà các hạt sẽ hướng tới.

Đối với một số kiểu hạt nhất định, bạn cũng có thể custom màu sắc của chúng.

Tuy nhiên, đối với Giáng sinh và Halloween, không có cài đặt màu sắc vì các hạt có dạng hình ảnh.

Nền hạt Giáng sinh trong SeedProd trông như thế nào

Bên dưới Màu là ‘Cài đặt nâng cao’. Bật option này cho phép bạn custom Số lượng hạt, Kích thước hạt, Tốc độ di chuyển và Bật Hiệu ứng di chuột.

Với tính năng cuối cùng, các hạt sẽ di chuyển theo hướng chuột của bạn. Lưu ý rằng tính năng này sẽ không hoạt động khi bạn xem website trong khu vực page builder hoặc nếu content trong phần đó chiếm toàn bộ không gian của phần đó.

Cài đặt nâng cao của nền hạt trong SeedProd

Và đó là tất cả những gì bạn cần làm.

Sau khi hoàn tất custom nền hạt WordPress, bạn có thể nhấp vào nút ‘Lưu’ ở góc trên bên phải để xuất bản các thay đổi. Bạn cũng có thể chọn nút ‘Xem trước’ để xem nền hạt trông như thế nào.

Lưu hoặc xem trước các thay đổi trong SeedProd

Tạo Nền Hạt Tùy Chỉnh Cho Trang Web Của Bạn

Nếu các hiệu ứng hoạt hình có sẵn không phù hợp với nhu cầu của bạn, thì bạn cũng có thể tạo một hiệu ứng custom. Điều bạn nên làm là chọn kiểu ‘Tùy chỉnh’ trong cài đặt Nền hạt.

Sau đó, nhấp vào link trong dòng ‘Vui lòng truy cập link đây và chọn các thuộc tính cần thiết cho hạt.’

Chọn kiểu Tùy chỉnh và nhấp vào link được cung cấp trong SeedProd để tạo nền hạt custom

Trên website này, bạn có thể custom thiết kế hạt mong muốn, tính tương tác và màu nền.

Trong phần cài đặt ‘hạt’, bạn có thể điều chỉnh số lượng hạt, màu sắc, hình dạng, kích thước, độ mờ, các đường link các hạt và chuyển động.

Chỉnh sửa cài đặt Particles trong website particle.js của Vincent Garreau

Phía dưới là ‘tính tương tác’.

Đây là nơi bạn có thể điều chỉnh cách các hạt hoạt động khi bạn di chuột qua chúng và nhấp vào chúng.

Cài đặt tương tác hạt trong website của Vincent Garreau

Cuối cùng, bạn có ‘nền trang (css).’ Tại đây, bạn có thể thay đổi màu nền của hoạt ảnh hạt và sửa đổi kích thước, vị trí và độ lặp lại của nó.

Nếu cần, bạn cũng có thể upload URL hình nền custom.

Cài đặt nền trang hạt trong website của Vincent Garreau

Khi hoàn tất, bạn có thể nhấp vào nút ‘Tải xuống cấu hình hiện tại (json)’ ở cuối.

Thao tác này sẽ download file code JSON của nền hạt, bạn cần mở file này bằng ứng dụng soạn thảo văn bản. Giữ cửa sổ soạn thảo văn bản mở khi bạn tiếp tục các bước tiếp theo.

Tải xuống file JSON cho nền hạt

Bây giờ, chúng ta hãy quay lại page builder SeedProd.

Điều hướng đến menu Particle Background trong phần Advanced settings một lần nữa. Sau đó, sao chép và dán code JSON vào hộp văn bản thích hợp.

Bây giờ bạn sẽ thấy nền hạt của mình trong phần xem trước.

Chèn code JSON vào cài đặt nền hạt của SeedProd

Nhấp vào ‘Xem trước’ để xem nền hạt trông như thế nào ở giao diện trước và ‘Lưu’ để hoàn tất các thay đổi.

Sau đây là ví dụ về hình ảnh nền của hạt có thể trông như thế nào:

Ví dụ về nền hạt hoạt hình được tạo bằng SeedProd

Phương pháp 2: Cách thêm hình nền động bằng plugin miễn phí

Phương pháp thứ hai là một giải pháp thay thế miễn phí cho việc sử dụng SeedProd. Đối với phương pháp này, bạn sẽ cần Nền hạt WP plugin, đây là plugin hoạt hình miễn phí.

Giống như trước, hãy đảm bảo cài đặt và kích hoạt plugin Particle Background WP. Nếu bạn cần hướng dẫn, bạn có thể xem hướng dẫn của WPBeginner Việt Nam về cách cài đặt plugin WordPress.

Sau khi plugin được kích hoạt, hãy vào Particle Background từ dashboard WordPress. Tại đây, bạn sẽ thấy một số phần.

Một là Deploy. Nó bao gồm một shortcode cho phần nền hạt đã hoàn thiện nếu bạn muốn thêm nó vào trang hoặc bài đăng sau này.

Bạn cũng có thể tích vào ô ‘Thêm vào trang chủ’ và/hoặc ‘Thêm vào trang blog’ để tự động chèn hình nền vào các trang đó.

Cấu hình cài đặt Particle Background WP Deploy

Cuộn xuống, bạn sẽ thấy phần Nội dung. Đây là nơi bạn có thể thêm một số văn bản lên trên nền hạt.

Nếu bạn biết HTML, bạn có thể thêm một số code HTML để custom văn bản. Ngoài ra, bạn có thể nhấp vào ‘Thêm phương tiện’ để chèn hình ảnh hoặc file từ media library WordPress.

Chèn một số văn bản vào plugin Particle Background WP

Dưới đây là các Thiết lập cho hoạt ảnh nền hạt của WordPress. Bạn có thể điều chỉnh Mật độ hạt, điều khiển khoảng cách gần và xa của các hạt, Màu chấm của hạt và Màu nền. Bạn cũng có thể làm cho nền trong suốt.

Một nhược điểm của plugin WordPress này là bạn không thể điều chỉnh hình dạng SeedProd như cách bạn làm với SeedProd. Vì vậy, đó là điều cần cân nhắc nếu bạn muốn sử dụng plugin này.

Cấu hình cài đặt nền hạt động của WP

Và bạn đã hoàn thành!

Sau đây là ví dụ về hình ảnh nền động dạng hạt khi sử dụng plugin WordPress này.

Một ví dụ về nền hoạt hình sử dụng plugin Particle Background WP

Tùy chọn thay thế: Thêm hình nền video WordPress

Nếu bạn muốn thêm hiệu ứng động vào website nhưng không thích các phương pháp WPBeginner Việt Nam đã chỉ cho bạn, thì WPBeginner Việt Nam khuyên bạn nên thêm video nền thay thế.

Nền video cung cấp cho bạn nhiều option hơn về loại hiệu ứng hoạt hình bạn có thể có trên website của mình. Thêm vào đó, bạn có thể làm cho video tự động phát theo loop để tạo cảm giác hoạt hình.

Tất nhiên, WPBeginner Việt Nam không khuyên bạn nên tải toàn bộ video lên website của mình. Điều đó sẽ làm chậm WordPress đáng kể và gây khó chịu cho người dùng.

Thay vào đó, bạn có thể nhúng video YouTube và sử dụng làm hình nền động toàn màn hình.

Ví dụ nền video được tạo bằng Thrive Architect

Để biết thêm thông tin, hãy xem hướng dẫn của WPBeginner Việt Nam về cách thêm hình nền video YouTube toàn màn hình vào WordPress.

Hình nền động có làm chậm website không?

Nếu không thực hiện đúng, hình nền động có thể làm chậm website của bạn. Nhưng có nhiều cách để tránh điều này.

Đối với nền hạt, số lượng hạt và tốc độ di chuyển của chúng có thể ảnh hưởng đến tốc độ tải trang của bạn. Nhiều hạt hơn và chuyển động nhanh hơn cần nhiều sức mạnh xử lý hơn, điều này có thể làm chậm mọi thứ.

Để khắc phục điều này, bạn có thể thử các cài đặt khác nhau cho mật độ hạt và tốc độ để tìm ra cài đặt nào phù hợp nhất với website của mình. Trong quá trình này, bạn có thể chạy thử nghiệm tốc độ WordPress để xem hiệu quả.

Bạn cũng nên chỉ sử dụng hình nền động trên các trang mà chúng quan trọng nhất. Bạn không cần chúng ở khắp mọi nơi, nếu không chúng có thể trở nên nhàm chán.

Cuối cùng, để giữ cho website của bạn nhanh với nền hạt, hãy đảm bảo tuân thủ các biện pháp tốt nhất để tăng tốc độ website. Bạn có thể tìm hiểu thêm trong hướng dẫn cuối cùng của WPBeginner Việt Nam về cách làm cho WordPress nhanh hơn.

Chúng tôi hy vọng bài viết này đã giúp bạn biết cách thêm nền hạt động vào WordPress. Bạn cũng có thể muốn xem hướng dẫn của WPBeginner Việt Nam về cách nhận phản hồi thiết kế website trong WordPress và lựa chọn chuyên gia của WPBeginner Việt Nam về các trình xây dựng theme WordPress tốt nhất.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên TwitterFacebook.

5/5 - (106 bình chọn)
Facebook
Twitter
LinkedIn
Telegram
Email
Đội Ngũ Biên Tập
WordPress

Cách Thêm Schema FAQ vào WordPress (2 Phương pháp)

Bạn có muốn thêm schema FAQ vào WordPress không? Việc thêm schema FAQ có thể giúp tăng thứ hạng SEO và tỷ lệ nhấp chuột tự nhiên bằng cách hiển thị trực tiếp các câu hỏi thường gặp trong kết quả tìm kiếm của Google. Trong bài viết này, WPBeginner

Đọc tiếp »
WordPress

Cách tạo Banner cho website (3 cách dễ dàng)

Bạn đang tìm cách dễ dàng để tạo banner website trên WordPress? Banner có thể làm nổi bật các sản phẩm, dịch vụ hoặc tin tức cập nhật được cung cấp bởi website của bạn theo cách bắt mắt. Nó có thể tăng sự tương tác của người dùng, tăng

Đọc tiếp »
WordPress

Cách tạo block WordPress custom (Cách dễ dàng)

Trình chỉnh sửa block Gutenberg trong WordPress cung cấp trải nghiệm tạo content mạnh mẽ và đa năng. Tuy nhiên, thư viện block mặc định có thể không phải lúc nào cũng bao gồm tất cả các nhu cầu cụ thể của website của bạn. Trong nhiều năm qua, WPBeginner

Đọc tiếp »