Hướng dẫn quản trị website theme Flatsome phần 2

Trong bài viết này Bách Việt sẽ  hướng dẫn sử dụng Flatsome bao gồm cách đăng bài viết, sử dụng UX builder, thay đổi chân trang và thay đổi trang chủ. Ngoài ra, bài viết này hướng dẫn chi tiết bạn tối ưu một site dùng theme Flatsome.

Thay đổi Menu

Phần này hướng dẫn thay đổi menu cho theme. Phần này sẽ giống với tất cả theme của wordpress. Bước này bạn có thể làm sau cùng khi đã đăng bài. Flatsome mặc định cho bạn 2 loại menu là Main Menu và Second Menu.

Thay đổi Menu Flatsome

 

(1) Bạn  truy cập wp-admin > Giao diện > Menu.

Thay đổi Menu Flatsome

(2) Chọn menu mà bạn muốn chỉnh sửa

(3) Bạn có thể thêm từng thành phần vào menu. Có các dạng mẫu cho bạn thêm như: Trang, bài viết, liên kết tự tạo, chuyên mục,… Khi đã chọn được loại thêm vào thì nhấn “Thêm vào Menu

(4) Xóa bỏ mục đã thêm

Trong phần cấu trúc menu, bạn có thể dùng chuột để kéo thả phân cấp cho menu (mục nào mục chính, mục nào mục con).

(5) Sau khi đã chỉnh sửa xong bạn nhấn “Lưu menu

Thiết lập menu cho phép bạn chọn vị trí hiển thị menu tại vị trí mong muốn.
Main menu: là vị trí menu chính trên cùng
Main Menu -mobile: chọn cho thiết bị di động.
Footer Menu: menu dưới chân website
Top Bar Menu: là menu mà bạn thấy nhỏ nhỏ phía trên menu chính.
My Account Menu: Menu này chỉ xuất hiện khi có tài khoản trên website.

Thiết lập SideBar

Đây là phần sẽ hiển thị ở bên phải của mỗi bài viết.  Mục này sẽ ở trạng thái động, có nghĩa là bất cứ khi nào bạn có bài viết mới thì chúng sẽ hiển thị lên ở đây.

Mục này thường sẽ được đặt với tiêu đề là ” Bài viết nổi bật” hoặc  Bài viết mới”

Bạn sẽ đăng nhập theo đường link này để chỉnh sửa sideBar nhé : Giao diện>>widget>>chọn sideBar tương ứng

Thiết lập SideBar Flatsome

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 1 hoặc Footer 2 để sửa các cột Footer

b. Nếu Footer tạo từ Blocks , ở 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

Thay đổi Footer Flatsome

Hoặc bạn đăng nhập quản trị chọn UX Blocks >>Footer và chọn Edit with UX Builder.

Thay đổi Footer Flatsome

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 Blocks Flatsome

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.

Ví dụ trường hợp này bạn muốn thay ảnh bạn hãy kích vào ảnh đó, hoặc chọn hình bánh răng để chỉnh sửa

Vị trí các bài viết trong WordPresss & Flatsome

Hiện tại WordPress cho 2 thành phần là: Bài viết & Trang. Riêng webstie sử dụng Flatsome có thêm thành phần nữa gọi là Sản Phẩm. Vì khi cài đặt theme Flatsme tích hợp sẵn Plugin Woocommerce vào rất tiện lợi.

(1) Bài viết: đây là phần dùng để đăng bài viết cơ bản dạng blog.Ưu điểm của “Bài Viết” là đơn giản, nhẹ, các bài được thừa hưởng code wordpress liên kết nên dễ lên top tự nhiên.

(2) Trang: Cũng giống như bài viết nhưng cho bạn không gian rộng hơn để đăng bài, thường đăng các bài viết tĩnh, cần trang trí full (đầy đủ) màn hình. Chẳng hạn như chúng ta dùng làm trang home, lading page, trang giới thiệu, liên hệ…WordPress.

(3) Sản Phẩm: Đây là phần thường xuất hiện ở các webstie có nút “Mua Hàng” tức là có thể Order trực tiếp trên website. Khi chúng ta cài Woocommerce thì sẽ xuất hiện phần này.

Tạo bài viết mới, trang mới

Bạn truy cập vào wp-admin > Bài Viết > Viết Bài Mới (Trang)

(1) Tiêu đề của bài viết

(2) Nội dung bài viết, trong phần này bạn có thể chèn thêm hình ảnh bằng cách nhấn vào ” thêm media

Tiêu đề SEO: Đặt phù hợp nội dung bài viết.

Slug: đường dẫn cho bài viết (tiếng Việt không có dấu, không được có khoảng trắng)

Description: Mô tả nội dung bài viết ngắn gọn.

Tiếp theo sẽ chọn mục để bài viết đó được hiển thị.

Cuối cùng là tải ảnh đại diệnĐăng

Tạo gian hàng & Sản phẩm

Trong wp-admin > Sản Phẩm > Thêm Mới

(1) Tên của sản phẩm

(2) Nội dung sản phẩm

 

 

(1) Đăng ảnh đại diện cho sản phẩm. Trường hợp sản phẩm có nhiều ảnh thì có thể tạo album (2)

Chèn Section

Đầu tiên với 1 phần mới chúng ta phải thêm Section.

Bạn có thể hiểu Section là 1 layout mà bạn muốn thể hiện nội dung trong đó. Flatsome cung cấp cho bạn các Section sẵn và section trắng. Nếu không cần trình bày dạng đặc biệt, chúng ta dùng section trắng.

 

Trong phần này bạn có thể chỉnh sửa màu nền, màu viền và 1 vài tùy chọn hiển thị khác của nó

Sau khi tạo được Section bạn sẽ tạo mục mong muốn. Mình sẽ hướng dẫn các bạn 1vài element phổ biến:  Text, Heading, Image, Colum, Table.

Chèn Chữ (text)

Trong phần Section chúng ta nhấn dấu (+) để thêm element Text.

 

Chọn Ô ” Open Text Editor ” để sửa đoạn văn bản cần thêm

Kích vào ô phía dưới để điều chỉnh văn bản. Trong phần chỉnh sửa các thuộc tính của chữ. Chúng ta có thể chọn font, kích cỡ chữ, in đậm, in nghiêng, canh lề trái phải, hoặc chèn link vào chữ,…

Trong phần này mình sẽ hướng dẫn các bạn thêm Heading cho bài viết. Heading là các mục lớn trong bài viết.

Mình thường sử dụng tới mục H3. Tức nhiên H3 là con của H2. Bạn lưu ý rằng trong 1 bài viết có thể có nhiều thẻ heading. Với Flatsome thì họ xem các thẻ này là text (chữ). Do đó bạn làm tương tự với phần trên (cách chèn chữ). Sau đó, chúng ta cài đặt đây là thẻ H2 hay H3.

Chèn Image

Để chèn hình ảnh chúng ta sẽ tìm element Image

(1) Upload hình ảnh lên

(2) Điều chỉnh kích thước hiển thị của ảnh

Chèn cột.

Tương tự như chèn Text và Image, chúng ta sẽ tìm element Row

Sau đó sẽ chọn số cột theo mong muốn

Ngắt trang Divider

Sau mỗi section hoặc bài viết quá dài, chúng ta nên sử dụng cách thức ngắt trang để người đọc có cảm giác thoải mái và dễ đọc hơn.

Tương tự như các element khác, bạn chèn ngắt trang bằng cách dùng Element divider

Trên đây mình đã chia sẻ với các bạn 1 vài thao tác cơ bản để có thể sử dụng theme Flatsome. Mong rằng nó sẽ giúp cho ích cho các bạn trong quá trình tạo ra 1 website riêng.Trong bài viết sẽ có nhiều thiếu sót, hãy cùng nhau chia sẻ và bình luận để bài viết của mình hoàn thiện hơn nhé.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *