Chỉ dẫn dùng theme Flatsome chi tiết nhất trong khoảng a-z năm 2023

hướng dẫn tiêu dùng Flatsome chi tiết nhất trong khoảng a- z cho người mới theo kiểu cầm tay chỉ việc, chỉ cần danh thời kì 15 phút đọc bài viết là bạn với thể tiêu dùng thạo căn bản, bài viết hầu hết các thao tác tạo header, footer, vun đắp menu, tối ưu hóa shop, chỉnh sửa trang thanh toán, chỉnh sửa giỏ hàng, bí quyết cài đặt theme, xây dựng trang landing page..

chỉ dẫn tùy chỉnh các thành phần trong Flatsome

Tùy chỉnh mắc sắc, font chữ và logo

Để tùy biến màu sắc, font chữ và logo bạn chọn Giao diện > Tùy biến.

[caption id="attachment_6948" align="aligncenter" width="900"]chọn giao diện tùy biến để tùy chỉnh font chữ và màu sắc flatsome chỉ dẫn tiêu dùng theme Flatsome chi tiết nhất từ a-z năm 2023[/caption]

Tiếp theo chọn Style để tùy chỉnh màu sắc và font chữ theo nhu cầu.

tùy chỉnh màu sắc và font chữ theo yêu cầu flatsome

Tùy chỉnh css và JavaScript

Để tùy chỉnh code hoặc thêm những mã JavaScript bên thứ ba như: Facebook Pixel, Hotjar, Google Analytics bạn truy tìm cập phần Advanced > Global settings, muốn tùy chỉnh css bạn vào tab Custom CSS.

hướng dẫn sử dụng flatsome tùy chỉnh css và javascript

Tùy chỉnh Flatsome blog

Flatsome là 1 theme chuyên dùng cho nhu cầu vun đắp trang web bán hàng bên cạnh đó giả dụ bạn muốn sử dụng những tính năng blog căn bản thì Flatsome hoàn toàn đáp ứng được, chọn Giao diện > Tùy biến sau đó chọn Blog.

hướng dẫn tùy chỉnh blog flatsome

Trong phần blog single post sẽ sở hữu những tùy chỉnh như sau:

  • Transparent Header: tùy chọn header trong suốt
  • Enable Header Meta: tùy chọn những tính chất meta trên header
  • Enable Featured Image: hiển thị hình ảnh thumbnail đầu trang
  • Enable Share Icons: hiển thị nút share
  • Enable Footer Meta: tùy chọn hiển thị tính chất meta ở footer
  • Enable Blog Author Box: hiển thị author box
  • Enable Next/Prev Navigation: bật tính năng next post

hướng dẫn tùy chỉnh single blog flatsome

chỉ dẫn tạo shortcode Flatsome

Shortcode trợ thời dịch là mã ngắn, đây là 1 tính năng khá hay của WordPress giúp bạn tùy biến và chèn nội dung vào bất cứ nơi đâu trên website, để tạo shortcode bạn vào UX Blocks tạo 1 blocks mới, khi tạo xong bạn chú ý góc phải màn hình phần shortcode, giờ bạn với thể copy shortcode này để chèn vào những bài viết.

hướng dẫn thêm shortcode flatsome

Để chèn shortcode bạn chỉ cần copy mã và dán vào trang nội dung bất kỳ.

hướng dẫn chèn shortcode flatsome vào bài viết

Việt hóa theme Flatsome

Flatsome là 1 theme nước ngoài do vậy số đông giao diện vẫn chưa hỗ trợ Tiếng Việt, cho nên bạn cần dịch nó sang ngôn ngữ Tiếng Việt, trước nhất bạn cài đặt plugin Loco Translate, tiếp theo chọn theme Flatsome để việt hóa.

hướng dẫn việt hóa theme flatsome

Tạo tiếng nói mới cho Flatsome.

tao ngon ngu moi cho flatsome voi loco translate

Chọn ngôn ngữ Tiếng Việt, chọn location Custom.

thêm ngôn ngữ việt nam cho flatsome

Lọc trong khoảng mà bạn cần dịch sau đó điền bản dịch và ấn Save để hoàn tất, load lại trang xem bản dịch đã thành công hay chưa, xóa cache toàn trang web nếu như sở hữu.

tiến hành dịch flatsome bằng loco translate

TÙY CHỈNH WOOCOMMERCE FLATSOME

Để tùy chỉnh những tùy chọn trên Woocommerce bạn tầm nã cập Advanced > Woocomerce.

tùy chỉnh woocommerce trên flatsome

khởi đầu tùy chỉnh từ trên xuống dưới, phần Store notice (thông báo cửa hàng) bạn điền thông tin bất kỳ nhé, thông báo sẽ hiện ở trên cộng phần header khi người dùng truy vấn cập vào trang web.

tùy chỉnh store notice flatsome

Tiếp theo là phần Product Catalog bạn chọn chỉ hiển thị sản phẩm, đoạn bộ lọc sản phẩm sẽ với 5 tùy chọn chính đấy là:

  • Default sorting: lọc mặc định theo tên sản phẩm
  • Popularity (sales): lọc theo sản phẩm được bán rộng rãi nhất
  • Average rating: lọc theo sản phẩm mang Nhận định cao nhất
  • Sort by most recent: lọc theo những sản phẩm cập nhật gần nhất
  • Sort by price (asc): lọc theo giá từ tốt lên cao
  • Sort by price (desc): lọc theo giá từ cao xuống phải chăng

tuy chon order product flatsome

Tiếp theo tới phần tùy chỉnh trang sản phẩm cho Flatsome, bạn tùy chọn lần lượt layout, header và kích thước của hình ảnh.

hướng dẫn tùy chỉnh layout product page flatsome

những phần thanh toán, giỏ hàng và trang trả tiền bạn Tìm hiểu và tự tùy chỉnh nhé vì phần này hơi dễ, rốt cuộc chúng ta sẽ tùy chỉnh Site search giúp website với thể sắm những sản phẩm nhanh gọn lẹ hơn.

[caption id="attachment_6963" align="aligncenter" width="900"]tùy chỉnh site search trên flatsome hướng dẫn sử dụng theme Flatsome chi tiết nhất từ a-z năm 2023[/caption]

Chọn tuần tự các tùy chỉnh như hình bên dưới, enable live seach giúp hiển thị những kết quả tìm kiếm tức tốc, phần search results latency (độ trễ khi hiển thị) bạn set 500 ms hoặc 1000 ms, bật thêm tùy chọn kiếm tìm theo sku và tag sản phẩm nếu cần.

tùy chọn site search trên flatsome theme

xây dựng LANDING PAGE sở hữu UX BUILDER

Landing page là đề nghị không thể thiếu nếu bạn có ý định vun đắp trang web bán hàng, landing page giúp người dùng hiểu rõ hơn về sản phẩm của bạn, đẩy xúc cảm của các bạn lên cao từ đó gia nâng cao chuyển đổi cho website, Flatsome hỗ trợ sẵn trình UX Builder giúp bạn vun đắp landing page nhanh gọn chỉ sở hữu thao tác kéo thả.

Để tạo landing page bất kỳ bạn chọn tạo trang mới, tiếp theo chọn Edit with UX Builder.

tạo trang landing page cùng ux builder

tới đây bạn sở hữu thể chọn add elements và kéo thả các block tùy theo sở thích, chọn Flatsome Studio để import các chiếc dựng sẵn từ dịch vụ.

[caption id="attachment_6967" align="aligncenter" width="900"]chọn import mẫu từ flatsome studio hướng dẫn sử dụng theme Flatsome chi tiết nhất từ a-z năm 2023[/caption]

cái sau khi import sẽ sở hữu cấu trúc bao gồm những section, column và phần tử, ấn vào phần Options để tùy chỉnh các thông số. Chung cuộc ấn vào nút Publish để lưu trang landing page.

tùy chỉnh thông số của ux block

một thủ thuật nho nhỏ khi xây dựng landing page đấy là hãy tùy chỉnh hiển thị cho nhiều dòng vật dụng khác nhau, vào tùy chọn Options và set visibility cho từng phần tử.

tùy chọn hiển thị trên nhiều thiết bị khác nhau flatsome

TÙY CHỈNH HEADER VÀ FOOTER FLATSOME

Flatsome là một trong số ít các theme sở hữu giao diện header theo kiểu kéo thả, bạn ko cần phải can thiệp quá rộng rãi về code, Flatsome hỗ trợ chuyên biệt 2 phần menu cho máy tính để bàn và vật dụng di động. Để tiết kiệm thời kì bạn cũng có thể sử dụng các presets mà nhà cung cấp đã cung cấp.

[caption id="attachment_6970" align="aligncenter" width="900"]chọn preset header flatsome theme hướng dẫn sử dụng theme Flatsome chi tiết nhất trong khoảng a-z năm 2023[/caption]

Phần Footer bạn cũng tùy biến như vậy thôi, chú ý thành phần Edit footer widget sử dụng để thêm các widget vào Footer.

tuy chinh footer nhanh tren flatsome

Phần Footer sẽ gồm 3 thành phần chính đó là Footer một, Footer hai và Absolute Footer, hãy chèn lần lượt các wigdet vào Footer 1 sau ấy đến Footer 2, trường hợp ko tiêu dùng Footer hai hãy disable nó đi.

thêm các widget vào flatsome

Chọn disable Footer hai nếu không sử dụng.

disable footer 2 trên theme flatsome

Chỉnh sửa text cho phần bottom Footer.

chỉnh sửa text cho phần bottom footer

tương tự là bài chỉ dẫn tiêu dùng theme Flatsome đến đây đã hết, chúc Anh chị em thành công

hướng dẫn dùng Flatsome chi tiết nhất từ a- z cho người mới theo kiểu cầm tay chỉ việc, chỉ cần danh thời kì 15 phút đọc bài viết là bạn với thể sử dụng thạo cơ bản, bài viết phần lớn những thao tác tạo header, footer, xây dựng thực đơn, tối ưu hóa shop, chỉnh sửa trang thanh toán, chỉnh sửa giỏ hàng, cách thức cài đặt theme, vun đắp trang landing page..

chỉ dẫn tùy chỉnh các thành phần trong Flatsome

Tùy chỉnh mắc sắc, font chữ và logo

Để tùy biến màu sắc, font chữ và logo bạn chọn Giao diện > Tùy biến.

chọn giao diện tùy biến để tùy chỉnh font chữ và màu sắc flatsome

Tiếp theo chọn Style để tùy chỉnh màu sắc và font chữ theo nhu cầu.

tùy chỉnh màu sắc và font chữ theo yêu cầu flatsome

Tùy chỉnh css và JavaScript

Để tùy chỉnh code hoặc thêm những mã JavaScript bên thứ ba như: Facebook Pixel, Hotjar, Google Analytics bạn tầm nã cập phần Advanced > Global settings, muốn tùy chỉnh css bạn vào tab Custom CSS.

hướng dẫn sử dụng flatsome tùy chỉnh css và javascript

Tùy chỉnh Flatsome blog

Flatsome là một theme chuyên phục vụ nhu cầu vun đắp trang web bán hàng không những thế nếu bạn muốn tiêu dùng những tính năng blog căn bản thì Flatsome hoàn toàn giải quyết được, chọn Giao diện > Tùy biến sau ấy chọn Blog.

hướng dẫn tùy chỉnh blog flatsome

Trong phần blog single post sẽ sở hữu các tùy chỉnh như sau:

  • Transparent Header: tùy chọn header trong suốt
  • Enable Header Meta: tùy chọn những tính chất meta trên header
  • Enable Featured Image: hiển thị hình ảnh thumbnail đầu trang
  • Enable Share Icons: hiển thị nút share
  • Enable Footer Meta: tùy chọn hiển thị thuộc tính meta ở footer
  • Enable Blog Author Box: hiển thị author box
  • Enable Next/Prev Navigation: bật tính năng next post

hướng dẫn tùy chỉnh single blog flatsome

hướng dẫn tạo shortcode Flatsome

Shortcode lâm thời dịch là mã ngắn, đây là 1 tính năng hơi hay của WordPress giúp bạn tùy biến và chèn nội dung vào bất cứ nơi đâu trên website, để tạo shortcode bạn vào UX Blocks tạo 1 blocks mới, khi tạo xong bạn chú ý góc phải màn hình phần shortcode, giờ bạn với thể copy shortcode này để chèn vào các bài viết.

hướng dẫn thêm shortcode flatsome

Để chèn shortcode bạn chỉ cần copy mã và dán vào trang nội dung bất kỳ.

hướng dẫn chèn shortcode flatsome vào bài viết

Việt hóa theme Flatsome

Flatsome là 1 theme nước ngoài bởi vậy hồ hết giao diện vẫn chưa hỗ trợ Tiếng Việt, do vậy bạn cần dịch nó sang tiếng nói Tiếng Việt, trước tiên bạn cài đặt plugin Loco Translate, tiếp theo chọn theme Flatsome để việt hóa.

hướng dẫn việt hóa theme flatsome

Tạo ngôn ngữ mới cho Flatsome.

tao ngon ngu moi cho flatsome voi loco translate

Chọn ngôn ngữ Tiếng Việt, chọn location Custom.

thêm ngôn ngữ việt nam cho flatsome

Lọc trong khoảng mà bạn cần dịch sau đấy điền bản dịch và ấn Save để hoàn thành, load lại trang xem bản dịch đã thành công hay chưa, xóa cache toàn trang web nếu như có.

tiến hành dịch flatsome bằng loco translate

TÙY CHỈNH WOOCOMMERCE FLATSOME

Để tùy chỉnh các tùy chọn trên Woocommerce bạn tróc nã cập Advanced > Woocomerce.

tùy chỉnh woocommerce trên flatsome

bắt đầu tùy chỉnh trong khoảng trên xuống dưới, phần Store notice (thông báo cửa hàng) bạn điền thông tin bất kỳ nhé, thông báo sẽ hiện ở trên cùng phần header lúc người mua truy hỏi cập vào trang web.

tùy chỉnh store notice flatsome

Tiếp theo là phần Product Catalog bạn chọn chỉ hiển thị sản phẩm, đoạn bộ lọc sản phẩm sẽ có 5 tùy chọn chính đấy là:

  • Default sorting: lọc mặc định theo tên sản phẩm
  • Popularity (sales): lọc theo sản phẩm được bán rộng rãi nhất
  • Average rating: lọc theo sản phẩm có Nhận định cao nhất
  • Sort by most recent: lọc theo những sản phẩm cập nhật sắp nhất
  • Sort by price (asc): lọc theo giá trong khoảng thấp lên cao
  • Sort by price (desc): lọc theo giá trong khoảng cao xuống thấp

tuy chon order product flatsome

Tiếp theo đến phần tùy chỉnh trang sản phẩm cho Flatsome, bạn tùy chọn tuần tự layout, header và kích thước của hình ảnh.

hướng dẫn tùy chỉnh layout product page flatsome

những phần thanh toán, giỏ hàng và trang thanh toán bạn Đánh giá và tự tùy chỉnh nhé vì phần này tương đối dễ, chung cục chúng ta sẽ tùy chỉnh Site search giúp website có thể mua các sản phẩm nhanh gọn lẹ hơn.

