Ảnh & Media trong Elementor

🎯 Mục tiêu

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

  • Biết chèn ảnh vào Cột hoặc Vùng.

  • Biết đặt ảnh làm ảnh nền cho một Vùng.

  • Biết tạo gallery (Bộ sưu tập ảnh).

  • Biết chèn video từ YouTube/Vimeo.

  • Tạo được banner có ảnh nền, chữ và nút nổi bật.

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

1. Thêm ảnh vào cột

  • Kéo widget Image (Hình ảnh) → thả vào cột.

  • Nhấn Choose Image (Chọn ảnh) → chọn ảnh từ Media Library (Thư viện).

  • Có thể chỉnh Độ phân giải hình ảnh để có kích thước mong muốn.

Kéo Widget Hình ảnh thả vào cột.

 

Chọn ảnh muốn hiển thị.

 

Ở đây chúng ta có thể chọn ảnh từ thư viện hoặc tải lên tệp mới để sử dụng.

 

Kết quả.

2. Đặt ảnh làm background cho Section

  • Chọn Section (Phần) hoặc Column (Cột) → Tab Style (Kiểu hiển thị) → Background (Loại nền) → Classic  (Cổ điển).

  • Chọn Image (Chọn ảnh)→ tải lên ảnh.

  • Điều chỉnh Vị trí: Chính giữa, Đính kèm: Cuộn / Cố định, Kích thước hiển thị: Bao bọc, Lặp lại: Không lặp lại.

Chọn vùng chưa và chọn ảnh cho vùng đó.
Tùy chính như hướng dẫn.
Kết quả ta sẽ được một vùng với ảnh nền như mong muốn.

3. Tạo Gallery ảnh

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

  • Tab Nội dung → Chọn nhiều ảnh từ Media Library (Thư viện).

  • Chỉnh bố cục: chọn Grid (Lưới) / Masonry (Xếp gạch) / Justified (Căn hàng)

  • Chỉnh số Cột và Khoảng cách các ảnh.

  • Bật Lightbox → click ảnh để xem popup.

Thêm Widget Gallery vào vùng chứa bạn muốn.

 

Chọn danh sách các ảnh => Định dạng bố cục mong muốn.
Chỉnh số Cột và Khoảng cách các ảnh => Bật Lightbox để hiện popup khi click vào ảnh.
Kết quả chúng ta đạt được.

4. Thêm Video

  • Kéo widget Video vào Phần / Cột.

  • Trong tab Nội dung: chọn Nguồn: Youtube → dán link YouTube.

  • Chỉnh: Tự động chơi, Tắt tiếng, Lặp lại, Thời gian bắt đầu.

  • Bật ảnh đại diện video: Bật Lớp phủ hình ảnh → Chọn ảnh đại diện muốn hiển thị.

Kéo widget Video vào Phần / Cột.

 

Dán đường dẫn video muốn hiển thị.
Bạn có thể tùy chỉnh tùy theo nhu cầu của mình.
Bật Lớp phủ hình ảnh → Chọn ảnh đại diện muốn hiển thị.

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

  • Tạo 1 Phần banner: ảnh nền + tiêu đề + mô tả + nút.

  • Tạo 1 Phần khác có gallery 6 ảnh, hiển thị dạng 3 cột.

  • Thêm 1 Phần có video YouTube với ảnh đại diện.

Tagged: