Add-on Custom List

Phần này sử dụng addon Custom List để show ra danh sách theo dạng bài viết ngắn giới thiệu về 1 nội dung nào đó mà không dùng trên trang quản lý quản trị. Có thể chỉnh sửa nội dung trực tiếp trên Config. Add-on Custom List có thể tùy biến cao theo nhiều kiểu khác nhau… đó là một lợi thế mà Custom List đem lại.

Bước 1: Chọn add-on Custom List hoặc gõ tìm kiếm với Custom List trên thanh add-on. Sau đó kéo thả vào vùng Block được chọn.

Bước 2: Tìm và Click chọn phần Icon Config của Add on Custom List trên thanh Layer xuất hiện hộp thoại.

Tab ITEM

Button Add Item: Thêm 1 item mới cho các phần tử ô input bên dưới

Các phần tử ô input: Image, Title, Description, Link, cần thêm thông tin cho các trường này. Alt, dùng để thêm nội dung cho thẻ image ở thuộc tính alt image; Active: nút di chuyển item lên xuống, ẩn và xóa item.

Tab DETAIL

Addon Title: Tạo tiêu đề cho addon Custom List

Addon Description: Tạo mô tả ngắn cho add-on Custom List

Item Name: Hiển thị Title cho item

Item Image: Hiển thị hình ảnh cho item

Item Description: Hiển thị mô tả cho item

Items per Line: Tạo phân chia cho item hiển thị trên cùng 1 hàng của từng giao diện trên tất cả thiết bị (được hiểu là hiển thị chia cột trong danh sách item mà muốn hiển thị)

Horizontal Spacing: Khoảng cách cho chiều ngang của item. Tính pixel

Vertical Spacing: Khoảng cách cho chiều dọc của item. Tính pixel

Open Link: Chọn kiểu xem trên trình duyệt (xem không chuyển tab và xem có chuyển sang 1 tab mới trên trình duyệt)

Tab IMAGE

Crop: Kích hoạt tính năng crop ảnh cho item

Image Width: Thiết lập chiều dài cho ảnh

Image Height: Thiết lập chiều cao cho ảnh

Tab SLIDER

Slider: Kích hoạt tính năng Slider cho item Custom List

Auto Height: tạo height auto cho những hình ảnh có kích thước height mặc định

Loop: Lặp chế độ khi chuyển item

Auto Play: Chế độ tự chuyển item trên Slider

Play Timeout: Thời gian tự động chuyển item

Pagination: tạo phân trang trên Slider

Arrow Buttons: Tạo 2 dấu mũi tên trái phải để di chuyển slider mà muốn xem item nhanh hơn

Arrow Buttons Position: Tạo vị trí hiển thị Arrow Buttons trên Slider: Inside, Outside, Middle

Slides Per View: Số lượng hiển thị item trong 1 hàng của slider (điều này khác với Item Number bên trên chỉ cho phép hiển thị những item hiển thị khi thiết lập với con số có nghĩa tạo cột và sau đó sẽ chuyển thời gian xem tiếp cho những item tiếp theo)

Space Between: Khoảng cách chiều ngang cho item. Tính Pixel

Tab FUNCTION

Function: Chọn tính năng cho Custom List bao gồm: Tab (Tạo thẻ tab), Accordion (Tạo thẻ tab kiểu nằm dọc)

Accordion Icon: Chọn muốn hiển thị icon arrow down

Accordion Active Color: Màu active cho tab hoặc Accordion khi được chọn

Accordion Active Background: Màu nền cho Tab và Accordion item khi được chọn

Accordion Open: Chế độ xuất hiện để hiển thị.

Bước 3: Khi bạn cấu hình toàn bộ các thẻ trên ta nhấn nút Apply để hoàn thành việc Config cho Custom List.