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

9188 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, ở một số bài trước mình đã hướng dẫn thêm nút gọi ngay ở chân trang website trên giao diện di động rồi phải không? Hôm nay mình tiếp tục hướng dẫn các bạn làm một số nút Call to Action hữu ích khác cho website nhé!

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, ví dụ.

Có nhiều plugin làm được việc này. Tuy nhiên, sử dụng plugin luôn mang lại mối lo ngại về bảo mật và tốc độ. Do đó, các bạn hoàn toàn có thể sử dụng HTML và CSS để tạo các nút Call to Action đẹp mà đơn giản nhé!

Hôm nay mình sẽ hướng dẫn các bạn thêm các nút Call to Action như mẫu trong demo sau: http://nuocgiat.ninhbinhweb.nethttp://mica2.ninhbinhweb.net/

Giuseart.com-Tạo-các-nút-Call-to-Action-hữu-ích-ở-chân-trang-cho-website
Tạo các nút Call to Action hữu ích cho website

Đối với theme Flatsome

Các bạn chỉ cần tuần tự làm theo các bước của mình sẽ Ok nhé!

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

Trên thanh Admin Bar đen đen trên cùng có chữ Flatsome, chọn AdvancedGlobal Setting.Sau đó, copy toàn bộ đoạn code dưới đây bỏ vào Footer Script.

Giuseart.com Tạo nút Call to Action
Bước 1: Flatsome – Advanced – Global Setting – Copy đoạn code vào Footer Script

Đoạn code:

Trong đoạn code trên, các bạn có thể thay link và text của các nút, ví dụ:

Giuseart.com-Tạo-nút-Call-to-Action-cho-website-Wordpress
Màu đỏ: sửa link; màu xanh: sửa text
  • 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 ninhbinhweb.net 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ước 2: Thêm CSS  cho giao diện PC

Vào Giao diệnTùy biến – StyleTùy chỉnh CSS (Custom CSS)Custom CSS, sau đó copy toàn bộ đoạn code CSS này vào:

Bước 3: Thêm CSS để ẩn trên giao diện mobile

Các nút Call to Action dùng cho giao diện mobile không đẹp, nên chúng ta có thể ẩn nó đi bằng cách:

Vào Giao diệnTùy biến – StyleTùy chỉnh CSS (Custom CSS)Custom Mobile CSS, sau đó copy đoạn code CSS này vào:

Đối với theme bất kỳ không phải Flatsome

Đối với theme bất kỳ không phải Flatsome, chúng ta có cách thêm hơi khác một xíu. Cụ thể như sau:

Bước 1: Vào Quản trịGiao diệnSửaFooter.php. Sau đó, copy toàn bộ đoạn code này vào ngay giữa thẻ đóng </body></html>.

Bước 2: Lưu lại và hưởng thành quả

Lời kết

Như vậy mình đã hoàn thành việc hướng dẫn các bạn chèn các nút Call to Action hữu ích phía dưới chân trang cho website WordPress rồi. 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 trong quá trình thực hiện có lỗi gì thì các bạn comment bên dưới để cùng trao đổi nha.

4.1/5 - (8 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

5 thoughts on “Code thêm các nút Call to action hữu ích cho website WordPress

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Trang chủ
Tìm kiếm
Lên trên
Chia sẻ
Tải lại
Bình luận