Hướng dẫn sử dụng Elementor Pro: Thiết kế website/blog chỉ bằng cách kéo thả!

Chia sẻ:

Share on facebook
Share on linkedin
Share on email

Trong bài viết này Ngọc sẽ hướng dẫn sử dụng Elementor Pro (một plugin Page Builder) vô cùng mạnh mẽ để bạn có thể thiết kế website/blog mà không cần biết bất cứ dòng code nào.

Trước hết bạn hãy nhìn vào trang chủ và toàn bộ các trang của Ngọc Đến Rồi, bạn có đoán ra Ngọc dùng công cụ gì để thiết kế không?

giao diện mới ngocdenroi

Câu trả chính xác là: Plugin Elementor Pro!

Bạn có tin rằng hiện nay bất cứ ai cũng có thể thiết kế một trang web mà không cần học lập trình, không cần biết bất cứ một dòng code nào không?

Có lẽ bạn sẽ không tin, nhưng Ngọc xin khẳng định với bạn rằng chính Ngọc là một người không biết viết bất cứ một đoạn code nào. Ngọc thiết kế toàn bộ giao diện cho blog Ngọc Đến Rồi chỉ đơn giản bằng cách sử dụng Elementor Pro.

Thao tác duy nhất bạn cần biết đó là: Kéo thả & kéo thả!

Bạn có thể dành vài giây để xem demo sức mạnh thiết kế của Elementor Pro ở video dưới đây:

Elementor Pro là gì?

Về cơ bản bạn chỉ cần hiểu rằng Elementor là một plugin dùng cho mã nguồn WordPress. Nhiều người còn gọi đây là một plugin Page Builder (tạo trang).

Tính đến thời điểm Ngọc viết bài này thì Elementor là một trong những plugin được cài đặt nhiều nhất trên WordPress (với 5 triệu lượt kích hoạt sử dụng).

Do đó có thể nói Elementor là plugin Page Builder số #1 hiện nay.

elementor pro là gì
Elementor với hơn 5 triệu lượt cài đặt sử dụng

Cũng lưu ý rằng Elementor có bản miễn phí & trả phí. Bản miễn phí bạn chỉ có thể sử dụng được những chức năng cơ bản, còn riêng với bản Elementor Pro (trả phí) thì bạn có thể dùng full các chức năng.

Sau khi trải nghiệm và sử dụng thì Ngọc có thể khẳng định rằng việc thiết kế website với Elementor sẽ không còn bất cứ giới hạn nào hết.

Ngoài ra xét về mặt kinh phí thì Ngọc cũng khẳng định luôn nếu dùng Elementor Pro (giá $49/năm) thì bạn sẽ tiết kiệm được rất nhiều chi phí. Vì sao bạn biết không?

Để Ngọc cho bạn thấy nhé, trước khi dùng Elementor Pro:

  • Ngọc phải dùng một cái theme mua từ Mythemeshop với giá $59/năm
  • Muốn tạo một pop-up thu thập danh sách email thì phải dùng plugin WP Subscribe Pro với giá $29/năm.
  • Rồi nếu muốn tạo một cái thông báo kiểu hello bar thì cũng phải dùng thêm plugin WP Notification Bar với giá $39/năm
  • Hoặc trước đây nếu muốn tạo một form liên hệ thì sẽ cần phải dùng một plugin như Contact Form 7 hay WPform… thì nay bạn hoàn toàn có thể xoá những plugins đó và dùng chính module tạo form của Elementor
  • ….

Với Elementor Pro Ngọc có thể tự thiết kế một theme (giao diện) riêng cho mình, lại vừa tạo được bao nhiêu pop-up, hello bar, form, icon chia sẻ mạng xã hội… tuỳ thích không hề giới hạn.

Nói chung là tất cả trong 1, vừa tiết kiệm rất nhiều chi phí mà lại loại bỏ khá nhiều plugin, giúp nhẹ nhàng hơn, tối ưu tốc độ load cho blog.

hướng dẫn sử dụng elementor pro
Mọi thứ đểu được thiết kế bởi Elementor Pro chỉ bằng cách kéo thả!

Lấy Elementor Pro tại đây

