Hướng dẫn sử dụng Theme Flatsome cho người không chuyên

  • Được đăng bởi Miliweb

  • 05 Tháng Chín, 2023

Sau khi đã có một Theme Flatsome tối ưu cho trải nghiệm của người dùng, bạn hoàn toàn có thể tùy chỉnh thêm giao diện, tính năng,… theo ý muốn. Dưới đây là một số bước hướng dẫn sử dụng Theme Flatsome căn bản mà bất cứ ai không rành về công nghệ đều có thể làm được.

Lưu ý:

  • Hãy chọn thiết kế hoặc mua Theme Flatsome tối ưu cho GG ads. Bạn có thể xem thêm tại kho theme wordpress giá rẻ

Theme options

Trong phần quản trị của website, bạn chọn Flatsome (ở thanh menu dọc bên trái)  -> Theme Options. Tại đây, bạn có thể thay đổi, chỉnh sửa được các phần sau:

  • Header đầu trang: Số điện thoại, danh mục sản phẩm/thực đơn, logo, banner,…
  • Footer chân trang: Thông tin liên hệ, bản quyền, chính sách bảo mật, chính sách đổi trả,…
  • Cửa hàng: Là các thông tin trong trang sản phẩm như danh mục, thông tin sản phẩm,…
  • Blog: Ngày tháng, layout,…
  • Style: Font chữ, màu sắc chữ, tùy biến css.

Sidebar

Cũng trên thanh menu trái, bạn chọn Giao diện -> Widget. Từ đây, bạn mở từng mục widget ra để tìm và chọn phần cần sửa.

Hướng dẫn sử dụng Theme Flatsome chỉnh màu sắc

Hướng dẫn sử dụng Theme Flatsome cho phép bạn tùy chỉnh các màu sắc gồm màu chủ đạo của web, màu văn bản, màu đường link… 

Trên thanh menu bên trái, chọn Theme options -> Style -> Color

Hướng dẫn sử dụng Theme Flatsome để tùy biến CSS

Trong trường hợp Theme Flatsome của bạn không có tính năng tùy chỉnh, bạn cần biết lập trình CSS để tự do điều chỉnh màu sắc, bố cục hay giao diện cho website của mình.

Bạn truy cập Flatsome -> Theme Options -> Custom CSS

Đáng nói là rất ít khách hàng có chuyên môn về lập trình. Vì vậy, phương án mua Theme Flatsome có sẵn sẽ rất có lợi cho bạn trong trường hợp này.

Nếu bạn có chuyên môn về lập trình có thể thử cách cài đặt CSS sau đây:

Trong Flatsome, chọn Advanced -> Custom CSS hoặc chọn giao diện -> Sửa -> chọn sửa file style.css.

Menu

Trong thanh menu bên trái, chọn Giao diện -> Menu -> Chọn phần  cần chỉnh để chỉnh sửa (danh mục sản phẩm, menu chính,…)

Header

Header thường có 3 phần là Top Bar , Header Main và Header Bottom , tương ứng với 3 phần của header ở bên ngoài trang nên việc điều chỉnh Header đa phần đều thực hiện ở Flatsome -> Theme Options -> Header.

Hoặc bạn có thể truy cập nhanh từ trang chủ, đặt con trỏ chuột vào khối nội dung cần sửa trên Header Main rồi chọn UX Builder.

Với menu hiển thị trên mobile, bạn có thể chỉnh sửa bằng cách chọn Theme Options -> Header -> Header Mobile.

Footer

Theme Flatsome có 2 kiểu giao diện Footer là thông qua Widget và thông qua Blocks. Hướng dẫn sử dụng Theme Flatsome chỉnh footer cho 2 kiểu này như sau:

  1. Nếu Footer tạo từ Widget, ở trong trang quản trị, bạn vào bố cục và giao diện -> Widget -> Xổ tab Footer 2 hoặc Footer 1 để sửa các cột chân trang.
  2. Nếu Footer tạo từ Blocks, từ trang chủ, bạn đưa chuột đến nội dung của Footer sẽ thấy hiện lên một menu (Edit Block: Footer), bạn click vào UX Builder

Thông tin bản quyền

Phần này cũng nằm trong footer, chính là dòng “Thiết kế bởi/Bản quyền của”… mà bạn vẫn thấy. Trong trang quản trị, bạn chọn Theme Options -> Footer -> Kéo xuống mục Absolute Footer.

Huớng dẫn sử dụng Theme Flatsome điều chỉnh blooks

Đây là các khối nội dung bạn có thể tùy ý lập ra và có thể sử dụng lại ở vị trí khác dưới dạng shortcode (trong bài đăng, trong trang chủ, header, footer…)

Với blook đã có sẵn, bạn có thể  sửa bằng cách vào UX Blocks -> Blocks. Kế tiếp, bạn trỏ chuột đến blook muốn sửa và chọn Edit with UX Builder.

Trang chủ

Để sửa trang chủ, từ trang chủ, bạn chọn sửa trang, sau đó chọn edit with UX Builder.

Tiếp theo, các blook của trang củ được hiển thị ở bên trái, dưới dạng chế độ thay đổi, bạn muốn sửa chỗ nào thì chọn nút mũi tên hoặc bánh răng để chuyển sang chế độ sửa.

Thêm mã JavaScript cho Theme Flatsome

Để chèn thêm mã JavaScript (Messenger, Google Analytics), bạn vào Flatsome, chọn Advanced -> Global Settings rồi thêm code vào header script hoặc footer script.

Sửa trang thông tin chi tiết về sản phẩm

Bạn chọn Flatsome -> Theme Options -> shop (WooCommerce) -> Product Page để tùy chỉnh.

Cấu hình Google Map API

Với một Theme Flatsome GGads, bạn sẽ tiếp cận được số lượng lớn khách hàng tiềm năng. Vì vậy, có một địa chỉ rõ ràng, hiển thị trên GG map cũng là cách để tăng độ uy tín cũng như dễ dàng hơn cho khách hàng tiếp cận cửa hàng của bạn (nếu có).

Để cài đặt hiển thị Google map lên website, bạn cần có API key.

Trong Theme Flatsome, bạn có thể cài đặt như sau:

  • Tạo API key trên website của Google
  • Lưu API 
  • Vào Flatsome, chọn Advanced, chọn GG APIs.

Trên đây là các hướng dẫn sử dụng Theme Flatsome cơ bản mà bất kỳ người không chuyên nào cũng có thể thực hiện được. Nếu còn câu hỏi gì thêm hoặc cần hỗ trợ, bạn để lại lời nhắn cho mình nhé!

Chia sẽ bài viết:

Bài viết liên quan