Hướng dẫn sử dụng và tùy chỉnh theme Flatsome chi tiết

1. Một số thao tác cơ bản
 
Theme Options
 
Bạn truy cập Flatsome -> Theme Options ở bất kỳ trang nào, ngay phía trên cùng hoặc vào trang Quản trị (Admin) chọn Giao diện -> Tùy chỉnh.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Tại Theme Options bạn sẽ cấu hình, 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, số điện thoại, menu, ...
 
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 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
 
Style: chỉnh sửa màu sắc, font chữ, tùy biến css
 
Chỉnh sửa Widget (Sidebar)
 
Truy cập Giao diện -> Widget
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Sau đó xổ các mục Widget ra để tìm ra widget cần chỉnh.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
2. Tùy biến màu sắc
 
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.
 
Hầu hết tùy biến màu sắc đều thông qua Menu Theme Options. Truy cập Flatsome -> Theme Options -> Style -> Color.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Tại đây bạn có thể chọn để thay đổi màu chủ đạo và một số chi tiết khác.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Đổi màu nền của Header thì bạn truy cập Flatsome -> Theme Options -> Headers. Sau đó lần lượt truy cập các menu con như:
 
Top bar
 
Header Main
 
Header Bottom
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
3. Tùy biến CSS
 
CSS dùng để tùy biến màu sắc, giao diện cho website khi mà theme không có tính năng tùy chỉnh. Nếu bạn có kiến thức lập trình CSS và có nhu cầu tùy biến CSS thì có thể truy cập Flatsome -> Theme Options -> Custom CSS.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Hoặc bạn cũng có thể sửa trên file style.css của theme bằng cách truy cập Giao diện -> Sửa -> Chọn sửa file style.css.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
4. Chỉnh sửa Menu
 
Vì là theme WordPress nên khi cần chỉnh sửa cấu trúc menu (text, link…) 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.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
5. Chỉnh sửa Header
 
a. Cấu trúc của header và cách tùy biến
 
Cấu trúc của Header gồm thường gồm 3 phần: Top Bar, Header Main, và Header Bottom, tương ứng với 3 phần của header ở bên ngoài website.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Việc tùy biến Header hầu hết đều xử lý ở Flatsome -> Theme Options -> Header.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
b. Sửa nhanh nội dung dạng Block trong Main Header
 
Ở Main Header, bên phải Logo thường có khối nội dung (hotline, số điện thoại, banner…), bạn có thể thấy khối này ở trong trang quản trị -> menu Blocks -> Rê chuột vào block cần sửa, chọn Edit with UX Builder.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Hoặc bạn có thể truy cập nhanh bằng cách ra ngoài trang chủ, rê chuột vào khối nội dung cần sửa trên Header Main rồi chọn UX Builder.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
c. Tùy biến Header menu trên Mobile
 
Bạn có thể tùy biến vị trí menu xuất hiện trên mobile, tùy biến menu hiển thị những gì bằng cách truy cập Flatsome -> Theme Options -> Header -> Header Mobile.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
6. Chỉnh sửa Footer
 
a. Nội dung chân trang
 
Theme Flatsome có 2 kiểu trình bày Footer: thông qua Widget và thông qua Blocks.
 
Nếu Footer tạo từ Widget thì ở trong trang Admin, bạn vào Giao diện -> Widget -> Xổ tab Footer 2 hoặc Footer 1 để sửa các cột Footer.
 
Nếu Footer tạo từ Blocks, tương tự như sửa Block ở Main header, ở trang chủ, bạn rê chuột vào nội dung của Footer, sẽ thấy một menu hiện lên (Edit Block: Footer), bạn click vào UX Builder.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
b. Sửa thông tin bản quyền
 
Là phần nội dung cuối cùng của trang (Thiết kế bởi, bản quyền của…). Bạn truy cập Flatsome -> Theme Options -> Footer -> Kéo xuống mục Absolute Footer.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
7. Chỉnh sửa Blocks
 
Block là các khối nội dung được người dùng dựng ra theo ý muốn và có thể sử dụng lại ở chỗ khác dưới dạng shortcode (dùng ở trang, bài viết, header, footer, chi tiết trang chủ…).
 
Để sửa một block có sẵn, bạn truy cập UX Blocks -> Blocks.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Sau đó rê chuột vào Block cần sửa chọn Edit with UX Builder.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
8. Chỉnh sửa trang chủ
 
Để tiến hành chỉnh sửa trang chủ, bạn truy cập vào trang chủ của website, rồi chọn Sửa trang -> Edit with UX Builder.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Lúc này, trình chỉnh sửa trang UX builder sẽ thể hiện trang chủ của bạn ở chế độ chỉnh sửa. Bạn sẽ thấy các khối nội dung của trang chủ sẽ thể hiện ở bên trái, bạn muốn sửa ở đâu thì chọn vào nút mũi tên hoặc bánh răng để chuyển sang chế độ sửa.
 
Giả sử bạn muốn thay các hình ảnh của Slider, bạn chọn tới khối Slider -> chọn Image cần sửa -> chọn Options.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
9. Chèn mã JavaScript
 
Giúp bạn chèn thêm mã JavaScript (Google Analytics, Facebook Chat,…). Truy cập Flatsome -> Advanced -> Global Settings. Sau đó chèn code vào Header Script hoặc Footer Script.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
10. Tùy biến trang chi tiết sản phẩm
 
Bạn thường thấy theme Flatsome được thêm các đoạn văn bản, hình ảnh bên trên hoặc bên dưới nút Add To Cart (thêm vào giỏ) hoặc có tab Hướng dẫn thanh toán bên cạnh tab mô tả sản phẩm.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
Bạn truy cập Flatsome -> Theme Options -> Shop (WooCommerce) -> Product Page để tùy chỉnh.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
11. Cấu hình Google Map API
 
Để hiển thị Google Map trên website, Google yêu cầu cần có API Key cho dịch vụ này, trong theme Flatsome bạn có thể cấu hình như sau:
 
Bạn cần tạo API Key trên website của Google
.
Lưu API Key vào website bằng cách truy cập Flatsome -> Advanced -> Google APIs.
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
theme Flatsome, theme Flatsome chi tiết, sharecode theme Flatsome
 
 
 
 
 
 HỖ TRỢ TRỰC TUYẾN