Tóm lại: Với Elementor Pro bạn sẽ có thể thiết kế toàn bộ trang web của mình theo ý muốn, chỉ với thao tác kéo thả. Bạn có thể design trang chủ, trang blog, trang bố cục bài viết, trang lưu trữ (archive), header, footer và, trang 404 thậm chí trang tìm kiếm…

Hướng dẫn sử dụng Elementor Pro thiết kế website/blog

Ok, bây giờ Ngọc sẽ hướng dẫn chi tiết cách sử dụng plugin Elementor Pro để thiết kế website/blog theo ý của bạn nhé.

Trước hết bạn cần hiểu chính xác rằng:

  • Elementor Pro cũng chỉ là một plugin giúp tạo trang trên mã nguồn WordPress. Do đó bạn vẫn phải cài đặt WordPress trước.
  • Sau đó bạn nên dùng một theme đơn giản để làm nền cho plugin Elementor Pro hoạt động tốt nhất.

Cũng lưu ý rằng khi đã dùng Elementor Pro thì bạn không cần dùng theme trả phí, chỉ cần chọn những theme đơn giản nhẹ nhàng được Elementor đề xuất dùng như: Hello Theme của chính Elementor, Generatepress, Astra, hoặc OceanWP

(Cá nhân Ngọc đang dùng Hello theme để làm giao diện nền cho blog này)

  • Cài đặt Elementor bản miễn phí trước, sau đó mua Elementor Pro và cài đặt để sử dụng full chức năng thiết kế.

***Bạn có thể xem video hướng dẫn sử dụng Elementor Pro chi tiết dưới đây của Ngọc nhé:

Bước 1: Hướng dẫn cách cài đặt Elementor Pro

Như đã chia sẻ ở trên trước tiên bạn cần cài đặt plugin Elementor miễn phí trước. Sau đó mua Elementor Pro tại đây, cài đặt để sử dụng tất cả các chức năng không giới hạn.

Khi mua Elementor Pro bạn cũng cần xem xét nhu cầu sử dụng của mình nhé, hiện với kế hoạch personal bạn có thể dùng plugin trên 1 site với giá $49/năm. Nếu nhu cầu dùng 3 sites bạn có thể mua gói plus hoặc bạn đang làm dịch vụ thì gói expert cho 1000 sites sẽ là lựa chọn phù hợp.

cách cài đặt elementor pro

Sau khi mua bạn sẽ được cấp một tài khoản riêng, ở đó sẽ có mục download Elemetor Pro kèm License Key để kích hoạt bản quyền.

hướng dẫn cách cài đặt pligin elementor pro

Việc cài đặt plugin Elementor Pro cũng tương tự cách cài đặt plugin khác.

cài elementor pro cho wordpress
Cần cài đặt cả Elementor free & Elementor Pro nhé

Sau khi cài đặt Elementor Pro thành công bạn cần vào “Elementor” -> “License” nhập License Key để kích hoạt plugin trên site nhé.

cài elementor pro

Tiếp theo vào “Setting” -> chọn tab “General”, sau đó tích chọn vào cả mục Post & Page. Khi tích chọn vào 2 mục này tức là bạn cho phép Elementor hoạt động thiết kế trên cả bài Post và Page (trang)

cách cài đặt cấu hình elementor pro

Tiếp theo chuyển sang tab “Integrations” tại đây bạn có thể kết nối các dịch vụ bên thứ 3 bằng cách nhập mã API Key.

Ví dụ Ngọc dùng GetResponse để làm email marketing do vậy sẽ khai báo mã API Key của Getresponse vào đây. Mục đích là để sau này tạo form thu thập email thì Elementor sẽ tự động kết nối với danh bạ sẵn có của GetResponse.

thêm API các dịch vụ vào Elementor Pro

Ok như vậy là xong việc cài đặt Elementor Pro ban đầu rồi.

Tiếp theo bạn hãy cùng Ngọc tìm hiểu các sử dụng Elementor để thiết lế giao diện website và các chức năng vô cùng thú vị khác nhé.

Bước 2: Tìm hiểu cơ bản cách sử dụng Elementor Pro

Trong quá trình sử dụng Elementor Pro Ngọc thấy rằng việc bạn hiểu nguyên tắc cơ bản của công cụ này sẽ giúp bạn thao tác dễ dàng hơn. Vậy thao thác cơ bản này là gì?

