Cách sử dụng tiện ích Hình ảnh

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

1.Tiện ích Hình ảnh là gì ?

Bước 1: Thêm tiện ích Hình ảnh

Từ thanh bên trái Elementor, tìm tiện ích Hình ảnh (Image).

Kéo và thả vào vị trí bạn muốn trên trang (section hoặc cột).

Bước 2: Chọn ảnh (Tab Nội dung)

Trong tab Nội dung, nhấp vào khung Chọn ảnh.

Chọn ảnh từ Thư viện Media của WordPress hoặc tải ảnh mới lên.

Bấm vào Chọn.

Giờ bạn đã chọn được hình ảnh ưng ý

Bước 3: Tùy chỉnh thuộc tính ảnh

Từ thanh bên trái bạn có thể tùy chỉnh các mục:

Độ phân giải hình ảnh: Chọn kích thước mong muốn (ví dụ: Large – 1030×1030).

Chú thích: Viết chú thích cần thiết, chọn “Không” nếu bạn không cần nhập chú thích

Phần Liên kết có các tùy chọn:

• Không: Ảnh sẽ chỉ để hiển thị.
  
• Tập tin Media: Khi nhấn ảnh, ảnh sẽ được mở to.
  
• URL tùy chỉnh: Dẫn sang một đường link khác.
  

Bước 4: Chỉnh kiểu hiển thị (Tab Kiểu hiển thị)

Hãy nhìn vào thanh bên trái để tìm và chỉnh sửa những mục mà bạn cần cho hình ảnh.

Chiều rộng: Kéo thanh trượt hoặc nhập số để chỉnh kích thước ảnh.

Tối đa chiều rộng: Giới hạn max size ảnh.

Căn chỉnh: Chọn trái, giữa, hoặc phải.

Chiều cao: kéo thanh trượt để nhập chiều cao

Bo góc: Làm tròn các góc của ảnh (ví dụ: 10px hoặc 50% để thành hình tròn).

Độ trong suốt: Kéo thanh trượt để nhập độ trong suốt

Viền: Thêm viền, chọn độ dày, màu viền.

Đổ bóng: Thêm đổ bóng để tạo chiều sâu.

Bước 5: Thiết lập nâng cao (Tab Nâng cao)

Bố cục:

• Điều chỉnh margin (lề ngoài) và padding (lề trong).

Hiệu ứng động:

• Chọn hiệu ứng khi cuộn trang (ví dụ: fade in, zoom in…)

Biến đổi:

• Xoay, phóng to, nghiêng ảnh (dành cho style nâng cao). 

Nền, Viền, Mặt nạ:

• Tạo khung viền hoặc thêm mask cho ảnh.

Tương thích:

• Điều chỉnh ẩn/hiện ảnh trên thiết bị (mobile, tablet, desktop). 

Thuộc tính & CSS tùy chỉnh:

• Gán ID hoặc class CSS riêng nếu bạn muốn chỉnh sâu.