Phần 4: Cách Sử Dụng Các Công Cụ Để Thiết Kế Landing Page

Nội Dung Bài Viết

SECTION là gì?

Section là một đoạn nội dung trên Landing Page. Mỗi đoạn nội dung có một ý nghĩa riêng và kết hợp với nhau thành một chuỗi nội dung có tính thuyết phục cao

Để bắt đầu tạo mới một Section, bạn chọn “Thêm mới section” ở chân của mỗi section, sau đó có thể lựa chọn một Section trắng để tự thiết kế hoặc chọn một giao diện có sẵn cho từng loại section

Cách khác để tạo ra Section mới: Ở thanh công cụ bên trái, chọn mục “Section” và “Thêm mới section

Các thao tác với section

Thay ảnh làm nền background cho section

Bước 1: Bấm vào biểu tượng bánh răng cưa . Chọn “Thiết kế”. Chọn “Màu & hình nền”.

Bước 2: Mục “Chọn kiểu”:  Chọn Hình ảnh

Bước 3: Mục “Thư viện ảnh”, “Chọn ảnh”: Tải ảnh từ máy tính lên

Thay video làm nền background cho section

Bước 1: Bấm vào biểu tượng bánh răng cưa. Chọn “Thiết kế”. Chọn “Màu & hình nền”.

Bước 2: Mục “Chọn kiểu”:  Chọn Video

Bước 3: Mục “Đường dẫn video”: Dán đường link youtube

Bước 4: Mục “Kiểu video”: Chọn Youtube

Lưu ý:

– Tính năng LadiPage Video chỉ áp dụng cho tài khoản Pro trở lên và dung lượng video tải lên phải dưới 5Mb ( đối với gói Pro, Pro+), dưới 20 Mb ( đối với gói Enterprise)

– Khi chèn Video Backgroud trong builder sẽ không hiển thị, phải xuất bản ra thì mới nhìn thấy nội dung.

Chọn kiểu màu cơ bản hoặc Màu Gradient làm nền background cho section

Bước 1: Bấm vào biểu tượng bánh răng cưa. Chọn “Thiết kế”. Chọn “Màu & hình nền”.

Bước 2: Mục “Chọn kiểu”:  Chọn màu cơ bản hoặc màu Gradient

  • Đối với màu cơ bản: Chọn màu nền
  • Đối với màu Gradient:

+ Chọn “Kiểu

+ Chọn “Gradient mẫu

+ Chọn màu gradient 1, gradient 2

Chọn kiểu khung ảnh

  • Bấm vào biểu tượng bánh răng cưa , chọn “Thiết kế”. Chọn “Kiểu”: “Vừa khung tự động; Vừa khung cao; Vừa khung rộng” sẽ cân đối chiều dọc, chiều ngang của ảnh cho vừa khung hình.
  • Kiểu parallax là kiểu hiển thị ghim ảnh khi cuộn chuột.

THÊM HÌNH ẢNH MỚI

Tải ảnh từ máy tính

Bước 1: Bấm “Thêm mới”, chọn “Hình ảnh

Bước 2: Cửa sổ quản lý thư viện hiện ra bạn bấm nút “Chọn tệp” để tải ảnh từ máy tính của mình lên thư viện.

Bước 3: Bấm “Sử dụng

Tìm ảnh từ kho ảnh miễn phí Unsplash

Để sử dụng ảnh có sẵn trên Ladipage. Bạn bấm vào “Kho ảnh miễn phí” hoặc “Illustration” để chọn ảnh phù hợp muốn chèn vào Landing page.

Điều chỉnh kích thước ảnh

Bạn có thể điều chỉnh kích thước ảnh bằng cách co kéo các góc ảnh hoặc thay đổi thông số trong ô kích thước.

Khi thay đổi thông số trong ô kích thước, bạn có thể bật tắt chế độ Tự động thay đổi Chiều cao theo Chiều rộng bằng cách bấm vào biểu tượng    

– Khi bật biểu tượng , thay đổi chiều cao thì chiều rộng sẽ thay đổi theo tỷ lệ tương ứng

– Khi tắt biểu tượng , thay đổi chiều cao thì chiều rộng sẽ không thay đổi

Cắt hình ảnh (crop):

Để cắt hình ảnh sao cho phù hợp, bạn bấm vào biểu tượng cắt ảnh như hình bên dưới. Sau đó bấm điều chỉnh các cạnh của ảnh để được hình ưng ý.

Bo góc ảnh:

Đổ  bóng cho ảnh

–  Chọn Kiểu đổ bóng (Bên ngoài / Bên trong)

–  Chọn màu

– Tùy chỉnh các thông số Đổ ngang / Đổ dọc / Độ mờ / Độ tối

Viền & bo góc cho ảnh

–  Chọn phần Viền & Bo góc

–  Thay đổi thông số Bo góc tất cả hoặc từng vị trí góc

–  Ngoài ra phần Kiểu bo góc cho phép bạn chọn Kiểu đường viền / Màu / Kích thước viền.

Làm mở ảnh

Overlay là một hiệu ứng cho ảnh, bản chất là một lớp màu hoặc một lớp ảnh đè lên trên ảnh gốc.

Mask cho ảnh

Mask là một lớp hiệu ứng theo nhiều hình dạng khác nhau chèn lên ảnh. Để xóa không sử dụng mask nữa, bạn cần vào thiết lập của ảnh, kéo xuống phần Mask, và bỏ đường dẫn.

GALLERY

Tính năng này cho phép bạn có thể dễ dàng tạo Gallery ảnh chỉ với vài bước đơn giản giúp tăng trải nghiệm khách hàng khi xem hình ảnh về sản phẩm. Để thêm Gallery vào Landing Page bạn có thể làm theo các bước sau đây:

Bước 1: Bấm chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Gallery

Bước 2: Tại Thanh thiết kế nhanh bấm chọn “Thêm ảnh

Bước 3: Chọn ảnh từ cửa sổ Quản lý thư viện ảnh. Bạn có thể chọn nhiều ảnh bằng cách bấm giữ nút Shift hoặc nút Ctrl trên bàn phím đồng thời click chuột vào các ảnh muốn chọn. Chưa có ảnh thì bạn bấm “Chọn tệp” để tải thêm ảnh.

Bấm nút “Sử dụng” để thêm các ảnh vừa chọn vào Gallery.

Bước 4: Rê chuột vào các cạnh và góc của Gallery và bấm kéo chuột để điều chỉnh nhanh kích thước mà bạn muốn

Bước 5: Bấm chọn biểu tượng bánh răng cưa trên thanh thiết kế nhanh để mở phần Thiết lập cho Gallery

Bước 6: Phần Thiết lập thiết kế cho Gallery bạn có thể thêm bớt ảnh, video, thay đổi các cấu hình cho Gallery vừa tạo

NÚT BẤM

Đối tượng Nút bấm cho phép bạn chèn các nút bấm Call To Action (Nút kêu gọi hành động) vào Landing Page một cách dễ dàng theo các bước sau đây:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Bấm vào biểu tượng  “Nút bấm

Bước 2: Sử dụng Thanh thiết kế nhanh để thiết kế Nút bấm.

+ Để thay đổi nội dung Nút bấm bạn có thể Click đúp vào nội dung nút bấm.

+ Để thay đổi kích thước nút bấm bạn đưa chuột vào các cạnh và góc của nút sau đó bấm chuột và di chuyển.

TIÊU ĐỀ

Đối tượng Tiêu đề cho phép bạn chèn tiêu đề cho đoạn văn hoặc section trong Landing Page. Để chèn Tiêu đề bạn có thể làm theo các bước sau đây:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái và chọn biểu tượng “Tiêu đề

Bước 2: Sử dụng thanh thiết kế nhanh để sửa chữ, thay đổi cỡ chữ, màu chữ… cho tiêu đề. Di chuyển tiêu đề đến vị trí mong muốn.

Lưu ý: Phần thiết lập Kiểu chữ H1 -> H6 thể hiện các loại thẻ Heading trong SEO

ĐOẠN VĂN

Đối tượng Đoạn văn cho phép bạn chèn một đoạn văn bản vào Landing Page. Để chèn Đoạn văn bạn có thể làm theo các bước sau đây:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Đoạn văn

Bước 2: Sử dụng thanh thiết kế nhanh để sửa chữ, thay đổi cỡ chữ, màu chữ… cho đoạn văn

