Làm thế nào để làm cho trang web của bạn thu hút khách truy cập? Câu hỏi này khiến hầu hết các chủ sở hữu tài nguyên Internet lo lắng: thương gia, người viết blog, chủ các doanh nghiệp lớn và nhỏ, khách du lịch và những người đơn giản là sáng tạo, những người có điều gì đó muốn nói với thế giới.
Tại sao một trang web phải đẹp và hoạt động tốt?
Số lượt truy cập phụ thuộc vào chủ đề của trang web và đối tượng mục tiêu của nó, sự quan tâm của mọi người đối với một sản phẩm cụ thể, đầu tư, quảng cáo, nội dung và nhiều yếu tố khác. Nhưng không thể phủ nhận rằng trang này được “quần áo chào hàng”. Đây là trang đầu tiên và trang chính của tài nguyên là bộ mặt của nó, thẻ gọi điện thoại, qua đó khách truy cập phải hiểu liệu họ có muốn dành thời gian để xem thêm nội dung hay không.
Và không có chỗ cho sai sót! Theo nghiên cứu của một trong những trường đại học kỹ thuật ở Hoa Kỳ, người truy cập có ấn tượng đầu tiên về trang web trong vòng chưa đầy một giây. Trung bình, một người “quét” một trang web trong 3 giây. Tốc độ cực nhanh, đúng không ?!
Lên đến 70% thành công của tài nguyên phụ thuộc vào giao diện của trang chính. Điều đầu tiên mọi người chú ý làlogo, nhưng thứ hai là điều hướng. Và nếu mọi thứ rõ ràng hơn hoặc ít hơn với biểu trưng, thì bạn nên tìm hiểu kỹ về điều hướng, menu và sự tiện lợi về công thái học của trang web. Một câu hỏi hợp lý được đặt ra: "Làm thế nào để trang trí trang web của bạn, làm cho nó đầy đủ chức năng và tiện lợi nhất có thể, nhưng đồng thời phải đẹp mắt?" Có rất nhiều ý tưởng khác thường được đưa ra, nhưng một trong những ý tưởng thú vị nhất là các chú giải công cụ.
Chú giải công cụ là gì? Ngoài việc là một cơ chế tuyệt vời để cải thiện chức năng của trang web, chú giải công cụ còn là một công cụ cho phép người dùng xem giải thích cho một hình ảnh cụ thể khi di chuột qua một biểu tượng, từ hoặc hình ảnh.
Công cụ để làm việc với chú giải công cụ
Bootstrap là công cụ tốt nhất để tạo chú giải công cụ. Đây là một bộ mẫu dễ học để xây dựng ứng dụng và trang web được viết bằng HTML, CSS, Sass và JavaScript.
Nói một cách cụ thể, chú giải công cụ sử dụng một trong các yếu tố đồ họa của mẫu Bootstrap - Chú giải công cụ.
Khung Bootstrap được tạo cho "Twitter" và ban đầu được gọi là "Twitter Blueprint". Sau một số thay đổi vào năm 2012, nó đã nhận được lưới 12 cột, trở nên thích nghi và có tên quen thuộc - Chú giải công cụ. Chú giải công cụ là một phần tử bật lên khi bạn di chuột qua một phần tử cụ thể trên màn hình điều khiển.
Tạo gợi ý
Bạn có thể tạo Chú giải công cụ Bootstrap bằng cách sử dụng các thuộc tínhdữ liệu, cũng như bằng cách kích hoạt các phần tử "Java Script". Có hai cách chính để tạo Chú giải công cụ HTML Bootstrap. Bản chất của cách đầu tiên là áp dụng thuộc tính và tiêu đề thuộc tính (title), sẽ chứa văn bản gợi ý. Chú giải công cụ sẽ bật lên ở trên cùng (cài đặt mặc định). Cần nhớ rằng chú giải công cụ cần phải được khởi tạo, vì tính năng khởi tạo tự động đã không được chấp nhận trong "Twitter bootstrap" vì lý do hiệu suất.
Để khởi tạo chú giải công cụ, JavaScript đặc biệt được sử dụng, trong đó phương thức chú giải công cụ được khôi phục cho tất cả các phần tử có thuộc tính. Bản chất của phương pháp thứ hai là kích hoạt chú giải công cụ bằng mã "JavaScript" với sự tham gia của thư viện jQuery bằng cách viết một lớp công cụ bao gồm chú giải công cụ. Phương pháp tương tự như phương pháp đầu tiên, ngoại trừ phương pháp lựa chọn phần tử. Bạn có thể bật gợi ý trong "Java Script" theo cách được hiển thị bên dưới.
Ví dụ về chú giải công cụ Bootstrap
Có bốn tùy chọn chính để định vị chú giải công cụ: ở các cạnh trái và phải, trên và dưới phần tử.
Gợi ý từ trên
Gợi ý ngay
Gợi ý ở phía dưới
Gợi ý còn lại
Sử dụng chú giải công cụ
Có nhiều cách sử dụng cho Bootstrap Tooltip. Bạn có thể chèn chú giải công cụ để người dùng có thể hiểu bản dịch văn bản từ tiếng nước ngoài trong văn bản. Chú giải công cụ cũng có thể được sử dụng như một công cụ giúp người dùng hiểu ý nghĩa của các nút trên bảng điều khiển khi di chuột qua chúng. Các mẫu Bootstrap Tooltip thường được sử dụng trên các trang web của các tổ chức khác nhau để tạo đăng ký nhận tin tức của công ty. Điều này giúp khách hàng luôn cập nhật và cũng cho phép khách truy cập nhận được thông tin mới, chẳng hạn như mức chiết khấu, ưu đãi, các thay đổi trong công ty.
Hãy xem xét một ví dụ trong đó người dùng cần nhập địa chỉ email của họ để đăng ký nhận bản tin. Nhiệm vụ đảm bảo rằng đối tượng khách hàng đăng ký nhận tin tức dễ dàng đạt được nhất bằng cách sử dụng HTML5 và thuộc tính bắt buộc. Gợi ý chú giải công cụ trong trường hợp này là cần thiết để người dùng hiểu chuỗi hành động. Ví dụ, sau khi nhập địa chỉ email, tôi đánh dấu vào ô: "Tôi đồng ý nhận tin tức của công ty đến địa chỉ email của tôi." Dưới đây là ví dụ về mã biểu mẫu.
Cài đặt mã này vào Chú giải công cụ HTML Bootstrap thật dễ dàng. Nhưng lợi ích là đáng kể. Bây giờ người tiêu dùng biết tất cả các tin tức của công ty. Đây là một loại quảng cáo miễn phí.
Những lỗi chính khi tạo cửa sổ bật lêngợi ý
Phải làm gì nếu Bootstrap Tooltip không hoạt động? Sai lầm đầu tiên và chính mà thuộc tính chú giải công cụ sẽ không hoạt động là nếu chú giải công cụ không được bật. Để kích hoạt nó, bạn cần sử dụng một mã đặc biệt.
Phương pháp này cho phép bạn khởi tạo hoàn toàn tất cả các chú giải công cụ trên một trang web.
Lỗi phổ biến thứ hai là không có jQuery trong tiêu đề.
Có một điều kiện cần thiết để liên kết hoạt động chính xác - một chức năng xử lý dữ liệu như "Java Script" phải được chỉ định.
Thuộc tính chú giải công cụ
Về cốt lõi, thành phần Chú giải công cụ được thiết kế để hiển thị chú giải công cụ khi bạn di chuyển con trỏ chuột qua một hoặc một phần khác của trang. Tuy nhiên, ngoài vị trí của chú giải công cụ ở bên phải, bên trái và trên cùng với sự trợ giúp, chú giải công cụ có các thuộc tính sau:
- Đang hoạt động. Sử dụng thuộc tính true trong Bootstrap Tooltip cho phép hiển thị các chú giải công cụ, trong khi việc đặt cùng một thuộc tính thành false nghĩa là không thể hiển thị chú giải công cụ nào.
- AutoPopDelay là thời gian các mẹo được hiển thị.
- AutoPopDelay. Đại diện cho khoảng thời gian con trỏ chuột phải di chuột qua một phần tử để chú giải công cụ xuất hiện.
- IsBaloon. Nếu giá trị của chú giải công cụ HTML Bootstrap Tooltip là true, chú giải công cụ sẽ thay đổi thành đám mây.
- ToolTipIcon. Đại diện cho ký tự được hiển thị trong cửa sổgợi ý.
Tooltipster
Để tạo ra các chú giải công cụ đẹp, ví dụ như trên một trang web được tạo trên Wordpress, không nhất thiết phải biết ngôn ngữ của các nhà phát triển web một cách tường tận. Chỉ cần biết về sự tồn tại của một plugin (tiện ích mở rộng) như Tooltipster là đủ. Từ cái tên, rõ ràng là plugin này dựa trên Tooltip và giống với nó một cách đáng ngạc nhiên về các thuộc tính và mục đích của nó. Plugin này để làm gì? Nó cho phép bạn tạo đánh dấu HTML cần thiết bên trong chú giải công cụ.
Công việc của plugin dựa trên việc chèn các phím tắt trên trang. Chứa tất cả các thuộc tính HTML Bootstrap Tooltip cơ bản: nội dung (data-tooltip-content), tiêu đề, vị trí, trình kích hoạt, v.v. Điều này cho phép bạn thay đổi chủ đề, phông chữ, kích thước chú giải công cụ, màu sắc, chèn hình ảnh, v.v.
