Hướng Dẫn Thiết Kế Website Sử Dụng Theme Flatsome

Chắc chắn đối với những website kinh doanh trên nền tảng online thì cụm từ Theme Flatsome đã không còn xa lạ. Tuy nhiên, có bao giờ bạn thắc mắc rằng Flatsome là gì và những ueu điểm nổi trội mà nó mang lại như thế nào hay không? Trong bài viết sau đây tôi sẽ hướng dẫn các bạn thiết kế website sử dụng Theme Flatsome!

1. Flatsome là gì? Vì sao nên dùng flatsome khi thiết kế website thương mại điện tử?

Flatsome là một theme WordPress. Được thiết kế đặc biệt cho việc xây dựng các trang web thương mại điện tử. Nó cũng nổi tiếng với giao diện đẹp mắt, linh hoạt và dễ sử dụng. Theme Flatsome cung cấp nhiều tính năng và công cụ hữu ích cho việc tạo ra các trang web bán hàng chuyên nghiệp.

Hướng dẫn thiết kế website sử dụng theme flatsome
Hướng dẫn thiết kế website sử dụng theme flatsome

Có nhiều lý do nên sử dụng Theme Flatsome khi thiết kế website. Sau đây là một số lợi ích chính khi sử dụng Theme Flatsome.

  • Giao diện đẹp mắt và chuyên nghiệp. Flatsome cung cấp các bố cục và giao diện thiết kế tinh tế, hiện đại và hấp dẫn. Với sự tập trung vào trải nghiệm người dùng, theme này giúp tạo ra trang web bán hàng đẹp mắt và chuyên nghiệp mà không cần có kiến thức lập trình phức tạp.
  • Tích hợp sẵn WooCommerce. Flatsome tích hợp hoàn hảo với WooCommerce. Một trong những plugin quản lý của hàng trực tuyến phổ biến nhất cho WordPress. Điều này cho phép bạn dễ dàng tạo, quản lý và bán sản phẩm trực tuyến một cách linh hoạt và tiện lợi.
  • Linh hoạt và tùy chỉnh: Flatsome cung cấp một loạt các tùy chọn tùy chỉnh cho phép bạn điều chỉnh giao diện, màu sắc, font chữ, hiệu ứng và nhiều hơn nữa. Bạn có thể tạo ra các trang web độc đáo và cá nhân hóa hoàn toàn phù hợp với thương hiệu và ý tưởng thiết kế của bạn.
  • Giao diện responsive: Flatsome tự động điều chỉnh và tương thích trên mọi thiết bị, từ máy tính để bàn cho đến điện thoại di động và máy tính bảng. Điều này đảm bảo trang web của bạn sẽ hiển thị tốt trên mọi kích thước màn hình, cung cấp trải nghiệm người dùng mượt mà và chuyên nghiệp.
  • Tính tương thích và bảo trì: Flatsome là một theme phiỉ biến và được phát triển liên tục. Điều này đảm bảo tính tương thích với phiên bản WordPress mới nhất và các plugin quan trong khác, cũng như việc nhận được cập nhật thường xuyên để giữ trang web của bạn an toàn và tối ưu.

Với những lợi ích trên, Flatsome là một lựa chọn mạnh mẽ để tạo ra một trang web bán hàng chuyên nghiệp và hấp dẫn mà không yêu cầu kiến thức kỹ thuật sâu và giúp tiết kiệm thời gian.

2. Hướng dẫn cài đặt website wordpress với cpanel hosting

Để chạy được website thì bạn cần mua tên miền và hosting. Bạn có thể mua domain tùy vào sở thích cũng như mục đích sử dụng của bạn.

Hướng dẫn cài đặt website wordpress với cpanel hosting
Hướng dẫn cài đặt website wordpress với cpanel hosting

Sau khi đã có tên miền và hosting, chúng ta tiến hành cài đặt website wordpress với cpanel hosting theo các bước sau:

Bước 1: Đăng nhập vào cPanel

Truy cập vào địa trỉ trang quản lý Cpanel hosting của bạn thông qua trình duyệt web. Nhập tên người dùng và mật khẩu cPanel được cung cấp.

