Hướng dẫn đầy đủ sử dụng khối Big Link cho trang Biolink

Giới thiệu về khối Big Link

Khối Big Link là một trong những thành phần quan trọng nhất trong trang Biolink, cho phép bạn tạo ra các liên kết lớn, nổi bật với nhiều kiểu dáng đa dạng. Không chỉ đơn thuần là một nút liên kết, Big Link còn cung cấp khả năng hiển thị hình ảnh, biểu tượng, tiêu đề và mô tả, giúp thu hút sự chú ý của người xem và truyền tải thông tin hiệu quả hơn.

Khối này đặc biệt phù hợp cho:

• Liên kết đến trang sản phẩm hoặc dịch vụ quan trọng
• Hiển thị thông tin nổi bật cần người dùng chú ý
• Tạo các nút CTA (Call-to-Action) hấp dẫn
• Thiết kế các phần tử tương tác đặc biệt như accordion

Các kiểu dáng của Big Link

Big Link cung cấp nhiều kiểu dáng đa dạng, từ đơn giản đến phức tạp, giúp bạn tạo nên một trang Biolink độc đáo và phù hợp với phong cách cá nhân.

Kiểu dáng cơ bản

1. Mặc định (Normal): Kiểu cơ bản với hình ảnh bên trái, tiêu đề và mô tả ở giữa, biểu tượng mũi tên bên phải.
2. Icon bên trái (Icon Left): Biểu tượng hoặc hình ảnh được đặt ở bên trái với nền màu riêng biệt.
3. Icon trái – Căn giữa (Centered Icon Left): Tương tự kiểu Icon bên trái, nhưng nội dung được căn giữa, phù hợp cho các nút hành động.

Kiểu dáng CTA (Call-to-Action)

4. CTA – Hình ảnh trái: Thiết kế tập trung vào hành động, với hình ảnh ở bên trái, tiêu đề, mô tả, giá và nút hành động.

5. CTA – Hình ảnh phải: Tương tự như trên nhưng hình ảnh được đặt ở bên phải.
6. CTA dài: Thiết kế với hình ảnh nhỏ ở trên, thông tin sản phẩm và nút CTA rộng ở dưới.

Kiểu dáng hiện đại

7. Glassmorphism: Thiết kế với hiệu ứng kính mờ hiện đại, tạo cảm giác trong suốt, tinh tế.
8. Neumorphism: Thiết kế nổi khối với hiệu ứng đổ bóng, tạo cảm giác nút nổi từ nền.

9. Outline Button: Thiết kế với nút viền nổi bật ở dưới.
10. Minimal Icon: Thiết kế tối giản với biểu tượng lớn ở trên và văn bản căn giữa.
11. Split Container: Thiết kế chia đôi màn hình với màu nền khác nhau.
12. Float Icon: Thiết kế với biểu tượng nổi ở góc.
13. Chat Message: Thiết kế giống tin nhắn chat, tạo cảm giác tương tác.
14. Accordion Style: Thiết kế có thể mở rộng/thu gọn để hiển thị thêm thông tin.
15. Progress Bar: Thiết kế với thanh tiến trình, phù hợp cho các mục tiêu hoặc thành tựu.

Thiết lập cơ bản

Chọn kiểu dáng

1. Nhấp vào nút “Kiểu dáng” để mở rộng phần cài đặt kiểu dáng
2. Duyệt qua các tùy chọn kiểu dáng khả dụng
3. Nhấp vào kiểu dáng bạn muốn sử dụng để chọn
4. Nếu bạn chọn kiểu dáng PRO nhưng không có tài khoản PRO, một biểu tượng khóa sẽ hiển thị

Cấu hình thông tin cơ bản

1. Nhấp vào nút “Cài đặt” để mở rộng phần cài đặt chung
2. Nhập URL đích trong trường “Location URL”
3. Nhập tiêu đề cho liên kết trong trường “Tiêu đề”
4. Thêm mô tả ngắn gọn trong trường “Mô tả”
5. Tùy chọn bật “Mở trong tab mới” nếu muốn liên kết mở ra trong tab mới

Thêm hình ảnh hoặc biểu tượng

1. Trong phần cài đặt chung, cuộn xuống phần “Hình ảnh”
2. Nhấp vào “Tải lên tệp” để chọn hình ảnh từ máy tính của bạn
3. Hình ảnh được khuyến nghị có kích thước vuông và tối thiểu 100×100 pixel
4. Nếu không muốn sử dụng hình ảnh, bạn có thể thêm biểu tượng bằng cách nhập mã biểu tượng Font Awesome vào trường “Icon”

Cài đặt màu sắc

1. Cài đặt màu nền cho liên kết bằng cách nhấp vào thanh chọn màu “Màu nền”
2. Tùy chỉnh màu tiêu đề bằng thanh chọn màu “Màu tiêu đề”
3. Điều chỉnh màu mô tả bằng thanh chọn màu “Màu mô tả”
4. Chọn căn chỉnh văn bản (trái, giữa, phải hoặc justify)

Thiết lập theo kiểu dáng cụ thể

Tùy vào kiểu dáng bạn chọn, các tùy chọn cài đặt bổ sung sẽ xuất hiện:

Cài đặt cho Icon trái

Khi bạn chọn kiểu “Icon trái” hoặc “Icon trái – Căn giữa”:

1. Điều chỉnh “Padding Icon” bằng thanh trượt để tăng hoặc giảm khoảng cách xung quanh biểu tượng
2. Tùy chỉnh “Màu nền Icon” để thay đổi màu nền của phần biểu tượng

Cài đặt cho các kiểu CTA

Khi bạn chọn bất kỳ kiểu CTA nào:

1. Nhập “Giá sản phẩm/mô tả khác” trong trường tương ứng
2. Thêm “Văn bản nút gọi hành động” (ví dụ: “Mua ngay”, “Xem thêm”)
3. Tùy chỉnh “Màu văn bản giá sản phẩm” để làm nổi bật giá
4. Điều chỉnh “Màu nền nút gọi hành động”, “Màu văn bản nút gọi hành động” và “Màu đường viền nút gọi hành động”

Cài đặt cho Glassmorphism

1. Điều chỉnh “Độ mờ” bằng thanh trượt (giá trị từ 1-20px)
2. Tùy chỉnh “Độ trong suốt” để thay đổi mức độ nhìn xuyên qua của hiệu ứng kính (giá trị từ 10-90%)

Cài đặt cho Neumorphism

1. Điều chỉnh “Khoảng cách bóng đổ” để thay đổi hiệu ứng nổi (giá trị từ 5-30px)
2. Tùy chỉnh “Cường độ bóng đổ” để thay đổi độ tương phản của hiệu ứng (giá trị từ 1-10)

Cài đặt cho Split Container

1. Chọn “Màu nền phần bên trái” để thay đổi màu của phần bên trái
2. Chọn “Tỷ lệ chia” từ các tùy chọn có sẵn (30-70%, 40-60%, 50-50%, 60-40%, 70-30%)

Cài đặt cho Float Icon

1. Chọn “Màu icon nổi” để thay đổi màu của biểu tượng nổi
2. Chọn “Vị trí icon” từ các tùy chọn: Trên phải, Trên trái, Dưới phải, Dưới trái

Cài đặt cho Progress Bar

1. Điều chỉnh “Phần trăm hoàn thành” bằng thanh trượt (giá trị từ 0-100%)
2. Chọn “Màu thanh tiến trình” để thay đổi màu của thanh tiến trình
3. Nhập “Văn bản tiến trình” để mô tả thanh tiến trình (ví dụ: “Đã đạt được”, “Hoàn thành”)

Tùy chọn nâng cao

Hiệu ứng chuyển động

1. Nhấp vào nút “Hiệu ứng” để mở rộng phần cài đặt hiệu ứng
2. Chọn một hiệu ứng từ danh sách (ví dụ: fade, bounce, pulse, …)
3. Chọn số lần chạy hiệu ứng (1, 2, 3 hoặc vô hạn)

Cài đặt viền

1. Nhấp vào nút “Border” để mở rộng phần cài đặt viền
2. Điều chỉnh độ rộng viền bằng thanh trượt
3. Chọn màu viền
4. Chọn kiểu bo góc (vuông, tròn hoặc bo góc)
5. Chọn kiểu viền (solid, dashed, double, outset, inset)

Cài đặt bóng đổ

1. Nhấp vào nút “Border Shadow” để mở rộng phần cài đặt bóng đổ
2. Điều chỉnh các thông số bóng đổ (độ lệch X, độ lệch Y, độ mờ, độ lan rộng)
3. Chọn màu bóng đổ

Sử dụng làm accordion control

Accordion control là một tính năng nâng cao cho phép bạn tạo liên kết điều khiển để hiển thị/ẩn các khối khác:

1. Trong phần cài đặt chung, bật tùy chọn “Sử dụng như accordion control”
2. Nhập ID của khối biolink mà bạn muốn điều khiển vào trường “ID khối được điều khiển”
3. Khi người dùng nhấp vào liên kết này, khối được chỉ định sẽ hiển thị hoặc ẩn đi

Hiển thị có điều kiện

1. Nhấp vào nút “Display Settings” để mở rộng phần cài đặt hiển thị
2. Cài đặt lịch hiển thị bằng cách bật “Schedule” và chọn ngày bắt đầu/kết thúc
3. Chọn quốc gia cụ thể để hiển thị liên kết chỉ cho người dùng từ các quốc gia đó
4. Chọn thiết bị cụ thể (desktop, tablet, mobile) để hiển thị liên kết chỉ trên các thiết bị đó
5. Chọn ngôn ngữ cụ thể để hiển thị liên kết chỉ cho người dùng sử dụng các ngôn ngữ đó
6. Chọn hệ điều hành cụ thể để hiển thị liên kết chỉ trên các thiết bị chạy hệ điều hành đó

Các ứng dụng thực tế

Tạo nút CTA nổi bật cho sản phẩm

Sử dụng kiểu “CTA – Hình ảnh trái” với hình ảnh sản phẩm, tiêu đề hấp dẫn, giá và nút “Mua ngay”:

1. Chọn kiểu “CTA – Hình ảnh trái”
2. Tải lên hình ảnh sản phẩm chất lượng cao
3. Nhập tiêu đề sản phẩm rõ ràng
4. Thêm mô tả ngắn gọn về lợi ích chính
5. Nhập giá trong trường “Giá sản phẩm/mô tả khác”
6. Sử dụng văn bản nút hành động “Mua ngay” hoặc “Đặt hàng ngay”
7. Chọn màu nổi bật cho nút CTA (đỏ, cam hoặc xanh lá cây thường hiệu quả)

Tạo nhóm nội dung có thể mở rộng

Sử dụng tính năng accordion để tạo nội dung có thể mở rộng/thu gọn:

1. Tạo một Big Link với kiểu “Accordion Style” hoặc bất kỳ kiểu nào khác
2. Bật tùy chọn “Sử dụng như accordion control”
3. Tạo các khối nội dung khác (văn bản, hình ảnh, v.v.) mà bạn muốn hiển thị/ẩn
4. Nhập ID của các khối nội dung vào trường “ID khối được điều khiển”
5. Khi người dùng nhấp vào Big Link, các khối nội dung sẽ hiển thị hoặc ẩn đi

Tạo nút hiện đại với hiệu ứng glassmorphism

1. Chọn kiểu “Glassmorphism”
2. Điều chỉnh “Độ mờ” khoảng 5-10px cho hiệu ứng tốt nhất
3. Cài đặt “Độ trong suốt” khoảng 70-80%
4. Chọn màu nền với gradient nhẹ nhàng
5. Thêm biểu tượng phù hợp với nội dung liên kết
6. Sử dụng hiệu ứng chuyển động nhẹ như “fade” hoặc “pulse”

Lưu ý quan trọng khi sử dụng

Tương thích với thiết bị di động

Tất cả các kiểu dáng của Big Link đều được thiết kế để hiển thị tốt trên cả desktop và thiết bị di động. Tuy nhiên, một số lưu ý:

• Kiểu “CTA dài” có thể chiếm nhiều không gian trên màn hình nhỏ
• Các kiểu có nhiều chi tiết như “Progress Bar” nên được kiểm tra kỹ trên thiết bị di động
• Đảm bảo văn bản đủ lớn để đọc được trên màn hình nhỏ

Tối ưu hóa hiệu suất

• Hình ảnh nên được tối ưu hóa kích thước trước khi tải lên
• Không nên sử dụng quá nhiều hiệu ứng chuyển động trên cùng một trang
• Với các trang có nhiều Big Link, nên cân nhắc sử dụng hiển thị có điều kiện để giảm số lượng liên kết hiển thị cùng một lúc

Tương thích với các khối khác

Big Link có thể được sử dụng kết hợp với các khối khác trong Biolink:

• Sử dụng làm tiêu đề phần cho các nhóm liên kết thông thường
• Kết hợp với khối hình ảnh hoặc video để tạo nội dung phong phú
• Sử dụng làm accordion control để tổ chức nội dung theo các phần có thể mở rộng

Giải thích thuật ngữ

• Biolink: Trang web đơn giản chứa nhiều liên kết và thông tin cá nhân, thường được sử dụng trong tiểu sử của các nền tảng mạng xã hội.
• CTA (Call-to-Action): Phần tử thiết kế nhằm khuyến khích người dùng thực hiện một hành động cụ thể (ví dụ: “Mua ngay”, “Đăng ký”).
• Glassmorphism: Xu hướng thiết kế sử dụng hiệu ứng kính mờ, tạo cảm giác trong suốt và ánh sáng.
• Neumorphism: Xu hướng thiết kế sử dụng hiệu ứng nổi khối mềm mại, tạo cảm giác các phần tử nổi lên từ nền.
• Accordion: Cơ chế hiển thị nội dung có thể mở rộng/thu gọn để tiết kiệm không gian màn hình.
• Responsive Design: Thiết kế tự động điều chỉnh hiển thị để phù hợp với kích thước màn hình của thiết bị.

Kết luận

Khối Big Link là một công cụ mạnh mẽ giúp bạn tạo ra các liên kết nổi bật và hấp dẫn trên trang Biolink. Với nhiều kiểu dáng đa dạng và khả năng tùy chỉnh cao, bạn có thể tạo ra các liên kết phù hợp với phong cách và mục đích cụ thể của mình.

Bằng cách kết hợp các kiểu dáng khác nhau, thiết lập màu sắc phù hợp và sử dụng các tính năng nâng cao, bạn có thể tạo ra một trang Biolink độc đáo và hiệu quả, thu hút sự chú ý của người xem và tăng tỷ lệ nhấp chuột vào các liên kết quan trọng.