VietNetwork.Vn

Bạn có muốn thêm hoạt ảnh CSS trong WordPress không?

Ảnh động là một cách tuyệt vời để thu hút sự chú ý của khách truy cập và làm nổi bật nội dung quan trọng nhất của trang. Họ cũng có thể khuyến khích khách hàng nhấp vào các nút và liên kết kêu gọi hành động của bạn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách bạn có thể dễ dàng thêm hoạt ảnh CSS trong WordPress.

Tại sao Thêm CSS Animations trong WordPress?

Bạn có thể sử dụng hoạt ảnh CSS để thu hút sự chú ý của khách truy cập vào các phần khác nhau của trang. Ví dụ: nếu bạn có cửa hàng trực tuyến thì hoạt ảnh có thể làm nổi bật các tính năng quan trọng nhất hoặc điểm bán hàng lớn nhất của sản phẩm.

Hoạt ảnh cũng sẽ làm cho CTA của bạn nổi bật, điều này có thể giúp bạn đạt được mục tiêu cụ thể chẳng hạn như thu hút nhiều người đăng ký nhận bản tin email của bạn hơn.

Bạn có thể thêm hoạt ảnh CSS vào biểu định kiểu của chủ đề hoặc chủ đề con của mình. Tuy nhiên, điều này tốn rất nhiều thời gian và công sức, đồng thời có thể phá vỡ thiết kế và thậm chí cả chức năng trang web của bạn nếu bạn mắc lỗi.

Như đã nói, hãy xem cách bạn có thể dễ dàng thêm hoạt ảnh CSS vào trang web WordPress của mình. Nếu bạn muốn chuyển thẳng đến một phương pháp cụ thể, thì bạn có thể sử dụng các liên kết bên dưới.

Phương pháp 1. Cách dễ dàng tạo hoạt ảnh cho bất kỳ khối WordPress nào (Nhanh chóng và dễ dàng)

Cách dễ nhất để thêm hoạt ảnh CSS đơn giản là sử dụng Hoạt ảnh khối.

Plugin miễn phí này cho phép bạn thêm hoạt ảnh lối vào vào bất kỳ khối nào mà không phải viết một dòng CSS nào. Nó cũng có hoạt hình đánh máy và hiệu ứng kiểu mã đánh dấu mà bạn có thể thêm vào văn bản và số.


Trước tiên, bạn cần cài đặt và kích hoạt plugin. Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy mở bất kỳ trang hoặc bài đăng nào trong trình chỉnh sửa WordPress. Sau đó, chỉ cần nhấp vào khối mà bạn muốn tạo hiệu ứng động và chọn tab 'Chặn' trong menu bên phải.

Bạn sẽ thấy menu này có phần 'Hoạt ảnh' mới.


Chỉ cần nhấp để mở rộng phần 'Hoạt ảnh' và bạn sẽ thấy ba tùy chọn khác nhau: Ảnh động, Ảnh động đếm và Hoạt ảnh nhập.

'Hoạt ảnh' là các hiệu ứng ngắn phát một lần khi tải trang. Để thêm loại hoạt ảnh đầu vào này vào blog WordPress của bạn, chỉ cần nhấp vào danh sách thả xuống bên cạnh 'Hoạt ảnh'.


Thao tác này sẽ mở ra một menu nơi bạn có thể chọn hoạt ảnh mà mình muốn sử dụng.

Trình chỉnh sửa WordPress sẽ hiển thị bản xem trước của hoạt ảnh, vì vậy bạn có thể thử các tùy chọn khác nhau để xem cái nào trông đẹp nhất.


Theo mặc định, hoạt ảnh đầu vào sẽ phát ngay khi tải trang, nhưng bạn có thể thêm độ trễ nếu muốn. Nếu bạn sử dụng nhiều hoạt ảnh trên cùng một trang, thì bạn thậm chí có thể sử dụng độ trễ để bố trí xen kẽ các hoạt ảnh của mình để chúng không bị quá tải.

Chỉ cần mở trình đơn thả xuống 'Trì hoãn' và chọn thời gian từ danh sách.


Bạn cũng có thể làm cho hoạt ảnh nhanh hơn hoặc chậm hơn bằng cách sử dụng menu thả xuống 'Tốc độ'.

Khi bạn đang thử các cài đặt khác nhau, bạn có thể xem trước hoạt ảnh bất kỳ lúc nào bằng cách nhấp vào 'Phát lại hoạt ảnh'.


Plugin này cũng có 'Đếm Hoạt ảnh' và 'Hoạt ảnh Nhập'.

Hoạt ảnh Nhập cho phép bạn tạo hiệu ứng động cho văn bản, trong khi Hoạt ảnh Đếm thêm hiệu ứng kiểu mã đánh dấu vào các số. Các hình động này hoạt động với bất kỳ khối nào hỗ trợ văn bản hoặc số, vì vậy bạn có thể sử dụng chúng để tạo hình động cho các nút, chú thích hình ảnh, tiêu đề, v.v.

Để thêm một trong hai hiệu ứng này, hãy bắt đầu bằng cách tô sáng văn bản hoặc số mà bạn muốn tạo hiệu ứng. Sau đó, nhấp vào mũi tên hướng xuống trên thanh công cụ nhỏ.


Giờ đây, bạn có thể chọn 'Đếm hoạt ảnh' hoặc 'Hoạt ảnh nhập' từ trình đơn thả xuống.

Nếu các tùy chọn này chuyển sang màu xám thì hãy đảm bảo rằng bạn đã đánh dấu đúng nội dung. Ví dụ: bạn sẽ không thể chọn 'Đếm hoạt ảnh' nếu bạn chỉ đánh dấu văn bản.


Sau khi thêm hoạt ảnh, bạn có thể thay đổi tốc độ và thêm độ trễ tùy chọn bằng cách sử dụng menu thả xuống trong cửa sổ bật lên nhỏ.

Ví dụ: trong hình ảnh sau đây, chúng tôi đang sử dụng độ trễ là một giây.


Khi bạn đã sẵn sàng để hoạt ảnh CSS hoạt động, hãy nhấp vào nút 'Xuất bản' hoặc 'Cập nhật'. Bây giờ, nếu bạn truy cập trang web WordPress của mình, bạn sẽ thấy hoạt ảnh trực tiếp.

Phương pháp 2. Cách thêm hoạt ảnh CSS vào các trang tùy chỉnh (Được khuyến nghị)

Nếu bạn muốn thêm các hoạt ảnh đơn giản vào các khối WordPress tích hợp sẵn, thì Blocks Animation là một lựa chọn tốt. Tuy nhiên, nếu bạn thực sự muốn thu hút sự chú ý của khách truy cập, giữ chân mọi người trên trang web của bạn và nhận được nhiều chuyển đổi hơn thì chúng tôi khuyên bạn nên sử dụng SeedProd.

SeedProd là plugin trình tạo trang tốt nhất cho phép bạn tạo các trang đích, trang bán hàng đẹp mắt, v.v. bằng cách sử dụng trình chỉnh sửa kéo và thả đơn giản.

Nó cũng đi kèm với một khối 'Dòng tiêu đề hoạt hình' mà bạn có thể sử dụng để tạo các dòng tiêu đề hoạt ảnh xoay và được đánh dấu.


Bất chấp tên gọi, bạn có thể sử dụng khối Dòng tiêu đề hoạt hình để tạo hiệu ứng động cho bất kỳ văn bản nào bao gồm lời kêu gọi hành động, tiêu đề phụ hoặc bất kỳ văn bản nào khác mà bạn muốn nhấn mạnh.

SeedProd cũng đi kèm với hơn 40 hoạt ảnh đầu vào mà bạn có thể thêm vào bất kỳ khối nào bao gồm hình ảnh, văn bản, nút, video, v.v.


Bạn thậm chí có thể tạo hiệu ứng động cho toàn bộ các phần và cột chỉ bằng một vài cú nhấp chuột. Bằng cách này, bạn có thể tạo các trang hoạt hình hấp dẫn trong vòng vài phút.

Nếu bạn đang sử dụng hoạt ảnh để nhận được nhiều chuyển đổi và bán hàng hơn, thì SeedProd sẽ tích hợp với WooCommerce và hỗ trợ nhiều dịch vụ tiếp thị qua email hàng đầu mà bạn có thể đang sử dụng để quảng bá trang web của mình.

2.1. Cách thiết lập Trình tạo trang SeedProd

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt SeedProd. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần nhập mã cấp phép của mình.


Bạn có thể tìm thấy thông tin này trong tài khoản của mình trên trang web SeedProd. Sau khi thêm mã cấp phép, chỉ cần nhấp vào 'Xác minh mã.'

2.2. Tạo một thiết kế trang tùy chỉnh

Để bắt đầu, hãy truy cập SeedProd » Landing Pages và nhấp vào 'Add New Landing Page.'


Trên màn hình tiếp theo, bạn sẽ được yêu cầu chọn một mẫu.

SeedProd đi kèm với hơn 180 mẫu đẹp mắt được sắp xếp thành các danh mục khác nhau, chẳng hạn như mẫu trang 404 và trang 'cảm ơn' tùy chỉnh của WooCommerce.

Đối với hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo trang bán hàng có văn bản động và lối vào hoạt hình, nhưng các bước sẽ giống nhau cho dù bạn tạo loại trang nào.

Chỉ cần nhấp vào bất kỳ tab nào để xem các mẫu khác nhau trong danh mục đó.


Khi bạn tìm thấy một mẫu bạn muốn sử dụng, chỉ cần di chuột qua mẫu đó rồi nhấp vào biểu tượng dấu kiểm.

Chúng tôi đang sử dụng mẫu 'Trang bán hàng Zen' trong tất cả các hình ảnh của mình, nhưng bạn có thể sử dụng bất kỳ mẫu nào.


Tiếp theo, bạn cần đặt tiêu đề cho trang.

SeedProd sẽ tự động tạo một URL dựa trên tiêu đề trang, nhưng bạn có thể thay đổi URL này thành bất kỳ thứ gì bạn muốn. Ví dụ: việc thêm các từ khóa có liên quan vào một URL thường có thể cải thiện SEO WordPress của bạn và giúp trang xuất hiện trong các kết quả tìm kiếm có liên quan.

Để tìm hiểu thêm, vui lòng xem hướng dẫn của chúng tôi về cách thực hiện nghiên cứu từ khóa cho blog WordPress của bạn.

Khi bạn hài lòng với tiêu đề và URL, hãy nhấp vào 'Lưu và Bắt đầu Chỉnh sửa Trang.'


Thao tác này sẽ tải trình chỉnh sửa trang kéo và thả SeedProd.

Ở bên phải, bạn sẽ thấy bản xem trước trực tiếp của thiết kế trang, với một số cài đặt ở bên trái.


SeedProd đi kèm với rất nhiều khối mà bạn có thể thêm vào thiết kế của mình, bao gồm các khối cho phép bạn thêm các nút chia sẻ xã hội, video, biểu mẫu liên hệ, v.v.

Để biết thêm thông tin, vui lòng xem hướng dẫn của chúng tôi về cách tạo trang tùy chỉnh trong WordPress.

2.3. Cách thêm văn bản động vào WordPress

Để thêm một số văn bản động vào trang, hãy tìm khối Tiêu đề động và kéo nó vào thiết kế trang của bạn.


Có hai cách để làm sinh động tiêu đề của bạn. Đầu tiên, kiểu 'Đánh dấu' thêm hoạt hình hình dạng vào văn bản của bạn, chẳng hạn như hình tròn hoặc hình zigzag được gạch dưới.

Bạn có thể sử dụng hoạt ảnh này để thu hút sự chú ý đến một từ hoặc cụm từ cụ thể bên trong dòng tiêu đề. Điều này có thể làm cho tiêu đề của bạn dễ đọc và dễ hiểu hơn bằng cách làm nổi bật nội dung quan trọng nhất. Đó cũng là một cách tuyệt vời để thu hút sự chú ý đến lời kêu gọi hành động.


Kiểu Nổi bật cũng có một vài hình dạng gạch ngang.

Bạn có thể sử dụng gạch ngang để tạo các hiệu ứng thú vị và bắt mắt, hoặc đơn giản là nó có thể thêm chút thú vị cho thiết kế của bạn.


Để tạo hoạt ảnh được tô sáng, chỉ cần mở trình đơn thả xuống 'Kiểu' và chọn 'Được tô sáng'.

Tiếp theo, mở trình đơn thả xuống 'Hình dạng' và chọn một hình dạng. Khi bạn bấm vào một hình dạng, SeedProd sẽ hiển thị bản xem trước của hoạt ảnh đó, vì vậy bạn có thể thử các hình dạng khác nhau để xem mình thích hình nào nhất.


SeedProd cũng có kiểu hoạt hình 'Xoay', bổ sung hiệu ứng chuyển tiếp cho văn bản.

Thông thường, văn bản động là thứ đầu tiên khách truy cập nhìn vào khi tải trang, vì vậy đây là cách tuyệt vời để làm nổi bật phần văn bản quan trọng nhất.

Để tạo hoạt ảnh chuyển tiếp, chỉ cần mở menu thả xuống 'Kiểu' và nhấp vào 'Xoay'.

Sau đó, bạn có thể mở menu thả xuống 'Hoạt ảnh' và chọn loại chuyển tiếp bạn muốn sử dụng, chẳng hạn như làm mờ dần, thu phóng hoặc cuộn. Một lần nữa, SeedProd sẽ phát hoạt hình bên trong trình chỉnh sửa trang để bạn có thể thử các hiệu ứng khác nhau để xem bạn thích cái nào hơn.


Bất kể bạn đang tạo hoạt ảnh 'Đánh dấu' hay 'Xoay', bạn có thể thêm văn bản vào trước và sau văn bản hoạt hình.

Chỉ cần nhập vào các trường 'Trước dòng tiêu đề' và 'Sau dòng tiêu đề'. Trong trường 'Văn bản', hãy thêm từ hoặc cụm từ mà bạn muốn tạo hiệu ứng động.

Nếu bạn muốn tạo hiệu ứng động cho toàn bộ dòng tiêu đề, thì chỉ cần để trống các trường 'Trước dòng tiêu đề' và 'Sau dòng tiêu đề'.


Theo mặc định, SeedProd sẽ phát hoạt hình trên một vòng lặp, điều mà một số khách truy cập có thể thấy khó chịu.

Để chỉ phát hoạt ảnh một lần, hãy nhấp để tắt khóa chuyển 'Vòng lặp vô hạn'.


Theo mặc định, hoạt ảnh sẽ phát trong 1200 mili giây sau độ trễ 8000 mili giây.

Để sử dụng các giá trị khác nhau, hãy nhập vào trường 'Thời lượng' và 'Trễ'. Ví dụ: bạn có thể làm cho hoạt ảnh nhanh hơn bằng cách sử dụng thời lượng ngắn hơn.


Bạn cũng có thể muốn tạo kiểu cho văn bản. Ví dụ: bạn có thể thay đổi kích thước phông chữ và căn chỉnh.

Khi bạn hài lòng với giao diện của dòng tiêu đề động, hãy tiếp tục và nhấp vào nút 'Lưu' để lưu các thay đổi của bạn.


2.4. Thêm hoạt ảnh lối vào trong WordPress

Hoạt hình lối vào phát khi trang tải lần đầu tiên, vì vậy chúng là một cách tuyệt vời để thu hút sự chú ý của khách truy cập.

Bạn cũng có thể sử dụng chúng để làm nổi bật nội dung mà khách truy cập nên xem đầu tiên. Ví dụ: nếu bạn có thị trường trực tuyến thì bạn có thể tạo hoạt ảnh cho hình ảnh nổi bật của sản phẩm hoặc biểu ngữ quảng cáo đợt giảm giá Thứ Sáu Đen của bạn.

Bên trong trình chỉnh sửa SeedProd, chỉ cần nhấp vào nội dung bạn muốn tạo hoạt ảnh, sau đó chọn tab 'Nâng cao' trong menu bên trái.


Sau đó, bạn có thể tiếp tục và nhấp để mở rộng phần 'Hiệu ứng hoạt hình'.

Sau đó, chỉ cần chọn một hoạt ảnh từ menu thả xuống 'Hoạt ảnh đầu vào'.


Giờ đây, bạn có thể thêm hoạt ảnh lối vào vào bất kỳ khối, phần hoặc cột nào chỉ bằng cách thực hiện theo quy trình tương tự được mô tả ở trên.

2.5. Xuất bản hoạt ảnh CSS của bạn trong WordPress

Khi bạn hài lòng với cách thiết lập trang, hãy nhấp vào menu thả xuống trên nút 'Lưu' và chọn 'Xuất bản'.


Giờ đây, bạn có thể truy cập trang này để xem hoạt ảnh CSS trực tiếp.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm hoạt ảnh CSS trong WordPress. Bạn cũng có thể xem qua hướng dẫn cuối cùng của chúng tôi để tăng tốc độ và hiệu suất hoặc xem danh sách các lỗi WordPress phổ biến nhất của chúng tôi và cách khắc phục chúng.