Bạn có muốn thêm hình ảnh tương tác trên WordPress của mình không? Việc tạo ra một website không chỉ cần đẹp mắt, mà còn phải tương tác và thu hút người dùng. Đặc biệt với WordPress, việc tận dụng các hình ảnh tương tác đã trở nên không thể thiếu. Để hiểu rõ hơn, hãy cùng Vietnix khám phá cách tạo hình ảnh tương tác trên WordPress sau đây.
Hình ảnh tương tác là gì?
Trái với hình ảnh tĩnh truyền thống, hình ảnh tương tác cho phép người dùng tương tác trực tiếp, tham gia vào hoạt động và nhận phản hồi ngay lập tức trên hình ảnh đó.
Trái với hình ảnh tĩnh truyền thống, hình ảnh tương tác cho phép người dùng tương tác trực tiếp, tham gia vào hoạt động và nhận phản hồi ngay lập tức trên hình ảnh đó. Điều này không chỉ tạo ra trải nghiệm sâu sắc hơn cho người dùng, mà còn giúp tăng cường hiệu suất tiếp thị và khả năng gắn kết với khách hàng. Đối với thương hiệu và doanh nghiệp, việc hiểu rõ và áp dụng hình ảnh tương tác có thể mở ra cơ hội mới, nâng cao sự hiện diện trực tuyến và tối ưu hóa sự tương tác của khách hàng với nội dung.
Ngoài những thông tin trên, bạn cũng có thể tham khảo:
Chương trình khuyến mãi Mua Hosting Rinh Tên Miền
Tạo hình ảnh tương tác trên WordPress
Đầu tiên cần cài đặt và kích hoạt plugin Draw Attention. Sau khi kích hoạt, truy cập Draw Attention > Edit Image trong WordPress dashboard. Thao tác này sẽ đưa bạn đến màn hình nơi có thể tạo các tương tác khác nhau rồi thêm vào hình ảnh dưới dạng các vùng có thể nhấp vào.
Để bắt đầu, bạn hãy nhập tiêu đề cho hình ảnh tương tác.
Sau khi nhập tiêu đề, cuộn đến phần ‘Image‘ và chọn hình ảnh muốn sử dụng, bạn có thể chọn hình ảnh từ media library hoặc tải lên hình ảnh mới.
Sau khi chọn hình ảnh, bạn có thể thêm màu sắc, url, tạo vùng có thể chọn và hơn thế nữa bằng cách cuộn xuống phần ‘Hotspot Areas‘. Plugin sẽ tạo Khu vực có thể nhấp theo mặc định, vì vậy hãy nhấp để mở rộng phần này.
Tiếp theo, cần đánh dấu khu vực mà bạn muốn tạo sự tương tác. Draw Attention có một số hình dạng khác nhau để có thể sử dụng để làm nổi bật, vì vậy chỉ cần nhấp vào hình dạng mà muốn sử dụng.
Draw Attention bây giờ sẽ hiển thị một số cài đặt mới cho khu vực có thể nhấp vào và nhập tên cho ‘Title‘.
Tiêu để này sau khi được nhập sẽ xuất hiện khi người dùng hover vô hình ảnh, Trong ảnh sau đây, Vietnix đã sử dụng ‘Countdown Timer‘ cho hotspot và tiêu đề.
Sau khi hoàn tất, mở menu ‘Action‘ và chọn ‘what will happen‘ khi khách truy cập nhấp vào khu vực này. Draw Attention có thể mở link mới hoặc hiển thị ‘more info‘ và bạn sẽ thấy các cài đặt khác.
Ví dụ: nếu chọn ‘Go to URL‘ thì sẽ cần thêm link và chỉ định liệu link đó có mở trong tab mới hay không.
Nếu chọn ‘Show More Info‘ thì sẽ cần nhập thông tin sẽ xuất hiện khi khách truy cập nhấp vào hotspot. Bạn cũng có thể thêm hình ảnh hoặc URL, sẽ được bao gồm trong box thông tin.
Trong hình ảnh sau đây, Vietnix đã thêm một số văn bản vào box thông tin.
Khi đã hoàn tất với những thiết lập, nhấp vào ‘Add Another Area‘. Bây giờ có thể định cấu hình vùng có thể nhấp theo quy trình tương tự được mô tả ở trên.
Chỉ cần lặp lại các bước này để thêm tất cả các vùng có thể nhấp vào hình ảnh. Khi đã xong, có thể tùy chỉnh giao diện lại cho thông tin.
Cũng có thể thay đổi độ mờ của vùng đánh dấu và độ rộng đường viền, thêm đường viền , v.v. bằng cách sử dụng cài đặt trong phần ‘Highlight styling‘. Sau đó, cuộn đến ‘More Info Box Styling‘ và tinh chỉnh giao diện của box.
Draw Attention cũng đi kèm với các theme khác nhau mà bạn có thể áp dụng cho hình ảnh tương tác. Để xem các theme này, chỉ cần cuộn phần ‘Apply Color Scheme‘ và mở menu.
Khi bạn thử các tùy chọn khác nhau, có thể xem trước giao diện trên website WordPress của mình bằng cách nhấp vào ‘Preview Changes‘.
Khi đã hoàn tất cài đặt, nhấn ‘Update‘ để lưu các thay đổi.Bây giờ, có thể thêm hình ảnh tương tác vào bất kỳ trang, bài đăng hoặc khu vực nào sẵn sàng cho tiện ích bằng cách sử dụng shortcode trong block ‘Copy Shortcode’.
Ngoài những nội dung trên, bạn cũng có thể tham khảo thêm:
Import và Export hình ảnh tương tác
Đầu tiên, truy cập Draw Attention > Import / Export và chọn checkbox bên cạnh hình ảnh bạn muốn export.
Sau đó, nhấp vào ‘Genarate Export Code‘. Sau đó Draw Attention sẽ tạo cho bạn đoạn code ngắn. Trong một tab khác, đăng nhập vào blog hoặc website WordPress khác và truy cập TDraw Attention > Import / Export. Tại đây, sao chép code vừa export vào ‘Import‘ và nhấp vào ‘Import‘.
Đối với những ai đang muốn tối ưu hóa website, WordPress Hosting của Vietnix chính là giải pháp lý tưởng. Thiết kế độc đáo và chuyên nghiệp, dịch vụ này đảm bảo hiệu suất cao và độ ổn định tuyệt vời, đồng thời cung cấp các tùy chọn tùy biến đa dạng, phù hợp với mọi nhu cầu kỹ thuật và chuyên môn cần thiết cho website WordPress. Chẳng hạn như:
- Tận hưởng tốc độ tải trang cực nhanh dưới 1 giây nhờ dùng ổ cứng NVMe và công nghệ LiteSpeed Enterprise.
- Hỗ trợ chuyên sâu và tư vấn tối ưu hóa tốc độ website từ các chuyên gia WordPress, sẵn sàng hỗ trợ 24/7.
- An ninh dữ liệu được đảm bảo tối đa với hệ thống sao lưu tự động 4 lần mỗi ngày, cho phép khôi phục dữ liệu nhanh chóng theo yêu cầu.
- Sự ổn định vượt trội của website được bảo đảm nhờ hạ tầng hiện đại và công nghệ Firewall anti DDoS toàn diện do chính Vietnix phát triển.
- Tạo website WordPress dễ dàng chỉ với một cú click chuột, nhờ công cụ WordPress Toolkit tích hợp sẵn.
- Nhận ngay bộ sưu tập theme và plugin WordPress bản quyền, bao gồm WP Rocket, Rank Math SEO Pro, Elementor Pro, WP Astra Growth Bundle, Divi, và nhiều hơn nữa.
1 Core1GB RAM1 GB NVME1 DomainBackup tự động 4 lần/ngày1 - 5.000 Traffic/tháng
Tặng theme & plugin trị giá 60.000.000 VND- Plugin: WP Rocket
- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: WP Astra Growth Bundle
- Theme + plugin: MyThemeShop
- Theme: Bricks
Bán chạy nhất3 Core6GB RAM10 GB NVME2 DomainBackup tự động 4 lần/ngày5.000 - 15.000 Traffic/tháng
Tặng theme & plugin trị giá 60.000.000 VND- Plugin: WP Rocket
- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: WP Astra Growth Bundle
- Theme + plugin: MyThemeShop
- Theme: Bricks
8 Core12GB RAM25 GB NVME4 DomainBackup tự động 4 lần/ngày15.000 - 100.000 Traffic/tháng
Tặng theme & plugin trị giá 60.000.000 VND- Plugin: WP Rocket
- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: WP Astra Growth Bundle
- Theme + plugin: MyThemeShop
- Theme: Bricks
Liên hệ với Vietnix để được tư vấn chi tiết về dịch vụ:
- Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
- Hotline: 1800 1093.
- Email: sales@vietnix.com.vn.
Lời kết
Vietnix hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo hình ảnh tương tác trên WordPress. Ngoài nội dung bài viết này, bạn cũng có thể tham khảo thêm các bài viết khác như featured image là gì? Cài đặt Featured Image chuẩn SEO chi tiết mới nhất hoặc hướng dẫn chụp ảnh màn hình các bài đăng blog đơn giản tại Vietnix.vn để biết thêm nhiều thông tin hữu ích cho website, chúc bạn thành công!
