Nút liên hệ là một nút cần thiết cho một website. Với một người mới tìm hiểu về code Wordpress như mình thì việc thêm nút liên hệ vào website sao cho hiệu quả và đẹp thì cả một vấn đề. Mình đã phải đọc hết trang này sang trang khác, làm thử lần 1, lần 2 và lần n. hjhj. Và mình biết cũng có bạn đang như mình. Trong bài viết này mình chia sẻ code để tạo nút liên hệ trên theme Flatsome - một theme rất phổ biến với nhiều anh em.
Tại sao cần thêm nút liên hệ vào website
Có lẽ cũng nên nói một chút về việc tại sao cần 1 nút liên hệ cho website nhỉ? Việc tạo một nút liên hệ trên website giúp cho người dùng dễ dàng hơn trong việc tương tác với chủ của website. Trên hầu hết các website họ có nút này để khách hàng dễ dàng thông tin đến họ các sản phẩm mà học cung cấp. Hay đơn giản như mình là để mọi người trao đổi với mình được dễ dàng.
Bạn cũng có thể tham khảo thêm cách này để tích hợp nhiều nút liên hệ
Cách tạo nút liên hệ cho Website Flatsome
<div class="call-mobile2"><a data-animate="fadeInDown" rel="noopener noreferrer" href="http://zalo.me/0394321444" target="_blank" class="button success" style="border-radius:99px;" data-animated="true"><span>Chat Zalo </span></a></div><div class="call-mobile1"><a data-animate="fadeInDown" rel="noopener noreferrer" href="https://www.facebook.com/codfe" target="_blank" class="button success" style="border-radius:99px;" data-animated="true"><span>Chat Facebook</span></a></div><div class="call-mobile"><a id="callnowbutton" href="tel:0394321444">039.4321.444</a><i class="fa fa-phone"></i></div>
Lưu ý: Nhớ chỉnh sửa lại các thông tin như số điện thoại và đường link facebook của bạn nhé. Nếu muốn dẫn vào messenger thì có thể dùng link: http://fb.com/tên rút gọn fanpage của bạn .
Bước 2: Thêm CSS vào file style.css hoặc truy cập Tuỳ biến -> Add CSS -> Paste đoạn CSS này vào.
.success.is-underline:hover,.success.is-outline:hover,.success {
background-color:#1E73BE;
color:white !important;
}
.call-mobile {
background:#ED1C24;
position:fixed;
bottom:10px;
height:40px;
line-height:40px;
padding:0 0px 0 0px;
border-radius:40px;
color:#fff;
left:20px;
z-index:99999;
}
.call-mobile1 {
position:fixed;
bottom:52px;
height:40px;
line-height:40px;
padding:0 0px 0 0px;
border-radius:40px;
color:#fff;
left:20px;
z-index:99999;
}
.call-mobile2 {
position:fixed;
bottom:93px;
height:40px;
line-height:40px;
padding:0 0px 0 0px;
border-radius:40px;
color:#fff;
left:20px;
z-index:99999;
}
.call-mobile i {
font-size:20px;
line-height:40px;
background:#B52026;
border-radius:100%;
width:40px;
height:40px;
text-align:center;
float:right;
}
.call-mobile a {
color:#fff;
font-size:18px;
font-weight:bold;
text-decoration:none;
margin-right:10px;
padding-left: 10px;
}
OK. Vậy là xong, bấm lưu lại và tận hưởng nhé. Như vậy chỉ với 2 bước đơn giản bạn đã có thể thêm nút liên hệ cho Website của mình rồi.
