HƯỚNG DẪN THÊM NÚT GỌI ĐIỆN CHO WEBSITE
Ngày nay, lượng người dùng vào website bằng điện thoại rất nhiều. Việc dùng điện thoại lướt các trang bán hàng và ấn nút gọi trực tiếp rất thân thiện với người dùng. Nút gọi điện thoại cho phép khách hàng dễ dàng liên lạc với người bán hàng khi cần.
-> Xem ngay quy trình thiết kế web wordpress chuẩn cấu trúc: https://ngocthang.net/thiet-ke-website-wordpress/
Do đó thêm nút gọi điện là một hình thức phổ biển trên website. Tại bài viết này mình sẽ hướng dẫn bạn cách thêm nút gọi điện vào website bằng những dòng code rất đơn giản và dễ sử dụng. Hình dưới sẽ giúp bạn hình dung cụ thể nhất về sản phẩm:
Demo ảnh nút gọi điện trên website wordpress
Sau đây mình sẽ hướng dẫn bạn cách tạo nút gọi như trên hình mà không cần dùng plugin:
Trước khi làm bạn nên thêm thư viện animate.css vào code để nó tạo thêm các hiệu ứng
-
Đầu tiên, các bạn thêm dòng code sau vào file footer.php, trước thẻ đóng </body>
|
1 2 3 4 5 6 7 8 |
<a href="tel:0973 894 341" class="call-now" rel="nofollow" title="hotline"> <div class="kenit-alo-phone"> <div class="animated infinite zoomIn kenit-alo-circle"></div> <div class="animated infinite pulse kenit-alo-circle-fill"></div> <div class="animated infinite tada kenit-alo-img-circle"></div> <span>0973 894 341</span> </div> </a> |
- Bạn chỉ cần thay số điện thoại sao cho đúng
2. Tiếp theo chúng ta định đạng style cho đẹp mắt và dễ nhìn hơn
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.kenit-alo-phone { position: fixed; left: 0px; bottom: 0px; visibility: visible; background-color: transparent; width: 110px; height: 110px; cursor: pointer; z-index: 200000 !important; } .kenit-alo-img-circle { width: 30px; height: 30px; top: 43px; left: 43px; position: absolute; background: rgba(30, 30, 30, 0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; opacity: .7; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; background-color: #0089B9; background-size: 70%; } .kenit-alo-circle-fill { width: 60px; height: 60px; top: 28px; left: 28px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: rgba(0, 175, 242, 0.5); opacity: .75 !important; } .kenit-alo-circle { width: 90px; height: 90px; top: 12px; left: 12px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); opacity: .1; border-color: #0089B9; opacity: .5; } .kenit-alo-phone span { display: block; background: #30a4cc; color: #fff; padding: 5px; text-align: center; position: absolute; left: 5px; width: 110px; top: -15px; border-radius: 4px 4px; } .kenit-alo-phone span:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #30a4cc transparent transparent transparent; position: absolute; top: 28px; left: 0; right: 0; text-align: center; margin: 0 auto; } |
- Nếu màu sắc chưa đúng ý bạn có thể đổi màu nó cho vừa ý ( nếu biết chỉnh sửa css)
Vậy qua 2 bước đơn giản chúng ta đã có nút gọi điện thoại đẹp mắt. Nhớ lưu lại và xem thành quả của mình nhé.
Chúc các bạn thành công!!!
