Thiết kế Landing Page: Các phần tử (P1)

Các phần tử là yếu tố chính giúp cấu thành thiết kế của 1 trang Landing Page. Bài viết giúp người đọc hiểu được chức năng của từng phần tử, từ đó lựa chọn được khối phù hợp để hiện thực hóa ý tưởng thiết kế của mình.

Truy cập bảng thêm phần tử bằng cách chọn biểu tượng ở góc trái màn hình.

Tiêu đề – Văn bản

Tiêu đề và Văn bản cho phép thêm các phần tử dạng chữ vào Landing Page.

Tiêu đề giúp người xem nắm được khái quát nội dung họ sắp đọc, cũng như thu hút sự chú ý của người xem. Văn bản là phần chữ mô tả nội dung chi tiết hơn.

Để thêm phần tử dạng chữ, chọn biểu tượng Thêm phần tử → Truy cập tab Thêm nhanh → Kéo thả phần tử vào khu vực thiết kế của vùng nội dung (Section) cần thêm → Double click vào khối cần sửa hoặc Chọn Sửa văn bản để thay đổi nội dung.

Người dùng có thể tùy chỉnh thiết kế: cỡ chữ, phông chữ, màu sắc, kiểu chữ, khoảng cách dòng, khoảng cách chữ… cho văn bản tại Trình kiểm tra (Inspector) ở góc phải màn hình.

Hệ thống đã thiết lập sẵn thông số cho các tiêu đề và văn bản, người dùng có thể lựa chọn kiểu chữ mong muốn từ danh sách hoặc thêm mới và chỉnh sửa tại bảng Kiểu dáng.

Hình ảnh – Video – Social video

Để trang Landing Page thêm phần sống động, người dùng có thể thêm các media như hình ảnh và video với 3 phần tử sau:

Hình ảnh

Sau khi thêm khối hình ảnh vào khu vực mong muốn trên màn hình, người dùng có thể:

  • Thay đổi thành hình ảnh: thay thành ảnh trong thư viện Media hoặc ảnh mới tải lên từ máy tính.
  • Chỉnh sửa ảnh: xoay, lật, resize, cắt ảnh hiện tại.
  • Thiết lập: cài đặt chế độ hiển thị ảnh, chèn văn bản thay thế.
  • Liên kết: gắn liên kết cho ảnh (ví dụ: khi khách hàng bấm vào ảnh, màn hình sẽ hiển thị hộp popup).
  • Hiệu ứng động: thêm hiệu ứng chuyển động cho ảnh (ví dụ: ảnh fly in từ bên trái 0.5 giây sau khi khách hàng kéo xuống khu vực đặt ảnh).
  • Thao tác khác: ẩn/hiện ảnh, xoay ảnh, copy – paste…
  • Ngoài ra người dùng cũng có thể áp dụng bo góc, thêm đường viền, thêm bóng đổ… cho ảnh tại tab Design trong trình kiểm tra.

Video

Đối với phần tử Video, hệ thống hỗ trợ chèn video từ Google Drive hoặc các nền tải lưu trữ video khác. Người dùng có thể upload video định dạng .mp4 lên Google Drive và chèn Video ID để hiển thị video trên trang. Cụ thể thao tác như sau:

  • Kéo thả khối Video vào khu vực vùng nội dung (Section) thiết kế mong muốn → Nhấp vào phần tử video vừa thêm, hệ thống pop up trình kiểm tra → Tại mục Thiết lập video, lựa chọn nguồn video Google Drive → Nhập video ID (bắt buộc) và thêm thông tin video cùng ảnh bìa nếu muốn.

Lưu ý: Người dùng cần chia sẻ video muốn thêm ở chế độ công khai. Video ID là phần kí tự nằm giữa “d/” và “/view” trong đường dẫn của video trên Google Drive.

Bên cạnh các thao tác thông thường, người dùng có thể thiết lập cách video hoạt động bằng cách Nhấp vào video cần thiết lập → Lựa chọn cách video bắt đầu – tạm dừng – kết thúc, cũng như Bật/Tắt âm thanh của video.

Social video

Hệ thống cũng cho phép chia sẻ video từ các nền tảng thứ 3 như Youtube, Vimeo, Facebook, Dailymotion, Twitch. Người dùng kéo thả khối Social Video vào vùng nội dung (Section) mong muốn → Chọn Thiết lập video → Lựa chọn nền tảng lưu trữ video và điền đường dẫn vào ô Nhập đường dẫn video → Bật/Tắt các Tùy chọn phát để phù hợp với nhu cầu sử dụng.

Đường kẻ – Hình dạng – Khối

Đường kẻ – Đường kẻ đứng

Phần tử Đường kẻĐường kẻ đứng cho phép bạn thêm đường kẻ vào Landing Page để trang trí, phân cách đoạn… Sử dụng các công cụ trong trình kiểm tra để căn chỉnh vị trí, thay đổi kích thước, xoay, đổi màu và kiểu nét cho đường kẻ.

Hình dạng

Người dùng có thể chèn các hình dạng, biểu tượng vào trang với phần tử Hình dạng, cụ thể: Nhấp vào hình dạng muốn thay đổi → Chọn Thay đổi hình dạng → Chọn Thêm hình dạng → Tải lên file có định dạng .svg dung lượng dưới 1MB → Bấm Đồng ý để tải lên → Bấm Đồng ý để hoàn tất.

Khối

Phần tử Khối giúp người dùng tạo các khung, nền làm nổi bật các phần tử khác. Bạn có thể thay đổi kiểu nền (màu đơn, màu gradient, ảnh), thêm đường viền, bo góc, bóng đổ cho khối.

Nút bấm

Nút bấm thường được sử dụng để tạo các nút kêu gọi hành động (Call To Action), nhằm khuyến khích người dùng thực hiện 1 hành động cụ thể nào đó, như để lại thông tin, đăng ký sự kiện, đăng ký newsletter…

Bạn có thể tùy chỉnh thiết kế của nút bấm (màu sắc, kích thước, bo góc, viền) và văn bản hiển thị (kiểu chữ, font chữ, cỡ chữ, màu sắc) ở trình kiểm tra.

Để thay đổi nội dung hiển thị của nút bấm, chọn nút bấm cần chỉnh sửa → Chọn Thay văn bản → Nhập tên hiển thị mới.

Hệ thống cho phép người dùng thay đổi kiểu hiển thị trên nút bấm, bằng cách nhấp vào nút bấm muốn chỉnh sửa và chọn biểu tượng Bố cục → Chọn kiểu hiển thị mong muốn và căn chỉnh vị trí hiển thị của chữ và biểu tượng nếu cần.

Để thay biểu tượng hiển thị trên nút bấm, người dùng bấm vào biểu tượng trên thanh công cụ của phần tử.

Người dùng cũng có thể theo dõi event qua nút bấm bằng cách chọn Theo dõi event.

Mạng xã hội

Hệ thống tạo sẵn các biểu tượng mạng xã hội phổ biến để người dùng thuận tiện thiết lập liên kết tới các kênh truyền thông của mình.

Để thêm liên kết, nhấp chọn phần tử mạng xã hội trên khu vực thiết kế → Chọn Thiết lập liên kết mạng xã hội → Nhấp biểu tượng → Hệ thống hiển thị popup thiết lập liên kết, điền liên kết vào trường địa chỉ website → Bấm Đồng ý để hoàn tất.

Ngoài ra, bạn cũng có thể thêm/xóa/chỉnh sửa các biểu tượng.

  • Chọn Thêm biểu tượng để thêm biểu tượng mới.
  • Bấm vào biểu tượng muốn xóa → Nhấp biểu tượng thùng rác để xóa.
  • Bấm vào biểu tượng muốn thay thế → Chọn Thay thế biểu tượng để đổi hình ảnh hiển thị của biểu tượng. Nhập tiêu đề (văn bản thay thế) mới nếu cần.

Để thay đổi bố cục thanh trang mạng xã hội, nhấp vào phần tử mạng xã hội trên khu vực thiết kế → Chọn biểu tượng Bố cục và thay đổi kích thước biểu tượng, khoảng cách giữa các biểu tượng cũng như kiểu hiện thị thanh mạng xã hội.

Bộ đếm

Phần tử Bộ đếm có chức năng tạo bộ đếm ngược thời gian (hiển thị số thời gian còn lại tính đến một thời điểm cụ thể). Một chức năng thông dụng của nó là thông báo cho khách hàng biết bao lâu nữa sự kiện sẽ diễn ra, hoặc khoảng thời gian diễn ra còn lại của sự kiện hiện tại.

Để cấu hình bộ đếm, nhấp chọn phần tử bộ đếm trên khu vực thiết kế → Chọn Cài đặt bộ đếm → Tại đây, người dùng có thể cấu hình Nội dung và Loại bộ đếm (theo Mốc thời gian hoặc Khoảng thời gian)

Ngoài ra, bạn cũng có thể điều chỉnh bố cục bộ đếm bằng cách: Nhấp vào phần tử bộ đếm trên khu vực thiết kế → Chọn biểu tượng Bố cục và thay đổi kích thước ô số, vị trí nhãn so với ô số, khoảng cách giữa các phần tử cũng khoảng cách như giữa ô số và nhãn.

image-zoom
© MOBIO 2022 v1.2 Powered by MOBIO
Back to Top