Elementor sẽ hoạt động dựa trên 4 thành phần cấu trúc layout trang như sau:

  • Section (mục): Đây là một khu vực làm việc trên trang, mỗi trang thì sẽ có nhiều sections
  • Inner Section (mục con): Mỗi section sẽ có thể thêm nhiều inner section (nhưng không bắt buộc)
  • Cột: Cột nằm trong section hoặc inner section, mỗi section hoặc inner section sẽ có nhiều cột
  • Đối tượng (element): Trong mỗi cột lại có nhiều đối tượng, mỗi element có thể là hình ảnh, văn bản, icon, video,…

Để dễ hình dung hơn bạn có thể xem ảnh mô tả cấu trúc layout các thành phần dưới đây.

hướng dẫn thiết kế trang web bằng elementer pro

Khi làm việc thực tế trong Elementor Pro bạn có thể thấy các đối tượng như thế này:

cách sử dụng elementor pro thiết kế trang web

Khi bạn muốn sửa bất cứ trang (hoặc post) nào thì chỉ cần vào trang đó, chọn “Edit with Elementor”

hướng dẫn sử dụng elementor pro thiết kế trang web

Ngay sau đó bạn sẽ được đưa vào trình chỉnh sửa với Elementor, bây giờ bạn muốn chỉnh sửa, thêm bất cứ section, cột, element nào.

Để chỉnh sửa một đối tượng bạn chỉ việc click chọn, sau đó sử dụng phần khung bên trái để điều chỉnh.

hướng dẫn cách sử dụng elementor pro
Ví dụ: Khi click vào element hộp hình ảnh – bên trái bạn có thể thêm ảnh, tiêu đề & mô tả

Bước 2: Cách tạo & sử dụng template sẵn có của Elementor Pro

Template mới là sức mạnh lớn nhất & quan trọng nhất để giúp bạn tạo và quản lý các thiết kế trên WordPress với Elementor Pro.

Ngoài việc tự tạo mới các template cho riêng bạn thì bạn có thể sử dụng kho teamplate có sẵn của Elementor, chỉ cần chọn và import vào sau chỉnh sửa theo ý của bạn là xong.

Để sử dụng template trong khu vực Dashboard bạn vào Template -> Theme Builder -> Add New.

Tại đây bạn sẽ thấy các kiểu template được phân mục thành các tab rất cụ thể. Sau này những template bạn tạo ra sẽ nằm trong các phân mục chi tiết này nhé.

cách sử dụng template elementor pro

Những template hay sử dụng nhất đó là:

  • Header (phần đầu trang bao gồm logo, menu)
  • Footer (chân trang)
  • Single post (trang bài viết blog)
  • Page (trang landing page)
  • Archive (các trang lưu trữ như tag, categories, …)
  • Popup (cửa sổ bật lên để thu thập email, thông báo)

Khi click nút “Add new” một cửa sổ hiện ra bạn có thể chọn kiểu teamplate cụ thể. Sau đó đặt tên cho nó và nhấn nút “Create Template”

cách tạo template elementor

Bây giờ Ngọc sẽ hướng dẫn cho bạn tạo một một số thành phần cụ thể  trên Elementor Pro để bạn có thể dễ hình dung hơn nhé.

1. Hướng dẫn tạo Hearder trên Elementor Pro

Trước hết bạn vào Template -> Add New. Cửa sổ xuất hiện chọn “Header” và đặt tên cho header này, nhấn Create Template.

cách tạo header trên elementor

Bạn sẽ được đưa vào thư viện mẫu của Elementor, ở đây bạn có thể xem các mẫu có sẵn bằng cách click vào “dấu +”

cách tạo thanh menu bằng elementor pro

Sau khi xem trước và cảm thấy ưng ý muốn dùng mẫu header này thì bạn nhấn nút “Chèn”

hướng dẫn tạo menu header bằng elementor

Bây giờ bạn có thể chỉnh sửa header mẫu này theo ý của mình:

  • Cột logo bạn có thể click vào và thay ảnh của bạn. Ảnh logo và site tile sẽ tự động được lấy ở mục  trong customize nhé
  • Menu cũng sẽ lấy trong phần tạo menu, bạn có thể chọn hiển thị menu nào ở bên mục layout phía bên tay trái

Việc chỉnh sửa màu sắc, và các điều chỉnh chi tiết khác bạn có thể tìm hiểu kỹ hơn hoặc xem video phía trên Ngọc hướng dẫn nhé.

cách tạo menu bằng elementor pro

Sau khi chỉnh sửa xong bạn có thể nhấn nút xuất bản ngay, hoặc chọn “Display Conditions” để tuỳ chỉnh nơi xuất hiện cụ thể.

Ví dụ Ngọc muốn header này hiển thị ở toàn bộ site nhưng sẽ loại trừ không hiển thị tại trang 404 thì set như sau:

  • Include (hiện thị tại…): Chọn “Entire Site”
  • Exclude (loại trừ tại…): Chọn “Singular”, sau đó chọn trang “404 page”

cách tạo và chỉnh sửa menu bằng elementor

Cứ như vậy bạn muốn loại trừ hiển thị ở đâu nữa thì nhấn nút “ADD CONDITION” để thêm vào. Sau khi xong nhấn “SAVE & CLOSE”

Tương tự như vậy bạn có thể tạo Footer, Single Post,… cho blog của bạn nhé.

2. Hướng dẫn tạo popup bằng Elementor

Tiếp theo Ngọc sẽ hướng dẫn bạn cách tạo một popup vì Ngọc thấy chức năng này rất hay và mạnh mẽ.

Ví dụ bạn có thể tạo một cái popup tự động bật lên khi người đọc truy cập vào blog như thế này:

hướng dẫn sử dụng elementor pro

Hoặc tạo một cái nút kêu gọi đọc giả đăng ký trên site, khi họ click vào thì nó bật lên một cái popup đăng ký email như dưới đây chẳng hạn.

cách tạo popup đăng ký email bằng elementor

Cách làm trình tự như sau:

Trước hết bạn cần phải tạo ra popup trước. Vẫn vào Template -> Add New. Cửa sổ xuất hiện chọn “Popup” và đặt tên cho popup theo ý của bạn, nhấn Create Template.

cách tạo popup đăng ký email bằng elemontor

Bây giờ bạn lại được đưa vào thư viện, ở đây có rất nhiều mẫu popup để lựa chọn. Sau khi xem bạn có thể nhấn chữ “CHÈN” để đưa popup vào sử dụng & chỉnh sửa.

tạo popup với elementor pro

Thao tác chỉnh sửa thì vẫn như các đối tượng khác nên Ngọc sẽ không hướng dẫn lại. Thay đổi nội dung, hình ảnh, các trường thu thập email… theo ý của bạn nhé.

hướng tạo popup email với elementor

Riêng đối tượng form thu thập email bạn có thể kế nối với các công cụ email marketing mà bạn đang sử dụng. Nếu bạn đã khai mã API Key khi cài đặt plugin elementor pro rồi thì bây giờ nó sẽ tự động lấy các danh bạ và bạn chỉ cần click chọn là xong.

tạo popup email bằng elementor pro

Sau khi chỉnh sửa xong, chọn “Xuất bản” tiếp theo bạn sẽ được đưa vào phần “Triggers” để cài đặt các điều kiện hiển thị popup.

Ví dụ bạn có thể bận mục “On Scroll” lên để chọn khi người dùng kéo xuống dưới trang được 70% thì popup sẽ tự động bật lên. Tương tự còn các điều kiện khác tuỳ ý bạn có thể nghiên cứu thêm nhé.

tạo popup email

Tuy nhiên với Popup này Ngọc muốn kết nối nó với một cái nút (button) cụ thể để khi người dùng click vào thì popup mới bật lên. Vì thế các mục “Triggers” ở trên Ngọc sẽ bỏ qua và chỉ cần “Save & Close” lại.

Tiếp theo Ngọc sẽ chuyển trang việc tạo một cái nút bất kỳ ở trang nào đó (như ảnh bên dưới). Sau đó cài đặt cho phần liên kết của nút là “Popup” với hành động (action) là “Open popup” -> chọn cụ thể cái tên popup đã tạo ở bước trên.

cách tạo nút khi click vào sẽ bật popup đăng ký email
Cách tạo nút khi click vào sẽ bật lên Popup

Ok kể từ bây giờ người đọc click vào cái nút này thì tự động popup sẽ được bật lên. Rất mạnh mẽ phải không nào?

3. Hướng dẫn tạo landing page bằng Elementor Pro

Cuối cùng sẽ là cách tạo landing page bằng elementor pro, có thể nói nếu bạn đã đọc đến đây thì việc tạo một trang đích (landing page) bằng elementor pro sẽ không có gì khó khăn nữa.

Thao tác vẫn trình tự là vào Template -> Add New. Cửa sổ xuất hiện chọn “page” và đặt tên cho langding page theo ý của bạn, nhấn Create Template.

cách tạo landing page bằng elementor pro

Bây giờ bạn có thể tự thiết kế ra trang landing page theo ý bằng cách sử dụng các đối tượng bằng cách kéo và thả sang phía bên phải nhé.

Tuy nhiên nhanh hơn thì bạn nên chọn các template (mẫu) có sẵn trong kho của elementor bằng cách click vào biểu tượng folder như hình dưới.

hướng dẫn tạo landing page bằng plugin elementor

Sẽ có rất nhiều teamplate landing page có sẵn cho bạn lựa chọn, click “dấu +” để xem trước.

tạo landing page với template có sẵn của elementor

Click “chèn” để nhập template này vào nhé.

cách tạo landing page với elementor pro

Ok bây giờ bạn có thể thoả thích chỉnh sửa, thêm, xoá các đối tượng theo ý định riêng của bạn.

tạo landing page bằng plugin elementor pro

Xong bạn lại click nút “xuất bản” nhé!

Tổng kết lại: Review Elementor Pro có đáng sử dụng hay không?

Như vậy ở bài hướng dẫn sử dụng Elementor Pro này Ngọc hy vọng đã chia sẻ và giúp bạn có thêm một công cụ để thiết kế website/blog của mình đẹp mắt hơn.

Với kinh nghiệm sử dụng thì Ngọc đánh giá Elementor Pro đúng là một công cụ tạo trang số #1 hiện nay. Cảm giác mọi thứ như đơn giản hơn hàng nghìn lần, thao tác thiết kế vô cùng trực quan. Tức là bạn làm đến đâu sẽ thấy ngay kết quả đến đó.

Điểm thú vị mà Ngọc đánh giá cao nhất đó là khi sử dụng Elementor Pro chúng ta sẽ loại bỏ được khá nhiều plugin rườm ra khác, từ đó bớt được những chi phí bản quyền.

Cuối cùng Ngọc tin rằng với Elementor Pro thì bất cứ ai cũng có thể trở thành một web designer mà chẳng cần biết bất cứ một dòng code nào cả.

Bạn thấy sao về Elementor? Nếu bạn có kinh nghiệm gì khi sử dụng Elementor Pro để thiết kế web thì đừng quên chia sẻ ở bên dưới phần bình luận nhé!

0 0 vote
Đánh giá bài viết

Bạn cũng sẽ thích:

Theo dõi
Thông báo qua email khi
guest
6 Bình luận
Inline Feedbacks
View all comments
Thành Thái Blog
Khách
20 ngày trước

Xin phép anh Ngọc, em có bán elementor pro 😀 giá rẻ, anh em nào cần thì có thể liên hệ mình ạ

Thành Thái Blog
Reply to  Nguyễn Anh Ngọc
20 ngày trước

Hihi, cũng ko hẳn anh ạ, newbie em vẫn khuyên anh em nên mua hàng chính hãng (ủng hộ anh Ngọc qua link aff của anh ấy). Vì thực tế mua hàng chính hãng với hàng share (chia sẻ chi phí nó cũng có cái lợi và bất lợi).

Huy Lê
Khách
20 ngày trước

Hay quá, cảm ơn anh Ngọc bài hướng dẫn rất chi tiết

6
0
Ý kiến của bạn luôn tuyệt vời, hãy để lại bình luận!x
()
x
Phát triển công việc với...

Thông tin giá trị & luôn luôn miễn phí.

Không Spam – Mỗi tuần 2 emails

Tải miễn phí E-book

Bí mật giúp bạn xây dựng cỗ máy ATM tại nhà.