Nút gọi điện thoại (Call Now) là một trong những tính năng quan trọng và không thể thiếu cho cách website doanh nghiệp, đặc biệt là các trang website thương mại điện tử (bán hàng online, kinh doanh dịch vụ,…). Khi khách hàng truy cập điện thoại di động hoặc các thiết bị có màn hình bé, nút Call Now phát huy tác dụng mạnh mẽ. Nó giúp khách hàng liên hệ nhanh chóng tới bạn, đồng thời nó cũng kích thích người dùng gọi tới bạn ngay lập tức và tăng lượng khách hàng tiềm năng 1 cách đáng kể.

-> Xem ngay cách thiết kế website wordpress chuẩn SEO

Dưới đây mình sẽ chia sẻ 2 CÁCH dễ dàng giúp bạn tạo nút Call Now trong WordPress.

– Tạo nút Call Now với plugin Call Now Icon Animate

Tạo nút Call Now với plugin Call Now Icon Animate

Ảnh demo Plugin Call Now Icon Animate

1. Đầu tiên, các bạn cần cài đặt và kích hoạt Plugin Call Now Button tại phần cài mới plugin.

Hoăc: Bạn vào link sau https://wordpress.org/plugins/call-now-icon-animate/ và tải plugin về. Sau đó cho vào thư mục plugin vs đường dẫn wp-content/plugin/ và giải nén ra. Sau đó vào phần plugin kích hoạt lên sử dụng

2.  Tiếp theo, truy cập Settings => Call Now Icon Animate, tại đây các bạn sẽ thấy giao diện đơn giản như sau

  • Ở đây các bạn chọn vào ENABLED để hiện thị nút gọi (hoặc DISABLED không hiện thị)
  • Tiếp theo nhập số điện thoại vào ô bên dưới

3. Cấu hình nâng cao cho Plugin gọi wordpress

Nhằm hỗ trợ cho nút gọi của mình với nhiều vị trí khác nhau trên website. Cấu hình nâng cao giúp chúng ta thay đổi màu sắc bắt mắt hơn, vị trí hiện thị của nút gọi.

Để làm phần này, các bạn chọn Advanced settings, sẽ xuất hiện hình ảnh như bên dưới.

Nhìn hình các bạn cũng đã biết cách chỉnh sửa nút CALL cho wordpress của mình rồi đúng không?

  • Icon color (màu sắc): các bạn chọn màu mình muốn để hiện thị ra ngoài website
  • Icon color hover (màu hiệu ứng): màu sẽ xuất hiện khi bảo trỏ hoặc bấm nút vào icon nhé
  • Appearance (vị trí): hiện tại Plugin hỗ trợ 2 vị trí bên dưới trái và phải.

Nhiệm vụ chúng ta đã hoàn thành, và đừng quên nhấn nút Save Changes nhé.

Với Plugin CALL NOW ICON ANIMATE chúng ta có thể tương tác tốt hơn với khách hàng. Chúc các bạn thành công!!!

– Tạo nút gọi điện thoại KHÔNG dùng Plugin

Mình đã nói ở phần trên, bài này sẽ chia sẻ 2 cách chèn nút gọi cho website wordpress. Đối với những bạn không muốn dùng plugin có thể tham khảo code của mình ở bên dưới đây.

Ảnh nút gọi được sử dụng tại website Ngọc Thắng

Nút gọi trên hình nhìn rất bắt mắt và hợp thiết kế đúng không? Mình sẽ chỉ bạn ngay đây!

Bước 1: Bạn hãy chèn đoạn code sau trong file footer.php, trên thẻ đóng </body>

<div class="hotline-fixed">
<a href="tel:0981481368" title="Hotline" class="hotline"></a>
</div>

 

Bước 2: Hãy css một chút cho nó đẹp mắt nhé!

.hotline-fixed {color: #fff;border-radius: 50px;position: fixed;height: 60px;overflow: hidden;line-height: 1.2;text-align: center;padding-left: 30px;z-index: 9999;width: 60px;top: 50%;transform: translateY(-50%);right: 10px;-webkit-animation: wrench 2.5s ease infinite;animation: wrench 2.5s ease infinite;transform-origin-x: 90%;transform-origin-y: 35%;transform-origin-z: initial;}

.hotline-fixed a:before {background: #5fb435;width: 50px;height: 50px;display: block;position: absolute;border-radius: 50px;left: 5px;top: 5px;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;content: "\f232";text-align: center;line-height: 1.5;font-size: 33px;color: #fff;}
@-webkit-keyframes wrench {
	0% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg) }
	8% { -webkit-transform: rotate(12deg); transform: rotate(12deg) }
	10%, 28%, 30%, 48%, 50%, 68% { -webkit-transform: rotate(24deg); transform: rotate(24deg) }
	18%, 20%, 38%, 40%, 58%, 60% { -webkit-transform: rotate(-24deg); transform: rotate(-24deg) }
	100%, 75% { -webkit-transform: rotate(0); transform: rotate(0) }
}
@keyframes wrench {
	0% { -webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg) }
	8% { -webkit-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate(12deg) }
	10%, 28%, 30%, 48%, 50%, 68% { -webkit-transform: rotate(24deg); -ms-transform: rotate(24deg); transform: rotate(24deg) }
	18%, 20%, 38%, 40%, 58%, 60% { -webkit-transform: rotate(-24deg); -ms-transform: rotate(-24deg); transform: rotate(-24deg) }
	100%, 75% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) }
}

Video hướng dẫn chi tiết:

Thật dễ phải không nào? Chúng ta đã hoàn thành rồi, hãy view ra xem thành quả của mình nhé!

Nếu các bạn gặp khó khăn gì hãy comment bên dưới, mình sẽ hỗ trợ các bạn!

5/5 - (1 bình chọn)