Bước 2: Tìm phần “Softaculuos Apps Installer”

Đây là công cụ giúp bạn cài đặt wordpress và nhiều ứng dụng khác một cách nhanh chóng và dễ dàng.

Bước 3: Chọn biểu tượng wordpress

Trong giao diện Softaculous, bạn sẽ thấy danh sách các ứng dụng phổ biến. Chọn biểu tượng wordpress để tiếp tục.

Bước 4: Bắt đầu quá trình cài đặt

Sau khi chọn biểu tượng wordpress, bạn sẽ thấy một trang chứa thông tin về wordpress. Nhấn nút “Install Now” để bắt đầu quá trình cài đặt.

Bước 5: Cấu hình cài đặt

Bước 6: Cầu hình trang web

Điền các thông tin cơ bản cho trang web của bạn như tiêu đề trang web, mô tả, tên người dùng và mật khẩu quản trị.

Bước 7: Cài đặt và hoàn tất

Sau khi điền đầy đủ thông tin, nhấp vào nút “Install” để bắt đầu quá trình cài đặt. Chờ một lúc để hệ thống cài đặt WordPress trên máy chủ của bạn.

3. Hướng dẫn cài đặt theme flatsome

Sau khi đã cài đặt xong website wordpress chúng ta truy cập vào quản trị của website để tiến hành cài đặt Theme Flatsome. Để cài đặt Theme Flatsome các bạn truy cập vào giao diện > Giao diện > Cài mới > Tải lên. Bạn có thể tải về theme Flatsome tại đây.

Khi đã tải lên thành công chúng ta kích hoạt theme và tiến hành thiết kế website bằng các chức năng kéo thả của theme theo ý mình.

Cài đặt theme Flatsome
Cài đặt theme Flatsome

4. Hướng dẫn sử dụng theme flatsome một cách chi tiết

Dưới đây tôi sẽ hướng dẫn bạn sử dụng Flatsome một cách chi tiết và cụ thể hơn. Qua đó, bạn sẽ dễ dàng thiết lập các tùy chọn chung để thuận tiện hơn khi triển khai cho từng dự án.

Sửa tên trang web

Để có thể chính sửa website, bạn sẽ phải truy cập vào cài đặt > tổng quan. Tiếp theo, bạn di chuyển đến mục “Tên website” nằm ở phía trên cùng. Thao tác với Brand rất quan trọng vì nó ảnh hưởng trực tiếp đến quá trình kinh doanh của bạn sau này.

Tối ưu đường dẫn (URL)

Đường dẫn URL cũng là một trong những yếu tố quan trọng trong việc xếp hạng website. Vì vậy bạn nên thiết lập đường dẫn một cách ngắn gọn nhất có thể nhưng vẫn thể hiện được nội dung trong web và đặt biệt phải chứa từ khóa chính. Để thực hiện bạn truy cập Cài đặt > Đường dẫn tĩnh.

Thay đổi logo

Với việc thiết lập này, bạn chọn Flatsome -> Theme Options. Tiếp theo, bạn di chuyển đến Header -> Logo & Identity -> Select file. Bạn chọn logo có sẵn từ máy tính và ấn “Đăng” ở phía trên màn hình để hoàn tất.

Tuy nhiên, việc thiết lập logo vẫn chưa kết thúc. Bạn cần tiếp tục sử dụng công cụ này để thay đổi Favicon, đây là biểu tượng logo nhỏ sẽ xuất hiện trên đầu trình duyệt khi người dùng bấm tìm kiếm.

Thay đổi logo và biểu tượng trang web
Thay đổi logo và biểu tượng trang web

Thay đổi màu sắc thương hiệu

Để thay đổi, bạn vào Wp-admin -> Flatsome -> Theme Options -> Style -> Colors -> Primary. Khi đã thiết lập xong màu sắc mong muốn, bạn đừng quên ấn “Lưu” để hoàn tất thay đổi.

Thay đổi menu

