Hướng dẫn dùng scroll to trong flatsome năm 2024

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. Lưu ý:

• Mua theme Flatsome bản quyền và key active theme Flatsome tại themeforest.net
• Không nên tải và sử dụng theme tại 1 số website chia sẻ theme Flatsome không rõ nguồn gốc
• Sử dụng theme Flatsome mới nhất để tương thích với WordPress và WooCommerce mới nhất

Trước khi bắt đầu đọc và thực hành bài viết Hướng dẫn sử dụng Flatsome từ căn bản đến nâng cao này, ban cần lưu ý:

• Cần phải đăng nhập tài khoản admin
• Chuyển ngôn ngữ web site sang tiếng Việt

Nếu có thắc mắc gì khác, các bạn để lại bình luận để mình trả lời nhé.

Mục lục

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.

• 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

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.

Lưu ý: đây là tùy biến nâng cao dành cho lập trình viên, MuaTheme chỉ hướng dẫn nơi bạn có thể tùy biến chứ không hướng dẫn chi tiết lập trình css như thế nào.

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)

Tính năng này dần trở nên phổ biến hơn với những website hiện đại, trong theme WordPress sử dụng Flatsome bạn có thể cấu hình tính năng Infinite Scroll bởi hook flatsome_infinite_scroll_params. Ví dụ sau, chúng ta sẽ tắt chế độ history.

<?php // Do not include this if already open! /

• Code goes in theme functions.php
• Disable Infinite Scroll browser history. */ add_filter( 'flatsome_infinite_scroll_params', function ( $params ) { $params['history'] = false; return $params; } ); Lưu ý: Thêm đoạn code trên vào tệp functions.php

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook