Hướng dẫn sử dụng Module Cấu hình layout
I.Video hướng dẫn chi tiết quản lý cấu hình Layout
Video hướng dẫn thêm cấu hình layout để thiết lập bố cục hiển thị riêng cho các cột trang destop hoặc danh mục trên mobi, giúp website trình bày nội dung trực quan và chuyên nghiệp hơn.
II. Hướng dẫn chức năng danh sách Layout
Sau khi đăng nhập vào trang quản trị , chúng ta sẽ đến với phần Layout > Danh sách Layout. Phần này sẽ hướng dẫn chi tiết cách sử dụng giao diện quản lý layout và tạo mới một layout phù hợp với nhu cầu của bạn.
Nút thao tác chung
01 Xóa nhanh
Xóa các layout đã tạo bằng 1 thao tác
Xóa hoàn toàn, không thể khôi phục. Phần mục này sẽ hiển thị thông báo "Bạn có chắc muốn xóa không?" để xác nhận với người dùng việc xóa vĩnh viễn. Phản hồi sau khi xóa có thông báo "Xóa thành công"
02 Thêm mới
Tạo layout mới.
* Trợ giúp
Mở phần trợ giúp tại các modules hiện tại, có các video hướng dẫn
Bộ lọc & tìm kiếm
03 Từ khóa
Nhập từ khóa để tìm layout theo tiêu đề.
04 Ẩn/Hiện
Lọc layout theo trạng thái (ẩn/hiện).
05 Tìm
Nút tìm kiếm theo điều kiện lọc.
06 Reset
Xóa toàn bộ bộ lọc/từ khóa đã nhập và đưa kết quả tìm kiếm về trạng thái mặc định ban đầu.
07 Thanh tiêu đề bảng
Chứa các cột (#, Sắp xếp, Tiêu đề, Icon, Vị trí, Thao tác, Hiển thị, Thuộc tính). Nhận biết và phân loại thông tin trong bảng đang hiển thị, khi click vào những tiêu đề có liên kết màu xanh, sẽ tự động sắp xếp dữ liệu theo cột được nhấn.
Danh sách layout
08 Ô check chọn
Dùng để chọn/bỏ chọn các Layout để thao tác hàng loạt cho mục xóa tại số 1
09 Sắp xếp
Đánh số thứ tự từng layout. Cho phép nhập số để thay đổi vị trí hiển thị layout.
10 Tiêu đề layout
Tiêu đề layout là tên gọi theo chức năng của Layout
11 Chọn tác vụ
Ô chọn (dropdown) cho phép thiết lập tác vụ cho một nhóm nội dung hoặc khối giao diện khi người dùng cuộn trang
Nhóm cuộn theo khi cuộn website xuống dưới
Khi người dùng cuộn trang xuống, nhóm nội dung sẽ đi theo màn hình — thường dùng cho thanh menu bên, hộp hỗ trợ, nút liên hệ,...
Nhóm cuộn theo và Tạo khoảng cách top pt-5
Cũng giống như trên cuộn theo màn hình, nhưng có thêm khoảng cách từ mép trên trang để không dính sát lề trên, tránh che mất các thành phần cố định.
12 Vị trí
Chọn vị trí layout nằm ở cột nào (Cột A, Cột Mobile…).
13 Chuyên mục hiển thị
Chọn vị trí hiển thị:
Tùy check chọn theo danh sách các đề xuất khi chọn vào ô này. Trong đó có
-
Select All: Chọn tất cả
-
Deselect All: Bỏ chọn tất cả
14 Thao tác chỉnh sửa
Gồm nút sửa (bút chì) và xóa (thùng rác).
15 Hiển thị
Chuyển trạng thái bật/tắt layout (hiện hoặc ẩn).
16 Xóa
Xóa các layout đã tạo
Xóa hoàn toàn, không thể khôi phục. Phần mục này sẽ hiển thị thông báo "Bạn có chắc muốn xóa không?" để xác nhận với người dùng việc xóa vĩnh viễn. Phản hồi sau khi xóa có thông báo "Xóa thành công"
17 Hiển thị thuộc tính đang được phân loại
Hiển thị các phân loại , các điều kiện mà Layout đó đã được chọn hiển thị ra trang danh sách nhằm giúp người quản trị dễ dàng xem nhanh và sắp xếp các thuộc tính vào từng nhóm phân loại cụ thể.
Bộ đếm & số dòng hiển thị
18 Tổng số / Hiển thị:
Cho biết tổng số mục và số lượng hiển thị mỗi trang đang được liệt kê hoặc có trong website. Có thể lựa chọn số lượng hiển thị trên 1 trang danh sách
Hướng dẫn thêm - sửa cấu hình layout
Các nút thao tác chung
01 Lưu
Lưu lại trang thêm/tạo layout đang thao tác
02 Lưu & đóng
Lưu lại layout đang thao tác và quay lại trang danh sách layout.
03 Lưu & thêm
Lưu và mở form mới để tạo thêm layout khác.
04 Hủy
Hủy các thao tác trước đó đang thực hiện
0* Trợ giúp
Liên kết đến trang hướng dẫn sử dụng chi tiết theo module hiện tại
Trường cấu hình layout
05 Vị trí layout
Chọn vị trí hiển thị
Cột A : Cột hiển thị bên trái trên Desktop
Cột B : Cột hiển thị bên phải trên Desktop
Cột mobi : Cột hiển thị trên Mobi
06 Phân loại layout
* Chọn loại layout theo danh mục menu : Chức năng theo dữ liệu theo danh mục đã được thêm trước đó vào website tại trang Dach sách Menu.
** Banner quảng cáo : Hiển thị ảnh banner quảng cáo dựa trên các hình ảnh đã được thiết lập sẵn trong hệ thống.
Video hướng dẫn cách tạo banner quảng cáo
*** Tiện ích khác : Lấy nội dung các modules tiện ích khác
- Danh mục động
- Tài khoản
- Sản phẩm bán chạy
- Kết nối với chúng tôi
- Tin tức nổi bật
- Video
- Sản phẩm mới
- Lọc nhanh
- Hỗ trợ trực tuyến - Nhóm
- Liên kết website
- Hỗ trợ trực tuyến
- Thống kê truy cập
- Lấy toàn bộ danh mục sản phẩm cấp 1
- Lấy toàn bộ danh mục sản phẩm cấp 2
- Lấy toàn bộ danh mục sản phẩm cấp 3
**** Nhập nội dung :
07 Chọn các danh mục
Chức năng theo dữ liệu theo danh mục đã được thêm trước đó vào website tại trang Dach sách Menu. Khi click vào danh mục sẽ hiển thi ra danh sách các danh sách bài viết nội dung, sản phẩm và dịch vụ thuộc danh mục đó. Yêu cầu chọn phù hợp và đúng với danh mục vì khi chọn sai sẽ không hiển thị theo danh mục cần.
>>> Nếu chọn check * tại số 06
Check chọn loại dữ liệu cần lấy là các mục đã tạo trong menu.
08 Chọn lấy tiêu đề
- Chọn check ô vuông để lấy tiêu đề các bài viết.
- Bỏ check ô vuông để lấy danh mục con.
09 Hiện thị nội dung của danh mục đang chọn
Check chọn/ Bỏ chọn để hiển thị nội dung của danh mục đã được chọn.
10 Điều kiện DANH MỤC được hiển thị
Lọc hiển thị theo trạng thái (hiện hoặc ẩn).
11 Số lượng item hiển thị
Nhập số lượng mục sẽ hiển thị (ví dụ 10).
12 Chọn vị trí hiển thị
Quy định vị trí hiển thị trên trang.
13 Hiển thị
Bật/tắt hiển thị layout.
14 Đường viền chuyên mục
Đường kẻ bao quanh khu vực tiêu đề hoặc khối nội dung của danh mục, làm nổi bật và phân tách khu vực đó với các phần khác.
- Chọn tick để hiện đường viền nội dung.
- Bỏ tick để ẩn đường viền nội dung
15 Tiêu đề danh mục
Chọn hiển thị tiêu đề của danh mục hay không.
16 Lấy tiêu đề của mục nguồn
Hiển thị tiêu đề của các mục dữ liệu nguồn đã chọn.
17 Hình
Chọn hoặc không chọn hình hiển thị cho layout. Được làm nền của từng khối nội dung
18 Màu sắc
Chọn màu sắc hiển thị (không/có).
Phần màu sắc này được hiển thị ở phần layout là bảng màu nền, chữ, viền, nút… của giao diện
19 Kiểu icon
Chọn kiểu icon, gồm 3 lựa chọn (không/có sẵn/upload).
Biểu tượng hình ảnh nhỏ, mang tính minh họa, làm nổi bật chức năng/nội dung. Chọn icon cụ thể để gắn vào layout hoặc tải lên
20 Tải Icon
Chọn tệp hình ảnh icon từ máy tính và upload lên hệ thống quản trị website, để dùng làm biểu tượng hiển thị trong layout.
21 Kiểu hiển thị
Chọn kiểu hiển thị tổng thể (không có sẵn/đã tạo).
Nhập nội dung tùy chọn
22 Nhập tiêu đề cho layout
Tên tiêu đề Layout (ngôn ngữ chính).
23 Chọn logo lên ảnh - nội dung
Mục đích nhận diện thương hiệu, tránh sao chép nội dung/ảnh trái phép, và làm cho nội dung hiển thị chuyên nghiệp hơn.
24 Soạn thảo nội dung
Nhập nội dung cho Layout, có hỗ trợ định dạng text, hình ảnh, video.
( Xem thêm video hướng dẫn bộ soạn thảo văn bản )
25 Chèn code Bootstrap
Thêm nhanh cột Bootstrap vào nội dung. Công cụ giúp chúng ta chia các khung chủ động, và có hỗ trợ tự động thay đổi bố cục cho phù hợp với thiết bị di động (Responsive).
(Xem thêm video hướng dẫn sử dụng công cụ chèn cột Boostrap)
26 Shortcode
Tính năng chèn Shortcode giúp chúng ta có thể móc nối dữ liệu trên toàn bộ website, đây là một đoạn code ngắn giúp lấy dữ liệu tùy ý theo từng module để hiện thị tại vị trí chèn mã, các nội dung lấy được như sau:
+ Lấy được toàn bộ nội dung như: sản phẩm, dịch vụ, tin tức(Blog), thư viện ảnh.... (Các dữ liệu có trên website)
+ Chèn được Form vào vị trí mong muốn.
(Xem thêm video hướng dẫn sử dụng công cụ chèn Shortcode)
IV. Các bước thêm mới một sản phẩm
Sau khi đã tìm hiểu và xem qua các chức năng tại từng vị trí , chúng ta sẽ cùng thao tác nhập các thông tin và hoàn thiện sản phẩm
Nhập thông tin cơ bản
- Tên Layout - tiêu đề Layout
Nhập tiêu đề Layout muốn tạo rõ ràng, cụ thể
- Vị trí Layout
Chọn vị trí hiển thị : Vui lòng chọn đúng các cột và vị trí muốn hiển thị , nếu chọn sai nội dung sẽ không chạy
Cột A : Cột hiển thị bên trái trên Desktop
Cột B : Cột hiển thị bên phải trên Desktop
Cột mobi : Cột hiển thị trên Mobi
Phân loại layout
Sẽ có 3 mục để chọn đưa ra phần cấu hình Layout này
* Danh mục menu : Chức năng theo dữ liệu theo danh mục đã được thêm trước đó vào website tại trang Dach sách Menu.
** Banner quảng cáo : Hiển thị ảnh banner quảng cáo dựa trên các hình ảnh đã được thiết lập sẵn trong hệ thống.
Video hướng dẫn cách tạo banner quảng cáo
*** Tiện ích khác : Lấy nội dung các modules tiện ích khác:
- Danh mục động
- Tài khoản
- Sản phẩm bán chạy
- Kết nối với chúng tôi
- Tin tức nổi bật
- Video
- Sản phẩm mới
- Lọc nhanh
- Hỗ trợ trực tuyến - Nhóm
- Liên kết website
- Hỗ trợ trực tuyến
- Thống kê truy cập
- Lấy toàn bộ danh mục sản phẩm cấp 1
- Lấy toàn bộ danh mục sản phẩm cấp 2
- Lấy toàn bộ danh mục sản phẩm cấp 3
**** Nhập nội dung :
Lấy nội dung được nhập tự do trong mục bộ soạn thảo - Nội dung tiếng việt
Lưu ý:
Nội dung cần phù hợp với bề ngang hẹp của cột A, B.
Tránh dùng bảng, ảnh hoặc khối văn bản quá rộng sẽ làm vỡ layout.
Nội dung tự soạn ở mục này thường là tĩnh (không tự động cập nhật), nên nếu cần dữ liệu tự động thay đổi theo cập nhật của website thì nên dùng phần chèn shortcode hoặc module tiện ích thay vì nhập tay.
Video hướng dẫn chèn tính năng shortcode
- Chọn danh mục
Trường hợp nếu chọn check tại < Danh mục menu > và < Tiện ích khác >
Chức năng theo dữ liệu theo danh mục đã được thêm trước đó vào website tại trang Dach sách Menu. Khi click vào danh mục sẽ hiển thi ra danh sách các danh sách bài viết nội dung, sản phẩm và dịch vụ thuộc danh mục đó. Yêu cầu chọn phù hợp và đúng với danh mục vì khi chọn sai sẽ không hiển thị theo danh mục cần.
Check chọn tính năng - điều kiện hiển thị
Để kiểm soát đúng vị trí, tránh hiển thị thừa hoặc sai trang và giúp nội dung thể hiện rõ ràng, gọn gàng và đúng vị trí mong muốn thì sẽ có một số điều kiện cho các mục Layout khi tạo. Sẽ có một số check chọn chỉ có trong tính năng chọn Danh mục menu và một số tính năng sử dụng chung.
Tính năng chọn Danh mục menu
Sau khi lựa chọn Danh mục đã khởi tạo trong menu. Sẽ có các lựa chọn hiển thị riêng cho mục chọn menu này
Chọn lấy tiêu đề bài viết
- Chọn check / bỏ chọn ô vuông để lấy tiêu đề các bài viết.
Điều kiện vị trí được hiển thị
Sẽ lấy các bài viết - nội dung - sản phẩm có check điều kiện các nhóm phân loại như :
- Trang chủ
- Đặc biệt
- Nổi bật
- Mới Khuyến mãi
- Giá tốt
- Xem nhiều
- Chính hãng
- Top fix
- Bottom fix
> Nếu muốn hiển thị tất cả các mục , không cần chech
Chọn kiểu hiển thị
Chọn lấy các nội dung theo kiểu :
-
Mẫu nội dung chỉ có tên
-
Mẫu nội dung Tên + Hình + Nút chi tiết
-
Mẫu nội dung Tên + Hình + Mô tả
-
Mẫu nội dung Tên + Hình + Mô tả + Nút chi tiết
Số lượng item hiển thị:
Nhập số lượng mục sẽ hiển thị (ví dụ 10)
Chọn vị trí hiển thị:
Tùy check chọn theo danh sách các đề xuất khi chọn vào ô này. Trong đó có
-
Select All: Chọn tất cả
-
Deselect All: Bỏ chọn tất cả
Thao tác nhanh tại trang danh sách theo số 13
Check chọn hiển thị / ẩn
Tính năng dùng chung các mục Phân loại dữ liệu:
Đường viền chuyên mục
- Chọn tick để hiện đường viền nội dung.
- Bỏ tick để ẩn đường viền nội dung
Tiêu đề danh mục
Chọn tick để hiển mục tiêu đề.
- Bỏ tick để ẩn mục tiêu đề.
Lấy tiêu đề của danh mục được chọn
- Chọn tick để lấy tiêu đề của mục nguồn.
- Bỏ tick để lấy tiêu đề của mục này.
Hình ảnh :
Đây là phần ảnh nền của từng khối nội dung
< Chọn tệp > để tải hình ảnh lên Layout
Màu sắc
Chọn có hoặc không
Phần màu sắc này được hiển thị ở phần layout là bảng màu nền, chữ, viền, nút… của giao diện
icon
Biểu tượng hình ảnh nhỏ, mang tính minh họa, làm nổi bật chức năng/nội dung. Chọn icon cụ thể để gắn vào layout hoặc tải lên
Gồm 3 lựa chọn : Không chọn / chọn icon có sẵn/ upload icon).
> Chọn tệp hình ảnh icon từ máy tính và upload lên hệ thống quản trị website, để dùng làm biểu tượng hiển thị trong layout.
Tính năng nhập nội dung tự do
Tính năng nhập nội dung tự do cho phép soạn nội dung tùy ý và thiết lập điều kiện hiển thị linh hoạt, giúp bạn chủ động thiết kế bố cục và thông tin trên từng trang.
Nhập nội dung cho Layout, có hỗ trợ định dạng text, hình ảnh, video
( Xem thêm video hướng dẫn bộ soạn thảo văn bản )
Lưu ý:
Nội dung cần phù hợp với bề ngang hẹp của cột A, B.
Tránh dùng bảng, ảnh hoặc khối văn bản quá rộng sẽ làm vỡ layout.
Nội dung tự soạn ở mục này thường là tĩnh (không tự động cập nhật), nên nếu cần dữ liệu tự động thay đổi theo cập nhật của website thì nên dùng phần chèn shortcode hoặc module tiện ích thay vì nhập tay.
Video hướng dẫn chèn tính năng shortcode
- Lưu và kiểm tra:
Khi hoàn tất về các mục trên phần Cấu hình Layout anh chị kiểm tra lại nội dung một lần nữa, sau đó chọn < lưu > bài viết sẽ được thêm mới và ở lại trang , chọn < Lưu và thêm > để Lưu thao tác hiện tại và mở trang mới hoặc chọn < Lưu và đóng > Lưu Layou này và quay về trang Danh sách Layout.