¶ Cấu trúc Cơ bản Landing Page
Về mặt kỹ thuật thì khi thiết kế một Landing Page, bạn sẽ thường xuyên sử dụng đến 2 thành phần chính đó là
- Section: một vùng chọn trên trang để chứa các phần tử/ tiện ích (widget) trong đó
- Widget: Phần tử, là tiện ích nhỏ được kéo thả nằm trong các section với những chức năng khác nhau trên trang
¶ Section (Vùng nội dung)
Section là một khu vực (vùng) nội dung của trang. Các khu vực này thường được chia thành các cột nhỏ để chứa các widget.
Mỗi Section thường giải quyết một phần nội dung của Landing Page (xem hình minh họa bên dưới)
Ví dụ trên ảnh có 3 section được bôi đỏ và mỗi section sẽ giới thiệu nội dung riêng.
- Section 1: Giới thiệu tổng quan về cuốn sách
- Section 2: Giới thiệu về tác giả
- Section 3: Đánh giá của khách hàng đã mua
¶ Cấu hình cho Section
Để cấu hình section sẽ có 3 cài đặt chính đó là
- Layout
- Kiểu
- Nâng cao
¶ Layout
Tại đây bạn sẽ chỉnh sửa tổng quan kích thước của section như
- Chiều rộng
- Chiều cao
- Khoảng cách các cột
- Căn chỉnh chiều dọc
- Toàn màn hình
- Thẻ HTML
¶ Kiểu
Tại phần kiểu đây là nơi tùy chỉnh các đặc điểm của section như:
- Nền
- Parallax
- Lớp phủ nền
- Viền
- Bộ chia khuôn
- Kiểu chữ
¶ Nâng cao
Phần nâng cao của section giúp bạn can thiệp sâu hơn về kỹ thuật của section như:
- Căn lề khoảng cách các phần tử
- Hiệu ứng chuyển động
- Giao diện tùy biến theo kích thước màn hình
- Chèn các code CSS và các thuộc tính
¶ Widget (Phần tử)
Widget là một phần tử có nhiều chức năng khác nhau được kéo thả vào các cột của section để tạo ra các nội dungtrên landing page.
Widget có các chức năng như
- Tiêu đề nội dung
- Nút bấm
- Bộ đếm ngược
- Form điền thông tin
- Hiệu ứng
- Hiển thị ảnh dạng slide
- Hiển thị video
- ...
¶ Cấu hình widget
Mỗi widget đều có 3 phần cài đặt đó là
- Nội dung
- Kiểu định dạng
- Phần nâng cao
¶ Nội dung
Với mỗi kiểu widget phần nội dung sẽ khác nhau đôi chút, tuy nhiên cơ bản thì tại phần Nội dung này là nơi để bạn cung cấp nội dung dạng text hoặc hình ảnh cho widget.
Ngoài ra bạn có thể căn chỉnh vị trí , kích thước hiển thị và thêm liên kết cho widget này.
¶ Kiểu
Kiểu widget là nơi bạn có thể tùy biến sâu hơi về nội dung widget như
- Tùy biến màu sắc
- Tùy biến font định dạng kiểu chữ
- Hiệu ứng hiển thị cho nội dung v.v..
- ...
¶ Nâng cao
Tại phần nâng cao này sẽ bạn can thiệp sâu hơn về phần kỹ thuật (tùy biến code) cho widget như:
- Căn chỉnh lề, khoảng cách giữa các thành phần widget
- Hiệu ứng chuyển động cho widget
- Chèn code, mã tracking v.v..