• 01/01/2020

Ở bài trước tôi đã giới thiệu cho bạn các thông tin liên quan tới landing page cũng như tầm quan trọng của tạo landing page đối với doanh thu bán hàng của bạn.

Chính vì vậy, tôi quyết định chia sẻ cách làm landing page với WordPress – dễ dàng nhưng hiệu quả giúp bạn tự tin hơn với công việc kinh doanh của mình.

S3_blog25_op1_v10
Cách tạo landing page bằng WordPress

Các bước tạo landing page trên website WordPress

#1 – Hãy tải Gói mở rộng để giúp bạn tạo landing page

Trước khi bắt đầu công việc tạo landing page bạn cần tải phần mềm hỗ trợ. Bạn hãy…

  • Vào Bảng tin trang WordPress của bạn / Gói mở rộng (1) / Cài mới (2).
  • Tìm kiếm gói mở rộng với từ khóa “WP Canvas – Shortcodes” (3) / Enter.
hinh_1
Tìm plugin WP Canvas-Shortcodes
  • Bạn sẽ thấy gói mở rộng cần tìm, hãy chọn Cài đặt để tải.
hinh_2
Oh yeah, nó đây rồi
  • Sau đó, đừng quên chọn Kích hoạt plugin để khởi động các chức năng của gói mở rộng.
hinh_3
Kích hoạt plugin
  • Lúc này bạn đã có thể tìm thấy WP Canvas – Shortcodes trong phần Đã cài đặt của Gói mở rộng.
hinh_4

Vậy là công việc cài đặt gói mở rộng cần thiết đã hoàn thành, bạn có thể triển khai landing page của mình.

#2 – Hãy cùng tôi tìm hiểu cách tạo landing page

Có hai cách để tạo landing page bằng WordPress, đó là tạo bằng Bài viết và tạo bằng Trang.

Hai cách này về cơ bản là như nhau vì vậy tôi sẽ hướng dẫn chi tiết tạo bằng Bài viết để bạn có thể hiểu rõ. Sau đó bạn có thể áp dụng vào tạo bằng Trang.

Có 2 cách tạo bài viết mới, cả hai cách này như nhau, bạn có thể chọn 1 trong 2:

  1. Chọn Mới / Bài viết
  2. Chọn Bài viết / Viết bài mới
hinh_5
Chọn tạo bài viết mới

Trong bài viết mới của bạn, bạn sẽ tìm thấy kí hiệu [ ] của gói mở rộng WP Canvas – Shortcodes vừa cài.

Gói này sẽ cung cấp cho bạn nhiều lựa chọn để thiết kế landing page mà chúng ta áp dụng trong bài này. Bao gồm:

  • Columns – Cột: Giúp bạn chia cột cho landing page
  • Elements – Yếu tố: Thêm vào các thông tin như bản đồ, heading, nút bấm, v.v…
  • Posts – Các bài viết: Giúp sắp xếp thông tin, bài viết. Tuy nhiên tôi không thấy phần này phù hợp cho landing page nên sẽ không nhắc tới
  • Boxes – hộp: Chọn màu cho “hộp”
  • Highlights: Giúp đánh dấu chữ
  • Dividers
  • jQuery
  • Other
hinh_6
Các lựa chọn thiết kế landing page

#3 – Tìm hiểu chi tiết từng phần của WP Canvas – Shortcodes để giúp tạo landing page

1. Columns

Có rất nhiều cách chia cột cho bạn lựa chọn. Bạn có thể chia tối thiểu 2 cột và tối đa 4 cột. Tôi sẽ thử lựa chọn với 3 cột: 1/4+1/4+1/2 (2).

hinh_7
Chọn số cột bạn muốn tạo

Sau khi lựa chọn, bạn sẽ có kết quả như bên dưới:

hinh_8
Đừng quan tâm tới những dòng mã mà bạn nhìn thấy, hãy chỉ quan tâm tới Sample Content tại (1) (2) (3).

Các thông tin bạn muốn cho vào landing page sẽ được thay đổi tại phần Sample Content. Hãy áp dụng công thức này cho tất cả các lựa chọn khác của WP Canvas – Shortcodes.

Hãy chắc chắn rằng bạn tạo tên bài viết và chọn đăng bài viết.

hinh_9

Nếu muốn xem bài viết của bạn, hãy chọn Xem bài viết.

hinh_10

Bạn sẽ có kết quả như hình bên dưới:

hinh_11

2. Boxes

# Bạn có thể lựa chọn các màu sắc cơ bản để trang trí cho landing page của mình.

Hãy chắc chắn rằng bạn di chuyển chuột tới vị trí đầu của bài viết (1).

Tôi sẽ chọn màu xanh cho hộp của mình bằng cách chọn Boxes (2) / Success (3).

hinh_12
Tạo hộp

Sau khi hoàn tất bạn sẽ có kết quả như hình bên dưới (1). Đừng quên Cập nhật (2) và Xem bài viết (3) bạn vừa tạo.

hinh_13

Kết quả của bạn khi chọn Xem bài viết là:

Trong trường hợp bạn muốn tất cả các phần chữ của mình đều được đặt trong hộp xanh. Hãy sao chép toàn bộ phần (1) và cho chúng vào phần Sample Content (2).

hinh_15

Bạn sẽ có kết quả như sau (1). Và tất nhiên là hãy tiếp tục chọn Cập nhật (2) và Xem bài viết (3) để kiểm tra tiến trình công việc. Hãy luôn nhớ chọn Cập nhật sau khi sửa đổi thông tin.

hinh_16

Bạn đã có toàn bộ chữ trong khung màu xanh.

hinh_17

3. Elements

Các yếu tố cần thiết cho thêm vào landing page sẽ được tìm thấy ở đây. Bạn có thể dễ dàng cập nhật những thông tin như bản đồ, nút thông báo,v.v…

hinh_18

Tôi sẽ lựa chọn các chức năng: Button, Google Map, Heading, Pricing Table, Social Icon để minh họa cho bạn.

hinh_19

Hãy lựa chọn yếu tố cần thiết nhất cho landing page của bạn.

4. Highlights

Với chức năng này, bạn có thể làm nổi bật dòng thông tin của bạn với những màu sắc khác nhau.

Có 5 màu cho bạn lựa chọn là: Xanh dương, Ghi, Xanh lá, Đỏ và Vàng.

hinh_20

Tôi sẽ thử ví dụ với màu xanh dương và được kết quả như sau:

hinh_21

5. jQuery

# Chức năng này sẽ giúp bạn tạo các trang landing page: accordion, tabs hoặc là toggle.

hinh_22

Để giúp bạn có cái nhìn rõ hơn, tôi sẽ áp dụng thử cả 3 dạng:

  1. accordion: Mở được nhiều mục theo chiều dọc
  2. tabs: Mở được nhiều mục theo chiều ngang
  3. toggle: Mở được 1 mục theo chiều dọc

6. Others

Phần này khá đơn giản, bạn sẽ lựa chọn các chức năng phù hợp để:

  • Tạo khoảng trống với Spacing
  • Clear floats
  • Chuyển thông tin vào trung tâm với Center Content
  • Tạo tối đa chiều rộng với Width
  • Trước
hinh_24

7. Dividers

Tạo khoảng cách giữa các đoạn, các phần bằng gạch ngang, hoặc gạch rời, hoặc hình ảnh.

hinh_25

Ví dụ minh họa của tôi giúp bạn dễ hiểu hơn:

Sau khi hiểu hết được cách sử dụng gói mở rộng WP Canvas – Shortcodes, bạn có thể bắt tay vào làm 1 trang landing page cho riêng mình.

Dưới đây là 1 ví dụ cụ thể, áp dụng đúng các bước tôi vừa đề cập.

hinh_27

Chúc bạn thành công!