Hướng dẫn sử dụng công cụ FlatUX Editor Pro

Ngày đăng: 09:55 07-06-2022 | 695 lượt xem

Với hơn 10 năm kinh nghiệm, tích lũy từ nhiều đóng góp của khách hàng, bộ công cụ FlatUX Editor Pro là phiên bản tốt nhất để soạn thảo bài viết cho website (Bài rất dài, Anh/Chị nên dành khoảng 60 phút để học công cụ này. Một số mục nâng cao dành cho những người biết sơ sơ về HTML thì có thể bỏ qua)

Đây là danh sách các chức năng của bộ công cụ soạn thảo
Hướng dẫn sử dụng công cụ FlatUX Editor Pro

Sau đây FlatUX sẽ hướng dẫn Anh/Chị sử dụng từng chức năng

Công cụ định dạng văn bản

Để sử dụng công cụ định dạng văn bản, sẽ có 2 trường hợp để mở

Nếu văn bản chưa được định dạng thì phải bôi đen (quét chọn) văn bản cần định dạng. Sau đó nhấn vào nút trên để bật Popup
Nếu đã định dạng và muốn chỉnh sửa thì Double click (nhấn chuột 2 lần) lên văn bản để mở Popup

➡️ Popup định dạng như hình bên dưới đây!

Tại Popup "Format" Anh/Chị lưu ý có 2 nhóm công cụ. Nhóm trên là nhóm cơ bản thường xuyên sử dụng

Mục "Format" gồm có các lựa chọn H1, H2, H3, H4, P, A, Strong, Span tương ứng với các thẻ HTML. Lưu ý: Mặc định H1 là tiêu đề bài viết, nên nếu không vì mục đích khác hãy lựa chọn các thẻ HTML từ H2 trở đi, để tối ưu chuẩn SEO thì trong mỗi bài viết hãy tổ chức từ 3-5 H2, trong mỗi H2 có từ 3-5 H3, trong mỗi H3 hãy dùng thêm 1-3 thẻ Strong & A
Nhóm dưới đây là nhóm công cụ chỉ dành cho chuyên gia, đã biết viết HTML muốn chỉnh sửa nâng cao

Sau khi chọn một loạt các thiết lập Anh/Chị chọn "OK" là định dạng sẽ được ghi lên văn bản. Lần tiếp theo nếu muốn chỉnh sửa, chỉ cần Double Click lên văn bản đó

Công cụ xóa định dạng văn bản

Không phức tạp như định dạng, chỉ cần quét chọn đoạn văn bản (hoặc Ctrl A để chọn hết) rồi bấm nút trên. Tất cả định dạng "bên ngoài" sẽ được làm sạch, chỉ còn văn bản thuần

Công cụ đánh số thứ tự

Mục đích của công cụ này là tạo dạng danh sách theo số thứ tự, ví dụ như sau:

Đây là dòng số một
Đây là dòng số hai
Đây là dòng số ba

Mặc định kiểu định dạng cơ bản như trên, Anh/Chị có thể chọn định dạng cho danh sách thứ tự bằng cách "Right Click" nhấn phải chuột lên danh sách, tại "Style Number List" chọn kiểu yêu thích

Công cụ liệt kê danh sách

Mục đích của công cụ này là tạo dạng danh sách, ví dụ như sau:

Đây là dòng số một
Đây là dòng số hai
Đây là dòng số ba

Mặc định kiểu định dạng cơ bản như trên, Anh/Chị có thể chọn định dạng danh sách bằng cách "Right Click" nhấn phải chuột lên danh sách, tại "Style Bullet List" chọn kiểu yêu thích

Công cụ đánh dấu khối văn bản "Blockquote"

Anh/Chị quét chọn văn bản trước khi dùng nút trên, sau khi nhấn nút sẽ có kiểu khối như bên dưới

Công cụ canh lề văn bản

Công cụ chèn & xóa liên kết

Quét chọn văn bản cần chèn liên kết sau đó nhấn nút "Link"
Trong Popup "Link" lưu ý:

Nếu chèn liên kết nội bộ thì không cần chọn Protocol
Nếu liên kết đến website khác bên ngoài thì phải chọn Protocol
Phần Target chọn "Popup" sẽ bật Popup lên, chọn "New tab" sẽ mở ra Tab mới
Phần Type để chọn kiểu: Liên kết hay Số điện thoại

Công cụ chèn hình ảnh

