Hướng dẫn tạo thanh chức năng bottom cho website wordpress

Hướng dẫn tạo thanh chức năng bottom cho website wordpress

Mẹo nhỏ: Để tìm kiếm chính xác các mẫu web đẹp của Ninh Bình Web, hãy search trên Google với cú pháp: "Từ khóa" + "ninhbinhweb". (Ví dụ: mẫu web bất động sản ninhbinhweb). Tìm kiếm ngay

Có bạn nào muốn làm thanh bottom bar như hình và video mô tả bên dưới không, chúng ta cùng thử làm nhé! Xem demo view mobile: https://ngocbaolong.vn

Giuseart.com---Tạo-thanh-chức-năng-bottom-cho-website
Tạo thanh chức năng bottom cho website wordpress

Điểm đặc biệt

Đây là tính năng nhỏ nhưng khá thú vị và nếu đưa vào website của bạn trông sẽ chuyên nghiệp hơn đó! Điểm đặc biệt ở đây là các icon sẽ không phải link bình thường, nhưng được tích hợp thêm tính năng sẵn có của theme Flatsome đối với nút “Danh mục” và “Giỏ hàng.

  • Khi bấm nút “Danh mục” sẽ xổ ra menu mobile
  • Khi bấm nút “Giỏ hàng” sẽ xổ ra sidebar chứa giỏ hàng.

Bài viết thực hiện trên theme Flatsome, theme khác có thể không hoạt động đúng như ý. Lưu ý đặc biệt, để ấn vào nút “Giỏ hàng” hoạt động được, bạn phải cài plugin Woocommerce và phải đưa element Cart lên Header main trong giao diện mobile nha!

Bước 1: Copy code thanh chức năng

Các bạn copy toàn bộ phần code này vào footer script của website nhé. Cài đặt Advanced Flatsome – Global setting – Footer Script.

Giuseart.com---Chèn-code-tùy-biến-vào-footer-script

Bước 2: Thay đường dẫn icon ảnh

Các bạn lần lượt tải các icon dưới đây về, upload lên website, copy URL của anh và thay thế vào vị trí tương ứng mình đánh dấu dưới đây:

  1. Icon trang chủ: https://ngocbaolong.vn/wp-content/uploads/2023/07/home-svgrepo-com-1.svg
  2. Icon danh mục: https://ngocbaolong.vn/wp-content/uploads/2023/07/document-text-svgrepo-com.svg
  3. Icon cửa hàng: https://ngocbaolong.vn/wp-content/uploads/2023/07/shop-2-svgrepo-com.svg
  4. Icon giỏ hàng: https://ngocbaolong.vn/wp-content/uploads/2023/07/cart-large-minimalistic-svgrepo-com.svg
  5. Icon nút lên trên: https://ngocbaolong.vn/wp-content/uploads/2023/07/top-circle-svgrepo-com.svg

Bước 2: Thay đường dẫn icon ảnh Các bạn lần lượt tải các icon dưới đây về, upload lên website, copy URL của anh và thay thế vào vị trí tương ứng mình đánh dấu dưới đây: Icon trang chủ: https://ngocbaolong.vn/wp-content/uploads/2023/07/home-svgrepo-com-1.svg Icon danh mục: https://ngocbaolong.vn/wp-content/uploads/2023/07/document-text-svgrepo-com.svg Icon cửa hàng: https://ngocbaolong.vn/wp-content/uploads/2023/07/shop-2-svgrepo-com.svg Icon giỏ hàng: https://ngocbaolong.vn/wp-content/uploads/2023/07/cart-large-minimalistic-svgrepo-com.svg Icon nút lên trên: https://ngocbaolong.vn/wp-content/uploads/2023/07/top-circle-svgrepo-com.svg

Bước 3: Trang trí với CSS

Copy và Paste đoạn code sau vào phần Giao diện – Tùy biến – Style – Custom CSS – Custom CSS (để set CSS cho PC)

Copy và Paste đoạn code sau vào phần Giao diện – Tùy biến – Style – Custom CSS – Custom CSS Mobile (để set CSS cho mobile)

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

Các bạn lưu lại và ra xem đã OK chưa nhé, nếu có vấn đề gì xin cứ bình luận để mình trợ giúp nhé!

5/5 - (1 bình chọn)

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!