Tin tức và phân tích của tất cả các thiết bị di động
Blogs

Cách thêm hiệu ứng thay đổi màu nền mượt mà cho WordPress

Bạn muốn thêm một hiệu ứng thay đổi màu nền trơn tru cho trang web WordPress của bạn? Bạn có thể đã thấy một số trang web phổ biến trong đó màu nền của một trang web cụ thể hoặc toàn bộ trang web tự động thay đổi từ màu này sang màu khác. Hiệu ứng đẹp mắt này có thể giúp bạn thu hút sự chú ý của người dùng và cải thiện mức độ tương tác với trang web của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm hiệu ứng thay đổi màu nền mượt mà vào WordPress.

Thêm hiệu ứng thay đổi màu nền mềm mại cho WordPress chiều rộng = chiều 550 chiều cao = Tiết 340 ″ lớp = Kích thước alignnone kích thước đầy đủ wp-image-50813 /></p><h4>Hiệu ứng thống nhất về thay đổi màu nền là gì?</h4><div class='code-block code-block-2' style='margin: 8px auto; text-align: center; display: block; clear: both;'><style>.ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;}</style><div class='ai-rotate ai-unprocessed ai-timed-rotation ai-2-2' data-info='WyIyLTIiLDJd' style='position: relative;'><div class='ai-rotate-option' style='visibility: hidden;' data-index=

Hiệu ứng thay đổi màu nền đồng đều cho phép bạn tự động chuyển giữa các màu nền khác nhau. Sự thay đổi diễn ra từ từ thông qua các màu khác nhau cho đến khi nó đạt đến màu cuối cùng. Nó trông như thế này:

Thay đổi màu hoạt hình màu "width =" 550 height = "231 class =" alignnone size-full wp-image-50814 ″ /></p><p>Công nghệ này được sử dụng để thu hút sự chú ý của người dùng với các hiệu ứng mượt mà dễ chịu cho mắt.</p><div class='code-block code-block-3' style='margin: 8px auto; text-align: center; display: block; clear: both;'><style>.ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;}</style><div class='ai-rotate ai-unprocessed ai-timed-rotation ai-3-2' data-info='WyIzLTIiLDJd' style='position: relative;'><div class='ai-rotate-option' style='visibility: hidden;' data-index=

Như đã nói, chúng ta hãy xem làm thế nào để thêm hiệu ứng thay đổi màu nền mượt mà này cho tất cả các chủ đề WordPress.

Thêm hiệu ứng thay đổi màu nền mượt mà cho WordPress

Hướng dẫn này yêu cầu bạn thêm mã vào các tệp WordPress của mình. Nếu trước đây bạn chưa làm như vậy, hãy xem hướng dẫn của chúng tôi về cách sao chép và dán mã vào WordPress.

Trước tiên, bạn cần tìm ra lớp CSS trong khu vực bạn muốn thay đổi. Bạn có thể làm điều này bằng cách sử dụng Công cụ kiểm tra trong trình duyệt của bạn. Chỉ cần duyệt qua khu vực bạn muốn thay đổi và nhấp chuột phải để chọn Công cụ kiểm tra.

Tìm lớp CSS "width =" 550 height = "303 ″ class =" alignnone size-full wp-image-50810 /></p><p>Sau đó, bạn phải viết lớp CSS mà bạn muốn nhắm mục tiêu. Ví dụ, trong ảnh chụp màn hình ở trên, chúng tôi muốn trỏ đến khu vực widget ở phía dưới có "tiêu đề" lớp CSS.</p><p>Trong bước tiếp theo, bạn sẽ cần mở trình soạn thảo văn bản thông thường trên máy tính của mình và tạo một tệp mới. Bạn nên lưu tệp này dưới dạng wpb-background-guide.js trên máy tính để bàn của bạn.</p><div class='code-block code-block-5' style='margin: 8px auto; text-align: center; display: block; clear: both;'><style>.ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;}</style><div class='ai-rotate ai-unprocessed ai-timed-rotation ai-5-2' data-info='WyI1LTIiLDJd' style='position: relative;'><div class='ai-rotate-option' style='visibility: hidden;' data-index=

Sau đó, bạn cần thêm đoạn mã sau vào tệp JS của mình:

jQuery (function ($) {$ ('. page-header'). Each (function () {var $ this = $ (this), colors = ('# ec008c', '# 00bcc3', '# 5fb26a', '# fc7331'); setInterval (function () {var color = colors.shift (); colors.push (color); $ this.animate ({backgroundColor: color}, 2000);}, 4000);}); });

Nếu bạn nghiên cứu mã này, bạn sẽ nhận thấy rằng chúng tôi đã sử dụng lớp CSS mà chúng tôi muốn chỉ ra trong mã. Chúng tôi cũng thêm bốn màu. Hiệu ứng nền mềm mại của chúng tôi bắt đầu từ màu đầu tiên, sau đó chuyển sang màu tiếp theo và tiếp tục qua các màu đó.

Đừng quên lưu các thay đổi của bạn vào tệp.

Sau đó, bạn cần tải tệp wpb-bg-guide.js lên thư mục / js / trong chủ đề WordPress của bạn bằng FTP. Nếu chủ đề của bạn không có thư mục js bên trong, bạn phải tạo một thư mục.

Sau khi tải lên tệp JavaScript của bạn, đã đến lúc tải nó lên WordPress.

Bạn nên thêm đoạn mã sau vào tệp tin.php của chủ đề.

hàm wpb_bg_color_scripts () {wp_enqueue_script ('wpb-background-guide', get_stylesheet_directory_uri (). '1.0.0', đúng); } add_action ('wp_enqueue_scripts', 'wpb_bg_color_scripts');

Mã này tải tệp JavaScript và tập lệnh jQuery phụ thuộc mà bạn cần để mã này hoạt động chính xác.

Đó là nó, bây giờ bạn có thể truy cập trang web của họ để xem nó hoạt động. Bạn sẽ nhận thấy hiệu ứng mượt mà của màu nền trong khu vực bạn nhắm mục tiêu.

Có nhiều cách khác để sử dụng màu nền WordPress để thu hút sự chú ý của người dùng hoặc làm cho nội dung của bạn nổi bật. Ví dụ: bạn có thể thử:

Thêm hình nền toàn màn hình Thêm hình nền toàn màn hình Màu nền ngẫu nhiên trên mỗi trang tải Thêm hiệu ứng thị sai cho tất cả các chủ đề WordPress Thiết kế bài đăng riêng lẻ với các hình nền khác nhau

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng thêm hiệu ứng thay đổi màu nền mượt mà vào WordPress. Bạn cũng có thể muốn xem danh sách các plugin Trình tạo trang WordPress tốt nhất của chúng tôi mà bạn có thể thử.

Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter và Facebook.

Khuyến Khích: