Để giữ chân khách truy cập trang web, bạn nên cung cấp nội dung đáp ứng mong đợi của họ. Tuy nhiên, ngay cả khi trang web của bạn cung cấp thông tin phù hợp, bạn vẫn cần hướng người đọc đến các tài nguyên khác khi cần thiết. Về mặt đó, bạn nên làm nổi bật các yếu tố quan trọng nhất của trang web của mình để khách truy cập biết nơi tiếp theo và phải làm gì khi họ đến đó.
Thêm hiệu ứng di chuột qua CSS là một cách để phân biệt các yếu tố quan trọng của trang web và hợp lý hóa trải nghiệm người dùng. Nhờ có nhiều hiệu ứng di chuột được tạo sẵn, việc thêm một hiệu ứng vào trang web của bạn có thể là một quá trình đơn giản.
Trước tiên, hãy hiểu các hiệu ứng di chuột qua CSS là gì và khi nào chúng thích hợp để sử dụng.
Hiệu ứng di chuột làm nổi bật các yếu tố quan trọng của trang web
Tóm lại, Cascading Style Sheets (CSS) là các đoạn mã cho các trình duyệt web biết cách hiển thị nội dung của một trang web. Hiệu ứng di chuột làm hoạt hình các phần tử trang web được chỉ định, chẳng hạn như liên kết hoặc nút, bất cứ khi nào khách truy cập di chuột qua chúng. Để tạo hiệu ứng di chuột, hãy áp dụng mã CSS cho phần tử mà bạn muốn đánh dấu.
Một trường hợp sử dụng hiệu ứng di chuột phổ biến là khi bạn đặt chuột lên một dòng văn bản và nền của nó sẽ thay đổi màu sắc. Hiệu ứng di chuột có thể được sử dụng để đánh dấu một hành động cụ thể, chẳng hạn như nút “Đừng bỏ lỡ” trên trang chủ eBay hoặc để phân biệt nhãn menu mà bạn có thể thấy trên trang web Village Voice . Tương tự như trang chủ Angry Birds , nhiều trang kết hợp hiệu ứng di chuột qua tiêu đề và nút để tăng mức độ tương tác của khách truy cập.
Hướng dẫn khách truy cập và quảng cáo CTA của bạn
Hiệu ứng di chuột sẽ hiệu quả hơn khi áp dụng một cách ít vào các yếu tố mà bạn muốn khách truy cập nhấp vào.
Một trong những cách phổ biến nhất để sử dụng hiệu ứng này là kết hợp nó với lời kêu gọi hành động (CTA). Theo blog CreativeMMS , CTA là những tuyên bố chỉ đạo tạo điều kiện thuận lợi cho hành trình của khách hàng hoặc khách hàng tiềm năng của bạn bằng cách cho họ biết phải làm gì tiếp theo.
Bằng cách áp dụng hiệu ứng di chuột, bạn có thể hướng dẫn khách truy cập và tăng khả năng họ thực hiện CTA của bạn.
Bắt đầu với các hiệu ứng di chuột qua CSS
Nếu bạn có gói WordPress.com Premium hoặc Business , bạn có thể thêm CSS tùy chỉnh vào trang web của mình. Đây là cách thêm hiệu ứng di chuột.
1. Tìm hiệu ứng di chuột mà bạn muốn sử dụng
CodePen là một kho lưu trữ trực tuyến các kiểu CSS và hoạt ảnh miễn phí mà bạn có thể duyệt qua để tìm hiệu ứng di chuột mà bạn thích. Ngoài ra, bạn cũng có thể thực hiện tìm kiếm trên Google để tìm các tài nguyên CSS khác. Tuy nhiên, nếu bạn định sử dụng các hiệu ứng CSS từ web, hãy tìm những hiệu ứng chỉ sử dụng HTML và CSS. Tránh JavaScript, vì nó thêm một lớp phức tạp (và không được phép trên WordPress.com, trừ khi bạn có gói hỗ trợ plugin).
2. Thêm HTML vào nội dung của bạn
Khi bạn chọn một hiệu ứng di chuột CSS thích hợp, hãy thêm HTML của nó vào bài đăng hoặc trang của bạn. Bạn có thể làm điều này bằng cách chuyển sang trình soạn thảo HTML .
Thêm HTML vào vị trí thích hợp và lưu trang.
3. Thêm CSS vào Customizer của bạn
Bước tiếp theo là thêm CSS, CSS sẽ áp dụng hiệu ứng di chuột khi xuất hiện. Để truy cập tính năng CSS tùy chỉnh, hãy nhấp vào mục menu Tùy chỉnh để mở Công cụ tùy chỉnh , sau đó chọn CSS .
Tiếp theo, sao chép CSS từ ví dụ về hiệu ứng di chuột mà bạn đã chọn và dán nó vào trình chỉnh sửa CSS. Nhấn nút Xuất bản để lưu các thay đổi và hiệu ứng di chuột qua CSS của bạn sẽ hoạt động trên phần tử HTML mà bạn đã thêm trước đó.
Làm việc với mã tùy chỉnh lúc đầu có thể đáng sợ, nhưng khi bạn hiểu những điều cơ bản, bạn có thể làm nổi bật những gì bạn muốn khách truy cập làm trong khi cung cấp trải nghiệm người dùng hấp dẫn hơn .
