Trong bài viết này, mình sẽ hướng dẫn bạn cách thiết kế LandingPage đơn giản với WordPress và Elementor, một trình xây dựng trang web kéo và thả miễn phí và dễ sử dụng. Bạn sẽ không cần phải biết lập trình hay thiết kế web, chỉ cần theo các bước sau:
Tổng quan các bước thiết kế LandingPage
Để thiết kế LandingPage với WordPress và Elementor, bạn sẽ cần thực hiện các bước sau:
Bước 1: Mua tên miền
Bước 2: Mua Hosting
Bước 3: Trỏ tên miền vào Hosting
Bước 4: Tải và Cài đặt WordPress
Bước 5: Thiết kế LandingPage trên trình xây dựng trang Elementor của WordPress
Chúng ta sẽ đi vào chi tiết từng bước trong các phần tiếp theo.
Bước 1: Mua tên miền
Tên miền là địa chỉ của trang web của bạn trên Internet, ví dụ như google.com, facebook.com, hay bing.com. Bạn cần mua một tên miền phù hợp với nội dung và mục đích của LandingPage của bạn.
Bạn có thể mua tên miền từ các nhà cung cấp dịch vụ đăng ký tên miền uy tín, như Godaddy, Namecheap, hay Google Domains. Giá của một tên miền thường dao động từ 10 đến 20 USD một năm, tùy thuộc vào phần mở rộng của tên miền (.com, .net, .org, .vn, …).
Bước 2: Mua Hosting
Hosting là nơi lưu trữ các tập tin và cơ sở dữ liệu của trang web của bạn trên Internet, để người dùng có thể truy cập được. Bạn cần mua một gói hosting phù hợp với nhu cầu và ngân sách của bạn.
Bạn có thể mua hosting từ các nhà cung cấp dịch vụ hosting uy tín, như MDIGI Hosting, Bluehost, hay Siteground. Giá của một gói hosting thường dao động từ 3 đến 10 USD một tháng, tùy thuộc vào dung lượng, băng thông, và các tính năng khác của gói hosting.
Bước 3: Trỏ tên miền vào Hosting
Sau khi mua tên miền và hosting, bạn cần trỏ tên miền vào hosting, để khi người dùng gõ tên miền của bạn vào trình duyệt, họ sẽ được chuyển đến trang web của bạn trên hosting.
Đây là một cách để kết nối tên miền và hosting của bạn, bằng cách chỉ định địa chỉ IP của hosting trong bản ghi A của tên miền.
Để làm được điều này, bạn cần có những thông tin sau:
Tên miền và mật khẩu đăng nhập của dịch vụ tên miền.
Địa chỉ IP public của hosting, thường được cung cấp bởi nhà cung cấp hosting.
Quyền truy cập vào khu vực quản lý DNS của tên miền.
Tùy theo nhà cung cấp tên miền và hosting mà bạn sử dụng, cách trỏ tên miền về hosting theo địa chỉ IP host có thể khác nhau. Tuy nhiên, các bước cơ bản thường là như sau:
Đăng nhập vào trang quản lý tên miền và tìm đến phần DNS Zone hoặc DNS Management.
Tìm kiếm hoặc thêm một bản ghi A với tên miền hoặc subdomain mà bạn muốn trỏ về hosting. Ví dụ, nếu bạn muốn trỏ tên miền chính, bạn có thể để trống hoặc nhập @ vào phần Host. Nếu bạn muốn trỏ một subdomain, bạn có thể nhập tên của nó vào phần Host. Ví dụ, blog, shop, www, v.v.
Nhập địa chỉ IP của hosting vào phần Points to hoặc Value. Đây là địa chỉ IP mà bạn đã nhận được từ nhà cung cấp hosting.
Lưu lại các thay đổi và đợi cho việc cập nhật DNS hoàn tất. Thời gian cập nhật DNS có thể mất từ vài giờ đến 24 giờ, tùy theo nhà cung cấp tên miền và hosting.
Bước 4: Tải và Cài đặt WordPress
WordPress là một nền tảng quản lý nội dung miễn phí và phổ biến nhất thế giới, cho phép bạn tạo và quản lý trang web một cách dễ dàng. Bạn cần tải và cài đặt WordPress trên hosting, để có thể sử dụng WordPress để thiết kế LandingPage của bạn.
Bạn có thể tải WordPress từ wordpress.org. Bạn sẽ nhận được một tập tin nén có tên là wordpress.zip, chứa các tập tin và thư mục của WordPress.
Sau khi tải WordPress, bạn cần giải nén tập tin wordpress.zip và tải lên hosting, vào thư mục public_html. Bạn có thể sử dụng các công cụ như FileZilla, WinSCP, hay File Manager để tải lên hosting.
Trong video, mình đã giải nén tập tin wordpress.zip và tải lên hosting bằng File Manager của Hosting MDIGI. Bạn có thể xem cách tải lên hosting tại phút thứ 16:20 của video.
Sau khi tải lên hosting, bạn cần cài đặt WordPress trên hosting, bằng cách truy cập vào tên miền của bạn trên trình duyệt.
Bạn sẽ được hướng dẫn qua các bước cài đặt WordPress, bao gồm:
Chọn ngôn ngữ cho WordPress
Tạo cơ sở dữ liệu cho WordPress
Nhập thông tin cơ sở dữ liệu cho WordPress
Nhập thông tin trang web cho WordPress
Đăng nhập vào WordPress
Bước 5: Thiết kế LandingPage trên trình xây dựng trang Elementor của WordPress
Sau khi cài đặt WordPress, bạn đã có một trang web cơ bản trên Internet. Tuy nhiên, trang web này chưa có nội dung và thiết kế hấp dẫn. Bạn cần thiết kế LandingPage trên trình xây dựng trang Elementor của WordPress, để ttiếp tục tạo ra một LandingPage đẹp mắt và chuyên nghiệp.
Elementor là một trình xây dựng trang web kéo và thả miễn phí và dễ sử dụng cho WordPress. Bạn có thể sử dụng Elementor để thiết kế LandingPage của bạn mà không cần phải viết một dòng code nào. Bạn chỉ cần kéo và thả các thành phần như tiêu đề, hình ảnh, nút, biểu mẫu, hay video vào vị trí mong muốn trên trang web của bạn.
Để thiết kế LandingPage trên Elementor, bạn sẽ cần thực hiện các bước sau:
5.1 Cài Plugin Elementor miễn phí
5.2 Cài Plugin Essential Addon for Elementor
5.3 Cài đặt Plugin Templately
5.4 Chọn lựa các template cho LandingPage của bạn
5.5 Sửa các Template đã chọn cho chuẩn hơn
5.6 Cài đặt Plugin Elementor Header & footer Builder
5.7 Tạo Header cho LandingPage
5.8 Tạo Footer cho LandingPage
5.9 Gắn Header và Footer vào LandingPage
5.10 Sửa nội dung cho Landing Page
5.11 Cài các nút liên hệ cho LandingPage
5.12 Đổi trang LandingPage thành trang chủ của website
Chúng ta sẽ đi vào chi tiết từng bước thiết kế Landing Page trong các phần tiếp theo.
5.1 Cài Plugin Elementor miễn phí
Plugin Elementor là plugin cần thiết để bạn có thể sử dụng Elementor để thiết kế trang web của bạn. Bạn có thể cài plugin Elementor miễn phí từ trang quản trị WordPress của bạn, bằng cách làm theo các bước sau:
Bước 1: Đăng nhập vào trang quản trị WordPress của bạn, bằng cách truy cập vào tên miền của bạn kèm theo /wp-admin, ví dụ như landingpagepro.com/wp-admin. Nhập tên đăng nhập và mật khẩu của bạn để đăng nhập.
Bước 2: Trên thanh menu bên trái, chọn Plugins > Add New.
Bước 3: Trong ô tìm kiếm, gõ Elementor và nhấn Enter.
Bước 4: Tìm plugin có tên là Elementor Website Builder, do Elementor.com phát triển, và nhấn Install Now.
Bước 5: Sau khi plugin được cài đặt, nhấn Activate để kích hoạt plugin.
5.2 Cài Plugin Essential Addon for Elementor
Plugin Essential Addon for Elementor là một plugin bổ sung cho Elementor, cung cấp thêm nhiều thành phần và tính năng hữu ích cho bạn khi thiết kế trang web của bạn. Bạn có thể cài plugin Essential Addon for Elementor miễn phí từ trang quản trị WordPress của bạn, bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Plugins > Add New.
Bước 2: Trong ô tìm kiếm, gõ Essential Addon for Elementor và nhấn Enter.
Bước 3: Tìm plugin có tên là Essential Addons for Elementor, do WPDeveloper phát triển, và nhấn Install Now.
Bước 4: Sau khi plugin được cài đặt, nhấn Activate để kích hoạt plugin.
Trong video, mình đã cài plugin Essential Addon for Elementor miễn phí từ trang quản trị WordPress. Bạn có thể xem cách cài plugin Essential Addon for Elementor tại phút thứ 24:00 của video.
5.3 Cài đặt Plugin Templately
Plugin Templately là một plugin cho phép bạn sử dụng các template sẵn có cho Elementor, để bạn không cần phải thiết kế LandingPage từ đầu. Bạn có thể cài đặt plugin Templately miễn phí từ trang quản trị WordPress của bạn, bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Plugins > Add New.
Bước 2: Trong ô tìm kiếm, gõ Templately và nhấn Enter.
Bước 3: Tìm plugin có tên là Templately – 1000+ Free Templates for Elementor and Gutenberg, do Templately phát triển, và nhấn Install Now.
Bước 4: Sau khi plugin được cài đặt, nhấn Activate để kích hoạt plugin.
Trong video, mình đã cài đặt plugin Templately miễn phí từ trang quản trị WordPress. Bạn có thể xem cách cài đặt plugin Templately tại phút thứ 25:00 của video.
5.4 Chọn lựa các template cho LandingPage của bạn
Sau khi cài đặt plugin Templately, bạn có thể sử dụng các template sẵn có cho Elementor, để bạn không cần phải thiết kế LandingPage từ đầu. Bạn có thể chọn lựa các template cho LandingPage của bạn theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Pages > Add New.
Bước 2: Nhập tên cho trang của bạn, ví dụ như LandingPage, và nhấn Publish.
Bước 3: Nhấn Edit with Elementor để mở trình xây dựng trang Elementor.
Bước 4: Trên góc phải của màn hình, nhấn vào biểu tượng Templately, có hình một ngọn núi.
Bước 5: Bạn sẽ thấy một danh sách các template cho Elementor, được phân loại theo các chủ đề và mục đích khác nhau. Bạn có thể lọc các template theo các tiêu chí như Free, Pro, Category, hay Keyword.
Bước 6: Chọn một template phù hợp với nội dung và mục đích của LandingPage của bạn, và nhấn Insert Template để thêm template vào trang của bạn.
Trong video, mình đã chọn lựa các template cho LandingPage của mình từ Templately. Bạn có thể xem cách chọn lựa các template tại phút thứ 25:20 của video.
5.5 Sửa các Template đã chọn cho chuẩn hơn
Sau khi thêm template vào trang của bạn, bạn có thể sửa các template đã chọn cho chuẩn hơn, theo ý muốn và nhu cầu của bạn. Bạn có thể sửa các template bằng cách kéo và thả, thay đổi màu sắc, kích thước, font chữ, hình ảnh, nội dung, hay bất cứ thành phần nào trên template.
5.6 Cài đặt Plugin Elementor Header & footer Builder
Plugin Elementor Header & footer Builder là một plugin cho phép bạn tạo và quản lý header và footer cho trang web của bạn bằng Elementor. Header và footer là hai phần quan trọng của một trang web, vì chúng xuất hiện trên mọi trang, và chứa các thông tin cơ bản như logo, menu, liên hệ, mạng xã hội, hay bản quyền. Bạn có thể cài đặt plugin Elementor Header & footer Builder miễn phí từ trang quản trị WordPress của bạn, bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Plugins > Add New.
Bước 2: Trong ô tìm kiếm, gõ Elementor Header & footer Builder và nhấn Enter.
Bước 3: Tìm plugin có tên là Elementor – Header, Footer & Blocks Template, do Brainstorm Force phát triển, và nhấn Install Now.
Bước 4: Sau khi plugin được cài đặt, nhấn Activate để kích hoạt plugin.
Trong video, mình đã cài đặt plugin Elementor Header & footer Builder miễn phí từ trang quản trị WordPress. Bạn có thể xem cách cài đặt plugin Elementor Header & footer Builder tại phút thứ 30:30 của video.
5.7 Tạo Header cho LandingPage
Header là phần đầu tiên của một trang web, thường chứa logo, menu, và các thông tin quan trọng khác. Bạn có thể tạo header cho LandingPage của bạn bằng Elementor Header & footer Builder, bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Templates > Theme Builder.
Bước 2: Trên tab Header, nhấn Add New Header.
Bước 3: Nhập tên cho header của bạn, ví dụ như LandingPage Header, và nhấn Create Template.
Bước 4: Bạn sẽ được chuyển đến trình xây dựng trang Elementor, với một danh sách các template cho header. Bạn có thể chọn một template phù hợp với thiết kế của LandingPage của bạn, hoặc tạo header từ đầu bằng cách nhấn X để đóng danh sách template.
Bước 5: Bạn có thể thiết kế header của bạn bằng cách kéo và thả các thành phần từ thanh menu bên trái, hoặc sửa các thành phần trên template đã chọn. Bạn nên bao gồm các thành phần cơ bản như logo, menu, và nút liên hệ trên header của bạn.
Bước 6: Sau khi thiết kế xong header của bạn, nhấn Publish để lưu và xuất bản header.
Trong video, mình đã tạo header cho LandingPage bằng Elementor Header & footer Builder. Bạn có thể xem cách tạo header tại phút thứ 31:03 của video.
5.8 Tạo Footer cho LandingPage
Footer là phần cuối cùng của một trang web, thường chứa các thông tin bổ sung như liên hệ, mạng xã hội, bản quyền, hay điều khoản sử dụng. Bạn có thể tạo footer cho LandingPage của bạn bằng Elementor Header & footer Builder, bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Templates > Theme Builder.
Bước 2: Trên tab Footer, nhấn Add New Footer.
Bước 3: Nhập tên cho footer của bạn, ví dụ như LandingPage Footer, và nhấn Create Template.
Bước 4: Bạn sẽ được chuyển đến trình xây dựng trang Elementor, với một danh sách các template cho footer. Bạn có thể chọn một template phù hợp với thiết kế của LandingPage của bạn, hoặc tạo footer từ đầu bằng cách nhấn X để đóng danh sách template.
Bước 5: Bạn có thể thiết kế footer của bạn bằng cách kéo và thả các thành phần từ thanh menu bên trái, hoặc sửa các thành phần trên template đã chọn. Bạn nên bao gồm các thông tin cơ bản như liên hệ, mạng xã hội, bản quyền, hay điều khoản sử dụng trên footer của bạn.
Bước 6: Sau khi thiết kế xong footer của bạn, nhấn Publish để lưu và xuất bản footer.
Bạn có thể xem cách tạo footer tại phút thứ 36:00 của video.
5.9 Gắn Header và Footer vào LandingPage
Sau khi tạo xong header và footer cho LandingPage của bạn, bạn cần gắn header và footer vào LandingPage, để header và footer xuất hiện trên mọi trang của trang web của bạn. Bạn có thể gắn header và footer vào LandingPage bằng Elementor Header & footer Builder, bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Templates > Theme Builder.
Bước 2: Trên tab Header, chọn header mà bạn đã tạo, và nhấn Edit Conditions.
Bước 3: Trong hộp thoại Display Conditions, chọn Entire Site, và nhấn Save & Close. Điều này có nghĩa là header của bạn sẽ xuất hiện trên toàn bộ trang web của bạn.
Bước 4: Làm tương tự với tab Footer, chọn footer mà bạn đã tạo, và nhấn Edit Conditions. Chọn Entire Site, và nhấn Save & Close.
Trong video, mình đã gắn header và footer vào LandingPage bằng Elementor Header & footer Builder. Bạn có thể xem cách gắn header và footer vào LandingPage tại phút thứ 41:08 của video.
5.10 Sửa nội dung cho LandingPage
Sau khi thiết kế xong cấu trúc và giao diện của LandingPage của bạn, bạn cần sửa nội dung cho LandingPage, để nội dung phù hợp với mục đích và đối tượng của bạn. Bạn có thể sửa nội dung cho LandingPage bằng Elementor, bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Pages > All Pages.
Bước 2: Chọn trang mà bạn đã tạo LandingPage, ví dụ như LandingPage, và nhấn Edit with Elementor.
Bước 3: Bạn sẽ được chuyển đến trình xây dựng trang Elementor, với LandingPage của bạn. Bạn có thể sửa nội dung của bất kỳ thành phần nào trên LandingPage, bằng cách nhấn vào thành phần đó, và thay đổi nội dung trong thanh menu bên trái.
Bước 4: Bạn nên sửa nội dung cho LandingPage theo các nguyên tắc sau:
Nội dung phải rõ ràng, cụ thể, và hấp dẫn, để thu hút sự chú ý và hành động của khách hàng tiềm năng.
Nội dung phải liên quan, có giá trị, và đáp ứng nhu cầu và mong muốn của khách hàng tiềm năng.
Nội dung phải thể hiện được lợi ích, độc đáo, và khác biệt của sản phẩm, dịch vụ, hay mục đích của bạn so với đối thủ cạnh tranh.
Nội dung phải có các yếu tố thuyết phục, như các chứng nhận, lời khuyên, hay bảo hành, để tăng sự tin tưởng và niềm tin của khách hàng tiềm năng.
Nội dung phải có các kêu gọi hành động, như các nút đăng ký, mua hàng, hay liên hệ, để khuyến khích khách hàng tiềm năng thực hiện hành động mong muốn của bạn.
Bước 5: Sau khi sửa xong nội dung cho LandingPage của bạn, nhấn Update để lưu và cập nhật LandingPage.
Bạn có thể xem cách sửa nội dung cho LandingPage tại phút thứ 46:00 của video.
5.11 Cài các nút liên hệ cho LandingPage
Một trong những mục đích chính của LandingPage là khuyến khích khách hàng tiềm năng liên hệ với bạn, để bạn có thể chuyển đổi họ thành khách hàng thực. Do đó, bạn cần cài các nút liên hệ cho LandingPage của bạn, để khách hàng tiềm năng có thể dễ dàng gửi thông tin, email, hay gọi điện cho bạn.
Bạn có thể cài các nút liên hệ cho LandingPage của bạn bằng Elementor, bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Pages > All Pages.
Bước 2: Chọn trang mà bạn đã tạo LandingPage, ví dụ như LandingPage, và nhấn Edit with Elementor.
Bước 3: Bạn sẽ được chuyển đến trình xây dựng trang Elementor, với LandingPage của bạn. Bạn có thể cài các nút liên hệ trên các vị trí mà bạn muốn, ví dụ như trên header, footer, hay phần liên hệ.
Bước 4: Bạn có thể kéo và thả các thành phần liên quan đến liên hệ từ thanh menu bên trái, như Form, Button, Icon List, Social Icons, hay Call to Action. Bạn có thể sửa các thuộc tính của các thành phần này, như màu sắc, kích thước, font chữ, hoặc hành động khi nhấn vào.
Bước 5: Bạn nên cài các nút liên hệ theo các nguyên tắc sau:
Nút liên hệ phải rõ ràng, nổi bật, và dễ nhận biết, để khách hàng tiềm năng không bỏ qua hoặc bị nhầm lẫn.
Nút liên hệ phải thân thiện, lịch sự, và khuyến khích, để khách hàng tiềm năng cảm thấy thoải mái và tin tưởng khi liên hệ với bạn.
Nút liên hệ phải đơn giản, tiện lợi, và an toàn, để khách hàng tiềm năng không phải mất nhiều thời gian, công sức, hay lo lắng khi liên hệ với bạn.
Bước 6: Sau khi cài xong các nút liên hệ cho LandingPage của bạn, nhấn Update để lưu và cập nhật LandingPage.
Bạn có thể xem cách cài các nút liên hệ cho LandingPage tại phút thứ 51:05 của video.
5.12 Đổi trang LandingPage thành trang chủ của website
Sau khi hoàn thiện LandingPage của bạn, bạn có thể đổi trang LandingPage thành trang chủ của website, để khi khách hàng tiềm năng truy cập vào tên miền của bạn, họ sẽ được chuyển đến LandingPage của bạn. Bạn có thể đổi trang LandingPage thành trang chủ của website bằng cách làm theo các bước sau:
Bước 1: Trên thanh menu bên trái, chọn Settings > Reading.
Bước 2: Trong phần Your homepage displays, chọn A static page, và chọn trang mà bạn đã tạo LandingPage, ví dụ như LandingPage, ở ô Homepage.
Bước 3: Nhấn Save Changes để lưu và áp dụng thay đổi.
Trong video, chúng tôi đã đổi trang LandingPage thành trang chủ của website bằng cách trên. Bạn có thể xem cách đổi trang LandingPage thành trang chủ của website tại phút thứ 53:35 của video.
Kết thúc
Vậy là bạn đã hoàn thành bài viết hướng dẫn thiết kế LandingPage đơn giản với WordPress và Elementor. Bạn có thể xem lại video để nắm rõ hơn các bước thực hiện, hoặc truy cập vào trang web của chúng tôi để xem thêm các bài viết khác về thiết kế web. Chúc bạn thành công với LandingPage của bạn!
39
[HƯỚNG DẪN] Thiết kế website bán hàng từ A-Z | Không cần biết Code