Hướng dẫn sử dụng theme Flatsome từ căn bản đến nâng cao (phần 1)

Sử dụng theme Flatsome
5/5 - (1132 bình chọn)

Các thao tác cơ bản khi sử dụng theme Flatsome

Hôm nay Alowebtot chúng tôi xin gửi đến quý khách hàng bài chỉ dẫn về cách sử dụng theme Flatsome từ cơ bản đến nâng cao, giúp các bạn có được cái nhìn toàn diện về các phần mà theme Flatsome đem lại.

Qua đó có thể dễ dàng tùy chỉnh mọi thứ theo yêu cầu của chính bạn.

Sử dụng theme Flatsome
Hướng dẫn sử dụng theme Flatsome

Theme options

Để tùy chỉnh, người sử dụng truy cập:

  • Flatsome -> Theme Options ở bất kỳ trang nào
  • Giao diện -> Tùy chỉnh ( “Tùy biến” ở thanh menu trên cùng)
Theme Options

Tại Theme Option, bạn sẽ được thấy cấu hình và chỉnh sửa được các phần sau:

  • Header (phần đầu trang): Top bar, Main Menu, Bottom Menu, Sticky Menu, Logo, Banner, giỏ hàng, menu, số điện thoại…
  • Footer (phần cuối trang): Các cột cuối trang, thông tin bản quyền, các khối nội dung (block)…
  • Shop: Chỉnh sửa các thông tin bên trong trang sản phẩm, bố cục trong trang danh mục sản phẩm…
  • Blog: Chỉnh sửa layout, ngày, giờ và nhiều chỉnh sửa liên quan khác
  • Style: Chỉnh sửa màu sắc, font chữ, tùy biến css
  • ….

Khu vực quản lý Widget ( Side bar)

Ở giao diện Tiếng Anh: Appearance -> Widgets

Cách chọn widgets bằng ngôn ngữ Anh

Ở giao diện Tiếng Việt: Giao diện -> Widget

Cách chọn Widget bằng ngôn ngữ Việt

Và bây giờ, giao diện người dùng nhận được là:

Ví dụ về 1 trang widget điển hình

Bố cục của trang widget bao gồm:

  • Các Widget sẵn có (Available Widgets): Tức là các kiểu loại widget mà theme cung cấp, ngoiaf các widget đa dạng đã nói thì sẽ có rất nhiều wideget khác nữa, nhất là các giao diện bạn đi mua sẽ có rất nhiều widget hơn hẳn đa số các theme free
  • Vị trí của Wideget: Tức là widget sẽ được đặt ở vị trí nào, thường thì là cột bên tay phải (sidebar) và phía chân trang (footer), đôi khi sẽ là cột bên tay trái nếu designer đặt nội dung chính ở bên tay phải. Các widget cũng thường không bị giới hạn vị trí. Chẳng hạn nếu theme phân phối 3 vị trí thì bất kỳ widget nào cũng đủ nội lực được đặt ở đó
  • Widget không sử dụng (Inactive Widgets): Nếu có widget nào bạn đã sử dụng rồi mà vì một lý do nào đó bạn không muốn sử dụng nữa thì bạn nên đưa nó vào khu vực này. WordPress sẽ giữ các xây dựng của nó. Bất cứ khi nào bạn muốn dùng lại chỉ cần kéo nó từ khu vực này tới vị trí mong muốn. Lợi ích mà nó đem lại là bạn sẽ không mất thời gian để thiết lập lại các thông tin đã từng soạn thảo

Tùy chỉnh style: màu sắc, phông ngữ

Flatsome cho phép bạn tùy biến màu sắc như: màu chủ đạo, màu sắc chung của văn bản, đường link. Nếu trong tính năng tùy biến màu sắc của theme không cho phép thay đổi, bạn phải sử dụng tính năng Custom CSS để định nghĩa màu sắc theo ý muốn (khi bạn biết lập trình CSS) Hầu hết tùy chỉnh màu sắc đều thông qua Menu theme options (Flatsome -> Theme Options -> Các menu con bên trong) và truy cập Flatsome -> Theme Options -> Style -> Color

Tùy chỉnh màu sắc

Chỉnh sửa menu

Chỉnh sửa menu

Bạn truy cập Giao diện -> Menu -> Chọn menu cần chỉnh (Menu chính, menu danh mục sản phẩm, top bar menu…) để chỉnh sửa

Chỉnh sửa header

Lưu ý tùy chỉnhheader menu trênMobile

  • Flatsome -> Theme Options -> Header ->Header Mobile

Chỉnh sửa Footer

Khi bạn sử dụng theme Flatsome, có 2 kiểu trình bày footer như sau

  • Footer tạo từ Widget thì trong trang Admin, bạn vào Giao diện -> Widget -> xổ Footer 2 hoặc Footer 1 để sửa các cột Footer
  • Footer tạo từ Blocks: bạn vào UX Blocks -> Tìm Blocks có chữ Footer -> Chọn Edit With Ux Buider
  • Bạn chọn Flatsome -> Theme Options -> Footer -> Kéo xuống mục Absolute Footer

Sửa thông tin bản quyền là phần cuối của mục Footer

Chỉnh sửa Blocks

Bạn ấn chuột chọn UX Block -> Blocks

Sau đó để chỉnh sửa bạn chọn Edit With Ux Buider

Xin chân thành cảm ơn quý khách hàng đã theo dõi Hướng dẫn sử dụng theme Flatsome của Alowebtot chúng tôi gửi đến.

Subscribe
Notify of
guest
1 Bình luận
Cũ nhất
Mới nhất Được bình chọn nhiều nhất
Phản hồi nội tuyến
Xem tất cả các bình luận
trackback

[…] Hướng dẫn sử dụng theme Flatsome từ căn bản đến nâng cao (phần 1) […]

1
0
Bạn đang nghĩ gì? Hãy bình luận nhé <3x