Trang chủHướng dẫnThemeHướng dẫn tạo Trang với thiết kế có sẵn bằng Flatsome Studio

Hướng dẫn tạo Trang với thiết kế có sẵn bằng Flatsome Studio

Flatsome Studio là gì và tại sao nên dùng để tạo trang WordPress?

Flatsome là một trong những theme WordPress được cộng đồng sử dụng rộng rãi nhất, đặc biệt phù hợp với các website thương mại điện tử chạy WooCommerce. Bên cạnh công cụ kéo thả UX Builder trực quan, Flatsome còn tích hợp Flatsome Studio, một thư viện mẫu thiết kế có sẵn giúp bạn xây dựng trang web chuyên nghiệp chỉ trong vài bước đơn giản mà không cần biết lập trình. Nếu bạn đang tìm kiếm giao diện phù hợp cho dự án, hãy tham khảo kho theme WordPress để chọn theme tốt nhất cho nhu cầu của mình.

Tạo trang mới trong WordPress Dashboard

Bước 1: Đăng nhập vào Admin Dashboard (trang quản trị WordPress). Trong thanh menu bên trái, chọn mục Trang rồi nhấn Thêm trang mới để bắt đầu tạo trang trống.

Bước 2: Trang soạn thảo trống sẽ xuất hiện. Nhập tiêu đề cho trang, ví dụ Home Page. Sau khi đặt tên xong, nhấn nút Đăng để lưu trang và tiếp tục bước tiếp theo.

Mở UX Builder để chỉnh sửa trang Flatsome

Bước 3: Sau khi đăng trang, nhấn vào nút Edit with UX Builder để mở trình tạo trang trực quan của Flatsome ngay trên trang vừa tạo.

Ngoài cách trên, bạn cũng có thể vào Trang > Tất cả các trang, di chuột vào tên trang cần chỉnh sửa, rồi chọn Edit with UX Builder từ danh sách tùy chọn xuất hiện phía dưới.

Nhập mẫu thiết kế từ Flatsome Studio vào trang

Đây là bước cốt lõi của toàn bộ quy trình. Flatsome Studio cung cấp hàng chục mẫu trang hoàn chỉnh cho nhiều loại website khác nhau, từ trang chủ cửa hàng, trang giới thiệu cho đến landing page sản phẩm.

Bước 4: Sau khi UX Builder mở ra, nhấp vào nút Add elements (thêm phần tử) trong giao diện trình biên tập để mở bảng chọn phần tử.

Nhấn Add elements trong UX Builder Flatsome để mở bảng chọn phần tử

Bước 5: Trong bảng phần tử hiện ra, tìm và nhấn vào Flatsome Studio để mở thư viện mẫu thiết kế có sẵn.

Chọn Flatsome Studio trong UX Builder để truy cập thư viện mẫu thiết kế WordPress

Bước 6: Giao diện Flatsome Studio sẽ hiển thị toàn bộ các mẫu thiết kế được phân loại theo nhóm. Nhấn vào tab Full Page để lọc các mẫu trang hoàn chỉnh với đầy đủ bố cục từ đầu đến cuối trang.

Danh sách mẫu Full Page trong Flatsome Studio để chọn thiết kế trang hoàn chỉnh

Bước 7: Di chuyển chuột đến mẫu bạn muốn sử dụng. Khi khung xem trước xuất hiện, nhấn vào nút Import để nhập toàn bộ mẫu đó vào trang hiện tại.

Nhấn nút Import để nhập mẫu thiết kế từ Flatsome Studio vào trang WordPress

Bước 8: Sau khi nhập thành công, toàn bộ layout của mẫu sẽ xuất hiện trong UX Builder. Bạn có thể tùy chỉnh nội dung, hình ảnh và màu sắc thông qua các tùy chọn trên thanh công cụ ở phía trên bên trái. Nhấn nút Update khi hoàn tất để lưu lại thay đổi. Nếu gặp bất kỳ khó khăn nào trong quá trình thao tác, đội ngũ hỗ trợ kỹ thuật luôn sẵn sàng giải đáp.

Tùy chỉnh nội dung và nhấn Update sau khi nhập mẫu từ Flatsome Studio

Thiết lập trang chủ tĩnh trong cài đặt WordPress

Sau khi trang đã được tạo và nhập mẫu xong, bước cuối cùng là cấu hình WordPress để hiển thị trang này làm trang chủ chính thức của website.

Bước 9: Quay lại Admin Dashboard. Trong menu trái, chọn Cài đặt rồi nhấn vào mục Đọc (Reading Settings).

Bước 10: Tại trang cài đặt Đọc, chọn tùy chọn Một trang tĩnh (A static page). Trong mục Trang chủ, chọn trang Home Page vừa tạo. Cuối cùng, nhấn nút Lưu thay đổi để xác nhận cấu hình.

Kết quả website sau khi hoàn tất các bước với Flatsome Studio

Sau khi thực hiện đầy đủ tất cả các bước, website của bạn sẽ hiển thị giao diện đã nhập từ Flatsome Studio làm trang chủ. Kết quả hiển thị trên trình duyệt sẽ trông như minh họa bên dưới:

Kết quả giao diện trang chủ WordPress sau khi nhập thành công mẫu từ Flatsome Studio

Từ đây, bạn có thể tiếp tục tùy biến từng phần tử trên trang thông qua UX Builder để phù hợp với màu sắc thương hiệu và nội dung thực tế.

Câu hỏi thường gặp về Flatsome Studio

Flatsome Studio có miễn phí không?

Flatsome Studio là tính năng được tích hợp sẵn trong theme Flatsome (trả phí một lần, bao gồm cập nhật trọn đời). Sau khi mua và kích hoạt theme, bạn được truy cập toàn bộ thư viện mẫu trong Flatsome Studio mà không cần trả thêm bất kỳ chi phí nào.

Flatsome Studio có bao nhiêu mẫu thiết kế?

Flatsome Studio cung cấp hàng chục mẫu thiết kế được phân loại theo nhiều nhóm, bao gồm mẫu trang đầy đủ (Full Page), mẫu từng khu vực (Sections), banner, header và footer. Thư viện này liên tục được nhóm phát triển cập nhật thêm mẫu mới theo thời gian.

Có thể chỉnh sửa mẫu sau khi nhập từ Flatsome Studio không?

Hoàn toàn có thể. Sau khi nhập mẫu vào trang, toàn bộ nội dung, hình ảnh, màu sắc, font chữ và bố cục đều có thể chỉnh sửa linh hoạt thông qua UX Builder. Bạn không cần viết thêm bất kỳ dòng code nào.

UX Builder của Flatsome hoạt động như thế nào?

UX Builder là công cụ kéo thả trực quan được tích hợp trong theme Flatsome. Nó cho phép bạn thêm, di chuyển, xóa và chỉnh sửa từng phần tử trên trang theo thời gian thực, kết quả hiển thị ngay lập tức trên màn hình mà không cần tải lại trang.

Flatsome Studio có tương thích với WooCommerce không?

Có. Flatsome được thiết kế đặc biệt để hoạt động tối ưu cùng WooCommerce. Flatsome Studio cũng cung cấp nhiều mẫu trang dành riêng cho cửa hàng trực tuyến, giúp bạn nhanh chóng xây dựng website bán hàng chuyên nghiệp mà không cần thuê lập trình viên.

Bài viết mới

spot_img

Có thể bạn quan tâm

spot_img