Tạo Genesis responsive slider cho theme Paradise

Hướng dẫn tạo Genesis responsive slider cho theme Paradise.

Nếu bạn chưa biết thì kể từ phiên bản 4.2, chúng tôi đã tích hợp thêm tính năng hỗ trợ responsive slider vào theme Paradise. Điều này đồng nghĩa với việc các bạn có thể chèn một slider hiển thị bài viết, trang, sản phẩm… vào trang chủ hoặc bất cứ khu vực widget nào được hỗ trợ. Responsive slider sẽ giúp bạn hiển thị danh sách các bài viết hoặc sản phẩm nổi bật để thu hút sự chú ý của khách hàng. Nó bao gồm khả năng tùy chỉnh giao diện linh hoạt và hoạt động tốt trên mọi kích thước màn hình, từ desktop, tablet đến mobile.

Tham khảo thêm:

• Theme Paradise v4.2 chính thức ra mắt, hỗ trợ WooCommerce
• Sử dụng colored boxes, color buttons và highlight menu trong Paradise

Genesis responsive slider cho theme Paradise

Demo Genesis responsive slider

• Demo trên desktop:

• Demo trên mobile:

Để chi tiết và trực quan hơn, các bạn có thể xem live demo tại đây.

Hướng dẫn cài đặt Genesis responsive slider

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin Genesis Responsive Slider (link download).

2. Tiếp theo, truy cập vào Genesis => Slider Settings và thiết lập các thông số cần thiết cho slider.

Trong đó:

• Would you like to use posts or pages: bạn muốn hiển thị bài viết, trang hay sản phẩm… trên slider.
• Choose a term to determine what slides to include: lựa chọn chuyên mục hoặc thẻ mà bạn muốn hiển thị trên slider.
• List which category, tag or other taxonomy IDs to exclude: ID của chuyên mục hoặc thẻ mà bạn không muốn hiển thị trên slider.
• Choose the include / exclude slides using their post / page ID in a comma-separated list: hiển thị hoặc loại bỏ trang/ bài viết nào đó khỏi slider theo ID.
• List which post IDs to include / exclude: danh sách trang/ bài viết bạn muốn hiển thị hoặc loại bỏ theo ID.
• Number of Slides to Show: số lượng trang/ bài viết hiển thị trên slider.
• Number of Posts to Offset: số lượng bài viết chênh lệch so với thực tế. Ví dụ bạn hiển thị danh sách bài viết mới nhất và thiết lập thông số này bằng 1 thì trên slider sẽ không hiển thị bài viết mới nhất mà hiển thị từ bài viết mới thứ 2 trở về trước.
• Order By: sắp xếp bài viết theo ngày đăng, tiêu đề, ID hoặc sắp xếp ngẫu nhiên.
• Time Between Slides (in milliseconds): thời gian hiển thị của 1 slide trên slider, tính bằng mili giây.
• Slide Transition Speed (in milliseconds): thời gian chuyển giữa 2 slide, tính bằng mili giây.
• Slider Effect: Select one of the following: hiệu ứng chuyển giữa 2 slide.
• Maximum Slider Width (in pixels): độ rộng tối đa của slider.
• Maximum Slider Height (in pixels): chiều cao tối đa của slider.
• Display Next / Previous Arrows in Slider: hiển thị nút điều hướng trên slider.
• Display Pagination in Slider: hiển thị nút phân trang slider.
• Do not link Slider image to Post/Page: không liên kết hình ảnh trên slide với bài viết/ trang.
• Display Post/Page Title in Slider: hiển thị tiêu đề bài viết/ trang trên slide.
• Display Content in Slider: hiển thị nội dung (text) trên slide.
• Hide Title & Content on Mobile Devices: ẩn tiêu đề và nội dung trên điện thoại (chỉ hiển thị ảnh).
• Select one of the following: lựa chọn hiển thị nội dung hoặc hiển thị phần tóm tắt.
• More Text (if applicable): chỉnh sửa nút xem thêm. Nếu bạn không muốn hiển thị nút thì hãy bỏ trống.
• Limit content to […] characters: giới hạn độ dài phần nội dung trên slide.
• Slider Excerpt Width (in percentage): độ rộng của phần hiển thị nội dung trên slide, tính theo %.
• Excerpt Location (vertical): vị trí hiển thị phần nội dung trên slide (theo chiều dọc).
• Excerpt Location (horizontal): vị trí hiển thị phần nội dung trên slide (theo chiều ngang).

Sau khi thiết lập xong, click vào nút Save Settings để lưu lại.

3. Truy cập Appearance => Widgets => kéo và thả widget Genesis – Responsive Slider và thả vào Home – Top.

Đặt tiêu đề cho widget hoặc bỏ trống nếu bạn muốn. Click vào nút Save để lưu lại. Bây giờ thì truy cập trang chủ và xem thành quả nhé. Đơn giản vậy thôi, chúc các bạn thành công!

Mọi thắc mắc và góp ý liên quan đến việc tạo responsive slider trong theme Paradise, xin vui lòng gửi vào khung bình luận bên dưới để được hỗ trợ và giải đáp.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)