Tổng quan
Dựng site demo Flatsome từ bản Duplicator thường nhanh ở phần cài đặt, nhưng dễ mất thời gian ở phần dọn giao diện. Sau khi import, site có thể vẫn hiện đúng theme, đúng màu, đúng bố cục cơ bản, nhưng lại phát sinh các lỗi nhỏ làm demo mất chuyên nghiệp: logo bị thay bằng ảnh cũ, topbar xuất hiện ảnh nhỏ sai vị trí, menu bấm vào trang rỗng, ảnh hero kéo méo layout, sản phẩm không có ảnh hoặc menu dọc biến mất vì plugin ở source không tồn tại trên staging.
Quy trình dưới đây dùng WEBO MCP để biến một bản Duplicator thành site demo Flatsome sạch hơn. Cách làm phù hợp cho staging cần trình bày nhanh với khách, đặc biệt khi mục tiêu không phải migrate toàn bộ dữ liệu thật mà là dựng một bản demo có giao diện ổn, nội dung đủ xem và các đường dẫn chính đều hoạt động.
Bài toán thực tế
Flatsome lưu nhiều cấu hình trong theme option, vì vậy import/export giao diện thường giữ được phần khung. Tuy nhiên một site Flatsome hoàn chỉnh không chỉ là theme option. Header và footer có thể nằm trong UX Block. Trang chủ có thể là content chứa shortcode UX Builder. Menu lại phụ thuộc vào nav menu ID. Ảnh phụ thuộc vào media ID. Khi chuyển sang target, các ID này không còn giống source, nên frontend có thể hiển thị sai dù import báo thành công.
Với demo Azfloor, vấn đề nổi bật là header có ảnh nhỏ làm lỗi giao diện, logo demo chưa đúng brand, và menu dọc từng phụ thuộc vào plugin không có trên target. Cách xử lý là thay logo bằng logo Webo, sửa UX Block header để bỏ ảnh phụ, dùng menu dọc mặc định của Flatsome, rồi tạo lại content demo đủ để khách bấm thử.
Chuẩn bị trước khi làm
Target staging nên có WordPress, WooCommerce, Flatsome, Flatsome Child và WEBO MCP. Nếu muốn chuyển giao diện Flatsome nhanh, cài thêm addon webo-mcp-flatsome để có tool export/import setting. Source có thể là site lab đã bung từ Duplicator hoặc site đang chạy ổn để lấy option và tham chiếu layout.
Nên chuẩn bị một logo demo và một nhóm ảnh minh họa đúng ngành. Đừng ngại dùng ảnh công khai chất lượng tốt cho demo, miễn là upload lại vào media library của target. Việc này giúp tránh lỗi media ID cũ và làm giao diện nhìn thật hơn ngay từ lần mở đầu tiên.
1. Verify MCP trước khi thao tác
Luôn bắt đầu bằng initialize và tools/list. Nếu router không trả tool cần thiết, đừng chạy import hàng loạt. Tối thiểu nên có tool để list post, create/update post, upload media, làm việc với menu và nếu có thể thì nhóm tool Flatsome. Sau khi thấy tool list ổn, mới dùng tools/call cho từng bước.
Verify-first giúp tránh hai lỗi thường gặp: tưởng rằng MCP đã hoạt động nhưng thực ra thiếu quyền, hoặc chạy nhầm endpoint khiến nội dung được tạo ở site khác. Với nhiều site staging, việc ghi rõ endpoint và auth env var là bắt buộc.
2. Import/export giao diện Flatsome
Backup giao diện Flatsome nên đi bằng import/export native hoặc addon MCP cho Flatsome. Đây là cách nhanh nhất để giữ màu sắc, header layout, catalog setting, button style và các option chung. Tuy nhiên sau import phải rà lại các key có ID nội bộ như site_logo, site_logo_dark, site_icon, nav_menu_locations, header block và footer block.
Nếu import xong mà giao diện chưa giống, đừng vội viết CSS mới. Hãy kiểm tra content và ID trước. Phần lớn lỗi nằm ở dữ liệu target chưa được remap, không phải do Flatsome thiếu khả năng dựng layout.
3. Sửa logo và topbar
Logo nên được upload mới vào target rồi set lại bằng media ID của target. Với site demo nội bộ, dùng logo Webo từ webo.vn là lựa chọn gọn và nhất quán. Sau khi set logo, kiểm tra cả logo light/dark và chiều rộng logo để header không bị co kéo.
Nếu topbar xuất hiện một ảnh nhỏ sai chỗ, hãy mở UX Block header. Nhiều bản demo để lại image shortcode hoặc featured box trỏ về media ID cũ. Cách sửa an toàn là xóa ảnh phụ đó, giữ lại search, hotline và cart. Khi cần ảnh trang trí, hãy upload ảnh mới và đặt tỉ lệ rõ ràng thay vì tận dụng ID từ source.
4. Rebuild menu thành liên kết thật
Demo sẽ mất điểm nếu menu bấm vào toàn trang rỗng. Hãy tạo trước các page tối thiểu: Trang chủ, Giới thiệu, Sản phẩm, Dự án, Tư vấn và Liên hệ. Sau đó rebuild menu bằng page object thật, gán lại primary, mobile, topbar, vertical và footer nếu theme đang dùng các location này.
Với site bán hàng, nên tạo thêm vài trang danh mục sản phẩm demo. Nội dung không cần dài nhưng phải có ảnh, mô tả ngắn và CTA. Mục tiêu là người xem hiểu ngay site đang bán gì và có thể đi qua luồng demo cơ bản.
5. Menu dọc Flatsome có cần plugin riêng không?
Nếu chỉ cần một menu dọc tĩnh ở trang chủ, không cần viết plugin riêng. Flatsome mặc định làm được bằng UX Builder hoặc shortcode ux_menu, ux_menu_title và ux_menu_link. Cách này nhẹ, dễ chỉnh trong content và không tạo thêm phụ thuộc cho staging.
Plugin riêng chỉ nên viết khi menu cần tự động lấy taxonomy WooCommerce, hiển thị icon theo từng cấp, cache HTML, áp dụng phân quyền, hoặc đồng bộ cùng một logic cho nhiều site. Với demo nhanh, dùng mặc định Flatsome là phương án sạch hơn.
6. Chuẩn hóa hình ảnh demo
Ảnh là nguyên nhân phổ biến làm vỡ bố cục. Không dùng lại media ID của source. Hãy upload ảnh từ URL công khai hoặc kho ảnh đã chuẩn hóa vào target, lấy media ID mới rồi cập nhật page và product. Với ảnh hero, đặt background phù hợp. Với ảnh card, dùng tỉ lệ ổn định để một ảnh quá cao không kéo hỏng cả grid.
Riêng lưới ảnh Flatsome, nên đặt height cho ux_image, ví dụ 66%, để theme tạo image-cover cùng tỉ lệ. Cách này xử lý tốt ảnh dọc trong grid ba cột mà không cần crop thủ công file ảnh.
Sản phẩm WooCommerce nên có ảnh đại diện rõ ràng. Nếu tool cập nhật product yêu cầu mảng ID, truyền mảng integer ID của target. Không truyền object, HTML image hoặc URL trực tiếp nếu schema không cho phép.
7. Tạo nội dung demo vừa đủ
Một site demo tốt không cần hàng trăm sản phẩm. Chỉ cần vài sản phẩm đại diện nhiều nhóm, vài trang danh mục, một số bài tư vấn và hình ảnh đúng ngành. Với demo vật liệu sàn, có thể dùng sàn nhựa giả gỗ, sàn thể thao, thảm văn phòng, sàn vinyl cuộn và vinyl kháng khuẩn.
Mỗi trang nên có một thông điệp rõ: sản phẩm dành cho ai, lợi ích chính là gì, ảnh minh họa nào giúp khách hình dung, và CTA dẫn về sản phẩm hoặc liên hệ. Nội dung ngắn nhưng có chủ đích sẽ tốt hơn một site nhiều trang nhưng toàn lorem ipsum.
8. Checklist nghiệm thu
Trước khi gửi link demo, kiểm tra các URL chính đều trả HTTP 200. HTML frontend không còn shortcode thô. Logo đúng brand demo. Header/topbar không còn ảnh placeholder. Menu chính, menu dọc, footer đều trỏ về trang có nội dung. Sản phẩm mẫu có ảnh đại diện và mô tả ngắn. Hero, grid sản phẩm và card dự án không bị ảnh kéo méo layout.
Nếu có SEO tool qua MCP, chạy phân tích nhanh để xem title, meta description, heading và content có lỗi lớn không. Với demo nội bộ, SEO không cần hoàn hảo ngay, nhưng title rõ, meta có mô tả và heading mạch lạc sẽ giúp bài hướng dẫn hoặc trang demo dễ dùng lại hơn.
Kết luận
Cách nhanh nhất để dựng site demo Flatsome sạch là tách việc thành hai phần. Phần giao diện theme option dùng import/export Flatsome. Phần nội dung, media, menu và UX Block dùng WEBO MCP để làm sạch và verify. Làm đúng thứ tự này giúp site giữ được giao diện của Flatsome nhưng không còn phụ thuộc vào dữ liệu cũ của bản Duplicator.
Với các demo sau, chỉ cần lặp lại checklist: verify MCP, import option, remap logo, rebuild menu, upload ảnh mới, tạo vài sản phẩm minh họa, kiểm tra shortcode thô và nghiệm thu HTTP. Đây là khung đủ nhanh cho demo, nhưng vẫn đủ sạch để chuyển tiếp thành dự án thật nếu khách duyệt.
