Hướng dẫn sử dụng theme Flatsome từ căn bản đến nâng cao mới nhất: chỉnh sửa header, footer, logo, widget, sử dụng ux builder căn bản.

Một số thao tác cơ bản

Theme Options

Bạn truy cập Flatsome -> Theme Options ở bất kỳ trang nào, ngay phía trên cùng hoăc vào trang Quản trị (Admin) chọn Giao diện -> Tùy chỉnh.

Tại Theme Options bạn sẽ cấu hình, chỉnh sửa được các phần sau:

  • Header (phần đầu trang): Top bar, Main Menu, Bottom Menu, Sticky menu, logo, banner, giỏ hàng, số điện thoại, menu, …
  • Footer (phần cuối trang): Các cột cuối trang, thông tin bản quyền, các khối nội dung (block)…
  • Shop: chỉnh sửa các thông tin bên trong trang sản phẩm, bố cục trang danh mục sản phẩm,…
  • Blog: chỉnh sửa layout, ngày giờ, và nhiều chỉnh sửa liên quan
  • Style: chỉnh sửa màu sắc, font chữ, tùy biến css

Chỉnh sửa Widget (Sidebar)

Truy cập Giao diện -> Widget

Sau đó xổ các mục Widget ra để tìm ra widget cần chỉnh

Tùy biến màu sắc

Flatsome cho phép bạn tùy biến màu sắc như: màu chủ đạo, màu sắc chung của văn bản, đường link. Nếu trong tính năng tùy biến màu sắc của theme không cho phép thay đổi bạn phải sử dụng tính năng Custom CSS để định nghĩa màu sắc theo ý muốn (tất nhiên là bạn phải biết lập trình CSS)

Tùy biến CSS

CSS dùng để tùy biến màu sắc, giao diện cho website… khi mà theme không có tính năng tùy chỉnh. Nếu khách hàng có kiến thức lập trình CSS và có nhu cầu tùy biến CSS thì có thể truy cập Flatsome -> Theme Options -> Custom CSS.

Hoặc bạn cũng có thể sửa trên file style.css của theme bằng cách truy cập Giao diện -> Sửa -> Chọn sửa file style.css

Chỉnh sửa Menu

Vì là theme WordPress nên khi cần chỉnh sửa cấu trúc menu (text, link…) bạn truy cập Giao diện -> Menu -> Chọn menu cần chỉnh (Menu chính, menu anh mục sản phẩm, top bar menu…) để chỉnh

Chỉnh sửa Header

Bạn tùy biến hầu hết nội dung ở đầu trang (Header): Logo, Menu, các nội dụng đặt trên header (banner, hotline)

a. Cấu trúc của header và cách tùy biến

Cấu trúc của Header gồm thường gồm 3 phần: Top Bar , Header Main và Header Bottom , tương ứng với 3 phần của header ở bên ngoài website

Việc tùy biến Header hầu hết đều xử lý ở Flatsome -> Theme Options -> Header

b. Sửa nhanh nội dung dạng Block trong Main Header

Bạn thường thấy ở Main Header, bên phải Logo thường có khối nội dung (hot line, số điện thoại, banner…), bạn có thể thấy khối này ở trong trang quản trị -> menu Blocks -> Rê chuột vào block cần sửa, chọn Edit with UX Builder

Tùy biến Header menu trên Mobile

Bạn có thể tùy biến vị trí menu xuất hiện trên mobile, tùy biến menu hiển thị những gì,… bằng cách truy cập Flatsome -> Theme Options -> Header -> Header Mobile

Chỉnh sửa Footer

Nội dung chân trang

Theme Flatsome có 2 kiểu trình bày Footer: thông qua Widget và thông qua Blocks

a. Nếu Footer tạo từ Widget thì ở trong trang Admin , bạn vào Giao diện -> Widget -> Xổ tab Footer 2 hoặc Footer 1 để sửa các cột Footer

b. Nếu Footer tạo từ Blocks , tương tự như sửa Block ở Main header, thì ở trang chủ, bạn rê chuột vào nội dung của Footer, sẽ thấy 1 menu hiện lên (Edit Block: Footer), bạn click vào UX Builder

Sửa thông tin bản quyền

Là phần nội dung cuối cùng của trang (Thiết kế bởi, bản quyền của…). Bạn truy cập Flatsome -> Theme Options -> Footer -> Kéo xuống mục Absolute Footer

Chỉnh sửa Blocks

Block là các khối nội dung được người dùng dựng ra theo ý muốn và có thể sử dụng lại ở chỗ khác dưới dạng shortcode (dùng ở trang , bài viết, header, footer, chi tiết trang chủ…)

Để sửa 1 block có sẵn, bạn truy cập, UX Blocks -> Blocks

Sau đó rê chuột vào Block cần sửa chọn Edit witht UX Builder

Chỉnh sửa trang chủ

Để tiến hành chỉnh sửa trang chủ, bạn truy cập vào trang chủ của website, rồi chọn Sửa trang -> Edit with UX Builder

Lúc này, trình chỉnh sửa trang UX builder sẽ thể hiện trang chủ của bạn ở chế độ chỉnh sửa (Hình bên dưới). Bạn sẽ thấy các khối nội dung của trang chủ sẽ thể hiện ở bên trái, bạn muốn sửa ở đâu thì chọn vào nút mũi tên hoặc bánh răng để chuyển sang chế độ sửa.

Giả sử trong trường hợp này, bạn muốn thay các hình ảnh của Slider bạn chọn tới khối Slider -> rồi Image cần sửa -> Chọn Options

Chèn mã JavaScript

Giúp bạn chèn thêm mã Javascript (Google Analytics, Facebook Chat,…). Truy cập Flatsome -> Advanced -> Global Settings. Sau đó chèn code vào Header Script hoặc Footer Script

Tùy biến trang chi tiết sản phẩm

Bạn thường thấy theme Flatsome được thêm các đoạn văn bản, hình ảnh bên trên hoặc bên dưới nút Add To Cart  (thêm vào giỏ) hoặc có theme tab

Bạn truy cập Flatosme -> Theme Options -> Shop (WooCommerce) -> Product Page để tùy chỉnh

Cấu hình Google Map API

Để hiển thị Google Map trên website, Google yêu cầu cần có API Key cho dịch vụ này, trong theme Flatsome bạn có thể cấu hình như sau:

Bước 1: Bạn cần tạo API Key trên website của Google

Bước 2: Lưu API Key vào website

Truy cập Flatsome -> Advanced -> Google APIs

Cấu hình SMTP khắc phục lỗi gửi email trong Contact Form 7

Đây là vấn đề thuộc về plugin Contact Form 7, không liên quan tới theme Flatsome. Tuy nhiên đây là vấn đề (không phải lỗi) do bạn chưa cấu hình gửi email SMTP cho WordPress nên khi khách hàng bấm nút Gửi (submit) , bạn sẽ thấy thông báo lỗi: “Bạn gửi tin nhắn không thành công. Hãy liên hệ với quản trị viên để được hỗ trợ”.

 

Author: superadmin

Hello đây là Admin. Chúc các bạn thành công!

7.190 Replies to “Hướng dẫn sử dụng theme Flatsome từ căn bản đến nâng cao mới nhất”

  1. Nice post. I learn something new and challenging on blogs
    I stumbleupon everyday. It will always be exciting to read through articles
    from other writers and practice a little something from their websites.

  2. BeSafeRx Your Source for Online Pharmacy Information cialis generic

  3. After a brief inquiry, fill in the application form and resume on the spot, and then submit the application for reinstatement cheapest priligy uk Mediseller have our export network in and have dealed with clients from United States of Amercia, Europe, United Kingdom, UAE, Singapore, China, Japan, Africa, Middle East and South East Asian Countries, America, New York, Los Angeles, Canada, United Kingdom, Dubai, Sri Lanka, Switzerland, Malaysia, Newzealand, Fiji, Indonesia,South Africa, Egypt, Seychelles, Chicago, Houston, Phoenix, Philadelphia, San Antonio, San Diego, Austria, Belgium, Bulgaria, Croatia, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Poland, Portugal, Romania, Slovakia, Slovenia, Spain, Sweden, Australia, Sydney, Melbourne, Brisbane, Perth and all over the world

  4. General Website Information cialis online reviews But, I cannot endure that pain for the sustained period of time

  5. reviews of clomid A fertility team, which usually consists of reproductive endocrinologists, embryologists, clinical nurses, technicians and lab staff, represents a vital part of that collaborative, especially for those patients in whom infertility persists despite gold-standard surgical intervention.

  6. Its like you learn my mind! You appear to understand so much approximately this, like you wrote the
    e-book in it or something. I think that you simply could do with some percent to pressure the message house a bit, however instead
    of that, that is excellent blog. A fantastic read.
    I’ll certainly be back.

  7. Your ancestors also participated in the construction of treasure ships. doxycline chicago

  8. play sizzling 7 slots free las vegas free slots games sims slots free play slots online win real money

  9. single dating sites local singles near me free match dating site local dating sites absolutely free

  10. european singles dating sites dating sites for seniors
    free good catholic christian dating website

  11. what are the best paper writing services will someone write my paper for me who can write
    my paper for me write my persuasive paper

  12. someone to write my paper custom papers for college best write my paper
    website will someone write my paper for me

  13. academic paper writers writer paper write my persuasive paper best paper writing service reviews

  14. write my nursing paper best paper writers paying someone to write a paper best online paper writers

  15. buy a philosophy paper write my paper for me in 3 hours college papers help paperwritinghq.com

  16. help with papers help me write a paper write my paper in 3 hours need help write my paper

  17. best paper writers do my college paper for me find someone to
    write my college paper write my paper please

  18. writer paper write my business paper find someone to write my college paper help with a paper

  19. where can i find someone to write my college paper help with writing a paper
    write my english paper write my papers discount code

  20. write my paper for me fast paper help order a paper online academic paper writers

  21. People who are familiar with Luo Jia have smelled nervousness from his abnormal behavior one after another lasix and alcohol Warren RGlSrczGDWhdjiyWG 5 29 2022

  22. write my economics paper pay for a paper write my paper for me in 3 hours https://top100custompapernapkins.com/

  23. Hey, Ladies, please shout out for A MyBCTeam Member and share what has worked for you best place to buy cialis online

  24. best paper writers pay someone to write paper pay someone to write a paper psychology paper writing service

  25. online paper writing service pay to do my paper where can you buy resume paper papers writing help

  26. can you write my paper for me help writing a paper for college custom
    note paper doyourpapersonline.com

  27. college paper writing services do my paper professional paper writing services pay to do my paper

  28. dark market url dark markets japan [url=https://alphabaymarket24.com/ ]darknet markets with tobacco [/url]