Người ta thường nói "Nội dung là vua", nhưng "Hình thức là hoàng hậu". Và điều đó chưa bao giờ đúng hơn trong bối cảnh web hiện nay. Thiết kế thu hút giúp chủ web thu hút sự chú ý ngay lập tức của người truy cập. Bên cạnh bố cục suy nghĩ kỹ lưỡng, sự kết hợp màu hài hòa và font đẹp, một cách để chủ web thu hút sự chú ý tức thì của người truy cập là sử dụng văn bản chuyển động, giống như máy gõ chữ. Nếu bạn dùng WordPress, bạn có thể dễ dàng đạt được hiệu ứng này bằng plugin Typed Js.
Lưu ý: vì hiệu ứng là văn bản chuyển động, khó mô tả "độ cool" bằng lời hay hình ảnh tĩnh, tôi quyết định dùng nó trong dự án web cá nhân, bạn có thể xem kết quả ở đó.
Cài Đặt và Thiết Lập Plugin
Cài đặt plugin trong WordPress rất dễ dàng, đặc biệt với những ai đã từng "đập đập" nền tảng này. Chỉ cần đăng nhập khu vực admin, dùng menu "Plugins → Add New" từ thanh bên trái. Tìm kiếm "Typed Js" từ kho plugin, sau đó cài đặt và kích hoạt.
Bây giờ bạn đã sẵn sàng thêm hiệu ứng Typed Js mới. Quy trình tương tự như thêm bài viết mới. Đầu tiên, vào menu "Typed → Add New" từ thanh bên trái, đặt tên cho hiệu ứng Typed mới.
Quan trọng! Chú ý "Generated Shortcode" (Mã ngắn được tạo). Đó là chuỗi giữa "ngoặc vuông [ ]". Sao chép toàn bộ bao gồm cả ngoặc, và chèn shortcode vào bất cứ đâu bạn muốn hiển thị. Mỗi bộ chuỗi khác nhau sẽ có shortcode khác nhau.
Từ phần "Typed Options" bạn có thể thêm các chuỗi từ/cụm từ/câu muốn hiển thị theo thứ tự bạn thích. Dùng nút "Plus (+)" để thêm chuỗi mới và "Minus (-)" để xóa mục.
Dưới các chuỗi là các cài đặt điều chỉnh giao diện hiệu ứng. Bạn có thể tùy chỉnh Tốc độ gõ (Typing Speed), Độ trễ bắt đầu (Start Delay), Tốc độ xóa (Back Speed), Độ trễ xóa (Back Delay). Tất cả số liệu tính bằng mili-giây. Bạn cũng có thể đặt chuỗi lặp lại, hiển thị con trỏ, chọn ký tự làm con trỏ, và làm nó nhấp nháy.
Một điều khác bạn có thể điều chỉnh là hiển thị, như font và màu sắc.
Sau khi xong tất cả cài đặt, nhấn "Publish" hoặc "Update".
Sử Dụng Hiệu Ứng Trong WordPress
Như đã nói, để dùng hiệu ứng Typed bạn cần sao chép shortcode và dán vào vị trí muốn hiển thị. Đối với trang web của tôi, tôi dùng nó trên trang đích (landing page) tạo bằng SiteOrigin Page Builder.
Đầu tiên, tôi tạo trang mới qua "Pages → Add New". Sau đó chuyển sang tab "Page Builder", thêm "Row" mới, đặt một cột, và thêm widget "SiteOrigin Hero" vào hàng.
Tôi mở khung và chỉnh sửa nội dung giống như bài viết WordPress bình thường. Chèn shortcode đã tạo ở bước trước.
Để hoàn thiện thiết kế, tôi thêm và tùy chỉnh "nút bấm" liên kết đến trang "Contact Me" đã thiết lập trước đó để khách truy cập cần dịch vụ có thể liên hệ.
Đây là kết quả cuối cùng. Nếu muốn xem hiệu ứng hoạt động thực tế, bạn có thể truy cập trang web của tôi.
Bạn có thể tạo bao nhiêu mục Typed Js tùy ý, sau đó sao chép dán shortcode và chèn hiệu ứng vào bất cứ đâu trong bài viết hoặc trang. Mặc dù rất cool, bạn không thể dùng hiệu ứng trong tiêu đề. Tôi đã thử.
Bạn nghĩ sao về hiệu ứng Typed Js? Bạn thấy mình dùng nó cho trang WordPress không? Chia sẻ suy nghĩ và ý kiến trong phần bình luận bên dưới.