Hướng dẫn sử dụng Widget – Images

Chào anh/chị,

Một trang web đẹp và thu hút không thể thiếu những hình ảnh bắt mắt. Hôm nay, chúng tôi sẽ chỉ cho anh/chị cách để tự tay chèn bất kỳ hình ảnh nào mình muốn lên website một cách dễ dàng.

Hãy tưởng tượng khối “Image” này giống như một khung ảnh kỹ thuật số. Anh/chị có thể chọn bất kỳ bức ảnh nào mình thích (ảnh sản phẩm, ảnh công ty, ảnh sự kiện…), đặt nó vào “khung ảnh” này, rồi treo lên bất kỳ đâu trên “bức tường” trang web của mình.

Việc này cực kỳ đơn giản, anh/chị chỉ cần làm theo các bước sau đây là được ạ.

Phần 1: Mở trình chỉnh sửa trang web (UX Builder)

Đầu tiên, chúng ta cần vào đúng nơi để “treo” bức ảnh của mình lên.

Bước 1: Đăng nhập vào trang quản trị

• Anh/chị truy cập vào đường link quản trị: tenmiencuabạn.com/wp-admin
• Nhập Tên người dùng và Mật khẩu đã được cấp.

Bước 2: Mở trang cần chèn hình ảnh

1. Ở cột menu màu đen bên trái, tìm và bấm vào mục “Trang” (Pages).
2. Tìm đến trang anh/chị muốn chèn ảnh (ví dụ: Trang Giới thiệu, Trang chủ…).
3. Rê chuột vào tên trang đó và bấm vào nút “Edit with UX Builder”.

Phần 2: Thêm và tùy chỉnh Khung ảnh (Khối Image)

Bây giờ, chúng ta sẽ bắt đầu chèn ảnh vào trang.

Bước 1: Thêm khối “Image” vào trang

1. Ở cột công cụ bên trái, anh/chị bấm vào nút có dấu cộng + Add Elements.
2. Trong bảng chức năng hiện ra, gõ chữ “Image” vào ô tìm kiếm.
3. Khi khối Image hiện ra, anh/chị hãy bấm vào nó.

Một khung ảnh trống sẽ xuất hiện trên trang web. Cột bên trái bây giờ sẽ hiển thị các tùy chọn để anh/chị chọn và chỉnh sửa ảnh.

Bước 2: Chọn ảnh để đưa vào khung

Đây là bước quan trọng nhất! Ở cột bên trái, anh/chị sẽ thấy một nút màu xanh dương lớn có tên “Select Media”. Hãy bấm vào nút đó.

Một cửa sổ mới sẽ hiện ra. Cửa sổ này có 2 thẻ:

• Thẻ “Tải tập tin lên” (Upload Files): Dùng khi anh/chị muốn lấy một bức ảnh mới từ máy tính của mình.
  1. Bấm vào thẻ này.
  2. Bấm vào nút “Chọn tập tin”.
  3. Tìm và chọn bức ảnh anh/chị muốn đăng từ máy tính của mình (giống như khi anh/chị gửi ảnh qua Zalo hay Email).
• Thẻ “Thư viện” (Media Library): Dùng khi anh/chị muốn sử dụng lại một bức ảnh đã có sẵn trên website. Thư viện này giống như một album ảnh của website vậy.

Sau khi đã tải ảnh lên hoặc chọn một ảnh từ thư viện, hãy bấm vào nút màu xanh “Select” ở góc dưới cùng bên phải.

Ngay lập tức, bức ảnh anh/chị chọn sẽ hiện ra trên trang web!

Bước 3: “Trang trí” cho bức ảnh (Các tùy chỉnh phổ biến)

Bây giờ, hãy xem các tùy chọn ở cột bên trái để làm cho bức ảnh của mình đẹp hơn nhé:

• Width (Độ rộng của ảnh):
  • Dùng để chỉnh cho ảnh to hay nhỏ theo chiều ngang. Anh/chị có thể kéo thanh trượt hoặc nhập số phần trăm vào.
  • 100%: Ảnh sẽ rộng bằng cả khu vực chứa nó.
  • 50%: Ảnh sẽ chỉ rộng bằng một nửa.
• Link (Gắn đường dẫn – Làm cho ảnh có thể bấm vào được):
  • Nếu anh/chị muốn khách hàng bấm vào ảnh và được dẫn tới một trang khác, hãy dán đường link của trang đó vào ô này.
  • Ví dụ: Dán link trang sản phẩm A vào đây. Khi khách hàng bấm vào ảnh sản phẩm A, họ sẽ được đưa thẳng tới trang chi tiết của sản phẩm đó.
  • Target: Nhớ chọn “Open in a new tab” để trang mới mở ra ở tab khác, giúp khách không bị thoát khỏi trang hiện tại.
• Hover (Hiệu ứng khi rê chuột vào):
  • Đây là hiệu ứng xảy ra khi khách hàng di chuột lên trên bức ảnh. Rất thú vị!
  • Anh/chị hãy bấm vào và chọn thử các hiệu ứng như:
    • Glow: Ảnh sẽ phát sáng nhẹ.
    • Zoom: Ảnh sẽ phóng to lên một chút.
    • Fade: Ảnh sẽ mờ đi một chút, thường dùng khi có chữ hiện lên.
• Image Radius (Bo tròn góc ảnh):
  • Nhập một con số (ví dụ: 10 hoặc 20) vào đây để làm cho các góc của bức ảnh được bo tròn lại, trông sẽ mềm mại và hiện đại hơn.
• Depth / Shadow (Đổ bóng):
  • Mục này giúp tạo một lớp bóng mờ phía sau bức ảnh, làm cho bức ảnh có cảm giác “nổi” lên trên nền trang web, trông có chiều sâu và chuyên nghiệp hơn. Anh/chị có thể chọn từ 1 đến 5.

Phần 3: Lưu lại thay đổi – Bước cuối cùng!

Sau khi đã chèn và chỉnh sửa ảnh ưng ý, anh/chị BẮT BUỘC phải lưu lại.

1. Bấm nút “Apply” hoặc “Update” ở góc dưới cùng bên trái (để lưu cài đặt cho riêng bức ảnh này).
2. Sau đó, bấm vào nút “Update” màu xanh lá cây ở góc trên cùng bên phải màn hình (để lưu toàn bộ thay đổi cho cả trang).

Khi nút Update mờ đi là anh/chị đã lưu thành công. Hãy ra ngoài trang web và tận hưởng thành quả của mình nhé!

Mẹo nhỏ:

• Chất lượng ảnh: Hãy chọn những bức ảnh rõ nét, không bị mờ. Tuy nhiên, cũng không nên dùng ảnh quá nặng (dung lượng lớn) vì sẽ làm website tải chậm.
• Đồng bộ: Nếu có thể, hãy sử dụng các hình ảnh có cùng phong cách (màu sắc, góc chụp) để trang web của anh/chị trông chuyên nghiệp và hài hòa.