Bước 3: Di chuyển đoạn văn đến vị trí mong muốn.

DANH SÁCH

Đối tượng Danh sách cho phép bạn chèn một danh sách vào Landing Page. Để chèn Danh sách bạn có thể làm theo các bước sau đây:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng Danh sách

Bước 2: Sử dụng Thanh thiết kế nhanh để sửa nội dung, thay đổi cỡ chữ, màu chữ…cho danh sách.

Bước 3: Di chuyển danh sách đến vị trí mong muốn

ĐƯỜNG KẺ

Đối tượng Đường kẻ cho phép bạn thêm đường kẻ vào Landing Page để trang trí, phân cách đoạn… Để chèn Đường kẻ vào Landing Page bạn có thể làm theo các bước sau đây:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Đường kẻ“.

Bước 2: Sử dụng Thanh thiết kế nhanh để căn chỉnh, thay đổi kích thước, xoay ngang dọc, thay đổi màu cho đường kẻ

Bước 3: Di chuyển đường kẻ đến vị trí mong muốn.

HÌNH HỘP

Đối tượng Hình hộp cho phép bạn thêm hình hộp vào Landing Page. Để chèn Hình hộp vào Landing Page bạn có thể làm theo các bước sau đây:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Hình hộp

Bước 2: Sử dụng thanh thiết kế nhanh để căn chỉnh, thay đổi kích thước, bo góc, thay đổi màu nền cho hình hộp

Bước 3: Di chuyển hình hộp đến vị trí mong muốn

FRAME

Frame là một tính năng mạnh mẽ giúp bạn có thể thay đổi thiết kế của các phần tử giống nhau cùng một lúc. Tất cả các thiết kế có thể được đồng bộ giữa các frame, ngoại trừ việc thay ảnh và thay chữ. Cách làm như sau:

– Thêm mới Frame và đưa các phần tử vào trong và sắp xếp theo ý. Bạn có thể thiết kế Frame như thiết kế một hình hộp, hoặc có thể thiết kế trong suốt để ẩn frame.

– Nhân bản Frame vừa tạo để sao chép bố cục và thiết kế. Bạn có thể thay ảnh và chữ. – Khi thay đổi thiết kế của một frame, các frame liên quan sẽ thay đổi theo

SHAPE

Đối tượng Shape cho phép bạn chèn các biểu tượng vào Landing Page. Để chèn Shape vào Landing Page bạn có thể làm theo các bước sau đây:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Shape

Bước 2: Khi cửa sổ Quản lý Shape hiện ra chọn biểu tượng mà bạn muốn. Bấm nút Chọn Shape để chèn biểu tượng vào Landing Page

Bước 3: Sử dụng Thanh thiết kế nhanh để thay đổi màu sắc cho biểu tượng

PEN TOOL

Đối tượng Pen Tool cho phép bạn vẽ một hình bất kỳ chèn vào Landing Page. Để vẽ một hình theo ý tưởng của mình trên Landing Page bạn có thể làm theo các bước sau đây:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng  Pen Tool

Bước 2: Vẽ một hình bất kỳ mà bạn mong muốn.

Bước 3: Sử dụng Thanh thiết kế nhanh để tô nền, đường viền cho biểu tượng

VIDEO

Cách 1 : Chèn video từ Youtube (áp dụng cho tất cả các tài khoản LadiPage)

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Video

Bước 2: Bấm chọn biểu tượng “Thiết lập” trên Thanh thiết kế nhanh

Bước 3. Chọn kiểu Video: Youtube

Bước 4: Nhập link Video Youtube của bạn vào ô Đường dẫn video.

Cách 2: Chèn video trực tiếp vào Landing Page (áp dụng cho tài khoản Pro trở lên )

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Video

Bước 2: Bấm chọn biểu tượng “Thiết lập” trên Thanh thiết kế nhanh

Bước 3: Chọn kiểu Video: LadiPage Video 4

Bước 4: Bấm mục “Thư Viện Video”: tải Video của bạn lên builder hoặc sử dụng sẵn Video đã tải lên trước đó (Lưu ý: video tải lên sử dụng ở builder phải có dung lượng dưới 5Mb)

FORM

