Code thêm các nút Call to action hữu ích cho website WordPress – Flatsome

Thêm nút Call to Action cho website: 

Về cơ bản thì sau khi cài WordPress bạn có thể cần thêm các plugin hoặc các đoạn code tạo nút Call to Action (kêu gọi hành động) để điều hướng khách hàng click vào các nút dẫn đi tới link mà mình mong muốn. Các nút Call to Action có thể hiểu như nút “Mua ngay“, “Gọi ngay cho chúng tôi” hoặc “Liên hệ tư vấn miễn phí“,… được bố trí ở một số vị trí trong website

 

Bước 1: Copy đoạn code tạo nút Call to Action

<style>
.bottom-contact{z-index:999; position: fixed;
bottom: 0;
margin: 0 auto;
text-align: center;
width: 100%;}
.bottom-contact .container{display:inline-block; max-width:600px}
.bottom-contact .left, .bottom-contact .center{
float: left;
padding: 0 5px;}
.bottom-contact .left a{background: #3a589d;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .clearboth{clear:both}
.bottom-contact .right{float:left; padding: 0 5px}
.bottom-contact img{width:25px; padding-right:5px}
.bottom-contact .center a{background: #fd7518;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .right a{background: #3fb801;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .right a:hover{background:#38a700}
.bottom-contact .center a:hover{background:#ef680b}
.bottom-contact .left a:hover{background:#29468a}
@media  (max-width: 767px) {.bottom-contact{display :none;}}
</style>
<div class=“bottom-contact”>
<div class=“container”>
<div class=“left”>
<a href=# target=“blank”><img src=#/>Tư vn qua Facebook</a>
</div>
<div class=“center”>
<a href=# target=“blank”><img src=#/>Quà tng</a>
</div>
<div class=“right”>
<a href=“tel:0973099739” target=“blank”><img src=#/>Gi: 0973.099.739</a>
</div>
<div class=“clearboth”></div>
</div>
</div>
 
  • Màu đỏ: sửa liên kết của nút.
  • Màu xanh: Sửa text
  • Các bạn cũng có thể tải các icon trên host của mình  xuống rồi upload lên website của các bạn, sau đó lấy link ảnh thay vào link trong thẻ <img/> nhé!
 

Bài Viết Liên Quan