Category

Search
/

Table of Contents

No table of contents
Join CloudFly's Telegram channel to receive more offers and never miss any promotions from CloudFly

Hướng Dẫn Cách Custom Theme Flatsome WordPress

Flatsome là một trong những theme WordPress phổ biến nhất dành cho các website bán hàng và doanh nghiệp nhờ giao diện đẹp, tối ưu SEO và khả năng tùy chỉnh mạnh mẽ. Tuy nhiên, để tận dụng tối đa tiềm năng của theme này, việc custom (tùy chỉnh) là điều cần thiết. Bài viết dưới đây của CloudFly sẽ hướng dẫn bạn cách custom theme Flatsome WordPress một cách chi tiết và hiệu quả. Hãy cùng bắt đầu để biến website của bạn trở nên chuyên nghiệp và độc đáo hơn!

hướng dẫn cách custom theme flatsome wordpress

1. Tùy chỉnh trong Theme Options và Widget trên Flatsome

Flatsome cung cấp các tính năng tùy chỉnh linh hoạt thông qua Theme Options và Widget. Nhờ đó giúp bạn dễ dàng cấu hình giao diện website theo nhu cầu.

1.1. Tùy chỉnh trong Theme Options

Bạn có thể thực hiện các bước sau để tùy chỉnh:

Bước 1: Đầu tiên, bạn truy cập vào mục Flatsome và chọn Theme Options ở trên cùng màn hình giao diện. Hoặc bạn có thể vào Appearance và chọn Customize.

hướng dẫn cách custom theme flatsome wordpress 1

Bước 2: Trong Theme Options, bạn có thể chỉnh sửa và cấu hình các phần sau:

  • Header (Đầu trang): Tùy chỉnh thanh trên cùng, menu chính, menu cố định, logo, số điện thoại, giỏ hàng, banner, v.v.
  • Footer (Chân trang): Thiết lập các cột cuối trang, khối nội dung, thông tin bản quyền, v.v.
  • Shop: Tùy chỉnh trang sản phẩm, bố cục trang danh mục sản phẩm, và các thông tin khác.
  • Blog: Cập nhật ngày giờ, bố cục bài viết, và các tùy chỉnh liên quan.
  • Style: Tùy biến màu sắc, CSS, và phông chữ.

hướng dẫn cách custom theme flatsome wordpress 2

1.2. Tùy chỉnh Widget (Sidebar)

Widget (Sidebar) là một thành phần cho phép bạn thêm nội dung vào các khu vực như footer hoặc sidebar. Để tùy chỉnh Widget, bạn thực hiện như sau:

Bước 1: Bạn vào mục Appearance và chọn Widget.

hướng dẫn cách custom theme flatsome wordpress 3

Bước 2: Màn hình sẽ hiển thị danh sách các Widget khả dụng. Bạn chỉ cần kéo thả hoặc điều chỉnh widget theo ý muốn để hoàn thiện giao diện.

2. Tùy chỉnh Style trong Flatsome

Flatsome cho phép bạn dễ dàng tùy chỉnh màu sắc giao diện. Bao gồm việc thay đổi màu chủ đạo, màu văn bản, hay màu đường liên kết. Trong trường hợp các tùy chọn màu mặc định không đáp ứng được nhu cầu, bạn có thể sử dụng tính năng Custom CSS để tự định nghĩa màu sắc theo ý muốn.

Lưu ý: Việc tùy chỉnh bằng CSS yêu cầu bạn cần có kiến thức cơ bản về lập trình CSS.

2.1. Tùy chỉnh màu sắc trong Theme Options

Để tùy chỉnh màu sắc qua menu Theme Options, bạn thực hiện theo các bước sau:

Bước 1: Bạn vào Flatsome, chọn Theme Options và nhấn vào biểu tượng tam giác nhỏ để mở menu con.

Bước 2: Tại menu con, bạn chọn mục Style và nhấn Colors.

hướng dẫn cách custom theme flatsome wordpress 4

Bước 3: Trong giao diện hiện ra, bạn có thể thay đổi màu chủ đạo hoặc tùy chỉnh các chi tiết khác theo sở thích.

2.2. Tùy chỉnh màu nền của Header

Nếu muốn thay đổi màu nền cho khu vực Header, bạn làm theo các bước sau:

Bước 1: Đầu tiên, bạn truy cập vào Flatsome, chọn Theme Options, sau đó nhấn Headers.

hướng dẫn cách custom theme flatsome wordpress 5

Bước 2: Trong menu con của Headers, bạn tùy chỉnh các yếu tố như:

  • Top Bar
  • Header Main
  • Header Bottom

Với các thao tác này, bạn có thể linh hoạt thay đổi và cá nhân hóa giao diện để tạo nên một website nổi bật và phù hợp với phong cách riêng của mình!

3. Tùy chỉnh CSS trong Flatsome

CSS (Cascading Style Sheet) là ngôn ngữ được sử dụng để định hình và tạo phong cách cho giao diện website được xây dựng trên nền tảng HTML. Với CSS, bạn có thể tùy chỉnh màu sắc, kiểu dáng, và nhiều yếu tố khác trên giao diện website. Đặc biệt là khi theme mặc định không hỗ trợ đầy đủ các tính năng tùy chỉnh.

Nếu bạn có kiến thức cơ bản về lập trình CSS và muốn thực hiện những tùy chỉnh nâng cao không có sẵn trong theme, bạn có thể dễ dàng thêm mã CSS tùy chỉnh. Bằng cách truy cập vào Flatsome, chọn Theme Options, nhấn vào mục Custom CSS. Hoặc bạn có thể truy cập vào Appearance, chọn Edit, tìm và chỉnh sửa file style.css của theme.

4. Tùy chỉnh Menu trong Flatsome

Menu là một tập hợp các liên kết được tổ chức để giúp người dùng dễ dàng truy cập vào các thành phần trên website WordPress. Khi thiết kế website, bạn có thể chỉnh sửa menu để cân đối giao diện và mang lại trải nghiệm thân thiện cho người dùng. 

Bước 1: Bạn truy cập vào Appearance và chọn Menu.

Bước 2: Trên giao diện quản lý menu, bạn chọn loại menu bạn muốn chỉnh sửa. Ví dụ: menu danh mục sản phẩm, menu chính, hoặc menu trên top bar. 

Bước 3: Sau đó, bạn có thể thêm, xóa hoặc sắp xếp lại các liên kết, thay đổi văn bản hiển thị hoặc URL theo ý muốn.

5. Tùy chỉnh Header 

Tùy chỉnh Header (đầu trang) là một tính năng hữu ích cho phép người dùng dễ dàng thay đổi các nội dung như menu, logo, banner, hotline, hoặc số điện thoại trên website. Để thực hiện tùy chỉnh Header trong theme Flatsome, bạn truy cập vào Flatsome, chọn Theme Options, sau đó nhấn vào Header. Tại đây, bạn có thể chỉnh sửa từng phần theo nhu cầu, như thay đổi logo, điều chỉnh menu, hoặc thêm thông tin liên hệ.

hướng dẫn cách custom theme flatsome wordpress 6

Ngoài ra, theme Flatsome cũng hỗ trợ tùy chỉnh riêng cho giao diện Header trên thiết bị di động, giúp tối ưu hóa trải nghiệm người dùng. Bạn có thể truy cập vào Mobile Menu Options trong Theme Options để điều chỉnh bố cục, màu sắc, và nội dung hiển thị trên điện thoại.

6. Tùy chỉnh Footer

Footer (chân trang) là phần nằm ở cuối website, thường được sử dụng để hiển thị các thông tin quan trọng. Chẳng hạn như liên kết điều khoản sử dụng, chính sách bảo mật, thông tin liên hệ, hoặc bản quyền. Với theme Flatsome, bạn hoàn toàn có thể tùy chỉnh Footer để phù hợp với nhu cầu sử dụng theo các bước sau:

  • Tùy chỉnh Footer bằng Widget:

Bước 1: Bạn truy cập vào Appearance và chọn Widget.

Bước 2: Tiếp theo, bạn tìm đến các tab như Footer 1 hoặc Footer 2 để chỉnh sửa nội dung trong các cột của Footer theo ý muốn.

  • Tùy chỉnh Footer bằng Blocks:

Bước 1: Bạn truy cập vào UX Blocks trong trang quản trị WordPress và tìm block chứa chữ Footer.

Bước 2: Tiếp theo, bạn nhấn vào Edit with UX Builder để chỉnh sửa nội dung theo nhu cầu.

hướng dẫn cách custom theme flatsome wordpress 7

Ngoài ra, bạn có thể di chuyển chuột vào khu vực Footer trên trang chủ và chọn Edit Block. Rồi nhấn vào Edit with UX Builder để tùy chỉnh nhanh.

  • Chỉnh sửa thông tin bản quyền (Copyright):

Phần thông tin bản quyền nằm cuối cùng trong Footer, thường hiển thị nội dung như “© Bản quyền thuộc về…” hoặc “Thiết kế bởi…”. Để chỉnh sửa, bạn thực hiện như sau:

Bước 1: Bạn truy cập vào Flatsome, chọn Theme Options.

Bước 2: Tiếp theo, bạn nhấn vào Footer và kéo xuống mục Absolute Footer để thực hiện các thay đổi.

>>> Xem thêm:

Hy vọng bài viết trên trên đã giúp bạn hiểu rõ hơn về hướng dẫn cách custom theme Flatsome WordPress. Nếu còn thắc mắc hay muốn đăng ký Cloud Hosting tại CloudFly, hãy liên hệ ngay với chúng tôi qua thông tin bên dưới để được tư vấn và hỗ trợ chi tiết. Đội ngũ kỹ thuật có chuyên môn cao luôn sẵn sàng 24/7 để giải quyết mọi vấn đề của bạn.

THÔNG TIN LIÊN HỆ:

  • Group săn sale: https://t.me/cloudflyvn


 

Share

Featured Articles

Join CloudFly's Telegram channel to receive more offers and never miss any promotions from CloudFly