Đối tượng Form dùng để thu thập thông tin của Khách hàng.

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Form”

Bước 2: Thêm trường dữ liệu cho Form (Nếu cần)

Lựa chọn trường bạn muốn thêm. Sau đó bấm vào “Thêm mới

Đối với mỗi một trường thông tin, bạn có thể tuỳ chỉnh Xoá, Sửa chữ, hoặc cài đặt để người truy cập Bắt buộc nhập hay không. Nhấp chuột vào từng trường thông tin muốn chỉnh sửa, chọn biểu tượng thiết lập

* Một số trường thông tin cần lưu ý:

– Trường số điện thoại:

Trường thông tin số điện thoại mặc định của LadiPage đã có sẵn các biểu thức để đặt điều kiện cho việc điền số điện thoại của khách hàng. Cụ thể, nếu chọn biểu thức:

  • (\+84|0){1}(9|8|7|5|3){1}[0-9]{8}: sử dụng khi chạy quảng cáo trên lãnh thổ Việt Nam, khách hàng cần điền chính xác số điện thoại theo định dạng của Việt Nam (phải đủ 10 số, và bắt đầu bằng những đầu số đang hiện hành hợp lệ). Ví dụ: 09652919xx, 09824758xx hoặc +8498765432xx
  • [0-9]{9,12}: chỉ nhập được dãy số có thành phần từ 0 đến 9, nhập được từ 9 đến 12 số.
  • [0-9]{9}: chỉ nhập được dãy số có thành phần từ 0 đến 9, chỉ nhập được 9 số.
  • [0-9]{10}: chỉ cần nhập 10 số đầu cuối bất kỳ.

– Hộp chọn giá trị: Kiểu hộp chọn giá trị cho phép bạn đưa ra nhiều lựa chọn dưới dạng menu thả xuống, không tốn diện tích.

Bước 1: Bấm vào biểu tượng “THÊM TRƯỜNG

Bước 2: Chọn “Hộp giá trị (combobox)

Bước 4: Chọn trường Hộp giá trị vừa tạo. Bấm vào biểu tượng “Thiết lập

Bước 5: Mục “Chữ gợi nhắc”: Đổi tên trường

Bước 5: Mục Danh sách giá trị: Gõ danh sách menu lựa chọn nhanh. Bạn điền mỗi giá trị là một dòng như ô số 4

Bước 6: Xem kết quả hiển thị Hộp giá trị trên Landing Page sẽ có dạng như sau:

– Trường chọn nhiều giá trị: Kiểu trường này đưa ra tất cả các lựa chọn và người dùng lựa chọn bằng cách tích vào ô giá trị, có thể lựa chọn nhiều giá trị cùng lúc.

Bước 1: Bấm vào biểu tượng “THÊM TRƯỜNG

Bước 2: Chọn mục “Chọn nhiều giá trị (Checkbox)

Bước 3: Chọn trường Hộp giá trị vừa tạo. Bấm vào biểu tượng “Thiết lập

Bước 4: Mục “Tên lấy dữ liệu”: Đổi tên trường

Bước 5: Mục Danh sách giá trị: Gõ danh sách các ô lựa chọn nhanh. Bạn điền mỗi giá trị là một dòng như ô số 4.

– Trường chọn một giá trị: Kiểu trường này đưa ra tất cả các lựa chọn và người dùng lựa chọn bằng cách tích vào ô giá trị, tuy nhiên chỉ được chọn một ô duy nhất

Bước 1: Bấm vào biểu tượng “THÊM TRƯỜNG

Bước 2: Chọn mục “Chọn một giá trị (Radio)

Bước 3: Chọn trường Hộp giá trị vừa tạo. Bấm vào biểu tượng “Thiết lập

Bước 4: Mục “Tên lấy dữ liệu”: Đổi tên trường

Bước 5: Mục Danh sách giá trị: Gõ danh sách các ô lựa chọn nhanh. Bạn điền mỗi giá trị là một dòng như ô số 4.

LƯU DATA KHÁCH HÀNG VÀO GOOGLE SHEETS

(Chỉ áp dụng Ở gói LadiPage Pro và Enterprise)

