Cách tạo một landing page đơn giản sử dụng Elementor miễn phí

Bạn đang muốn học cách tạo landing page trong website WordPress?

Nhưng​ bạn vẫn chưa biết phải bắt đầu từ đâu? Sử dụng công cụ nào?

Không vấn đề gì.

Bạn có thể dễ dàng tạo một trang landing page với Elementor.

Trong bài viết hôm nay mình sẽ hướng dẫn bạn cách làm.

Mình sẽ hướng dẫn bạn tạo một trang landing page đơn giản từ đầu.

Đây là điểm quan trọng:

Chúng ta sẽ sử dụng chỉ phiên bản plugin miễn phí.

Nếu bạn thích đồ miễn phí, hãy tiếp tục đọc.

​Elementor là gì?

tạo landing page đơn giản sử dụng elementor 15

Elementor là một công cụ đang rất hot hiện này khi nói về thiết kế website mà không động tay vào code.

Nó là một page builder trực quan theo kiểu rê thả. Nghĩa là bạn có thể thiết kế một trang web phức tạp chỉ bằng kéo thả các phần tử đã được thiết kế sắn. 

Công cụ hỗ trợ thiết kế trực quan. Bạn sẽ thiết kế trang web trong giao diện giống như độc giả nhìn thấy.

Elementor làm việc với hầu hết các theme WordPress. Nhưng tốt nhất bạn nên tham khảo những theme có tương thích cao với Elementor ở đây.

Có thể bạn quan tâm:

Top 5 plugin tạo landing page cho WordPress

So sánh 3 plugin WordPress Page Builder miễn phí tốt nhất​

Landing page đơn giản được xây dựng trong bài viết này

Trong bài viết này mình sẽ tạo một landing page đơn giản như sau:

tạo landing page đơn giản sử dụng elementor 1

Nó giới thiệu về một khóa học. Mình không phải dân thiết kế nên landing page trông hơi cùi. ​

Trước khi hướng dẫn bạn tạo landing như vậy...

...​ chúng ta học nhanh cách sử dụng Elementor. 

Hướng dẫn nhanh cách sử dụng Elementor

Đầu tiên bạn cần cài đặt và kích hoạt phiên bản miễn phí của plugin. Bạn có thể vào trang chủ của plugin tải bản zip và upload lên website của mình. 

Cách đơn giản hơn là tìm plugin ngay trong phần cài đặt plugin của website. Sau đó cài đặt và kích hoạt như thường lệ. ​

Sau khi plugin được kích hoạt, bạn tạo một trang mới. 

Ở giao diện soạn thảo trang mới, đầu tiên bạn cần chọn template. 

tạo landing page đơn giản sử dụng elementor 2

Có 2 lựa chọn để bạn bắt đầu: 

  • Full-width template: bạn sẽ xây dựng landing full-width, nhưng vẫn giữ lại phần header và footer của website
  • Blank canvas: bạn xây dựng landing page từ đầu luôn, một trang trắng đúng nghĩa. 

Trong landing page mình hướng dẫn trong bài, chúng ta sẽ chọn full-width template. 

​Bây giờ bạn chọn template kiểu này. Nhập tên page mới. Click nút Save Draft.

Sau đó click vào nút Edit with Elementor để mở giao diện thiết kế của Elementor. 

Đây là giao diện để bạn thiết kế page với Elementor.

tạo landing page đơn giản sử dụng elementor 3

Minh hoa

Giao diện gồm hai phần:

  • Sidebar bên trái là nơi bạn bổ sung các element vào phần bên phải. Nó cũng là nơi bạn chỉnh sửa phần tử bạn đang chọn bên phải.
  • Visual Preview: là nơi chứa bản thiết kế của bạn. Giao diện của nó chính xác như người dùng cuối sẽ nhìn thấy. ​

Để bắt đầu với Elementor, có lẽ bạn sẽ sử dụng template có sẵn để giảm thời gian phát triển landing page. 

Click vào nút Folder ở phía đáy trang và chọn Template Library.

Bênh cạnh các template chỉ có ở bản Pro, bạn cũng sẽ có nhiều template miễn phí

tạo landing page đơn giản sử dụng elementor 4

​Về cơ bản, để xây dựng landing page với Elementor, bạn sẽ rê thả element bạn cần từ sidebar

tạo landing page đơn giản sử dụng elementor 5

Sau đó bạn tùy chỉnh lại elementor:

Lúc này sidebar sẽ có 3 tab: 

  • Content: ở đây bạn sẽ thay đổi nội dung của phần tử
  • Style: nơi bạn thay đổi màu sắc và typography
  • Advanced: nơi bạn thực thiện thay đổi nâng cao như margin và padding. Thay đổi margin và padding giúp bạn điều chỉnh vị trí của element. 

Ok. Bây giờ chúng ta sẽ bắt tay vào tạo một landing page đơn giản như mình giới thiệu bên trên. 

Tạo landing page đơn giản sử dụng Elementor​

Như bạn thấy landing page của chúng ta gồm 4 khối:

Header, phần tính năng, phần thông tin tác giả, phần đăng ký khóa học để thu thập email. 

Đầu tiên tạo phần header, bạn cần click vào nút Add New Section

tạo landing page đơn giản sử dụng elementor 6

Lúc này bạn cần chọn cấu trúc cột. Chúng ta sẽ chọn cấu trúc hai cột.

tạo landing page đơn giản sử dụng elementor 7

Để bổ sung ảnh vào cột bên phải, bạn chỉ cần kéo element Image:

tạo landing page đơn giản sử dụng elementor 8

