🎯 Mục tiêu

Sau bài này, khách hàng sẽ:

  • Biết tạo slider banner chạy tự động.

  • Biết tạo gallery ảnh dạng popup.

  • Làm được 1 trang giới thiệu sản phẩm/dịch vụ bằng slider và album ảnh.


📝 Nội dung hướng dẫn

1. Tạo Slider Banner

  • Kéo Widget Băng chuyền hình ảnh (Elementor Free) hoặc Slides (Elementor Pro) vào Phần / Cột.

  • Thêm 3–5 ảnh banner.

  • Cài đặt:

    • Slides to Show (Slide để hiển thị) = 1.

    • Autoplay (Tự động phát) = Yes.

    • Autoplay Speed (Tốc độ tự động phát)= 5000ms.

    • Navigation (Điều hướng) = Arrows & Dots.

  • Có thể bật Infinite Loop (Vòng lặp vô hạn) để sau khi chạy đến slide cuối cùng, slider sẽ tự động trở về slide đầu và tiếp tục chạy.

Kéo Widget Slides vào Phần / Cột.

 

Chọn Slids và Thêm ảnh banner.

 

Cài đặt cho Slider Banner.

2. Tạo Gallery Popup

  • Kéo widget Album ảnh cơ bản hoặc Gallery vào Phần / Cột.

  • Chọn nhiều ảnh từ Thư viện (ví dụ: ảnh sản phẩm).

  • Bố cục = Grid (3 cột).

  • Bật Liên kết → Tệp Media + Lightbox → khi click vào ảnh sẽ hiện popup.

Kéo widget Album ảnh cơ bản hoặc Gallery vào Phần / Cột.

 

Thêm các ảnh sau đó bật Liên kết → Tệp Media + Lightbox → khi click vào ảnh sẽ hiện popup.

 

Kết quả chúng ta đạt được.

 

Khi click hiện popup full ảnh

🎯 Bài tập thực hành

  • Tạo 1 slider banner gồm 3 ảnh, chạy tự động, có mũi tên và chấm điều hướng.

  • Tạo 1 gallery 6 ảnh dạng 3 cột, click mở popup.

  • Xuất bản thành trang “Giới thiệu sản phẩm”.

Tagged: