Hướng Dẫn Sử Dụng Theme Flatsome Chi Tiết Từ A–Z – Xây Dựng Website Bán Hàng Chuẩn SEO

Trong bài viết này, THIẾT KẾ WEB HÀ NỘI sẽ hướng dẫn bạn Sử dụng Theme Flatsome chi tiết từ A–Z, giúp bạn tự xây dựng website bán hàng chuẩn SEO mà không cần biết lập trình.

Cách sử dụng Theme Flatsome để xây dựng trang chủ chuẩn SEO

Các website sử dụng WordPress cho phép bạn thay đổi trang chủ rất linh hoạt. Bạn có thể tạo 1 trang , sau đó đặt trang này làm trang chủ.

Thiết kế trang nhìn chung giống như đăng Bài Viết. Bạn nên dùng UX Builder để thiết kế cho thuận tiện.
Thiết kế trang: wp-admin > Trang > Thêm trang mới.

Sau khi bạn đã tạo được 1 trang mới, thiết kế theo ý thích của mình. Bạn đặt trang này làm trang chủ như sau:

Trong wp-admin > Cài Đặt > Đọc > Trang chủ

Trong mục trang chủ bạn nhấn sẽ thấy toàn bộ trang bạn đã tạo. Bạn chọn trang đã tạo làm trang chủ nhé.

Theo như hình trên bạn thấy trang “Công Ty Thiết Kế Website Hà Nội – Kho Giao Diện WordPress” đang được đặt là trang chủ.

Nếu chỉnh sửa từ trang này bạn chọn wp-admin > Trang tìm trang có tên “Công Ty Thiết Kế Website Hà Nội – Kho Giao Diện WordPress” và nhấn Chỉnh Sửa > chọn chỉnh sửa với UX Builder

Thiết lập cài đặt chung trong khi sử dụng Theme Flatsome

Phần này sẽ dành cho những bạn nào đã cài đặt Flatsome rồi vào chỉnh sửa ảnh hưởng toàn bộ site như: logo, thương hiệu, màu sắc,…

Đầu tiên bạn phải đăng nhập vào website của bạn với cấu trúc: tenmiencuaban/wp-admin (tenmiencuaban thay bằng tên miền của website của bạn nhé)

Cập nhật tên Website và thông tin thương hiệu

Truy cập Cài Đặt > Tổng Quan

• Tiêu đề trang web: đây là tên thương hiệu của bạn. Tên thương hiệu rất quan trọng trong việc bạn xây dựng kinh doanh lâu dài. Thường mục này là tên domain, tên cửa hàng,…
• Dòng mô tả: nói về lĩnh vực kinh doanh của bạn.
• Biểu tượng trang web: hay còn gọi là favicon, là hình thu nhỏ bạn thấy trong các tab trình duyệt, thanh đánh dấu và trong các ứng dụng di động WordPress. Nên sử dụng hình vuông và có kích thước tối thiểu là 512 x 512 pixel.
• Địa chỉ email quản trị: bạn có thể dùng email nào cũng được. Khách hàng không thấy phần email của bạn.

Tối ưu đường dẫn (Permalink) của website trong Flatsome

Đường dẫn bài viết của bạn càng ngắn gọn và chứa từ khóa càng tốt. Nhằm đảm bảo rằng đường link chuẩn SEO bạn nhé.

Trong wp-admin bạn truy cập Cài Đặt > Đường dẫn tĩnh

Sau đó bạn check vào phần chọn “Tiêu đề bài viết” và nhấn “Lưu Thay Đổi”. Bước này rất quan trọng bạn nên cài đặt ngay ban đầu. Vì ảnh hưởng đến toàn bộ đường link trên website.

Thay đổi Logo Website khi sử dụng Theme Flatsome

Trong trường hợp website của bạn đã có logo thì đơn giản là upload. Nếu bạn chưa có logo thì tìm đơn vị thiết kế Logo hoặc tự thiết kế.

Tips: Nếu chưa có logo bạn có thể dùng Canva để thiết kế logo bạn nhé

Trong Wp-admin bạn chọn Flatsome > Theme Options

Sau đó bạn chọn Header > Logo & Identity > Select file (chọn file logo từ máy tính)

Sau khi đã chọn xong file ảnh logo. Bạn nhấn “Đăng” ở phía trên màn hình để hoàn thành.

Như vậy là chúng ta đã xong bước cài đặt Logo cho website.

Tùy chỉnh màu sắc giao diện khi sử dụng Theme Flatsome

Mỗi thương hiệu hoặc cá nhân nên lựa chọn một bảng màu chủ đạo phù hợp với màu sắc logo và nhận diện thương hiệu. Khi sử dụng Theme Flatsome, bạn nên giữ màu thương hiệu và màu logo đồng nhất để đảm bảo tính chuyên nghiệp và nhất quán trong thiết kế. Lưu ý, một website không nên sử dụng quá nhiều màu vì sẽ làm mất tập trung và giảm hiệu quả thẩm mỹ tổng thể.

Vẫn trong Wp-admin > Flatsome > Theme Options > Style > Colors > Primary Color  để chọn màu sắc chủ đạo cho website và thương hiệu của bạn.( tương tự như bước thay logo website)

Lưu ý sau khi thay đổi các bước chúng ta đều “Lưu” hoặc “Đăng” nhé.

Trong mục Color bạn cũng có thể thay đổi màu sắc của Link Shop Colors, Review Star, Shop Colors,… Tuỳ từng website có các mục khác nhau, bạn hãy kéo hết phần Colors để xem website của bạn hỗ trợ thay đổi những mục nào nhé. Rất tiện phải không nào?

Điều chỉnh Font chữ và màu chữ chuẩn thương hiệu trong khi sử dụng Theme Flatsome

Đổi Font chữ trong Flatsome bạn vào Flatsome > Theme options > Style > Typography

Thông thường chúng ta hay sử dụng bộ font Google, có rất nhiều font hỗ trợ cả tiếng Anh và tiếng Việt.

Có thể thay đổi bộ font chung toàn web, độ đậm nhạt của chữ, font thẻ heading, font navigation (menu), alt fonts (các thẻ link), text transform (viết hoa hoặc viết thường)

Lưu ý sau khi thay đổi các bước chúng ta đều “Lưu” hoặc “Đăng” nhé.

Riêng phần font có mục “Clear typography cache” dùng để xoá bộ nhớ đệm trên trình duyệt. Nếu như sau khi bạn Lưu thay đổi mới, mà load lại trang chưa thấy thay đổi, bạn hãy thử ấn nút “Clear typography cache” để xoá bộ nhớ đệm nhé

Cách tạo và quản lý Menu trong Theme Flatsome

Hiện tại mặc định Flatsome cho phép chúng ta menu có sẵn dạng cố định và cũng Responsive menu trên điện thoại rất tốt.

Flatsome mặc định cho bạn 2 loại menu là Main Menu và Second Menu. Tùy thuộc vào nhu cầu mà có cân nhắc có sử dụng Second Meunu hay không.
Trong bước này chúng ta vẫn truy cập wp-admin > Giao diện > Menu.

Sau khi đã chọn được loại menu bạn muốn chỉnh sửa. Bạn có thể thêm hoặc bớt từng thành phần vào menu. Có các dạng mẫu cho bạn thêm như: Trang, bài viết, liên kết tự tạo, chuyên mục,…

Khi đã chọn được loại thêm vào thì nhấn “Thêm vào Menu“

Trong phần cấu trúc menu, bạn có thể dùng chuột để kéo thả phân cấp cho menu (mục nào mục chính, mục nào mục con).

• Bạn có thể thêm một thành phần vào menu .
• Bạn có thể xóa 1 mục trong menu.
• Sau khi chỉnh sửa xong thì lưu Menu lại.

Thiết lập menu cho phép bạn chọn vị trí hiển thị menu tại vị trí mong muốn.

• Main menu: là vị trí menu chính trên cùng
• Main Menu -mobile: chọn cho thiết bị di động.
• Footer Menu: menu dưới chân website
• Top Bar Menu: là menu mà bạn thấy nhỏ nhỏ phía trên menu chính.
• My Account Menu: Menu này chỉ xuất hiện khi có tài khoản trên website.

Sau khi đã chỉnh sửa xong bạn nhấn “Lưu menu“

Thiết lập Sidebar chuẩn SEO khi sử dụng Theme Flatsome

Sidebar là thanh bên phải mặc định của Flatsome. Thanh này sẽ xuất hiện trong các bài viết. Và cấu trúc của chúng là giống nhau cho tất cả bài viết. Nếu bạn đang tối ưu website để SEO và bạn được đào tạo SEO bài bản thì phần Sidebar bạn nên tận dụng để làm SEO cho website nhé.