Sau đó trên sidebar click vào phần ảnh để tải và chèn ảnh bạn muốn.

tạo landing page đơn giản sử dụng elementor 9

Phần cột bên trái, bạn kéo lần lượt 3 element: Heading, Text Editor và Button.

tạo landing page đơn giản sử dụng elementor 10

Thực hiện thay đổi nội dung, vị trí vân vân theo ý muốn. Nhớ bạn thay đổi vị trí phần tử ở tab Advanced bằng cách thay đổi margin và padding.

Phần tính năng sản phẩm. Bạn cũng tạo cấu trúc cột đầu tiên. Sau đó kéo element Icon box. Bạn cũng có thể chọn Image box nếu bạn muốn sử dụng ảnh tùy biến thay vì icon.

tạo landing page đơn giản sử dụng elementor 11

Phần thông tin tác giả. Cũng tạo cấu trúc hai cột. Kéo ảnh vào cột bên trái.

Phần cột bên phải chúng ta sử dụng Heading và Text Editor.

tạo landing page đơn giản sử dụng elementor 12

Phần đăng ký. Ở cột bên trái chúng ta sẽ sử dụng counter. Ở bản miễn phí không có element này. Bạn có thể sử dụng plugin counter.

tạo landing page đơn giản sử dụng elementor 13

Phần cột bên phải bạn sẽ thêm form thu thập email. Cũng như trên bản miễn phí không có phần tử này.

Chúng ta sẽ thiết kế một form thu thập email trong SendPulse. Sau đó bạn lấy code HTML.

tạo landing page đơn giản sử dụng elementor 14

Lúc này bạn kéo element HMTL và chèn code vào. Ở giao diện thiết kế bạn sẽ không nhìn thấy form. Nhưng khi chuyển sang xem ở front-end form sẽ hiển thị như bình thường.

​Như vậy mình đã hướng dẫn bạn tạo một landing page đơn giản sử dụng plugin Elementor bản miễn phí. 

Bạn thấy thế nào về plugin Elementor. Hãy chia sẻ quan điểm của bạn ở bên dưới. ​

guest
25 Comments
newest
oldest
Inline Feedbacks
View all comments
Nguyễn Thành Huy
Tháng Tư 21, 2019 1:35 chiều

Chào bạn
bạn ơi có plugin nào tao được menu cho trang giống như menu dành riêng cho landing page không vậy bạn
cảm ơn bạn nhiều nha 😀

Hoang
Hoang
Tháng Mười Một 27, 2018 12:01 sáng

Hình như Elementor bản free không cho mình dùng một số templates miễn phí nữa rồi phải không bạn?

Bá Lực
Tháng Mười Một 3, 2018 11:26 chiều

Xin hỏi bạn, plugin này có sử dụng để edit một bài post đã có sẵn nội dung không?

nguyễn thanh tú
nguyễn thanh tú
Tháng Sáu 30, 2018 5:36 chiều

Thinh ơi cho mình hỏi xíu, mình muốn thiết kế các table trong trang (như trong hình minh gửi bên dưới) và có thể co dãn tốt với các giao diện điện thoại hoặc máy tính bảng… thì minh dùng plugin nào được thinh.
https://photos.app.goo.gl/AjsubJXnVM6bk5hJ9

Thuật
Tháng Sáu 18, 2018 9:43 sáng

Trời ơi, bài viết mình tìm kiếm bấy lâu nay <3
Cám ơn anh Thịnh nhiều nhiều nha!

nguyễn ngọc tú
nguyễn ngọc tú
Tháng Ba 23, 2018 5:09 chiều

bạn cho mình hỏi có một số template elementor không truy cập được, bạn có cách nào không, mình cảm ơn

nguyễn ngọc tú
nguyễn ngọc tú
Tháng Ba 24, 2018 7:06 sáng

à mình nhầm là theme chứ không phải tamplate, ví dụ như mình dùng theme ONLINE SHOP thì không chạy đc elementor, bạn có cách nào FIX không?

nguyenthang
Tháng Ba 16, 2018 2:47 chiều

Khó quá mãi chẳng làm được

Nam Nguyễn
Tháng Ba 16, 2018 9:53 sáng

Hi. Anh có thấy Thrive Architect hơi giống Elementor không?

Nam Nguyễn
Tháng Ba 16, 2018 10:49 sáng

Người Việt chuộng hàng miễn phí mà. Nhưng mua được bộ công cụ của ThriveThemes thì khá ngon. Em đang dùng 1 số công cụ của thrivethemes thấy rất tốt không nặng như Visual Composer

Văn Lê
Văn Lê
Tháng Một 17, 2018 3:06 chiều

Sau khi chọn Elementor Canvas mình không tìm thấy 2 tùy chọn Full-width template và Blank canvas
Bạn có thể hướng dẫn giúp mình ko?

Văn Lê
Văn Lê
Tháng Một 17, 2018 3:22 chiều

Thế cho mình hỏi sau khi chọn Theme tương thích với elementor thì trang vữa tạo bằng tùy chọn full-width template có thể trỏ ra làm trang chủ được không? Mong nhận được phản hồi sớm từ bạn

Văn Lê
Văn Lê
Tháng Một 17, 2018 3:25 chiều

Ok cám ơn bạn rất nhiều và rất vui khi nhận được hỗ trợ nhiệt tình từ bạn.

Hoàng
Hoàng
Tháng Chín 29, 2017 2:29 sáng

Cảm ơn bài hướng dẫn chi tiết và rất trực quan của Thịnh. Mình rất thích plugin này!

25
0
Would love your thoughts, please comment.x
()
x