Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Chào anh/chị,
Nếu như Slider giống một “cuốn album ảnh” chuyển động, thì Banner lại giống như những “tấm poster” hoặc “biển quảng cáo nhỏ” được đặt ở các vị trí khác nhau trên trang web.
Anh/chị có thể dùng Banner để:
- Giới thiệu nhanh một danh mục sản phẩm (ví dụ: “Thời trang Nữ”, “Đồ gia dụng”).
- Thông báo một chương trình khuyến mãi nhỏ (ví dụ: “Miễn phí vận chuyển”).
- Dẫn khách hàng đến một bài viết hay trên blog.
Điểm đặc biệt của Banner là nó rất thu hút và có tính tương tác cao. Hãy cùng tìm hiểu cách làm nhé!
Phần 1: Banner khác gì một tấm ảnh thông thường?
Đây là câu hỏi rất hay! Một tấm ảnh thông thường chỉ là một tấm ảnh. Nhưng một Banner thì “thông minh” hơn nhiều:
- Có hình nền: Là hình ảnh sản phẩm, dịch vụ của anh/chị.
- Có chữ và nút bấm ở trên: Anh/chị có thể viết tiêu đề, mô tả và đặt nút “Xem thêm” ngay trên tấm ảnh đó.
- Có hiệu ứng khi rê chuột vào: Đây chính là điểm “ăn tiền”! Khi khách hàng đưa chuột lên Banner, nó có thể phóng to, sáng lên, hoặc hiện ra thêm thông tin. Điều này khiến trang web của anh/chị sống động và chuyên nghiệp hơn hẳn.
Phần 2: Cách Thêm một Banner mới vào trang
Quy trình này rất quen thuộc và đơn giản.
- Anh/chị vào trình chỉnh sửa UX Builder của trang mình muốn thêm Banner.
- Nhấn vào nút dấu cộng (+) ở vị trí anh/chị muốn đặt Banner (thường là bên trong một Cột – Column).
- Một bảng công cụ sẽ hiện ra. Anh/chị hãy tìm và nhấn vào ô có chữ Banner.
Một Banner mẫu sẽ xuất hiện ngay lập tức. Giờ là lúc chúng ta biến nó thành của riêng mình!
Phần 3: Các tùy chỉnh quan trọng nhất của một Banner
Sau khi thêm Banner, cột công cụ bên trái sẽ hiển thị tất cả “đồ nghề” để anh/chị chỉnh sửa nó.
1.Thay đổi hình ảnh nền (Bắt buộc phải làm!)
- Bước 1: Nhấn vào Banner ở cột công cụ bên trái.
- Bước 2: Trong tab Options, tìm đến mục Background (Nền).
- Bước 3: Nhấn vào nút “Change media” (Thay đổi ảnh/video).
- Bước 4: Thư viện ảnh sẽ hiện ra. Anh/chị hãy chọn ảnh có sẵn hoặc vào tab “Tải file lên” để lấy ảnh từ máy tính.
- Bước 5: Nhấn nút “Use this image” (Sử dụng ảnh này).
–
2.Sửa chữ và nút bấm (Textbox)
Giống như Slider, chữ và nút bấm trên Banner cũng được quản lý bởi một thứ gọi là Textbox.
- Bước 1: Ở cột bên trái, hãy nhấn vào chữ Textbox nằm BÊN TRONG Banner.
- Bước 2: Để sửa chữ, nhấn nút “Open Text Editor”. Một khung soạn thảo giống Word sẽ hiện ra, anh/chị cứ thoải mái gõ chữ, chỉnh to nhỏ, in đậm… rồi nhấn OK.
- Bước 3: Để sửa nút bấm, kéo xuống dưới tìm mục Button.
- Text: Đổi chữ trên nút (ví dụ: “Khám Phá Ngay”).
- Link: Dán đường link trang web mà anh/chị muốn khách hàng đi đến khi họ nhấn vào nút. Nếu không muốn có nút, anh/chị chỉ cần xóa hết chữ trong ô Text là được.
Phần 4: Tạo “Phép thuật” – Hiệu ứng và Lớp phủ
Đây là phần giúp Banner của anh/chị nổi bật và khác biệt.
1.Thêm Lớp phủ màu (Overlay)
Lớp phủ là một lớp màu mờ được đặt lên trên ảnh nền. Nó có tác dụng làm cho chữ trắng hoặc chữ sáng màu trở nên dễ đọc hơn rất nhiều.
- Nhấn vào Banner ở cột bên trái.
- Tìm đến mục Overlay.
- Chọn một màu (thường là màu đen).
- Kéo thanh trượt bên cạnh để điều chỉnh độ đậm/nhạt. Kéo càng sang phải, lớp phủ càng đậm. Anh/chị chỉ cần một lớp phủ hơi mờ là đủ đẹp rồi!
2.Thêm hiệu ứng khi rê chuột (Hover Effect)
Đây là hiệu ứng “kỳ diệu” xảy ra khi người dùng đưa con trỏ chuột lên trên Banner.
- Vẫn trong phần tùy chỉnh của Banner, tìm đến mục Effect (Hiệu ứng).
- Anh/chị sẽ thấy một danh sách các hiệu ứng, hãy cứ bấm vào thử từng cái để xem cái nào đẹp nhất. Một vài hiệu ứng phổ biến là:
- Zoom: Hình ảnh sẽ phóng to lên một chút. Rất hay dùng!
- Glow: Banner sẽ sáng rực lên.
- Blur: Làm mờ lớp phủ đi khi rê chuột vào.
- Fade In: Làm chữ và nút bấm hiện ra từ từ.
Mẹo hay: Anh/chị có thể kết hợp nhiều hiệu ứng! Ví dụ, chọn hiệu ứng “Zoom” cho ảnh và hiệu ứng “Focus” cho lớp phủ. Cứ thoải mái thử nghiệm nhé!
Phần 5: Ví dụ thực hành – Tạo Banner “Sản phẩm mới về”
Hãy cùng nhau làm một Banner để quảng cáo cho danh mục “Giày cao gót” mới.
- Trong một Column trống, nhấn dấu + và thêm một Banner.
- Thay ảnh nền: Nhấn vào Banner, chọn Change Media và tải lên một ảnh giày cao gót thật đẹp.
- Thêm lớp phủ: Chọn Overlay màu đen và kéo thanh trượt khoảng 20-30% để ảnh tối lại một chút.
- Sửa chữ: Nhấn vào Textbox bên trong Banner. Mở Text Editor lên, xóa chữ cũ và gõ vào “BỘ SƯU TẬP” ở dòng trên, “GIÀY CAO GÓT” ở dòng dưới. Chỉnh chữ cho to và đẹp.
- Sửa nút bấm: Kéo xuống dưới, sửa chữ của nút thành “XEM TẤT CẢ” và dán đường link của danh mục giày cao gót vào ô Link.
- Thêm hiệu ứng: Quay lại phần chỉnh sửa của Banner, ở mục Effect, chọn hiệu ứng “Zoom”.
- Lưu lại: Nhấn Apply rồi Update.
Vậy là xong! Anh/chị đã có một banner quảng cáo cực kỳ chuyên nghiệp và thu hút. Anh/chị có thể tạo ra nhiều banner tương tự cho các danh mục khác và đặt chúng cạnh nhau trong một Row (Hàng) có 2 hoặc 3 cột.