Tùy vào nhu cầu sử dụng mà bạn để nội dung tại thanh này như thế nào. Thường thì nội dung thanh này sẽ động khi có thêm bài viết mới.

Các dạng phổ biến được dùng với sidebar như: bài viết mới nhất, bài viết phổ biến. Theo cá nhân mình, thanh này có hiệu quả cho SEO.

Để chỉnh sửa Sidebar. Bạn đăng nhập website trong wp-admin > Giao diện > Widget.

WordPress cho bạn kéo thả theo từng module. Bạn sắp xếp vị trí trên dưới cũng tương tự

Tùy chỉnh Footer (Chân Trang) Website trong Theme Flatsome

Footer là phần cuối cùng của trang web. Footer của toàn bộ trang wordpress nằm trong phần Giao diện > Widget.

Vẫn trong wp-admin > Giao diện > Widget > chọn Footer 1 và Footer 2 để thay đổi. Tuy nhiên mình khuyến nghị những phần này các bạn sau khi đã có bài viết rồi mới nên thay đổi.

Vì thay đổi những phần này sẽ mất khá nhiều thời gian với lại khi chưa có bài viết thì chưa có các mục để chỉnh sửa.

Đến đây về cơ bản thì bạn đã tối ưu tương đối cho website của mình. Phần sau sẽ nói về đăng bài viết cho website sử dụng UX Builder.

Tùy chỉnh Sidebar (thanh bên)Trong Theme Flatsome cho bài viết

Để thay đổi sidebar bài viết qua bên phải hoặc bên trái, bạn vào: Flatsome => Theme options => Blog => Blog Single Post

Tới đây nếu bạn chọn Right Sidebar (sidebar nằm bên phải), Left Sidebar (Sidebar nằm bên trái), No Sidebar là bài post sẽ không hiển thị sidebar.

Để thay đổi nội dung của Sidebar thì vào chọn Giao diện => Widget (Tiện ích)

Cấu trúc nội dung trong Theme Flatsome – Bài viết, trang và sản phẩm

Cấu trúc của WordPress phần quan trọng nhất là vị trí cho người dùng đăng bài viết lên website. Bạn nên thành thạo và hiểu các vị trí để sau này biết chỗ bài viết nằm ở đâu trong wp-admin.

Hiện tại WordPress cho 2 thành phần là: Bài viết & Trang. Riêng webstie sử dụng Flatsome có thêm thành phần nữa gọi là Sản Phẩm. Vì khi cài đặt theme Flatsme tích hợp sẵn Plugin Woocommerce vào rất tiện lợi.

Như vậy với 1 website sử dụng giao diện Flatsome thì chúng ta có 3 vị trí để đăng bài gồm: Bài viết, Trang và mục Sản Phẩm của Woocommerce.

• Bài viết: đây là phần dùng để đăng bài viết cơ bản dạng blog. bài viết truyền tải thông tin đến người dùng. Ưu điểm của “Bài Viết” là đơn giản, nhẹ, các bài được thừa hưởng code wordpress liên kết nên dễ lên top tự nhiên.
• Trang: Cũng giống như bài viết nhưng cho bạn không gian rộng hơn để đăng bài, thường đăng các bài viết tĩnh, cần trang trí full (đầy đủ) màn hình. Chẳng hạn như chúng ta dùng làm trang home, lading page, trang giới thiệu, liên hệ… Tuy nhiên so với “Bài Viết” thì “Trang” sẽ khó lên kết quả tự nhiên hơn. Vì không được hưởng lợi nhiều từ thuật toán liên kết và đề xuất của WordPress.
• Sản Phẩm: Đây là phần thường xuất hiện ở các webstie có nút “Mua Hàng” tức là có thể Order trực tiếp trên website. Khi chúng ta cài Woocommerce thì sẽ xuất hiện phần này. Loại “sản phẩm” phù hợp cho các bạn kinh doanh nhiều mặt hàng, mặt hàng đa dạng, có thể order online. Các trang như xây dựng, bất động sản, nội thất có thể tắt Woocomerce.

Như vậy tới đây thì bạn đã hình dung ra bạn có thể chọn hình thức nào để đăng sản phẩm của bạn rồi. Tất nhiên Flatsome đã hỗ trợ 3 phần trên sẵn có trong wp-admin.

