Thêm Hiệu Ứng Chuyển Động Đẹp Cho Block Gutenberg Trong WordPress | Thiết Kế Web 39

Khi viết bài, ngoài việc tạo ra nội dung hấp dẫn để níu giữ người đọc thì cách trình bày rõ ràng và thêm chút hiệu ứng vào bài viết chắc chắn sẽ làm cho bài viết đỡ nhàm chán hơn. Và nó sẽ ít nhiều tác động đến việc tối ưu SEO bài viết của bạn.

Nếu bạn cũng hiểu được điều đó và đang tìm cách để thêm hiệu ứng chuyển động cho các block Gutenberg sao cho thật dễ dàng thì bài viết này dành cho bạn.

Bài viết này mình sẽ hướng dẫn cho bạn cách thêm hiệu ứng chuyển động đẹp mà chỉ có trình soạn thảo Gutenberg mới có thể làm được dễ dàng. Đó là nhờ sự trợ giúp của plugin Blocks Animation để thêm các hiệu ứng chuyển động CSS3 vào từng block riêng lẻ trong bài viết.

Hướng dẫn tạo chuyển động CSS3 Animation cho bài viết

Lưu ý: Cách này chỉ áp dụng cho WordPress phiên bản 5.0 trở lên, sử dụng trình soạn thảo Gutenberg. Với những web đang cài plugin Classic Editor sẽ không áp dụng được.

Bước 1: Cài đặt plugin Blocks Animation vào web.

Bước 2: Tạo bài viết mới hoặc chỉnh sửa bài viết cũ mà bạn muốn thêm hiệu ứng chuyển động.

Bước 3: Soạn thảo nội dung ở dạng block (nếu bài viết cũ không ở dạng block thì bạn cần chuyển sang block). Tham khảo cách viết bài trong WordPress phiên bản mới.

Sau đó, chọn vào block muốn thêm hiệu ứng và nhìn sang bên sidebar cài đặt bên phải sẽ thấy mục Animations như sau:

them-hieu-ung-chuyen-dong-dep-cho-bai-viet

Trong đó:

  • Animation: Bạn lựa chọn 1 trong số 77+ hiệu ứng chuyển động từ CSS3
  • Delay: Thiết lập độ trễ để kích hoạt hiệu ứng chuyển động.
  • Speed: Thiết lập tốc độ chạy hiệu ứng sao cho phù hợp.

Video hướng dẫn thêm hiệu ứng chuyển động vào bài viết

Đề xuất: Hướng dẫn viết bài chuẩn SEO muốn lên top Google cần phải biết

Lời kết

Vậy là xong rồi đó. Rất nhanh chóng và đơn giản đúng không nào. Chỉ với 1 plugin nhỏ gọn nó sẽ giúp bài viết của bạn trở lên hấp dẫn hơn rất nhiều.

Với thủ thuật này bạn có thể áp dụng vào blog để có những hiệu ứng bắt mắt hơn. Hoặc bạn có thể áp dụng cho các trang bán hàng WordPress. Khi mà bạn thêm hiệu ứng hoạt cảnh này vào các nút Call to action thì mình nghĩ tỉ lệ chuyển đổi đơn hàng sẽ cao hơn đó.

Tuy nhiên đừng quá lạm dụng nhiều hiệu ứng trong 1 bài viết kẻo nó lại làm rối mắt người đọc nhé.

Nếu thấy bài viết hữu ích hãy cho mình 1 like và share để mình có thêm động lực viết các bài chia sẻ tiếp theo nhé. Cảm ơn bạn!

Bài viết tham khảo của bác Nguyenhung.net

Leave a Reply

Your email address will not be published. Required fields are marked *