Giới thiệu về chức năng bố cục theme Flatsome để chỉnh sửa web

Hôm nay mình sẽ giới thiệu về tất cả các phần của theme flatsome mục đích cho bạn dễ hình dung về theme cũng như biết vị trí nó ở đâu để chỉnh dễ hơn, thuận tiện cho việc làm website một cách nhanh chóng.

Về bố cục theme flatsome mình sẽ hướng dẫn tất cả các phần từ đầu đến chân trang nhé. Ok bắt đầu nào!

Chỉnh sửa phần đầu theme header flatsome

Chỉnh sửa phần đầu tiên của web là header, đầu tiên các bạn rê chuột vào Flatsome -> Theme Options -> Header

Trong Header này chỉnh sửa tất cả các phần mình khoanh ô đỏ ở dưới. Bạn muốn chỉnh phần nào chỉ cần click vào phần đó, với UX Builder thì khi click vào phần muốn chỉnh thì sẽ hiện ở bên cạnh, bạn chỉ cần thay đổi nội dung và bấm nút Đăng

Mấy phần ở Header này bạn giữ chuột kéo nó di chuyển ở trong khuôn nhé, kéo thoải mái đổi vị trí sao cho ưng ý nhất, kéo mấy cái dưới lên trên hoặc kéo trên xuống dưới để ẩn đi. Mặc định flatsome đã kéo sẵn các trường, bạn cần trường nào thì giữ chuột kéo lên nhé.

Đây là tất cả phần header flatsome cần chỉnh, ở đây bạn có thể click vào từng phần để chỉnh còn phần bên phải là UX Builder để kéo thả, kéo lên là sử dụng cái element nào bạn muốn hoặc kéo xuống là không sử dụng, phần này hiển thị mô phỏng y chang cái header bạn đang xem đó.

* Ở phần đầu tất cả ở đó nhé, bạn cứ click chỉnh là hiểu hết thôi.

Chỉnh sửa phần giữa theme flatsome

Ở phần giữa chúng ta sẽ kéo thả bằng UX Builder của Flatsome, với trình kéo thả này bạn có thể kéo tất cả bên trong nó, kéo những gì bạn muốn.

Đầu tiên chúng ta sẽ vào UX Builder ở trang chủ các bạn rê chuột vào Sửa trang và Click Edit with UX Builder

Trong UX Builder chỉ cần click vào phần muốn chỉnh để chỉnh sửa phần đó.

1: Section là khuôn lớn nhất nếu bạn cần nền bên dưới mục hiển thị thì chọn nó, còn không thì chọn Row, bên trong Row có 12 cột, bạn có thể chia nhiều column nếu muốn.

Nếu muốn kéo thêm thì các bạn Add elements, rồi chọn Section, bên trong section add tiếp lần nữa Row.

Bên trong Row các bạn muốn tạo khuôn 2 cột thì chọn 2 Columns, 3 cột thì chọn 3 Columns...Còn bên trong từng Columns thì kéo element bạn muốn vào đó.

Click Add elements để thêm, ở đây mình thêm Icon Box, nếu kéo sản phẩm thì bạn chỉ cần chọn Row nó sẽ tạo cho bạn mặc định 12 columns và bạn chỉ cần kéo sản phẩm vào đó là xong.

Chỉnh sửa phần cuối chân trang footer theme flatsome

Phần thông tin của web ở chân trang thì chúng ta tạo ở UX Blocks. Sau đó thêm mới và tạo 1 cái tên Footer.

Sau đó vào Edit with UX Builder để tạo khuôn, các bạn tạo Row -> 3 columns hoặc 4 columns rồi kéo Text hoặc widget menu vào.

Ở đây mình chọn Text để thêm nội dung, làm xong các bạn bấm Apple -> Update để lưu lại nhé. Nên làm được từng nào lưu từng đó kẻo lỡ tắt mất thời gian làm lại. Như vậy là đã xong, còn chọn Footer đã tạo thì các bạn vào đây:

Tại Custom Footer Block chọn Footer rồi bấm Đăng là xong.

Bạn có thể quan tâm:

Sửa lỗi Gói lưu trữ không tương thích (Incompatible Archive)

Chào tất cả mọi người, ở phiên bản WordPress 6.4.3 nếu ae gặp lỗi khi upload theme hoặc plugin: Gói lưu trữ không tương thích (Incompatible Archive). Thì hãy giải nén ra rồi Zip lại file bên trong nhé là được nhé. Window thì zip bình thường bằng..

(Khoảng 9 tháng trước)0

Xóa đường dẫn /product và /product-category Woocommerce

Mặc định khi cài WordPress và Woocommerce ngôn ngữ tiếng anh sẽ hiện đường dẫn product hoặc product-category, nhưng đường dẫn quá dài và bạn muốn bỏ hết danh mục đó đi chỉ để lại đường dẫn sản phẩm hoặc đường dẫn danh mục cho gọn. Để&nbsp..

(Khoảng 11 tháng trước)0

Xóa bỏ đường dẫn /san-pham/ Trong Url Sản Phẩm Woocommerce

Đường dẫn hay còn gọi là Permalink trong WooCommerce sẽ mặc định thêm product-category (danh mục sản phẩm) và product (sản phẩm) – để phân biệt đường dẫn giữa danh mục sản phẩm và sản phẩm. Mặc định khi cài WooCommerce xong nếu là t..

(Khoảng 11 tháng trước)0

Sửa lỗi Wpml hoặc các plugin dịch không dịch ngôn ngữ mặc định

Sửa lỗi Wpml hoặc các plugin dịch không dịch ngôn ngữ mặc định, hướng dẫn Việt hóa plugin Woocommerce và giỏ hàng, khi mua key WPML xong các bạn không cài mà Woocommerce không dịch tiếng Việt vẫn hiện tiếng anh các xử lý rất đơn giản các bạn làm ..

(Khoảng 1 năm trước)0