![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 Job 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)
Chúng ta thường sử dụng phần add-on Job List để show ra danh sách những job mà admin đã đang tải.
Bước 1: Đến trang quản trị để ta thiết lập những Job cho phần hiển thị những danh sách job cho add-on Job List. Tìm đến mục Recruiment chọn item All Job
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002101344_29_1696216424.9992.webp)
Bước 2: Thông những thông tin cần thiết cho job tại các ô input bên hình dưới:
Tab Details
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002101457_29_1696216497.5555.webp)
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002101453_29_1696216493.8179.webp)
Đối với mục Industry và Skill ta cần lưu ý tạo trước trên các Panel như hình:
- Industry: tại mục Jobs
- Skill: tại mục Candidate chọn Skill
Các tab còn lại: Information, Contact, Notes, Process ta cũng nhập nội dung cho job
Khi hoàn thành việc thêm tất cả thông tin cho job ta nhấn Save / Save & close.
Bước 3: Trở lại phần thiết kế giao diện trên Visual 3. Tạo 1 Block mới để chứa add-on cần dùng. Chọn add-on Job List hoặc gõ tìm kiếm với Job List trên thanh add-on. Sau đó kéo thả vào vùng Block được chọn.
Bước 4: Tìm và Click chọn phần Icon Config của Add on Job List trên thanh Layer xuất hiện hộp thoại.
Tab DATA
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002101616_29_1696216576.696.webp)
Data Feed: Lấy ra data theo các loại: All, Menu, Categories
Categories: Lấy những danh sách categories mà mình muốn
Tab DISPLAY
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002101628_29_1696216588.9542.webp)
Job Creator: Cho phép hiển thị tên Creator của job đó
Destination Page: Khu vực chuyển hướng khi click vào Creator của Job đó sẽ ra danh sách các job mà Creator đã khởi tạo. Phần này lưu ý sẽ chọn Job-list
Search Function: Bật tính năng hiển thị thanh tìm job
Page Limit: Giới hạn số lượng item Job
Pagination: Hiển thị phân trang của job
View All Button: Hiển thị nút xem tất cả các job
Type of Target: 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)
Items per Line: Tạo phân chia cho item Job 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 Job muốn mà hiển thị)
Horizontal Spacing: Khoảng cách cho chiều ngang của item Job. Tính pixel
Vertical Spacing: Khoảng cách cho chiều dọc của item Job. Tính pixel
Tab IMAGE
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002101818_29_1696216698.7156.webp)
Show Image: Cho phép hiển thị ảnh của Job
Image Width: Tạo kích thước chiều ngang của ảnh
Image Height: Tạo kích thước chiều cao của ảnh
Tab SLIDER
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002101704_29_1696216624.703.webp)
Slider: Kích hoạt tính năng Slider cho item Job
Item Number: Số lượng item Job muốn hiển thị trên Slider
Rows Number: Số dòng cho Slider
Loop: Chế độ khi chuyển item Job
Arrows: Tạo 2 dấu mũi tên trái phải để di chuyển slider mà muốn xem Job nhanh hơn
Dots: Tạo phân trang trên Slider
Auto Play: Chế độ tự chuyển item Job trên Slider
Play Timeout: Thời gian tự động chuyển item Job
Item Number: Số lượng hiển thị 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 Job 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 Job tiếp theo)
Horizontal Spacing: Khoảng cách chiều ngang cho item Job. Tính Pixel
Vertical Spacing: Khoảng cách dọc ngang cho item Job. Tính Pixel
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 Job List.
Bài học liên quan
Add-on tập hợp nhiều hình ảnh. Sau khi đã kéo thả Add-on, tiếp theo bạn cần nhấn vào Add-ons Config...
Chủ đề liên quan