1. Tổng quan
Bài viết hướng dẫn các công cụ thiết kế nhanh, thiết kế chi tiết và quản lý layer phần tử trên Landing Page của aiMarketing. Việc sử dụng linh hoạt các tính năng này giúp tối ưu hóa giao diện, tăng tính thẩm mỹ và hiệu quả chuyển đổi cho Landing Page.
Nội dung bài viết gồm:
- Thiết kế nhanh: ẩn/hiện, di chuyển, nhóm, nhân bản, xóa, căn lề phần tử, sử dụng phím tắt
- Thiết kế chi tiết: điều chỉnh kích thước, màu sắc, nền, viền, bo góc, hiệu ứng, sự kiện, nâng cao
- Quản lý layer: sắp xếp, ẩn/hiện, thay đổi thứ tự các phần tử trên Landing Page
2. Hướng dẫn thực hiện
2.1. Thiết kế nhanh các phần tử trong Landing page
Bước 1: Trên AMIS aiMarketing, vào phân hệ Landing page
Bước 2: Nhấn Tạo Landing page hoặc chọn vào Landing đã thiết kế.
Bước 3: Tại giao diện thiết kế và chỉnh sửa Landing page, chọn vào nội dung phần tử, thanh thiết kế nhanh xuất hiện
Ẩn hiện phần tử: trên thanh thiết kế nhanh, nhấn vào biểu tượng hình mắt Ẩn hiện
Đưa phần tử lên trên/ xuống dưới: để tạo layout cho phần tử, trên thanh thiết kế nhanh, nhấn vào biểu tượng Lên trên/ Xuống dưới
Nhóm phần tử: để thiết kế, chỉnh sửa, thao tác với nhiều phần tử mà không mất đi cấu trúc ban đầu, trên thanh thiết kế nhanh, nhấn vào biểu tượng Nhóm
Di chuyển phần tử: trên thanh thiết kế nhanh, nhấn vào biểu tượng Di chuyển. Giữ chuột và kéo thả để di chuyển phần tử
Nhân bản phần tử: Việc nhân bản sẽ tạo ra một Landing Page mới với nội dung có sẵn được copy từ Landing Page cũ. Hai Landing Page này độc lập với nhau, việc chỉnh sửa Landing Page này sẽ không ảnh hưởng đến Landing Page kia. Trên thanh thiết kế nhanh, nhấn vào biểu tượng Nhân bản
Xóa phần tử: trên thanh thiết kế nhanh, nhấn vào biểu tượng Xóa
Căn lề: trên thanh thiết kế nhanh, nhấn vào biểu tượng Căn lề
Sử dụng phím tắt:
-
- Phím tắt Ctrl + mũi tên: di chuyển phần tử theo hướng mũi tên
- Phím tắt Ctrl + G : nhóm phần tử
2.2. Thiết kế chi tiết các phần tử trong Landing page
Tùy chọn thiết kế, điều chỉnh kích thước, điều chỉnh màu, viền, đồ bóng, thêm hiệu ứng, thêm thêm sự kiện, cài đặt nâng cao cho phần tử.
Bước 1: Trên AMIS aiMarketing, vào phân hệ Landing page
Bước 2: Nhấn Tạo Landing page hoặc chọn vào Landing đã thiết kế.
Bước 3: Tại giao diện thiết kế và chỉnh sửa Landing page, chọn vào nội dung phần tử, thanh thiết kế sẽ xuất hiện
Bước 4: Điều chỉnh tại tab Thiết kế
-
- Kích thước: Cho phép điều chỉnh kích thước chiều cao và chiều rộng của phần tử
- Màu và hình nền: Cho phép thiết lập nền background cho phần tử
-
- Màu cơ bản: cho phép chọn màu của phần tử là màu cơ bản
-
- Gardient: cho phép chọn màu của phần tử là màu gardient. Gradient được hiểu đơn giản là sự pha trộn giữa hai hoặc nhiều màu sắc lại với nhau.
-
-
- Linear: dải màu của bạn chuyển tiếp theo một đường thẳng, từ điểm này qua điểm khác
- Radial: tạo chuyển tiếp tròn trong đó cũng xác định 2 điểm. điểm bắt đầu là tâm điểm và sắc thái là điểm kết thúc
-
-
-
- Màu gradient: xem trước dải màu trước khi thiết lập cho phần tử
- Màu 1, Màu 2: chọn 2 màu để tạo màu gradient
- Góc xoay: điều chỉnh hiệu ứng của màu gradient
- Hình nền: chọn nền của phần tử hình ảnh, có thể lấy hình ảnh từ máy tính hoặc chọn ảnh trong Quản lý ảnh . Sau đó điều chỉnh các thông số của hình ảnh
-
-
-
- Lặp lại: Thiết lập chế độ lặp của ảnh
- Kích thước: Điều chỉnh kích thước của ảnh nền trong phần tử
- Vị trí: Điều chỉnh vị trí hiển thị hình ảnh trong phần tử
-
-
- Thiết kế chữ: thiết lập chữ trong phần tử văn bản
-
-
- Thiết lập: cài đặt font chữ, cỡ chữ, màu chữ, căn lề cho văn bản
- Khoảng cách dòng: cho phép thiết lập khoảng cách dòng cho văn bản
- Kiểu chữ: chọn kiểu chữ cho văn bản
-
-
- Đổ bóng: thiết lập đổ bóng cho phần tử. Đổ bóng tạo cảm giác 3D cho phần tử, tạo ra những thiết kế ấn tượng, thu hút người đọc
-
-
- Màu sắc: Chọn màu mà bạn muốn đổ bóng lên phần tử
- Độ mờ: Điều chỉnh độ mờ của bóng
- Đổ bóng ngang/ Đổ bóng dọc: Điều chỉnh kiểu đổ bóng cho phần tử
-
-
- Viền và bo góc: Cho phép có thể bo viền, thêm và thay đổi màu viền giúp phần tử nổi bật, thu hút
-
-
- Ô chọn kiểu nét viền: chọn kiểu nét viền cho phần tử bao gồm nét liền/ kiểu nét đứt 1/ kiểu nét đứt 2
- Màu viền: lựa chọn màu viền cho phần tử
- Độ dày đường viền: điều chỉnh kích thước đường viền
- Bo góc: tùy chọn các thông số bo góc
-
-
- Góc xoay: Cho phép điều chỉnh góc quay cho phần tử, tạo ra phần tử có thiết kế ấn tượng
-
- Bộ lọc: Chỉ áp dụng cho phần tử hình ảnh, cho phép điều chỉnh độ mờ, độ sáng, độ tương phản, độ xám cho hình ảnh
Bước 5: Điều chỉnh tại tab Hiệu ứng
-
- Fade: ẩn hiện phần tử
- Flip: lật phần tử
- Zoom: thu phóng phần tử
- Độ chậm: điều chỉnh độ trễ xuất hiện của hiệu ứng
- Thời gian: thời gian xuất hiện của phần tử
- Lặp lại: lặp lại hiệu ứng cho phần tử
Bước 6: Điều chỉnh tại tab Sự kiện vào phần tử
Thêm sự kiện vào phần tử giúp điều hướng hành động của khách hàng sang trang bán hàng, tải tài liệu, gửi mail, liên kết,…giúp tối ưu hóa tỷ lệ chuyển đổi
-
- Chuyển tới Section: Điều hướng người dùng đến section được thiết lặp sẵn
- Chuyển đến phần tử: Điều hướng người dùng đến phần tử được thiết lập sẵn
- Mở liên kết: Điều hướng người dùng mở liên kết đã được thiết lập sẵn
- Địa chỉ emai: Điều hướng người dùng đến cửa sổ soạn thư ở Gmail với địa chỉ mail gửi đến được thiết lập sẵn
- Số điện thoại: Điều hướng người dùng mở cuộc gọi với số điện thoại được thiết lập sẵn
Bước 7: Điều chỉnh tại tab Nâng cao
-
- Ghim phần tử là tính năng giúp cố định phần tử tại một vị trí trên trang trong suốt quá trình cuộn chuột.
2.3. Quản lý Layer các phần tử
Bước 1: Trên AMIS aiMarketing, vào phân hệ Landing page
Bước 2: Nhấn Tạo Landing page hoặc chọn vào Landing đã thiết kế.
Bước 3: Tại giao diện thiết kế và chỉnh sửa Landing page chọn công cụ Layer
Tại đây hiển thị các phần tử được sắp xếp theo cấp độ từ cao xuống thấp Section -> Group -> Phần tử tại đây kéo thả phần tử để thay đổi vị trí trên dưới hoặc ẩn/ hiện phần tử
