Tạo nút gọi trên website WordPress hiệu ứng rung lắc

Nút gọi điện thoại là chức năng cần thiết cho website kinh doanh dịch vụ hay bán hàng. Khi thêm vào trang web nó sẽ thuận tiện cho việc liên hệ của khách hàng. Bài viết này sẽ hướng dẫn tạo nút gọi trên website WordPress có hiệu ứng rung lắc tuyệt đẹp.

Tạo nút gọi trên website WordPress hiệu ứng rung lắc

Code tạo nút gọi điện thoại trên Website WordPress

Với cách thêm nút gọi vào website bạn sẽ dùng mã HTML và CSS. Vì thế để không gặp khó khăn trước khi làm bạn cũng cần am hiểu một chút về HTML, CSS nhé! Còn nữa nó cũng có thể hiển thị tốt trên cả máy tính, PC lẫn mobile nữa.

Bắt đầu thực hành thôi!

Bước 1: Nhấp vào Apperance => Editor

Tạo nút gọi trên website WordPress hiệu ứng rung lắc

Bước 2: Copy toàn bộ code gọi điện thoại cho vào trước thẻ </body> tại file footer.php

Nhớ thay 0123456789 bằng số điện thoại của bạn

<div class="hotline-wrapper">
<div class="hotline-phone-ring">
<div class="hotline-circle"></div>
<div class="hotline-circle-fill"></div>
<div class="hotline-img-circle">
<a href="tel:0123456789" class="pps-btn-img">
<img src="https://quachquynh.com/wp-content/uploads/2020/03/icon-call.png" alt="Gọi điện thoại" width="50">
</a>
</div>
</div>
<div class="hotline-bar">
<a href="tel:0123456789">
<span class="text-hotline">0123.456.789</span>
</a>
</div>
</div>

code nút gọi điện wordpress

Bước 3: Thêm code CSS vào file style.css (Cho xuống dưới cùng).

Mã CSS này đã được nén lại để giảm tốc độ load rồi!

.hotline-wrap{position:fixed;bottom:0;left:0;z-index:999999}.hotline-phone-ring{position:relative;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:11;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;left:0;bottom:0;display:block}.hotline-phone-ring-circle{width:85px;height:85px;top:10px;left:10px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid #e60808;-webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;opacity:.5}.hotline-phone-ring-circle-fill{width:55px;height:55px;top:25px;left:25px;position:absolute;background-color:rgba(230,8,8,0.7);border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.hotline-phone-ring-img-circle{background-color:#e60808;width:33px;height:33px;top:37px;left:37px;position:absolute;background-size:20px;border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center}.hotline-phone-ring-img-circle .pps-btn-img{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.hotline-phone-ring-img-circle .pps-btn-img img{width:20px;height:20px}.hotline-bar{position:absolute;background:rgba(230,8,8,0.75);height:40px;width:180px;line-height:40px;border-radius:3px;padding:0 10px;background-size:100%;cursor:pointer;transition:all .8s;-webkit-transition:all .8s;z-index:9;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.1);border-radius:50px!important;left:33px;bottom:37px}.hotline-bar > a{color:#fff;text-decoration:none;font-size:15px;font-weight:700;text-indent:50px;display:block;letter-spacing:1px;line-height:40px;font-family:Arial}.hotline-bar > a:hover,.hotline-bar > a:active{color:#fff}@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(0.5) skew(1deg);-webkit-opacity:.1}30%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);-webkit-opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}}@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:.6}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.6}100%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:.6}}@-webkit-keyframes phonering-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}@media (max-width: 768px){.hotline-bar{display:none}}

Như vậy là đã xong rồi đấy! Bạn hãy lưu lại sau đó ra trang chủ load lại để xem kết quả tạo nút gọi trên website WordPress đã được chưa nhé!

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments