Flatsome là một trong những theme WordPress phổ biến và mạnh mẽ nhất hiện nay nhờ vào bộ kéo thả UX Builder cực kỳ trực quan. Với Flatsome, việc chỉnh sửa các trang như Trang chủ, Trang giới thiệu, hay Trang dịch vụ trở nên dễ dàng hơn bao giờ hết mà không cần biết một dòng code nào.
Bài viết này sẽ hướng dẫn bạn từng bước chi tiết cách quản trị, tự thay đổi văn bản, hình ảnh, banner và cách xử lý khi gặp sự cố trong quá trình chỉnh sửa.
1. Lưu ý quan trọng trước khi bắt đầu
Trước khi đi vào chi tiết, bạn cần phân biệt rõ hai khái niệm trên website:
- Trang (Pages): Là các trang cố định như Trang chủ, Giới thiệu, Dịch vụ, Liên hệ… Đây là những trang chúng ta sẽ sử dụng công cụ UX Builder để chỉnh sửa trong bài viết này.
- Bài viết (Blog/Tin tức) & Sản phẩm (Products): Những mục này đã có khung giao diện mẫu sẵn, bạn chỉ cần nhập liệu theo biểu mẫu và không chỉnh sửa bằng UX Builder theo cách này.
2. Cách truy cập vào giao diện chỉnh sửa UX Builder
Để bắt đầu chỉnh sửa, bạn thực hiện theo các bước sau:
Bước 1: Đăng nhập vào đường dẫn quản trị WordPress (URL và tài khoản sẽ do bên bàn giao website cung cấp).
Bước 2: Sau khi đăng nhập thành công, bạn quay trở lại giao diện xem website (Frontend). Lúc này, ở phía trên cùng của màn hình sẽ xuất hiện một thanh công cụ màu đen dành riêng cho Admin (người truy cập bình thường sẽ không thấy thanh này).
Bước 3: Di chuyển đến trang bạn muốn chỉnh sửa (Ví dụ: Trang chủ hoặc Trang dịch vụ).
Bước 4: Rê chuột vào mục Sửa trang (Edit Page) trên thanh công cụ chọn UX Builder. Giao diện chỉnh sửa trực quan của Flatsome sẽ được mở ra.
3. Hướng dẫn thay đổi nội dung chữ (Text/Văn bản)
Giao diện UX Builder cho phép bạn thấy thay đổi ngay lập tức khi chỉnh sửa. Để sửa một đoạn văn bản hoặc tiêu đề:
- Cách 1 (Khuyên dùng cho người mới): Click đúp (Double-click) trực tiếp vào đoạn chữ muốn sửa trên màn hình trực quan. Một bảng soạn thảo văn bản nhỏ sẽ hiện ra. Bạn chỉ cần bôi đen và gõ nội dung mới vào.
- Cách 2 (Sửa qua thanh công cụ bên trái): Click vào đoạn văn bản đó một lần, nhìn sang cột quản lý bên tay trái. Bạn có thể sửa trực tiếp trong khung Text tại đây.
Mẹo nhỏ bảo toàn giao diện: Đối với những đoạn văn bản có chứa ký tự lạ hoặc có định dạng giá tiền (ví dụ: 3.499.000đ), hãy cẩn thận gõ đè lên các con số hiển thị, tránh xóa nhầm các đoạn code định dạng ẩn đi kèm để web không bị lỗi font hoặc mất định dạng.
4. Hướng dẫn thay đổi hình ảnh, Banner và Icon
Hình ảnh và Banner là yếu tố cốt lõi tạo nên vẻ đẹp của website. Để thay đổi bất kỳ hình ảnh nào:
Bước 1: Click vào hình ảnh, banner hoặc icon cần thay thế.
Bước 2: Nhìn sang thanh quản lý bên tay trái, tìm đến mục hình ảnh hiện tại và nhấn nút Change Media (hoặc chọn ảnh).
Bước 3: Bạn có thể chọn ảnh có sẵn trong thư viện Media hoặc bấm Tải tập tin lên (Upload Files) để chọn ảnh từ máy tính của bạn.
Bước 4: Nhấn nút màu xanh Use this image ở góc dưới cùng bên phải để áp dụng.
Lưu ý: Bạn có thể kéo to/nhỏ kích thước hình ảnh bằng thanh gạt ở cột bên trái, tuy nhiên nên hạn chế chỉnh sửa phần này nếu đơn vị thiết kế web đã tối ưu sẵn kích thước chuẩn cho bạn.
5. Cách chèn liên kết (Link) vào hình ảnh hoặc Banner
Nếu bạn muốn khách hàng click vào hình ảnh/banner và tự động chuyển hướng sang một trang khác (ví dụ: bấm vào banner khuyến mãi nhảy sang trang sản phẩm):
- Click vào hình ảnh đó.
- Cuộn thanh công cụ bên tay trái xuống dưới cùng, tìm mục Link (Liên kết).
- Dán toàn bộ đường dẫn URL của trang đích vào ô này (Ví dụ: https://tenmien.com/trang-dich-vu).
- Cấu hình mục Target (Mục tiêu):
- Same Window: Trang mới sẽ tải ngay trên tab hiện tại.
- New Window: Trang mới sẽ được mở ở một tab hoàn toàn mới (thích hợp khi bạn muốn giữ chân khách hàng ở lại trang cũ).
6. Sửa đổi mục Hỏi – Đáp (Accordion/FAQ)
Đối với các khối nội dung dạng danh sách câu hỏi thường gặp (thường mở ra/đóng vào khi click):
- Click vào khối FAQ trên màn hình.
- Cột bên trái sẽ hiển thị danh sách các câu hỏi. Bạn bấm mở rộng từng mục ra.
- Thay đổi tiêu đề câu hỏi ở phần Title và nhập câu trả lời ở phần nội dung văn bản bên trong.
7. Tuyệt chiêu xử lý lỗi: Đừng hoảng loạn khi lỡ tay xóa nhầm!
Trong quá trình chỉnh sửa, nếu bạn lỡ tay xóa mất một khối nội dung, làm lệch giao diện hoặc bấm nhầm nút khiến website trông “lộn xộn”, tuyệt đối không tắt tab trình duyệt và hãy bình tĩnh xử lý bằng cách:
- Nhấn tổ hợp phím Ctrl + Z trên bàn phím.
- Mỗi lần nhấn Ctrl + Z, hệ thống sẽ lùi lại 1 bước thao tác trước đó. Bạn có thể nhấn nhiều lần (10 lần, thậm chí 100 lần) cho đến khi giao diện quay trở lại trạng thái đẹp đẽ ban đầu.
8. Lưu lại thành quả và tối ưu hóa Website
Sau khi đã hoàn thành tất cả các chỉnh sửa và cảm thấy hài lòng:
- Nhấn nút Apply ở dưới cùng cột bên trái.
- Nhấn nút Update (Màu xanh) để chính thức áp dụng thay đổi lên website. Lúc này bạn đã có thể tắt giao diện UX Builder.
Mẹo tăng tốc website: Khoảng 2 – 3 ngày một lần, trong trang quản trị, bạn nên tìm đến công cụ tối ưu (được cài đặt sẵn trên thanh công cụ của bạn) và bấm nút Tối ưu hóa hình ảnh / Xóa tất cả bộ nhớ đệm (Clear All Cache). Việc này sẽ giúp giải phóng dung lượng và tăng tốc độ tải trang cho khách hàng một cách đáng kể.
Nếu bạn thích thay đổi không gian làm việc của trang quản trị, bạn có thể bấm vào biểu tượng Mặt trời/Mặt trăng ở góc trên để chuyển đổi linh hoạt giữa giao diện sáng (White mode) và tối (Dark mode) cho đỡ mỏi mắt nhé!
9. Xem Video Hướng Dẫn Chi Tiết Trực Quan
Nếu bạn vẫn còn bỡ ngỡ hoặc muốn nhìn thấy từng thao tác click chuột thực tế trên màn hình, hãy dành ít phút để xem video hướng dẫn vô cùng trực quan dưới đây từ kênh QWeb Design. Video sẽ giúp bạn nắm bắt các thao tác từ việc đăng nhập, click chọn khối, thay đổi chữ, chèn hình ảnh cho đến cách “cứu nguy” bằng phím tắt Ctrl+Z cực kỳ dễ hiểu.
📺 Xem ngay video hướng dẫn tại đây: Hướng dẫn thay đổi nội dung + hình ảnh trên các trang của website thuộc theme CMS Flatsome WordPress.
Chúc các bạn làm chủ được website Flatsome của mình thành công! Nếu gặp khó khăn trong quá trình thực hiện, hãy liên hệ ngay với kỹ thuật viên để được hỗ trợ qua UltraView hoặc Google Meet.
