Hướng dẫn sử dụng khối Image Grid cho Biolink

Giới thiệu

Khối Image Grid là một công cụ mạnh mẽ cho phép bạn trưng bày sản phẩm, dịch vụ hoặc hình ảnh trong một bố cục lưới đẹp mắt trên trang Biolink của bạn. Với nhiều tùy chọn tùy biến, bạn có thể tạo ra trải nghiệm mua sắm hấp dẫn, bộ sưu tập hình ảnh chuyên nghiệp hoặc vitrine sản phẩm thú vị cho khách truy cập.

Cài đặt cơ bản

Thêm khối Image Grid vào Biolink

1. Đăng nhập vào tài khoản và mở trang Biolink cần chỉnh sửa
2. Nhấp vào nút “Thêm khối” hoặc “+” và chọn “Image Grid” từ danh sách khối
3. Khối mới sẽ được thêm vào trang của bạn với cài đặt mặc định

Cài đặt chung

Sau khi thêm khối, bạn có thể tùy chỉnh các thiết lập chung:

1. Nhấp vào nút “Cài đặt chung” trong bảng điều khiển khối
2. Nhập tiêu đề lưới (sẽ hiển thị ở trên cùng của lưới)
3. Tùy chọn mở liên kết trong cửa sổ mới bằng cách bật “Mở trong tab mới”
4. Lưu thay đổi bằng cách nhấp vào nút “Cập nhật”

Thêm sản phẩm vào lưới

1. Trong phần “Cài đặt chung”, cuộn xuống đến phần hình ảnh
2. Nhấp vào nút “Thêm hình ảnh” để thêm sản phẩm mới
3. Với mỗi sản phẩm, bạn cần nhập:
   • Tải lên hình ảnh sản phẩm
   • Tiêu đề hiển thị (tên sản phẩm)
   • Mô tả hình ảnh (alt text cho SEO)
   • URL đích (liên kết khi nhấp vào sản phẩm)
   • Nội dung nút CTA (ví dụ: “Mua ngay”, “Xem chi tiết”)

Các trường nâng cao

Mỗi sản phẩm còn có các trường nâng cao cho phép bạn thêm:

1. Badge – Nhãn nhỏ hiển thị trên sản phẩm (ví dụ: “New”, “Sale”)
2. Ribbon – Ruy băng góc hoặc banner (ví dụ: “Best Seller”)
3. Giá – Hiển thị giá sản phẩm (ví dụ: “$19.99”)
4. Danh mục – Phân loại sản phẩm (ví dụ: “Fashion”, “Electronics”)
5. Mô tả chi tiết – Văn bản hiển thị khi popup hoặc khi lật sản phẩm

Để truy cập các trường này, nhấp vào “Trường nâng cao” cho mỗi sản phẩm.

Tùy chỉnh bố cục lưới

Để điều chỉnh cách hiển thị của lưới, nhấp vào nút “Cài đặt lưới”:

1. Số cột: Chọn số cột từ 1-6 (mặc định là 3)
2. Khoảng cách: Đặt khoảng cách giữa các sản phẩm (0-30px)
3. Bo góc: Điều chỉnh độ bo tròn các góc của hình ảnh (0-30px)
4. Nền lưới: Chọn màu nền cho toàn bộ lưới
5. Hiển thị tiêu đề: Bật/tắt hiển thị tiêu đề sản phẩm
6. Hiển thị nút CTA: Bật/tắt hiển thị nút kêu gọi hành động

Chọn và tùy chỉnh mẫu

Khối Image Grid cung cấp nhiều mẫu (templates) đẹp mắt để thay đổi giao diện lưới của bạn:

1. Nhấp vào nút “Kiểu dáng” trong bảng điều khiển khối
2. Duyệt qua các mẫu có sẵn và nhấp để chọn
3. Điều chỉnh “Màu chủ đạo” để thay đổi màu sắc chính của mẫu
4. Tùy chỉnh các thiết lập riêng của mẫu (nếu có)

Các mẫu phổ biến

1. Mặc định: Thiết kế đơn giản, chuyên nghiệp
2. Hover Zoom: Phóng to hình ảnh khi di chuột qua
3. Product Badges: Hiển thị nhãn sản phẩm nổi bật
4. Ribbon Corner: Thêm ruy băng góc hoặc banner
5. Polaroid Style: Hiệu ứng giống ảnh Polaroid
6. Image Flip: Lật hình ảnh để hiển thị thông tin chi tiết
7. Dark Glass Morphism: Hiệu ứng kính tối hiện đại

Lưu ý: Một số mẫu chỉ có sẵn cho người dùng PRO

Hiệu ứng và hoạt ảnh

Để thêm chuyển động và tương tác, nhấp vào nút “Hiệu ứng”:

1. Kiểu hiệu ứng: Chọn giữa Fade, Slide, Zoom, Flip hoặc không có
2. Hiệu ứng khi hover: Bật tùy chọn này để tạo hiệu ứng khi di chuột qua

Kết hợp hiệu ứng với mẫu phù hợp sẽ tạo ra trải nghiệm hấp dẫn cho người dùng. Ví dụ, sử dụng hiệu ứng Fade với mẫu Dark Glass Morphism tạo cảm giác hiện đại và thanh lịch.

Tính năng nâng cao

Tích hợp giỏ hàng

Để bật tính năng giỏ hàng cho sản phẩm:

1. Trong “Cài đặt chung”, bật tùy chọn “Kích hoạt nút thêm vào giỏ hàng”
2. Tùy chỉnh:
   • Nội dung nút thêm vào giỏ hàng
   • Thông báo khi thêm vào giỏ thành công
   • Màu nút giỏ hàng
   • Màu chữ nút giỏ hàng

Popup mô tả

Để hiển thị thông tin chi tiết trong popup thay vì dẫn đến liên kết ngoài:

1. Bật tùy chọn “Kích hoạt popup mô tả” trong “Cài đặt chung”
2. Đảm bảo bạn đã nhập mô tả chi tiết trong trường nâng cao của mỗi sản phẩm
3. Khi người dùng nhấp vào nút CTA, một cửa sổ popup sẽ hiển thị thông tin chi tiết

Thiết lập hiển thị và nhắm mục tiêu

Để kiểm soát khi nào và ai có thể thấy khối Image Grid của bạn, nhấp vào nút hiển thị:

1. Lịch trình: Đặt thời gian bắt đầu và kết thúc hiển thị
2. Quốc gia: Hiển thị khối chỉ cho người dùng từ các quốc gia cụ thể
3. Thiết bị: Chọn loại thiết bị (desktop, tablet, mobile) được hiển thị
4. Ngôn ngữ: Nhắm mục tiêu người dùng có ngôn ngữ trình duyệt cụ thể
5. Hệ điều hành: Hiển thị khối cho các hệ điều hành nhất định

Tính năng này đặc biệt hữu ích cho các chiến dịch quảng cáo theo mùa hoặc khi bạn muốn hiển thị sản phẩm khác nhau cho các thị trường khác nhau.

Kỹ thuật tối ưu

Kích thước hình ảnh

Để có hiệu suất tốt nhất:

• Tối ưu hóa hình ảnh trước khi tải lên (800-1200px là lý tưởng)
• Sử dụng định dạng JPG cho ảnh có nhiều màu sắc
• Sử dụng định dạng PNG cho hình ảnh cần độ trong suốt
• Đảm bảo hình ảnh có tỷ lệ khung hình nhất quán (lý tưởng là 1:1 cho hầu hết các mẫu)

Cách sắp xếp sản phẩm

1. Mẫu Masonry: Sắp xếp sản phẩm với các chiều cao khác nhau để tạo bố cục năng động
2. Tạp chí: Đặt sản phẩm quan trọng nhất ở vị trí đầu tiên để nó lớn hơn (với mẫu Magazine Layout)
3. Phân loại theo màu: Sắp xếp sản phẩm tạo thành dải màu hoặc bảng màu hài hòa

Sử dụng nội dung nút hiệu quả

• Sử dụng nội dung ngắn gọn, rõ ràng (3-4 từ là lý tưởng)
• Tạo cảm giác khẩn cấp với từ ngữ như “Có hạn”, “Mua ngay”
• Điều chỉnh nội dung nút cho từng sản phẩm cụ thể

Các trường hợp sử dụng

Cửa hàng trực tuyến

Lý tưởng để hiển thị các sản phẩm bán lẻ với:

• Mẫu Product Badges để hiển thị giảm giá
• Tích hợp giỏ hàng để mua sắm dễ dàng
• Popup mô tả để xem thông tin chi tiết

Portfolio

Tuyệt vời cho nhiếp ảnh gia, nghệ sĩ và nhà thiết kế:

• Mẫu Masonry để hiển thị các tác phẩm khác nhau
• Hiệu ứng Zoom khi hover để xem chi tiết
• Popup mô tả để hiển thị thông tin dự án

Nội dung hướng dẫn

Hoàn hảo cho blogger và người sáng tạo nội dung:

• Mẫu Category Pills để phân loại bài viết
• Ribbon Corner để đánh dấu nội dung mới
• Image Flip để cung cấp mô tả tóm tắt

Lưu ý và mẹo

1. Tương thích thiết bị di động: Kiểm tra lưới của bạn trên nhiều thiết bị khác nhau; lưới sẽ tự động điều chỉnh số cột trên màn hình nhỏ
2. Sử dụng alt text: Điền mô tả hình ảnh cho tất cả sản phẩm để cải thiện SEO và khả năng tiếp cận
3. Màu sắc nhất quán: Sử dụng bảng màu nhất quán cho màu chủ đạo, nút và nền
4. Không quá tải: Giữ số lượng sản phẩm trong mỗi lưới ở mức hợp lý (9-12 sản phẩm là lý tưởng)
5. Cập nhật thường xuyên: Làm mới sản phẩm và thiết kế định kỳ để giữ nội dung hấp dẫn

Khắc phục sự cố

Hình ảnh không hiển thị

1. Đảm bảo hình ảnh đã được tải lên thành công
2. Kiểm tra kích thước và định dạng hình ảnh (chỉ hỗ trợ JPG, PNG, GIF)
3. Thử tải lại trang hoặc xóa cache trình duyệt

Nút giỏ hàng không hoạt động

1. Kiểm tra xem bạn đã bật tính năng giỏ hàng trong cài đặt chung
2. Đảm bảo sản phẩm có giá được nhập
3. Kiểm tra kết nối internet của người dùng

Kích thước lưới không đồng đều

1. Đối với Masonry Grid, đây là thiết kế có chủ đích
2. Với các mẫu khác, đảm bảo tất cả hình ảnh có cùng tỷ lệ khung hình
3. Thử điều chỉnh khoảng cách lưới và số cột

Kết luận

Khối Image Grid là công cụ linh hoạt và mạnh mẽ để trưng bày sản phẩm, tác phẩm nghệ thuật, hoặc bất kỳ loại nội dung trực quan nào trong trang Biolink của bạn. Bằng cách khám phá các mẫu khác nhau, thiết lập hiệu ứng, và tận dụng các tính năng nâng cao như giỏ hàng và popup, bạn có thể tạo ra trải nghiệm hấp dẫn và tương tác cho khách truy cập, đồng thời thúc đẩy mục tiêu của bạn, cho dù đó là bán hàng, triển lãm nghệ thuật, hay chia sẻ nội dung.