Liên hệ đẹp cho theme Flatsome wordpress – Liên hệ box 10
Rất nhiều bạn hỏi về cách làm Liên hệ đẹp cho theme flatsome wordpress tùy chỉnh ở mobile và Destop khác nhau như nào, làm thế nào để được như thế kia,…
Hôm nay An Nhiên sẽ hướng dẫn các bạn cách tạo chatbox đẹp cho Flatsome WordPress nhé.
Liên hệ đẹp trong theme Flatsome WordPress
Để chèn một box chát bạn cần vào theme flatsome ở mục như hình:
<img src=”https://f88.vn/img/icon/mess.svg”>
</a>
<a class=”social-icon social-icon–zalo” href=”https://zalo.me/861393446206589121″ target=”_blank”>
<img src=”https://f88.vn/img/icon/zalo.svg”>
</a>
<div class=”social-icon-mobile”> <div> <a href=”tel:18006388″> <img src=”https://f88.vn/img/icon/call.svg”> <p>Gọi ngay</p> </a> </div>
<div> <a href=”http://m.me/f88vietnam” target=”_blank”> <img src=”https://f88.vn/img/icon/messmb.svg”> <p>Facebook Chat</p> </a> </div>
<div> <a href=”https://zalo.me/861393446206589121″ target=”_blank”> <img src=”https://f88.vn/img/icon/zalomb.svg”> <p>Zalo Chat</p> </a> </div> </div>
<style type=”text/css”>
.social-iconz-index:1000.social-icon imgwidth:50px
.social-icon–zaloposition:fixed;right:15px;bottom:15px;display:block
.social-icon–facebookposition:fixed;bottom:75px;right:15px;display:block
.social-icon-mobiledisplay:none
.social-icon-mobile imgwidth:25px
.social-icon-mobile divflex:1;display:flex;align-items:center;justify-content:center.social-icon-mobile pmargin:0;margin-top:5px;font-size:10px;color:#fff.social-icon-mobile adisplay:flex;flex-direction:column;align-items:center;justify-content:center.form-registerwidth:100%;max-width:100%;padding:0@media (max-width:768px).social-icon–facebook,.social-icon–zalodisplay:none.social-icon-mobiledisplay:flex;background-color:#00a3ff;height:60px;position:fixed;bottom:0;width:100%;z-index:1000
</style>
Sau khi bạn thêm dòng code trên thì kết quả các bạn nhận được lại là đây:
– Giao diện trên Destop:
-
Giao diện trên Mobile:
Vừa rồi GGADS đã hướng dẫn các bạn tạo ra liên hệ đẹp. Chúc các bạn thành công nhé!