Khởi tạo Bài Viết Mới, Trang Mới, Sản Phẩm Mới

Để đăng dạng bài viết, trang và sản phẩm trước hết bạn nên có bài viết trên file word.

Bạn truy cập vào wp-admin > Bài Viết > Viết Bài Mới (Trang, Sản Phẩm). Tùy mục đích của bạn là gì mà bạn chọn 1 trong 3.

Sau đó bạn thực hiện các bước theo thứ tự sau. Một bài viết thì luôn có tựa đề (Title).

Bạn đặt tiêu đề cho bài viết

Phần soạn thảo vặn bản của WordPress cũng tương tự như trên Word.

• Thêm media
• Chỉnh định dạng chữ
• Căn lề
• Đánh mục lục
• Thêm chú thích
• Thêm icon
• …..

Sau đó bạn kéo xuống phần dưới. Tại mục Yoast SEO. Bạn nên tối ưu 3 thẻ: Title, Description, Slug

• Title: đặt title trùng với sản phẩm bạn định kinh doanh và phù hợp nội dung bài viết.
• Slug: đường dẫn cho bài viết (tiếng Việt không có dấu, không được có khoảng trắng)
• Description: Mô tả nội dung bài viết ngắn gọn.Sau đó chúng ta tiến hành lưu bài viết
• Lưu nháp bài viết.
• Nhấn xem thử sẽ thấy tiêu đề nhưng không thấy nội dung.
• Sau đó nhấn Edit With UX Builder để tiến hành thực hiện các bước tiếp theo để đăng bài.

Đối với khởi tạo 1 bài viết mới, trang mới hay sản phẩm mới quy trình làm giống nhau

Quan trọng nhất là cách sử dụng Ux Builder và bài viết gọm những thành phần gì.

Cấu trúc bài viết chuẩn SEO khi sử dụng Theme Flatsome

Bất kể bài đăng nào trên website dù là Bài Viết, Trang hay Sản Phẩm thì bài đăng luôn phải có cấu trúc rõ ràng. Rõ ràng là phải có tựa đề, các mục lớn, trong mục lớn có mục nhỏ.

Bạn nào học SEO thì dễ dàng có kiến thức chuyên sâu các thẻ heading. Bắt đầu là thẻ H2, trong H2 có thẻ con là thẻ H3.

Bạn lưu ý rằng thẻ H1 trong 1 bài viết chỉ có duy nhất 1 thẻ là Title (tựa đề). Từ khóa chính cần đặt ở đầu H1 và sử dụng thêm các tính từ mạnh để thu hút người đọc.

Các H2 bổ sung nghĩa cho H1. Tương tự, H3 làm rõ nghĩa cho H2. Một bài viết nên có thêm nhiều H2, H3,…để bổ sung thêm nội dung cũng như đảm bảo độ sâu cho bài viết. Các thẻ H nên được in đậm và có chứa từ khóa

Tổng quan UX Builder – Trình thiết kế giao diện trong Theme Flatsome

UX Builder là một công cụ thiết kế giao diện người dùng website (UI) trực quan, dễ sử dụng, giúp người dùng có thể nhanh chóng xây dựng giao diện web đẹp mắt mà không cần có kiến thức lập trình.

UX Builder cho phép bạn kéo thả các phần tử UI như text, button, image, video… lên trang web để tạo giao diện. Bạn hoàn toàn có thể tùy chỉnh màu sắc, kích thước, vị trí của các phần tử một cách dễ dàng, linh hoạt. Sau khi hoàn thành thiết kế, bạn có thể xuất ra được code HTML/CSS/JS sạch sẽ để áp dụng cho website.

Các tính năng nổi bật của UX Builder trong Theme Flatsome

Sau nhiều năm phát triển, UX Builder đã sở hữu nhiều tính năng vượt trội, nổi bật:

Kho phần tử (Element Library) đa dạng

• UX Builder có thư viện phần tử UI phong phú với hàng trăm mẫu phần tử có sẵn để lựa chọn như button, form, modal, carousel, card, timeline…
• Các phần tử đều được thiết kế sẵn chuẩn giao diện, người dùng có thể dễ dàng kéo thả vào mà không mất nhiều thời gian tùy chỉnh.
• Ngoài ra, người dùng hoàn toàn có thể tùy biến lại phần tử theo ý thích để phù hợp với thiết kế độc đáo của mình.

Công cụ kéo thả đơn giản, trực quan

• UX Builder sở hữu công cụ kéo thả cực kỳ đơn giản, dễ sử dụng. Người dùng chỉ cần kéo phần tử từ thư viện ra và thả lên khung làm việc.
• Mọi thao tác đều được thực hiện trực quan, không yêu cầu code gì cả. Bất kỳ ai cũng có thể bắt đầu thiết kế mà không cần học lập trình.
• Người dùng có thể dễ dàng di chuyển, sao chép, nhân bản, xóa bỏ các phần tử. Mọi thay đổi đều được cập nhật ngay lập tức mà không cần load lại trang.

Thuộc tính phần tử linh hoạt, dễ dàng tùy chỉnh

• Mỗi phần tử trong UX Builder đều có bảng thuộc tính riêng để tùy chỉnh chi tiết. Người dùng có thể chỉnh sửa kích thước, màu sắc, padding, margin, border, hiệu ứng… một cách dễ dàng.
• Hỗ trợ tùy chỉnh nâng cao với CSS Code, người dùng có thể viết CSS riêng để tạo hiệu ứng và phong cách thiết kế độc đáo cho phần tử.
• Các thay đổi được áp dụng ngay lập tức giúp người dùng có thể nhanh chóng thử nghiệm các thiết kế khác nhau mà không tốn nhiều thời gian.

Tối ưu hóa giao diện cho mọi thiết bị

• UX Builder cho phép xem trước giao diện được thiết kế trên nhiều loại thiết bị khác nhau như máy tính, máy tính bảng, điện thoại…
• Người dùng có thể dễ dàng nhìn thấy sự thay đổi giao diện khi truy cập từ các thiết bị và tối ưu nó một cách phù hợp.
• Công cụ đặc biệt hữu ích trong việc thiết kế giao diện responsive hoạt động tốt trên mọi kích cỡ màn hình.

Xuất mã nguồn sạch sẽ, ngăn nắp

• Sau khi hoàn thành thiết kế, người dùng có thể dễ dàng xuất mã nguồn HTML/CSS/JS sạch sẽ, rõ ràng.
• Mã nguồn được tối ưu hóa tốt, có thể đưa vào sử dụng ngay lập tức mà không cần chỉnh sửa thêm.
• Đây là lợi thế lớn của UX Builder giúp tiết kiệm thời gian phát triển đáng kể cho người dùng.

Ngoài ra, UX Builder cũng có các tính năng như: thêm animation, điều hướng giữa các trang, đồng bộ hóa thiết kế với nhiều người dùng, tích hợp với các công cụ khác… giúp đáp ứng đầy đủ mọi nhu cầu thiết kế UI phức tạp.

Ưu điểm của UX Builder so với các công cụ khác

So với các công cụ thiết kế UI khác, UX Builder có một số ưu điểm vượt trội:

• Giao diện đơn giản, dễ sử dụng, thao tác nhanh chóng và trực quan. Thích hợp với người mới bắt đầu.
• Xuất code sạch sẽ, không yêu cầu chỉnh sửa thêm nhiều. Tiết kiệm thời gian phát triển.
• Thư viện phần tử phong phú, đa dạng. Cập nhật thường xuyên theo xu hướng mới nhất.
• Cho phép chia sẻ, cộng tác thiết kế cùng lúc nhiều người.
• Hỗ trợ đầy đủ thiết kế UI website lẫn ứng dụng di động.
• Có tính năng tự động tối ưu hóa hình ảnh giúp tiết kiệm tải cho website.
• Giá cả phải chăng, có gói miễn phí dùng thử vĩnh viễn.

Nhờ những ưu điểm trên, UX Builder đã trở thành công cụ được sử dụng phổ biến nhất hiện nay để thiết kế giao diện người dùng.

Lợi ích khi sử dụng UX Builder trong thiết kế website

• Tiết kiệm thời gian so với viết code thủ công. Bạn có thể nhanh chóng xây dựng giao diện đẹp mắt.
• Dễ sử dụng ngay cả với những người không code. Bất cứ ai cũng có thể thiết kế giao diện web với UX Builder
• Tối ưu cho mobile ngay từ đầu mà không cần setup gì thêm.
• Có thể dễ dàng chỉnh sửa và thử nghiệm các thiết kế khác nhau. Cho phép nhanh chóng thử sai để đưa ra thiết kế tốt nhất.
• Xuất ra được code sạch sẽ và chuẩn, giúp phát triển web nhanh hơn.
• Giúp các nhà thiết kế và nhà phát triển làm việc cùng nhau hiệu quả hơn thông qua việc trực quan hóa ý tưởng.

