Hướng dẫn tùy chỉnh các thành phần trong Flatsome
1. Tùy Chỉnh Màu Sắc, Font Chữ và Logo
Để tùy biến màu sắc, font chữ và logo, bạn truy cập vào Giao diện > Tùy biến. Sau đó, vào phần Style để điều chỉnh màu sắc và font chữ theo nhu cầu của bạn.
2. Tùy Chỉnh CSS và JavaScript
Nếu bạn cần chỉnh sửa mã CSS hoặc thêm các mã JavaScript bên thứ ba như Facebook Pixel, Hotjar, Google Analytics, hãy vào Advanced > Global Settings. Để tùy chỉnh CSS, bạn chọn tab Custom CSS.
3. Tùy Chỉnh Blog trên Flatsome
Flatsome là theme chủ yếu cho các trang web bán hàng, nhưng bạn cũng có thể sử dụng tính năng blog cơ bản của nó. Để bắt đầu, vào Giao diện > Tùy biến và chọn mục Blog.
Trong phần Blog Single Post, bạn có thể tùy chỉnh các mục sau:
- Transparent Header: Tùy chọn header trong suốt.
- Enable Header Meta: Hiển thị thuộc tính meta trên header.
- Enable Featured Image: Hiển thị hình ảnh thumbnail đầu bài.
- Enable Share Icons: Hiển thị các nút chia sẻ.
- Enable Footer Meta: Hiển thị thuộc tính meta ở footer.
- Enable Blog Author Box: Hiển thị thông tin tác giả.
- Enable Next/Prev Navigation: Bật tính năng điều hướng bài viết tiếp theo/trước đó.
4. Hướng Dẫn Tạo và Chèn Shortcode trong Flatsome
Shortcode (mã ngắn) là tính năng tiện lợi của WordPress, giúp bạn chèn nội dung vào bất cứ nơi đâu trên website. Để tạo shortcode, vào UX Blocks, tạo block mới, sau đó sao chép mã shortcode ở góc phải màn hình để dán vào các bài viết.
Để chèn shortcode vào bài viết, chỉ cần sao chép mã và dán vào nơi bạn muốn trên trang nội dung.
5. Việc Việt Hóa Theme Flatsome
Flatsome là theme ngoại, nên bạn cần dịch sang tiếng Việt. Cài đặt plugin Loco Translate, sau đó chọn theme Flatsome để bắt đầu việt hóa.
- Chọn ngôn ngữ Tiếng Việt và vị trí Custom.
- Lọc các từ cần dịch và điền bản dịch, sau đó nhấn Save để lưu.
- Tải lại trang và kiểm tra kết quả, nếu cần xóa cache trang web.
6. Tùy Chỉnh WooCommerce trong Flatsome
Để chỉnh sửa các tùy chọn của WooCommerce, vào Advanced > WooCommerce. Bắt đầu từ phần Store Notice, điền thông tin mà bạn muốn thông báo hiển thị trên header khi khách truy cập website.
Product Catalog có các tùy chọn lọc sản phẩm:
- Default sorting: Lọc theo tên sản phẩm.
- Popularity (sales): Lọc theo sản phẩm bán chạy nhất.
- Average rating: Lọc theo sản phẩm có đánh giá cao nhất.
- Sort by most recent: Lọc theo sản phẩm mới cập nhật.
- Sort by price (asc): Lọc theo giá từ thấp đến cao.
- Sort by price (desc): Lọc theo giá từ cao đến thấp.
Tiếp theo, bạn có thể tùy chỉnh layout, header và kích thước hình ảnh trên trang sản phẩm.
Các phần thanh toán, giỏ hàng và trang thanh toán bạn tìm hiểu và tự tùy chỉnh nhé vì phần này khá dễ, cuối cùng chúng ta sẽ tùy chỉnh Site search giúp website có thể tìm các sản phẩm nhanh gọn lẹ hơn.
7. Tùy Chỉnh Site Search
Để cải thiện tính năng tìm kiếm sản phẩm trên website, vào phần Site Search và bật Live Search để kết quả tìm kiếm hiển thị ngay lập tức. Cũng có thể chỉnh sửa độ trễ tìm kiếm tại Search Results Latency, đặt là 500ms hoặc 1000ms.
8. Xây Dựng Landing Page với UX Builder
Landing page giúp bạn giới thiệu sản phẩm và tăng chuyển đổi cho website. Để tạo một landing page, chọn Tạo trang mới và chọn Edit with UX Builder.
- Add Elements và kéo thả các block theo ý thích.
- Sử dụng Flatsome Studio để nhập mẫu dựng sẵn từ nhà sản xuất.
Sau khi import mẫu, bạn có thể tùy chỉnh các thông số trong từng phần tử và nhấn Publish để lưu.
Mẫu sau khi import sẽ có cấu trúc bao gồm các section, column và phần tử, ấn vào phần Options để tùy chỉnh các thông số. Cuối cùng ấn vào nút Publish để lưu trang landing page.
Một thủ thuật nho nhỏ khi xây dựng landing page đó là hãy tùy chỉnh hiển thị cho nhiều loại thiết bị khác nhau, vào tùy chọn Options và set visibility cho từng phần tử.
9. Tùy Chỉnh Header và Footer trong Flatsome
Flatsome hỗ trợ header kéo thả, không cần can thiệp nhiều vào code. Bạn có thể chọn các preset cho header, với các tùy chọn cho cả thiết bị di động và máy tính để bàn.
Để tùy chỉnh footer, bạn có thể thêm các widget vào Footer 1, Footer 2 và Absolute Footer. Nếu không dùng Footer 2, hãy tắt nó đi bằng cách chọn Disable Footer 2.
Phần Footer bạn cũng tùy biến tương tự thôi, chú ý thành phần Edit footer widget dùng để thêm các widget vào Footer.
Phần Footer sẽ gồm 3 thành phần chính đó là Footer 1, Footer 2 và Absolute Footer, hãy chèn lần lượt các wigdet vào Footer 1 sau đó đến Footer 2, trường hợp không sử dụng Footer 2 hãy disable nó đi.
Chọn disable Footer 2 nếu không sử dụng.
Chỉnh sửa text cho phần bottom Footer.
Như vậy là bài hướng dẫn sử dụng theme Flatsome đến đây đã hết, chúc các bạn thành công
