Tạo nút gọi điện thoại đơn giản và dễ dàng trên WordPress

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 hề thiếu cho cách website doanh nghiệp, đặc biệt quan trọng là những trang website thương mại điện tử ( bán hàng trực tuyến, kinh doanh thương mại dịch vụ, … ). Khi người mua truy vấn điện thoại di động hoặc những thiết bị có màn hình hiển thị bé, nút Call Now phát huy công dụng can đảm và mạnh mẽ. Nó giúp người mua liên hệ nhanh gọn 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 người mua tiềm năng 1 cách đáng kể .
-> Xem ngay cách phong 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 tương hỗ 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 tất cả chúng ta đổi khác sắc tố đẹp 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 những 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ụ tất cả chúng ta đã hoàn thành xong, và đừng quên nhấn nút Save Changes nhé .
Với Plugin CALL NOW ICON ANIMATE tất cả chúng ta hoàn toàn có thể tương tác tốt hơn với người mua. Chúc những bạn thành công xuất sắc ! ! !

– 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ẽ san 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 hoàn toàn có thể tìm hiểu thêm 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 đẹp mắt và hợp phong cách 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

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 cụ thể :

Thật dễ phải không nào ? Chúng ta đã hoàn thành xong rồi, hãy view ra xem thành quả của mình nhé !
Nếu những bạn gặp khó khăn vất vả gì hãy comment bên dưới, mình sẽ tương hỗ những bạn !

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

Xem thêm: Tải game ben ten

Tôi là Trần Đức Thắng, hiện đang là CEO và Co-Founder của Công Ty Ngọc Thắng. Tôi tăng trưởng với nền tảng phong cách thiết kế website, SEO và Inbound Marketing. Hiện nay Ngọc Thắng phân phối dịch vụ phong cách thiết kế website, SEO, quảng cáo Google Ads … Với kinh nghiệm tay nghề tiến hành nhiều dự án Bất Động Sản những năm qua, đội ngũ của Ngọc Thắng không ngừng nỗ lực mang đến những dịch vụ tốt với ngân sách thấp nhất cho người sử dụng. !

Viết một bình luận