Trong một Landing Page thường sẽ có 1 form để khách hàng đăng ký. Mỗi form này sẽ cần được lựa chọn một Cấu hình riêng để lưu thông tin về. Với mỗi một Cấu hình bạn có thể kết nối với tối đa 3 kênh khác nhau.


Bước 1: Bấm chọn “LƯU DATA

Bước 2: Bấm chọn “Thêm mới

Bước 3: Bấm “Chọn tài khoản liên kết mới

Bước 4: Chọn tài khoản Email lưu dữ liệu

Bước 5: Chọn bảng tính trên google sheets

  • Cách 1: Nhập ID bảng tính

Bước 1: Click vào menu “Chọn bảng tính tự nhập”.

Bước 2: Lấy ID bảng tính bằng cách mở bảng tính lên. Nhìn lên địa chỉ bảng tính trên thanh trình duyệt. Copy ID bảng tính.

Bước 3: Sau đó dán ID bảng tính Google sheets vừa copy ở bước 2 vào ô Bảng tính trong cửa sổ “Quản lý bảng tính”. Bấm chọn “Chọn bảng tính

Bước 4: Bấm vào “Cập nhật

 Bước 5: Nhập tên bảng tính vào ô “Tên cấu hình”. Bấm vào “Cập nhật

Bước 6: Quay lại cửa sổ builder. Bấm chọn “Làm mới lại danh sách” tại ô cấu hình form

Bước 7: Chọn tên bảng tính lưu dữ liệu được tạo ở bước 5 (ví dụ: test thử). Bấm nút “Cập nhật

  • Cách 2: Lưu data khách hàng về Email

Bước 1: Tạo tài khoản liên kết: Truy cập trang builder.ladipage.com, chọn menu Tích hợp -> Tài khoản liên kết -> Tạo tài khoản liên kết.

Bước 2: Lựa chọn Loại tài khoản là Email. Nhập đầy đủ các thông tin:

+ Tên Gợi Nhớ: là tênđể phân biệt với các liên kết khác.

+ Email Nhận Thông Báo: là email bạn muốn kết nối. Ấn “Tiếp tục” để Lưu.

Bước 3: Tạo cấu hình lưu trữ form: Vào lại trang builder.ladipage.com, chọn menu Tích hợp -> Cấu hình Form -> Tạo cấu hình form

Bước 4: Nhập “Tên cấu hình”: Tên cấu hình này mang tính chất gợi nhắc sự liên quan với form thuộc Landing Page mà bạn đang tạo, dùng để quản lý, không hiển thị ra ngoài.

Bước 5: Bấm nút “Cập nhật

Mỗi cấu hình được chứa tối đa 3 tài khoản liên kết, tương đương với 3 kênh lưu trữ thông tin khách hàng đồng thời nhận được từ form đăng ký trên Landing Page.

CAROUSEL

Tính năng Carousel cho phép bạn tạo hiệu ứng chạy xoay vòng cho các phần tử để hiển thị dưới dạng slide hoặc danh sách sản phẩm.

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Danh sách

Bước 2: Điều chỉnh khung hiển thị bằng cách bấm vào các góc, cạnh của slide.

Bước 3: Bấm vào nút “Chỉnh sửa

Bước 4: Chỉnh chiều rộng khung Carousel. Cho các phần tử cần hiển thị vào từng khung slide.

Bước 5: Bấm “Xong” để quay lại khung hiển thị cơ bản để thiết lập lại các thông số cơ bản cho khung hiển thị

MÃ HTML

Phần tử HTML cho phép bạn chèn các đoạn mã HTML vào Landing Page của mình, có thể phục vụ cho các mục đích như chèn mã nhúng các tiện ích. Để chèn phần tử HTML bạn có thể làm theo các bước sau:

Bước 1: Chọn “Thêm mới” trên thanh công cụ bên trái. Chọn biểu tượng “Mã HTML

Bước 2: Chọn nút Sửa HTML trên thanh thiết kế nhanh

Bước 3: Nhập nội dung mã HTML vào khung Chỉnh sửa HTML và bấm nút Cập nhật sau đó di chuyển đến vị trí hiển thị mong muốn

Lưu ý: Bạn cần Xuất bản trang để xem hiển thị của mã HTML vừa thêm

Bài tiếp theo: Tối Ưu Trang Landing Page

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Scroll to Top