Chào các bạn, trong một số bài viết trước mình đã hướng dẫn thêm nút gọi ngay trong phần footer của website trên giao diện người dùng di động rồi phải không? Hôm nay, mình sẽ tiếp tục hướng dẫn các bạn tạo một số nút kêu gọi hành động hữu ích khác cho trang web!
Thêm nút gọi hành động của trang web
Về cơ bản, sau khi cài đặt WordPress, bạn có thể cần thêm plugin hoặc mã để tạo nút kêu gọi hành động hướng dẫn khách hàng nhấp vào các nút dẫn đến liên kết mà họ muốn. Các nút kêu gọi hành động, có thể hiểu là “mua ngay”, “gọi ngay” hoặc “liên hệ với chúng tôi để được tư vấn miễn phí”, v.v., được bố trí ở một số nơi trên trang web chẳng hạn.
Có rất nhiều plugin thực hiện điều này. Tuy nhiên, việc sử dụng một plugin luôn mang lại những lo ngại về bảo mật và tốc độ với nó. Do đó, bạn có thể sử dụng đầy đủ HTML và CSS để tạo các nút kêu gọi hành động đơn giản và đẹp mắt!
Các tạo các nút liên hệ đẹp cho website
Ở bài viết này mình sẽ hướng dẫn các bạn đang sử dụng website trên giao diện flatsome. Tất nhiên, đối với các website khác có thể làm tương tự.
Tạo nút liên hệ đẹp cho flatsome
Bước 1: Sao chép code tạo nút call to action
Từ thanh quản trị màu đen trên cùng với dòng chữ Flatsome, chọn Advanced – Global Setting, sau đó sao chép và dán tất cả mã bên dưới và dán nó vào tập lệnh chân trang.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="bottom-contact"> <div class="container"> <div class="left"> <a href="https://messenger.com/t/joseph.thien.75" target="blank"><img src="https://robot.ninhbinhweb.net/wp-content/uploads/2018/09/icon.png"/>Tư vấn qua Facebook</a> </div> <div class="center"> <a href="https://giuseart.com" target="blank"><img src="https://robot.ninhbinhweb.net/wp-content/uploads/2018/12/icon-gift.png"/>Quà tặng</a> </div> <div class="right"> <a href="tel:0972939830" target="blank"><img src="https://robot.ninhbinhweb.net/wp-content/uploads/2018/09/phone-icon.png"/>Gọi: 0972.939.830</a> </div> <div class="clearboth"></div> </div> </div> |
Trong đoạn mã trên, bạn có thể thay đổi liên kết và văn bản của các nút, ví dụ:
- Màu đỏ: Đường dẫn đến các mạng xã hội, số điện thoại
- Màu xanh: chỉnh sửa văn bản
Bạn cũng có thể tải các biểu tượng theo link bên dưới và tải chúng lên trang web của mình, sau đó bạn sẽ nhận được liên kết hình ảnh thay vì liên kết trong thẻ !
Bước 2: Thêm CSS cho giao diện PC
Đi tới Giao diện – Tùy chỉnh – Style – Tùy chỉnh CSS – CSS tùy chỉnh, sau đó sao chép và dán tất cả CSS này vào:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.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} |
Bước 3: Thêm CSS để ẩn nó trên giao diện người dùng di động
Các nút gọi hành động được sử dụng cho giao diện người dùng di động không đẹp, vì vậy chúng tôi có thể ẩn chúng như sau:
Đi tới Giao diện – Tùy chỉnh – Kiểu – Tùy chỉnh CSS – CSS dành cho thiết bị di động tùy chỉnh, sau đó sao chép và dán mã CSS này vào:
|
1 |
.bottom-contact{display:none} |
Đối với bất kỳ chủ đề không phải là flatsome
Đối với những giao diện khác, chúng tôi có một cách hơi khác để thêm nó. Như sau:
Bước 1: Vào Quản trị – Giao diện – Chỉnh sửa – Footer.php
Sau đó, sao chép bên dưới và dán tất cả mã ngay giữa các </body> và </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<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="https://messenger.com/t/joseph.thien.75" target="blank"><img src="https://robot.ninhbinhweb.net/wp-content/uploads/2018/09/icon.png"/>Tư vấn qua Facebook</a> </div> <div class="center"> <a href="https://giuseart.com" target="blank"><img src="https://robot.ninhbinhweb.net/wp-content/uploads/2018/12/icon-gift.png"/>Quà tặng</a> </div> <div class="right"> <a href="tel:0972939830" target="blank"><img src="https://robot.ninhbinhweb.net/wp-content/uploads/2018/09/phone-icon.png"/>Gọi: 0972.939.830</a> </div> <div class="clearboth"></div> </div> </div> |
Bước 2: Lưu và tận hưởng thành quả
Tổng kết
Vậy là tôi đã hoàn thành việc thêm các nút kêu gọi hành động hữu ích vào cuối chân trang của trang web WordPress của bạn. Chúc các bạn làm đúng và có những trải nghiệm thú vị khi ghé thăm website. Nếu bạn gặp bất kỳ sai sót nào trong quá trình thực hiện, hãy comment bên dưới để cùng thảo luận.
![[Woocommerce] Tạo bảng thông số kỹ thuật sử dụng Advanced Custom Fields](https://leekhoa.com/wp-content/uploads/2021/06/tao-bang-thong-so-ky-thuat-su-dung-advanced-custom-field-1.jpeg "[Woocommerce] Tạo bảng thông số kỹ thuật sử dụng Advanced Custom Fields 4")
