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

11499 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

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: //ngocbaolong.vn

Giuseart.com---Tạo-thanh-chức-năng-bottom-cho-website
Giuseart.com – 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
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ủ: //ngocbaolong.vn/wp-content/uploads/2023/07/home-svgrepo-com-1.svg
  2. Icon danh mục: //ngocbaolong.vn/wp-content/uploads/2023/07/document-text-svgrepo-com.svg
  3. Icon cửa hàng: //ngocbaolong.vn/wp-content/uploads/2023/07/shop-2-svgrepo-com.svg
  4. Icon giỏ hàng: //ngocbaolong.vn/wp-content/uploads/2023/07/cart-large-minimalistic-svgrepo-com.svg
  5. Icon nút lên trên: //ngocbaolong.vn/wp-content/uploads/2023/07/top-circle-svgrepo-com.svg
Giuseart.com---Tạo-thanh-chức-năng-bottom
Giuseart.com – Thay url ảnh vào vị trí được đánh số tương ứng

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 - (2 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:

Để lại một bình luận

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 *