Hướng dẫn sử dụng UX Builder chi tiết – Để tạo 1 trang website bán hàng đơn giản

Flatsome đã tích hợp sẵn UX Builder cho bạn. Bạn chỉ cần chọn tạo Trang mới -> UX Builder

Tại đây, bạn có thể bắt đầu thiết kế bố cục và thêm nội dung cho trang web của mình một cách trực quan và dễ dàng thông qua UX Builder. Công cụ này cho phép bạn kéo – thả (drag & drop) các phần tử (elements) có sẵn như hình ảnh, văn bản, nút bấm, biểu tượng, banner, sản phẩm… vào vị trí mong muốn trên trang.

Nhờ giao diện trực quan, bạn có thể xem trước mọi thay đổi theo thời gian thực, dễ dàng điều chỉnh màu sắc, kích thước, căn chỉnh bố cục, thêm hiệu ứng hoặc sắp xếp lại thứ tự các phần mà không cần biết lập trình.

UX Builder hỗ trợ nhiều loại khối nội dung dựng sẵn (pre-built sections) giúp bạn tiết kiệm thời gian khi tạo trang chủ, trang giới thiệu, trang liên hệ hoặc trang bán hàng. Bạn chỉ cần chọn mẫu phù hợp, thay thế hình ảnh và nội dung của riêng mình là đã có một trang web hoàn chỉnh và chuyên nghiệp.Bắt đầu ngay bây giờ để xây dựng giao diện website độc đáo, thể hiện phong cách thương hiệu của bạn chỉ bằng vài thao tác kéo – thả đơn giản!

Trong phần này, bạn sẽ được hướng dẫn chi tiết cách sử dụng các element (phần tử) phổ biến trong UX Builder để bắt đầu thiết kế trang web của mình. Đây là những thành phần cơ bản, thường xuyên được sử dụng khi xây dựng bất kỳ bố cục website nào, bao gồm: Section, Text, Heading, Image, Colum, Table.

Với những element này, bạn có thể dễ dàng xây dựng giao diện trang web chuyên nghiệp, đẹp mắt và thân thiện với người dùng, mà không cần bất kỳ kiến thức lập trình nào.

Thêm Section (bố cục) trong UX Builder

Đầu tiên với 1 phần mới chúng ta phải thêm Section. Section là 1 phần chứa H2, H3. Mỗi section sẽ có 1 nội dung cụ thể.

Bạn có thể hiểu Section là 1 layout mà bạn muốn thể hiện nội dung trong đó. Flatsome cung cấp cho bạn các Section sẵn và section trắng. Nếu không cần trình bày dạng đặc biệt, chúng ta dùng section trắng.

Bạn chọn Add elements > Section > Chọn kiểu mà bạn muốn hiển thị

Trong Section bạn có thể chọn màu nền, viền, khoảng cách. Tùy vào khả năng thẩm mỹ của mỗi người mà bạn chọn cho đẹp nhé.
Bạn nên thử hết các option của Section, để xem phần nào phù hợp với nhu cầu của bạn, nếu không cần chúng ta có thể để trống

Có thể thay đổi background, màu sắc, hiệu ứng, bố cục, đường viền,… đăc biệt dành cho bạn nào biết code có thể add class riêng để css

Cách chèn văn bản (Text Element) trong UX Builder

Sau khi đã có section thì bạn thêm các thành phần vào như Heding H2, chữ (text) và hình ảnh. Trong phần Section chúng ta nhấn dấu (+) để thêm một element là text.

Với Text, chúng ta cũng có nhiều kiểu hiển thị khác nhau như đoạn, đoạn với tiêu đề, đoạn với tiêu đề phụ, ảnh bên trái, ảnh bên phải,…

Hình trên là các loại text. Nếu chọn một đoạn bình thường chúng ta chọn “Đoạn“. Tiếp theo nếu chúng ta muốn chỉnh sửa hoặc copy đoạn văn vô thì nhấn Open Text Editor.

