Hướng dẫn tạo thanh hỗ trợ trực tuyến bên dưới đẹp cho wordpress

Tác giả : admin | 17:15 22/10/2021 | 99 Lượt xem

Chào các bạn ! Lại là mình đây . Hôm nay thứ sáu 22-10-2021 rảnh mình lại viết bài Hướng dẫn tạo thanh hỗ trợ trực tuyến bên dưới đẹp cho wordpreed. Sau khi làm theo các bạn sẽ được kết quả như sau

tạo thanh hỗ trợ trực tuyến đẹp

Hướng dẫn tạo thanh hỗ trợ trực tuyến đẹp trên wordress

Tạo thanh wordpress đẹp giúp khách hàng cảm thấy yêu mến website của bạn hơn, giúp tỉ lệ mua hàng thành công nhiều hơn nữa , giúp khách hàng dễ dàng liên lạc với bạn hơn

==> Vậy làm như thế nào để tạo ra chúng .

B1 : Tạo 1 Menu có tên là menu chân trang ở dưới footer như sau

Tạo menu footer

Hướng dẫn tạo menu footer dưới chân Trang

B2: Thêm các icon vào bên cạnh Menu bằng icon của wordpreed . Cách thêm chúng như sau

– Vào trang https://www.w3schools.com/icons/fontawesome_icons_intro.asp sau đó ta copy dòng code này

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

– Mở advand của Flasome ( ở đây mình dùng thêm Flatsome ) Các theme khác các bạn làm tương tự ,và thêm chúng vào sau phần header  scripts như hình dưới đây

thêm đoạn mã javascrip của font

Hướng dẫn thêm đoạn mã javascrip của theme fatsome

B3: Vào trang https://fontawesome.com/ để ta copy đoạn code icon

Copy đoạn code icon

Hướng dẫn copy đoạn code icon vào trang menu

B4: Vào menu đã tạo ở trên ta copy dòng code vào đầu mỗi tên danh mục. Ta lựa chọn các icon của mình và thêm chúng vào .

Chú ý ở đây nếu ta thêm icon ở ngoài cũng được, bằng cách thay đoạn <i Class= fa fa-home></i> bằng đoạn

<i img src=”đường dẫn của icon ></i>

Thêm icon vào đầu danh mục

Hướng dẫn thêm icon vào đầu danh mục trong wordpress

B5: Vào tùy biến –>style–>customcss–>Custum mobile như hình

bỏ đoạn code này vào

Hướng dẫn code css cho menu

Bỏ đoạn code css này vào

Chú ý : Ở đây nếu muốn hiển thị trên máy tính ta cũng bỏ đoạn code vào trên chỗ máy tính Custom Css

Giải thích code :

Kết quả ta thu được một Menu rất đẹp dưới chân trang

tạo thanh hỗ trợ trực tuyến đẹp

Hướng dẫn tạo thanh hỗ trợ trực tuyến đẹp trên wordress

Cảm ơn các bạn đã theo dõi bài viết của mình ! Chúc các bạn vui vẻ học tập tốt .