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

elementor

Sử dụng Elementor để tạo landing page – Mọi người có thể đang muốn học cách tạo landing page trong website WordPress?

Nhưng​ mọi người có thể 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ì.

mọi người có thể 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 mọi người có thể cách làm.

Mình sẽ hướng dẫn mọi người có thể 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 mọi người có thể thích đồ miễn phí, hãy tiếp tục đọc.

​Elementor là gì?

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à mọi người có thể 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. mọi người có thể 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 mọi người có thể nên tham khảo những theme có tương thích cao với Elementor ở đây.

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 website đơn giản như sau:

cách tạo landingpage đơn giản Elementor
cách tạo landingpage đơn giản

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 mọi người có thể 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 mọi người có thể cần cài đặt và kích hoạt phiên bản miễn phí của plugin. mọi người có thể 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, mọi người có thể tạo một trang mới.

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

cách tạo landing page đơn giản Elementor

Có 2 lựa chọn để mọi người có thể bắt đầu:

Full-width template: mọi người có thể 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: mọi người có thể 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ờ mọi người có thể 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 để mọi người có thể thiết kế page với Elementor.

cách tạo landing page đơn giản Elementor
cách tạo landing page đơn giản

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

Sidebar bên trái là nơi mọi người có thể bổ sung các element vào phần bên phải. Nó cũng là nơi mọi người có thể chỉnh sửa phần tử mọi người có thể đang chọn bên phải.
Visual Preview: là nơi chứa bản thiết kế của mọi người có thể. 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ẽ mọi người có thể 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, mọi người có thể cũng sẽ có nhiều template miễn phí

cách tạo landing page đơn giản Elementor

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

cách tạo lading page đơn giản

Sau đó mọi người có thể tùy chỉnh lại elementor:

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

Content: ở đây mọi người có thể sẽ thay đổi nội dung của phần tử
Style: nơi mọi người có thể thay đổi màu sắc và typography
Advanced: nơi mọi người có thể thực thiện thay đổi nâng cao như margin và padding. Thay đổi margin và padding giúp mọi người có thể đ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ư mọi người có thể 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, mọi người có thể cần click vào nút Add New Section

cách tạo landing page đơn giản Elementor

Lúc này mọi người có thể 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

Để bổ sung ảnh vào cột bên phải, mọi người có thể chỉ cần kéo element Image:

tạo landing page đơn giản Elementor

Sau đó trên sidebar click vào phần ảnh để tải và chèn ảnh mọi người có thể muốn.

tạo landing page

Phần cột bên trái, mọi người có thể kéo lần lượt 3 element: Heading, Text Editor và Button.

tạo landing page

Thực hiện thay đổi nội dung, vị trí vân vân theo ý muốn. Nhớ mọi người có thể 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. mọi người có thể cũng tạo cấu trúc cột đầu tiên. Sau đó kéo element Icon box. mọi người có thể cũng có thể chọn Image box nếu mọi người có thể muốn sử dụng ảnh tùy biến thay vì icon.

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

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. mọi người có thể có thể sử dụng plugin counter.

Cách tạo landing đơn giản sử dụng Elementor

Phần cột bên phải mọi người có thể 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 đó mọi người có thể lấy code HTML.

Elementor

Lúc này mọi người có thể kéo element HMTL và chèn code vào. Ở giao diện thiết kế mọi người có thể 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 thietkewebpro247.com đã hướng dẫn mọi người có thể tạo một landing page đơn giản sử dụng plugin Elementor bản miễn phí. Nếu có bất cứ thắc mắc nào thì hãy liên hệ với chúng tôi để được tư vấn miễn phí nhé!

Nguồn – thuthuatwp.com