Trong phần chỉnh sửa các thuộc tính của chữ. Chúng ta có thể chọn font, kích cỡ chữ, in đậm, in nghiêng, canh lề trái phải, hoặc chèn link vào chữ,…

Thêm hình ảnh (Image Element) trong UX Builder Flatsome

Để chèn hình ảnh thì chọn Image element.

Để upload hình ảnh chúng ta chọn Select media. sau đó upload hình lên.
Có thể chỉnh sửa các thuộc tính của phần Ảnh

Tạo cột (Column) và hàng (Row) trong UX Builder

Cũng tương tự trong UX Builder bạn thêm 1 element là Row.

Nhấn dấu (+) đế thêm Element, sau đó tìm kiếm từ Row > Chọn số cột bạn muốn thêm.

Sau đó bạn thêm text, image,… vào các cột nhỏ

Thêm nút gọi điện (Button) khi thiết kế Website sử dụng Theme Flatsome

Việc chèn một nút call trong bài viết để khách hàng có thể gọi mua hàng hoặc nút button liên kết với 1 bài viết khác.

Trong trình soạn thảo bạn thêm element bằng cách nhấn nút (+) > tìm button hoặc Nút (tiếng Việt đôi khi bị thay thế) > chọn loại button của bạn.

Trong phần thêm số điện thoại, chúng ta chú ý cấu trúc tel:0348 627 666 (thay bằng số của bạn)

Bạn lưu ý nhớ cấu trúc tel: [số điện thoại] để chèn nút call cho bạn.

Ban chọn màu cho button: Layout > Color

Chèn đường ngắt trang (Divider) để tối ưu trải nghiệm đọc

Sau mỗi section hoặc bài viết quá dài, chúng ta nên sử dụng cách thức ngắt trang để người đọc có cảm giác thoải mái và dễ đọc hơn.

Tương tự như các element khác, bạn chèn ngắt trang bằng cách dùng divider

Thêm hiệu ứng chuyển động (Animation) cho giao diện Flatsome

Đôi khi một số hình ảnh hoặc các element chúng ta tạo chuyển động bằng cách thêm Animation. Hiện tại Flatsome cho phép chúng ta dùng 12 loại chuyển động khác nhau.

Cách hiển thị sản phẩm nổi bật ra trang chủ

Khi có các bài sản phẩm rồi, chúng ta kéo các sản phẩm nổi bật hiển thị ra ngoài trang chủ bằng UX builder
Shop > Products

Hiển thị product cũng rất đa dạng:

• Mặc định: chỉ ảnh và tiêu đề
• On Sale: các sản phẩm giảm giá
• Featured products: các sản phẩm nổi bật
• Best selling: các sản phẩm bán chạy nhất
• …

Tương tự các elements, có các options nhỏ trong product: kiểu, bố cục, định dạng hiển thị,…

Những lưu ý quan trọng khi sử dụng UX Builder trong Theme Flatsome

Đây là một số lưu ý quan trọng khi làm việc với UX Builder để đảm bảo hiệu quả cao nhất cũng như hạn chế phát sinh sự cố ngoài ý muốn:

• Luôn làm việc trên các thiết bị di động để đánh giá thực tế hiển thị.
• Sử dụng các breakpoint phù hợp, tránh đặt quá nhiều điểm dừng.
• Kiểm tra kỹ càng trước khi xuất code, đặc biệt code JavaScript.
• Đảm bảo xóa bỏ các phần tử không sử dụng trước khi xuất code.
• Sao lưu dự án thường xuyên để tránh mất dữ liệu.
• Nên tìm hiểu thêm kiến thức lập trình web để tối ưu hóa giao diện.
• Cập nhật các bản vá lỗi mới của UX Builder để có trải nghiệm tốt nhất.

Kết luận

UX Builder là một công cụ hữu ích cho các nhà thiết kế và nhà phát triển. Nó giúp xây dựng giao diện web một cách trực quan và nhanh chóng. Hy vọng qua bài viết này của Thiết Kế Website Hà Nội, bạn đã nắm vững cách Sử dụng Theme Flatsome để xây dựng website bán hàng chuyên nghiệp và hiệu quả. Hãy bắt đầu tối ưu website của bạn ngay hôm nay để chinh phục Top Google và tăng doanh số vượt trội!

Nếu bạn đang tìm kiếm đơn vị thiết kế website uy tín, liên hệ ngay với THIẾT KẾ WEB HÀ NỘI