![Lorem Ipsum](/_next/image?url=https%3A%2F%2Fd24rsy7fvs79n4.cloudfront.net%2Facademy.eraweb.net%2F1000x1000%2F20230426091048_29_1682475048.3112.webp&w=2048&q=75)
![Lorem Ipsum](/_next/image?url=https%3A%2F%2Fd24rsy7fvs79n4.cloudfront.net%2Facademy.eraweb.net%2F1000x1000%2F20230426135513_29_1682492113.6726.webp&w=2048&q=75)
Add-on Custom List
![Lorem Ipsum](/_next/image?url=https%3A%2F%2Fd24rsy7fvs79n4.cloudfront.net%2Facademy.eraweb.net%2F1000x1000%2F20230426134727_29_1682491647.5894.webp&w=2048&q=75)
![Lorem Ipsum](/_next/image?url=https%3A%2F%2Fd24rsy7fvs79n4.cloudfront.net%2Facademy.eraweb.net%2F1000x1000%2F20230426134509_29_1682491509.3933.webp&w=2048&q=75)
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
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002104407_29_1696218247.8983.webp)
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
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002104420_29_1696218260.6887.webp)
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
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002104430_29_1696218270.8793.webp)
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
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002104438_29_1696218278.8043.webp)
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
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002104448_29_1696218288.3273.webp)
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.
Bài học liên quan
Chúng ta sử dụng phần add-on Job Detail để show ra thông chi tiết khi click chọn 1 Job trên...
Chúng ta sử dụng phần add-on Button tạo những nút chuyển hướng cho trang web. Thường tạo cho các giao...
Phần add-on này sử dụng cho việc show ra danh sách những sản phẩm trong category hoặc những sản phẩm...
Add-on biểu mẫu giúp tạo ra các biểu mẫu từ phức tạp đến đơn giản như: biểu mẫu thông tin...
Chủ đề liên quan