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