Đặt con trỏ chuột tại vị trí muốn chèn hình ảnh, nhấn vào nút trên để tìm hình ảnh chèn vào
Mặc định thẻ ALT sẽ là tiêu đề bài viết, nếu muốn chỉnh sửa nhấn Double Click lên ảnh
Muốn chèn Caption cho hình ảnh thì Check nút "Captioned image" sau đó nhập nội dung

Công cụ chèn Video Youtube

Đặt con trỏ chuột tại vị trí muốn chèn Video Youtube, nhấn vào nút trên để bật Popup "Embed Youtube"
Chèn link Youtube đầy đủ (ví dụ: https://www.youtube.com/watch?v=s5OvPhx-Hqg)
Sau chèn link vào hộp thoại Popup và nhấn OK. Video Youtube sẽ được nhúng ngay, để xóa hoặc di chuyển Video trong nội dung Anh/Chị thực hiện như sau:

Bấm Delete trên bàn phím để xóa
Bấm Ctrl C để Copy, sau đó đặt con trỏ chuột tại tại vị trí mới bấm Ctrl V

Công cụ chèn Google Map

Đặt con trỏ chuột tại vị trí muốn chèn Google Map, nhấn vào nút trên để bật Popup "Insert Google Map/HTML"
Để lấy code của Google Map, mở Google Map, chọn địa điểm của Anh/Chị sau đó nhấn nút Share → Embed a map → COPY HTML

Công cụ chèn Form

Mục đích để lấy thông tin khách hàng (Họ tên, SĐT, Email hoặc Nội dung yêu cầu). Tùy theo nhu cầu mà chọn các trường cho phù hợp
Nhấn vào nút trên để chèn Form mặc định như sau

ĐĂNG KÝ THIẾT KẾ WEBSITE

Họ tên

Điện thoại

Nội dung yêu cầu

ĐĂNG KÝ NGAY

Để tùy chỉnh lại Form Anh/Chị thực hiện như sau:

Để xóa một trường thông tin (Ví dụ không dùng trường Email), Anh/Chị click chuột lên trường đó rồi bấm phải chuột chọn Delete Input
Để thay đổi hình nền hay kiểu Form, nhấn phải chuột lên Form chọn Style/Bakground để thay đổi

Công cụ chèn Tab nội dung

Mục đích để tạo kiểu nội dung như bên dưới. Đặt con trỏ tại vị trí cần chèn và nhấn nút "Insert Tab"

Tab 1Tab 2Tab 3

Content 1

Content 2

Content 3

Để xóa/sửa Tab nào thì nhấn chuột lên Tab đó, sau đó nhấn phải chuột chọn công cụ tương ứng
Để xóa bỏ tất cả Tab, rê chuột lên Tab rồi click chọn nút góc trái trên vừa mới hiện ra

Công cụ chèn Hỏi đáp

Để tạo danh sách hỏi đáp nhanh trong bài viết, đặt trỏ chuột tại vị trí cần chèn sau đó Anh/Chị nhấn nút trên. Kết quả như sau

Question 1

Answer 1

Question 2

Answer 2

Question 3

Answer 3

Công cụ chèn Gallery/Slider hình ảnh

Lưu ý vẫn phải luôn đặt trỏ chuột đúng nơi cần chèn, sau đó nhấn vào nút công cụ trên. Kết quả sẽ như sau

Tiếp theo, Anh/Chị chèn ảnh bằng công cụ "Insert Image", click lên ảnh Thumbs nào thì Thumbs đó làm đại diện

Công cụ chèn Hộp văn bản HTML

Mục đích để trình bày nội dung đẹp mắt hơn với bố cục chia cột, sau khi nhấn nút trên sẽ ra một HTML như sau:

Nhấn lên hình để thay đổi hình ảnh, nhập sửa văn bản trực tiếp. Click phải chuột để thay đổi Style, Thêm mới, Xóa hoặc Sắp xếp

Công cụ chia khối Grid

Mục đích chia cột nội dung, giúp trình bày rõ ràng. Kết quả chèn Grid như sau, ưu điểm của công cụ này là tối ưu hiển thị trên Mobile, trên Mobile kết quả sẽ hiện thị hàng dọc thay vì hàng ngang

Column 1

Column 2

Column 3

Column 4

Công cụ chèn Mục lục (Table Of Content)

Mục lục thường được chèn ở đầu viết hoặc sau phần dẫn nhập, đặt con trỏ chuột tại vị trí cần chèn và nhấn nút "Table Of Contents"
Mục lục bài viết sẽ tự động lấy tất cả các thẻ Heading H2,H3,H4 để lập chỉ mục