Tiêu đề trang - Header
Last updated
Last updated
Video thiết lập tiêu đề trang
Biểu thị độ rộng của phần đầu trang (header) được đo từ mép trên cùng của trang. Người dùng có thể tùy chỉnh các kích thước khác nhau của header để đáp ứng nhu cầu cụ thể, đảm bảo rằng phần đầu trang phù hợp với bố cục tổng thể và thuận tiện cho việc hiển thị thông tin quan trọng. Các tùy chọn này bao gồm các tỷ lệ phần trăm so với độ rộng của màn hình: 10%, 30%, 50%, và 100%.
Hành vi cuộn (scroll behavior) là lựa chọn cách mà header (phần đầu trang) được hiển thị khi nội dung của mẫu DynamicAction được cuộn lên hoặc xuống. Có hai phương án để người dùng có thể lựa chọn tùy theo nhu cầu của mình
[1] Cố định vị trí: Khi người dùng cuộn trang mẫu lên hoặc xuống, header sẽ được giữ nguyên vị trí và độ rộng của nó sẽ không thay đổi. Điều này có nghĩa là phần đầu trang sẽ luôn ở vị trí cố định, giúp người dùng dễ dàng xem các thông tin quan trọng ở phần Header mà không cần cuộn lại lên trên.
[2] Cuộn theo body: Trong phương án này, khi trang mẫu được cuộn lên, header sẽ cuộn theo nội dung chính (body). Tuy nhiên, đến một độ rộng nhất định, header sẽ được giữ nguyên và không cuộn nữa. Điều này cho phép header xuất hiện và biến mất một cách linh hoạt, nhường chỗ cho các nội dung khác được hiển thị lên màn hình.
Icon điều hướng được thiết lập để cho phép khách hàng từ trang DynamicAction liên kết đến một trang được cấu hình.
Có ba loại icon điều hướng:
Ví dụ: người dùng từ trang chủ Mini App truy cập vào Phiếu góp ý, phiếu góp ý này sẽ mở ra một mẫu DynamicAction. Khi người dùng nhấp vào biểu tượng quay lại tại trang mẫu, màn hình sẽ trở về trang chủ của DynamicAction
Có hai cách thiết lập liên kết:
+ Liên kết đến trang của DynamicAction
Ví dụ: Admin có thể thiết lập Icon home để cho phép khách hàng đang từ trang thứ hai của DynamicActionquay quay trở lại trang trước đó.
+ Liên kết đến trang của Mini App
Ví dụ: Admin cấu hình liên kết cho Icon home để từ trang cảm ơn sau khi điền form DynamicAction, khách hàng có thể được dẫn đến trang ưu đãi.
Logo được đặt ở góc trên bên trái của tiêu đề trang DynamicAction, đóng vai trò quan trọng trong việc tạo điểm nhấn thẩm mỹ và củng cố thương hiệu cho Mini App khi khách truy cập vào trang DynamicAction.
Admin có thể cài đặt logo bằng cách kích hoạt nút tắt bật để hiển thị logo. Khi nút được kích hoạt bật, admin sẽ được phép chèn hình ảnh để làm logo.
Chỉnh sửa tiêu đề trang DynamicAction đã được thiết lập ở bước khởi tạo DynamicAction
Admin có thể chỉnh sửa tiêu đề bằng cách kích hoạt nút tắt bật tiêu đề. Khi nút được kích hoạt bật, admin sẽ được phép chỉnh sửa tiêu đề
Thể hiện màu sắc của phần đầu trang (header) là một yếu tố quan trọng trong việc thiết kế giao diện của Mini App. Người dùng có ba tùy chọn để tùy chỉnh màu sắc của header, giúp tạo nên sự đồng bộ và thẩm mỹ cho ứng dụng:
+ Lấy theo màu chủ đạo từ Mini App: Đây là lựa chọn mặc định, lựa chọn này cho phép header tự động sử dụng màu sắc chủ đạo của Mini App, tạo ra một giao diện nhất quán và hài hòa với toàn bộ ứng dụng.
+ Màu sắc tùy chỉnh: Người dùng có thể tự do chọn bất kỳ màu sắc nào để áp dụng cho header. Tùy chọn này mang lại sự linh hoạt, phù hợp với sở thích cá nhân hoặc yêu cầu cụ thể của từng chiến dịch, sự kiện.
+ Hình ảnh: Thay vì chỉ sử dụng màu sắc, người dùng cũng có thể chọn một hình ảnh để làm nền cho header để mang đến sự sống động và phong phú, thu hút sự chú ý của người dùng. Hình ảnh nền có thể là bất kỳ thứ gì từ logo, hình minh họa, đến những bức ảnh liên quan đến thương hiệu hoặc sản phẩm.
Tùy chỉnh độ bo góc dưới bên trái, phải của header. Khi chỉ số càng tăng thì góc được bo càng tròn. Người dùng có thể điều chỉnh độ bo góc này để tạo ra các hiệu ứng thẩm mỹ khác nhau, từ những góc nhọn mạnh mẽ đến những đường cong mềm mại, mang lại cảm giác mượt mà và thân thiện hơn.
-Icon trở về: khi người dùng nhấp vào Icon trở về, sẽ được quay lại trang trước đó của MiniApp.
-Icon home: Icon home cho phép admin thiết lập liên kết đến trang mong muốn. Khi người dùng nhấp vào Icon home, họ sẽ được dẫn đến trang đã được admin cấu hình.
-Icon trở về và home: là sự kết hợp giữa Icon trở về và Icon home. Hai icon này độc lập với nhau, khách hàng có thể chọn một trong hai tính năng là trở về hoặc home
