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ư vấn qua Facebook</a>

</div>

<div class=“center”>

<a href=“#“ target=“blank”><img src=“#“/>Quà tặng</a>

</div>

<div class=“right”>

<a href=“tel:0973099739” target=“blank”><img src=“#“/>Gọi: 0973.099.739</a>

</div>

<div class=“clearboth”></div>

</div>

</div>