Ở thời điểm hiện tại, Flatsome Theme cung cấp sẵn dạng Menu cố định và khả năng feedback trên điện thoại được đánh giá rất tốt. Để tối ưu tốt hơn, công cụ có hai loại chính là:

  • Main menu
  • Second menu

Tùy vào nhu cầu mà bạn có thể sử dụng loại menu phù hợp. Để thiết lập Menu, bạn cần truy cập wp-admin -> Giao diện -> Menu. Khi đã xác định được loại menu chỉnh sửa, hãy thêm bớt các thành phần theo nhu cầu sử dụng. Đa số các website sẽ gồm những yếu tố cơ bản như: Trang, bài viết, chuyên mục,…

Thiết lập sidebar

Sidebar là thanh công cụ nằm bên phải mặc định của Flatsome. Tùy thuộc vào nhu cầu sử dụng mà nội dung chứa trong phần này sẽ khác nhau. Để chỉnh sửa, bạn đăng nhập website trong wp-admin -> Giao diện -> Widget. Tiếp theo, WordPress sẽ cho phép bạn kéo thả từng module và sắp xếp các vị trí thích hợp.

Đăng bài viết và sản phẩm lên trang web

Để đăng bài viết bạn truy cập vào wp-admin -> Bài viết -> Bài viết mới. Để đăng sản phẩm bạn cần cài đặt 1 plugin WooCommerce sau đó bạn truy cập vào wp-admin -> Sản phẩm -> Sản phẩm mới. Tùy vào mục đích sử dụng, bạn có thể chọn 1 trong 3 dạng Content: Tiêu đề, Slug, Meta Description. Sau đó, bạn sử dụng Flatsome để tối ưu bài viết và sản phẩm chuẩn SEO. Bất kể bài đăng hay sản phẩm nào đi nữa thì đều phải phân cấp cấu trúc rõ ràng, vì vậy sử dụng các thẻ H2, H3,…là không thể thiếu.

Chèn nút zalo, điện thoại vào website

Trên thực tế, những nút này được tạo bằng HTML và CSS nên các bạn có thể thêm chúng vào bất cứ website nào. Đầu tiên, download icon zalo, điện thoại về và up load chúng lên website của bạn sau đó copy lấy hình ảnh.

Chèn đoạn code sau đây vào Footer của theme mà bạn đang sử dụng bằng cách truy cập vào Flatsome > Advanced.

Chèn nút gọi và zalo vào website
Chèn nút gọi và zalo vào website

Cài đặt google tag manager

Nếu bạn đã có tài khoản, bạn có thể tiến hành đăng nhập tài khoản của bạn. Nếu chưa, hãy chuyển đến trang chủ của Google Tag Manager rồi tiến hành “Đăng ký miễn phí”. Nó sẽ yêu cầu bạn nhập tên tài khoản của bạn (công ty), quốc gia và URL trang web, cũng như nơi bạn muốn sử dụng Google Tag (web, iOS, Android, amp). Khi bạn hoàn tất, hãy nhấp vào nút “Tạo”.

Đăng ký tài khoản Google Tag Manager
Đăng ký tài khoản Google Tag Manager
Thiết lập vùng chứa GTM
Thiết lập vùng chứa GTM
Thỏa thuận đăng ký Google Tag Manager
Thỏa thuận đăng ký Google Tag Manager
Thiết lập mã hóa Google Tag Manager
Thiết lập mã hóa Google Tag Manager

Bạn sẽ được cung cấp mã và hướng dẫn để bao gồm một mã cao trong thẻ <head> của trang của bạn và cái còn lại sau thẻ <body> mở. Bạn có thể thực hiện việc này ngay bây giờ hoặc áp dụng các mã vào trang web của bạn sau này (chúng có thể truy cập được trong bảng điều khiển của bạn). Khi bạn đã hoàn tất, nhấp vào “OK”.

Trên đây là toàn bộ những thông tin về Flatsome Theme và các ưu điểm nổi bật của công cụ này. Chúng tôi hy vọng thông qua bài viết này sẽ giúp các bạn có thể tự mình thiết kế và vận hành một trang web một cách tốt nhất.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *