Trở về

[Flatsome] – Hướng dẫn sử dụng theme cơ bản

bởi Vi Nè

Flatsome là một theme framework tuyệt vời để thiết kế website bán hàng bằng WordPress. Trong bài viết này, mình sẽ trình bầy một số kiến thức liên quan đến việc phát triển theme flatsome. Chúng ta cùng bắt đầu nhé.

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ị (Dashboard) chọn Giao diện -> Tùy chỉnh.

Theme Options

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

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).

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 (nếu như bạn đang dùng các plugin Security ẩn đi phần Editor thì vào hosting file manager để edit hoặc thông qua FTP của hosting).

Tùy biến Header (đầu trang)

Cấu trúc của Header gồm thường gồm 3 phần: Top Bar (phần trên cùng), Header Main (phần giữa) và Header Bottom (phần chân header)

Việc tùy biến Header hầu hết đều xử lý ở Flatsome -> Theme Options -> Header (Ảnh: muatheme.com)

Để chỉnh sửa các đối tượng trên header, chúng ta chỉ việc bấm vào các tùy chọn trong phần builder của header như hình dưới:

Bấm vào hình bánh răng là chúng ta có thể edit (Ảnh: muatheme.com)

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 Dashboard -> Blocks -> Block cần sửa, chọn Edit with UX Builder

Tùy biến Footer (chân trang)

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

  1. 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
  2. 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

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 Hướng dẫn thanh toán bên cạnh tab mô tả sản phẩm như hình bên dưới.

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

Vậy là xong cấu hình cơ bản 1 website dùng Flatsome, hãy đón đọc các bài viết tiếp theo về Flatsome có trên cunghocweb.com.

Chúng tôi tạm dừng chức năng bình luận, mọi thắc mắc vui lòng gửi thông qua mục liên hệ. Xin cám ơn!

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon