Hướng dẫn
Hướng dẫn sử dụng theme Flatsome web WordPress
Tùy biến giao diện Flatsome
Đầu tiên, đây là một phần cơ bản khi bắt đầu tiếp cận sử dụng và tùy chỉnh theme Flatsome, đồng thời cũng là phần quan trọng nhất, bạn sẽ thường xuyên làm việc với phần này trong quá trình thiết kế Website với Flatsome. Để tùy biến giao diện của Flatsome các bạn vào đường dẫn sau Giao diện > Tùy biến để mở trình tùy biến giao diện lên nhé.
Lưu ý khi giao diện hiển thị không giống nhau
Trong quá trình thực hiện, bạn có thể nhận thấy giao diện hiển thị trong hình minh họa không hoàn toàn giống với website của mình. Nguyên nhân là do ở bước cài đặt ban đầu, mỗi người có thể chọn Import một Demo khác nhau của Flatsome.
Ở ví dụ này, giao diện Demo được sử dụng là “Mega Shop”. Với các Demo khác, cách thao tác và chỉnh sửa vẫn hoàn toàn tương tự, chỉ khác đôi chút về bố cục hoặc vị trí hiển thị. Vì vậy, bạn chỉ cần làm theo đúng hướng dẫn là có thể áp dụng cho mọi Demo Flatsome mà không gặp trở ngại nào.
Hướng dẫn chỉnh sửa Header trong Flatsome
Header là một trong những khu vực được Flatsome đầu tư mạnh nhất về tính năng và khả năng tùy biến. Theme cung cấp đầy đủ các công cụ cần thiết giúp bạn dễ dàng thiết kế một Header chuyên nghiệp, hiện đại mà không cần can thiệp vào code.
Toàn bộ tùy chọn chỉnh sửa được sắp xếp khoa học, trực quan, phù hợp cho cả người mới lẫn người đã quen làm WordPress. Bạn có thể tùy chỉnh logo, menu, thanh tìm kiếm, nút kêu gọi hành động… chỉ bằng thao tác kéo thả.
Cách truy cập trình chỉnh sửa Header:
👉 Giao diện → Tùy biến → Header
Tại đây, bạn có thể bắt đầu xây dựng và tùy chỉnh Header theo phong cách riêng, đảm bảo phù hợp với giao diện tổng thể và định hướng thương hiệu của website.
Flatsome hỗ trợ chỉnh sửa Header bằng hệ thống kéo thả trực quan, thao tác đơn giản và dễ sử dụng. Bạn chỉ cần dùng chuột để thêm, di chuyển hoặc sắp xếp các thành phần trong Header theo nhu cầu.
Để thiết kế Header phù hợp với từng thiết bị, bạn sử dụng các nút chuyển đổi Desktop và Mobile/Tablet ở phía trên trình chỉnh sửa. Mỗi chế độ cho phép tùy chỉnh bố cục riêng, giúp Header hiển thị tối ưu trên máy tính, máy tính bảng và điện thoại.
Toàn bộ thay đổi sẽ được xem trước ngay lập tức theo thời gian thực ở khung hiển thị bên phải, giúp bạn kiểm tra kết quả mà không cần tải lại trang.
Hướng dẫn thay đổi Logo cho Flatsome
Bạn vào thay đổi logo bằng cách vào theo đường dẫn: Giao diện > Tùy biến > Header > Logo & Site Identity để bắt đầu thay đổi Logo website cho mình. Trong trường hợp website của bạn đã có logo thì đơn giản là upload.
Header Main là khu vực chứa các thành phần quan trọng của website như: logo, menu chính, ô tìm kiếm, giỏ hàng, tài khoản người dùng, nút thanh toán hoặc thông tin liên hệ. Đây là phần người dùng nhìn thấy đầu tiên nên cần được thiết lập cẩn thận.
Trong Header Main, Flatsome cho phép tùy chỉnh chi tiết các yếu tố như: chiều rộng, kiểu chữ, màu nền, hiệu ứng hover, icon, độ trong suốt, chia bố cục và các style hiển thị khác. Bạn có thể điều chỉnh trực tiếp từng thành phần để phù hợp với giao diện website.
Tùy chỉnh Header Bottom trong Flatsome
Header Bottom nằm ngay bên dưới Header Main và thường được dùng để hiển thị menu phụ hoặc thông tin bổ sung. Để chỉnh sửa phần này, truy cập theo đường dẫn:
👉 Giao diện → Tùy biến → Header → Header Bottom
Tại đây, bạn có thể thêm, sắp xếp và tùy chỉnh các thành phần tương tự như Header Main.
Header Bottom thường được sử dụng để hiển thị menu điều hướng chính của website, bao gồm các liên kết quan trọng như: Trang chủ, Giới thiệu, Cửa hàng, Sản phẩm, Liên hệ, Tuyển dụng, Hỗ trợ,…
Tại khu vực này, bạn có thể tùy chỉnh nhiều thông số như: chiều cao, màu nền, kiểu hiển thị, kích thước, font chữ và hiệu ứng hover. Các tùy chọn đều có sẵn trong Flatsome, cho phép bạn điều chỉnh Header Bottom phù hợp với bố cục và phong cách của website.
Một số tùy chọn Header khác trong Flatsome
Khu vực Header của Flatsome cung cấp nhiều thành phần để tùy chỉnh. Dưới đây là một số tùy chọn thường được sử dụng khi thiết kế Header:
- Button: Thiết lập style chung cho các nút hiển thị trên website
- Account: Tùy chỉnh cách hiển thị tài khoản người dùng trên Header
- Cart: Cấu hình giao diện và kiểu hiển thị của giỏ hàng
- Search: Điều chỉnh kiểu dáng và vị trí của ô tìm kiếm
- HTML: Chèn thêm mã HTML để mở rộng hoặc tùy biến Header nâng cao
- Contact: Hiển thị thông tin liên hệ của cửa hàng
- Newsletter: Thêm form đăng ký nhận tin qua email
- Vertical Menu: Menu dọc được Flatsome tích hợp ở các phiên bản mới
Ngoài các tùy chọn trên, Header còn nhiều thành phần khác có thể chỉnh sửa trực tiếp trong khu vực quản trị. Bạn chỉ cần kết hợp các công cụ có sẵn để xây dựng Header phù hợp với nhu cầu sử dụng của website.
Tùy biến Style
Phần Style dùng để thiết lập màu sắc, font chữ và CSS áp dụng cho toàn bộ website. Để truy cập, vào:
👉 Giao diện → Tùy biến → Style
Trong mục này có nhiều tùy chọn, tuy nhiên khi chỉnh sửa bạn chỉ cần tập trung vào 2 phần chính sau:
Color
Cho phép thay đổi màu sắc của các thành phần trên website. Tùy chọn này ảnh hưởng trực tiếp đến giao diện tổng thể, vì vậy nên kiểm tra kỹ trước khi áp dụng. Bạn có thể chỉnh các màu như: màu chính, màu phụ, liên kết, hover, thông báo, nút thêm vào giỏ hàng, widget, nhãn giảm giá,…
Typography
Dùng để thiết lập kiểu chữ và cách hiển thị font trên website. Flatsome hỗ trợ nhiều font chữ khác nhau để lựa chọn. Khi chỉnh Typography, không nên thay đổi quá nhiều vị trí cùng lúc để tránh làm mất cân đối bố cục giao diện.
Blog trong Flatsome
Blog là khu vực quản lý các bài viết (Article) dùng để bổ sung nội dung cho website, hỗ trợ giới thiệu doanh nghiệp, sản phẩm và cải thiện hiệu quả bán hàng. Các bài viết này cũng giúp tăng khả năng tiếp cận khách hàng thông qua SEO.
Để chỉnh sửa giao diện Blog trong Flatsome, truy cập theo đường dẫn:
👉 Giao diện → Tùy biến → Blog
Tại đây, bạn có thể tùy chỉnh cách hiển thị danh sách bài viết và bố cục trang Blog theo nhu cầu sử dụng.
Trong phần Blog, bạn có thể lựa chọn các mục sau để tùy chỉnh giao diện hiển thị:
- Blog Global: Thiết lập trang tổng hợp tất cả bài viết, thường dùng cho trang Tin tức hoặc Bài viết.
- Blog Layout: Điều chỉnh bố cục hiển thị chung của trang Blog.
- Blog Archive: Cấu hình khu vực lưu trữ danh sách bài viết theo chuyên mục hoặc thời gian.
- Blog Single Post: Tùy chỉnh giao diện cho từng bài viết chi tiết.
- Blog Featured Posts: Thiết lập các bài viết nổi bật hiển thị ở trang chủ hoặc khu vực chỉ định.
Tùy biến WooCommerce trong Flatsome
Khu vực WooCommerce trong Flatsome cung cấp một số tùy chọn cơ bản để chỉnh sửa giao diện bán hàng. Đây không phải toàn bộ các thiết lập của WooCommerce, mà chỉ là phần thường dùng trong quá trình xây dựng website ban đầu. Khi cần tối ưu sâu hơn cho bán hàng, bạn có thể thực hiện thêm các cấu hình nâng cao sau.
Để truy cập và tùy chỉnh, vào:
👉 Giao diện → Tùy biến → WooCommerce
Sau đó thực hiện các thiết lập theo hướng dẫn ở các bước bên dưới.
Trong mục WooCommerce, bạn có thể tùy chỉnh một số nội dung quan trọng sau:
- Product Catalog: Cấu hình cách hiển thị danh sách sản phẩm trong cửa hàng.
- Product Page: Tùy chỉnh giao diện trang chi tiết sản phẩm.
- My Account: Quản lý giao diện trang tài khoản người dùng.
- Payments Icon: Cài đặt biểu tượng và cách hiển thị phương thức thanh toán.
- Product Images: Thiết lập kích thước ảnh sản phẩm và ảnh thu nhỏ.
- Checkout: Tùy chỉnh giao diện trang thanh toán.
- Cart: Cấu hình trang giỏ hàng.
Footer trong Flatsome
Footer là khu vực chân trang, hiển thị ở cuối website và xuất hiện trên tất cả các trang theo mặc định. Phần này thường dùng để đặt thông tin bổ sung như liên hệ, menu phụ, bản quyền hoặc liên kết nhanh.
Để chỉnh sửa Footer trong Flatsome, truy cập theo đường dẫn:
👉 Giao diện → Tùy biến → Footer
Tại đây, bạn có thể tùy chỉnh bố cục và nội dung Footer theo nhu cầu sử dụng.
Theo thiết lập mặc định, Flatsome cung cấp sẵn một Footer với bố cục 3 cột sản phẩm. Kiểu hiển thị này hiện nay không còn phù hợp và ít được sử dụng.
Để tạo Footer đẹp và linh hoạt hơn không cần cài thêm plugin, bạn có thể dùng UX Block – tính năng có sẵn trong Flatsome. Công cụ này cho phép thiết kế Footer theo ý muốn và dễ dàng tùy chỉnh nội dung, bố cục hiển thị.