tùy chỉnh site search trên flatsome

Chọn tuần tự những tùy chỉnh như hình bên dưới, enable live seach giúp hiển thị các kết quả tìm kiếm tức thời, phần search results latency (độ trễ lúc hiển thị) bạn set 500 ms hoặc 1000 ms, bật thêm tùy chọn kiếm tìm theo sku và tag sản phẩm giả dụ cần.

tùy chọn site search trên flatsome theme

xây dựng LANDING PAGE với UX BUILDER

Landing page là yêu cầu không thể thiếu giả dụ bạn có ý định xây dựng trang web bán hàng, landing page giúp khách hàng hiểu rõ hơn về sản phẩm của bạn, đẩy cảm xúc của quý khách lên cao trong khoảng đó gia tăng chuyển đổi cho website, Flatsome hỗ trợ sẵn trình UX Builder giúp bạn xây dựng landing page nhanh gọn chỉ với thao tác kéo thả.

Để tạo landing page bất kỳ bạn chọn tạo trang mới, tiếp theo chọn Edit with UX Builder.

tạo trang landing page cùng ux builder

đến đây bạn với thể chọn add elements và kéo thả những block tùy theo thị hiếu, chọn Flatsome Studio để import những cái dựng sẵn trong khoảng dịch vụ.

chọn import mẫu từ flatsome studio

loại sau lúc import sẽ có cấu trúc bao gồm các section, column và phần tử, ấn vào phần Options để tùy chỉnh các thông số. Rút cuộc ấn vào nút Publish để lưu trang landing page.

tùy chỉnh thông số của ux block

một thủ thuật nho nhỏ khi vun đắp landing page ấy là hãy tùy chỉnh hiển thị cho rộng rãi loại vật dụng khác nhau, vào tùy chọn Options và set visibility cho từng phần tử.

tùy chọn hiển thị trên nhiều thiết bị khác nhau flatsome

TÙY CHỈNH HEADER VÀ FOOTER FLATSOME

Flatsome là 1 trong số ít những theme có giao diện header theo kiểu kéo thả, bạn không cần phải can thiệp quá đa dạng về code, Flatsome hỗ trợ chuyên biệt 2 phần menu cho máy tính để bàn và trang bị di động. Để tiết kiệm thời kì bạn cũng mang thể sử dụng các presets mà dịch vụ đã cung cấp.

chọn preset header flatsome theme

Phần Footer bạn cũng tùy biến như vậy thôi, chú ý thành phần Edit footer widget dùng để thêm những widget vào Footer.

tuy chinh footer nhanh tren flatsome

Phần Footer sẽ gồm 3 thành phần chính ấy là Footer 1, Footer hai và Absolute Footer, hãy chèn lần lượt những wigdet vào Footer 1 sau đó đến Footer hai, trường hợp không dùng Footer 2 hãy disable nó đi.

thêm các widget vào flatsome

Chọn disable Footer 2 nếu như không tiêu dùng.

disable footer 2 trên theme flatsome

Chỉnh sửa text cho phần bottom Footer.

chỉnh sửa text cho phần bottom footer

như vậy là bài chỉ dẫn tiêu dùng theme Flatsome tới đây đã hết, chúc Anh chị em thành công

Theo : https://themewp.vn/huong-dan-su-dung-theme-flatsome-chi-tiet-nhat-tu-a-z/

Thủ thuật wordpress : Thủ thuật wordpress

Chia sẽ theme Free : Theme miễn phí

Chia sẽ Plugin miễn phí : Plugin chia sẽ

Comments

Popular posts from this blog

Ổ cắm 2 lỗ – ổ cắm 3 lỗ cách phân biệt và công dụng của nó trong đồ vật gia đình

Tạo tab mới trong trang sản phẩm WooCommerce

Thêm xem nhanh và xem chi tiết bên dưới sản phẩm cho Theme Flatsome