Flatsome là một trong những theme bán chạy nhất trên Themeforest, được đánh giá cao về khả năng tùy biến và soạn thảo dễ dàng. Nếu bạn đang sử dụng Flatsome nhưng chưa biết cách tùy chỉnh, bài viết này sẽ hướng dẫn bạn chi tiết từ A-Z cách custom theme Flatsome WordPress.

1. Tùy Chỉnh Custom Theme Flatsome Options và Widget

1.1. Theme Options

Bước 1: Truy cập Flatsome > Theme Options trên thanh menu WordPress hoặc vào Appearance > Customize.

Bước 2: Chỉnh sửa các thành phần sau:

  • Header: Top bar, main menu, logo, giỏ hàng, banner…
  • Footer: Cột nội dung, thông tin bản quyền…
  • Shop: Bố cục trang danh mục sản phẩm, chi tiết sản phẩm…
  • Blog: Cấu hình layout, ngày đăng, hiển thị bài viết…
  • Style: Màu sắc, font chữ, tùy biến CSS…

1.2. Widget (Sidebar)

Widget giúp bạn dễ dàng thêm nội dung vào sidebar hoặc footer: Bước 1: Truy cập Appearance > Widgets. Bước 2: Kéo-thả và chỉnh sửa các widget theo ý muốn.

Huong Dan Custom Theme Flatsome WordPress
Widgets

2. Tùy Chỉnh Style (Màu Sắc, CSS)

2.1. Thay Đổi Màu Sắc

Bước 1: Vào Flatsome > Theme Options > Style > Colors. Bước 2: Chọn màu sắc cho từng thành phần.

Huong Dan Custom Theme Flatsome WordPress 2

2.2. Custom CSS

Nếu bạn có kiến thức CSS, có thể thêm CSS tùy chỉnh:

  • Cách 1: Vào Flatsome > Theme Options > Custom CSS.
  • Cách 2: Sửa trực tiếp file style.css trong theme.

3. Tùy Chỉnh Menu

Bước 1: Truy cập Appearance > Menu. Bước 2: Chọn menu cần chỉnh sửa và thêm/sửa/xóa các liên kết.

 

4. Tùy Chỉnh Header và Footer

4.1. Header

Header Flatsome gồm Top bar, Header Main, Header Bottom. Bước 1: Vào Flatsome > Theme Options > Header. Bước 2: Chỉnh sửa menu, logo, banner, hotline… Bước 3: Nếu muốn tùy chỉnh sâu hơn, vào UX Blocks để sửa Header bằng UX Builder.

Header
Header

4.2. Footer

Flatsome hỗ trợ 2 kiểu Footer: Widget và Blocks.

  • Widget: Vào Appearance > Widgets > Footer 1, Footer 2.
  • Blocks: Vào UX Blocks, tìm block Footer và chỉnh sửa bằng UX Builder.

5. Tùy Chỉnh Trang Chủ

Bước 1: Truy cập Trang chủ > Edit with UX Builder. Bước 2: Chỉnh sửa nội dung bằng UX Builder.

6. Chèn JavaScript (Google Analytics, Facebook Chat…)

Bước 1: Vào Flatsome > Advanced > Global Settings. Bước 2: Chèn mã vào ô Header Script/ Footer Script.

7. Cấu Hình API Cho Google Map

Bước 1: Lấy API Key từ Google Cloud Platform. Bước 2: Truy cập Flatsome > Advanced > Google APIs và nhập API Key.

8. Chỉnh Sửa Button Liên Hệ (Hotline, Zalo…)

Bước 1: Vào Flatsome > Advanced > Global Settings. Bước 2: Thêm hoặc chỉnh sửa mã HTML của button liên hệ.

9. Tạo Và Sử Dụng Blocks Trong Flatsome

Blocks giúp tái sử dụng nội dung trên nhiều trang. Bước 1: Truy cập UX Blocks. Bước 2: Chọn Add New hoặc chỉnh sửa block có sẵn bằng Edit with UX Builder.

10. Tạo Element Mới Cho Flatsome

Bước 1: Mở file functions.php của theme. Bước 2: Thêm đoạn code để tạo element mới.

function custom_flatsome_element() {
    add_ux_builder_shortcode('custom_element', array(
        'name' => 'Custom Element',
        'category' => 'Content',
        'options' => array(
            'text' => array(
                'type' => 'textfield',
                'heading' => 'Nội dung',
                'default' => 'Xin chào!',
            ),
        ),
    ));
}
add_action('ux_builder_setup', 'custom_flatsome_element');

Bước 3: Lưu file và kiểm tra trong UX Builder.

Kết Luận

Flatsome là một theme mạnh mẽ với khả năng tùy chỉnh cao. Qua hướng dẫn này, bạn đã nắm được cách custom theme Flatsome từ A-Z. Chúc bạn thành công!