3873 lượt xem

Elementor Pro có key xịn giá rẻ | Cách sử dụng Page builder số 1 hiện nay cho website wordpress

Bài viết dưới đây Alowebtot sẽ hướng dẫn sử dụng elementor pro khi tiếp cận với WordPress để tạo ra 1 website chuyên nghiệp và thật đẹp nhé.

Elementor Pro là gì?

Elementor là một plugin và được dùng để thiết kế website WordPress và có cách gọi khác là plugin Page Builder (trình tạo trang).

Chính vì plugin Page Builder đang rất phổ biến nên được nhiều coder sử dụng ( với 5 triệu lượt cài đặt sử dụng). Nên Elementor được đánh giá là một plugin Page Builder số 1 hiện nay.

Hướng dẫn sử dụng elementor pro cho người mới
Elementor Pro với hơn 5 triệu lượt kích hoạt sử dụng

Elementor có 2 phiên bản:

Elementor miễn phí: Phiên bản miễn phí sẽ bị giới hạn các chức năng. Bạn chỉ sử dụng được các chức năng cơ bản.

Bản Elementor Pro ( mất phí có giá $49/năm): Với bản trả phí bạn sẽ được sử dụng full các chức năng của Elementor.

Elementor pro giúp tiết kiệm chi phí:

  • Chi phí để mua một theme có giá khoảng $59/năm
  • Để tạo ra một popup thu thập danh sách email thì bạn sẽ cần phải dùng đến plugin WP Subscribe Pro có giá khoảng $29/năm
  • Tiếp theo nếu bạn muốn tạo một thông báo kiểu hello bar thì bạn cũng phải dùng đến plugin WP Notification Bar có giá khoảng $39/năm.

Nhưng chỉ cần một plugin Elementor Pro bạn có thể tự thiết kế 1 theme ( giao diện) theo ý của bạn, bạn sẽ tạo được thêm pop-up, hello bar, form, icon chia sẻ mạng xã hội… tuỳ thích mà không hề bị giới hạn.

Hướng dẫn sử dụng  Elementor Pro thao tác kéo thả đơn giản
Hướng dẫn sử dụng Elementor Pro thao tác kéo thả đơn giản

Tóm lại: chỉ với Elementor Pro bạn có thể tự xây dựng cho mình một trang web theo ý bạn mà bạn chỉ cần thao tác kéo thả đơn giản. Bạn có thể tự thiết kế trang chủ, trang blog, trang bài viết, trang lưu trữ (archive), header, footer và, trang 404 thậm chí cả trang tìm kiếm … chỉ bằng cách là kéo thả.

Hướng dẫn cách sử dụng Elementor Pro để xây dựng website/blog

Bây giờ Alowebtot sẽ hướng dẫn chi tiết cách sử dụng plugin Elementor Pro để xây dựng website hay blog theo ý của bạn nhé.

PageBuider Elementor Pro:

  • Elementor Pro là một plugin giúp chúng ta tạo trang web/blog trên mã nguồn WordPress một cách dễ dàng hơn. Vì vậy, bạn vẫn cần phải cài đặt WordPress trước.
  • Sau đó bạn nên chọn một theme đơn giản ( theme miễn phí được Elementor đề xuất) để làm nền cho plugin Elementor Pro hoạt động tốt nhất.
  • Bạn nên đặt Elementor bản miễn phí trước, sau đó mua Elementor Pro và cài đặt để được sử dụng full chức năng thiết kế nhé.

Hướng dẫn cài đặt Elementor Pro

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

Khi mua Elementor Pro bạn nên xem xét nhu cầu sử dụng của mình nhé. Nếu 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 bạn cầu dùng 3 sites thì bạn có thể chọn mua gói plus hoặc bạn đang làm dịch vụ cần suer dụng nhiều hơn thì gói expert cho 1000 sites sẽ là lựa chọn phù hợp nhất.

Hướng dẫn cách cài đặt Elementor Pro
Hướng dẫn cách cài đặt Elementor Pro. Ảnh 1

Sau khi mua xong 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 dùng để kích hoạt bản quyền.

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

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

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

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

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

Tiếp theo bạn vào “Setting” => chọn tab “General”, sau đó nhấn chọn vào cả mục Post & Page. Khi bạn 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)

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

Tiếp theo sẽ chuyển sang tab “Integrations” lúc nà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ụ chúng tôi dùng GetResponse để làm email marketing nên chúng tôi sẽ khai báo mã API Key của Getresponse vào đây. Mục đích là để sau này nếu 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.

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

Như vậy là bạn đã cài đặt Elementor Pro rồi đó.

Tiếp theo chúng ta cùng tìm hiểu các sử dụng Elementor để thiết kế giao diện website và các khám phá các chức năng vô cùng thú vị của Elementor Pro nhé.

Tìm hiểu cách sử dụng Plugin Elementor Pro

Việc bạn hiểu nguyên tắc sử dụng cơ bản của Plugin này sẽ giúp bạn thao tác dễ dàng hơn trong quá trình sử dụng.

Elementor hoạt động dựa trên 4 thành phần:

  • Section ( mục): Section bạn hiểu đơn giản là một khu vực làm việc trên trang, mỗi trang bạn hoàn toàn có thể tạo nhiều sections.
  • Inner Section (mục con): Mỗi một section bạn có thể tạo thêm nhiều inner section
  • Clumn ( Cột): Bạn có thể tùy ý tạo cột trong section hoặc inner section, mỗi một section hoặc inner section bạn có thể tạo nhiều cột
  • Element ( đối tượng): Trong mỗi cột có nhiều đối tượng, mỗi element bạn có thể thêm: Hình ảnh, văn bản nội dung, video, icon…
Hướng dẫn xây dựng trang web bằng Elementor Pro
Hướng dẫn xây dựng trang web bằng Elementor Pro

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

Cấu tạo các đối tượng trong Elementor Pro
Cấu tạo các đối tượng trong Elementor Pro

Khi bạn muốn sửa hoặc tạo bất kỳ trang nào thì, bạn vào trang đó và chọn ” Sửa với Elementor”.

Cách sử dụng Plugin Elementor Pro
Cách sử dụng Plugin Elementor Pro

Sau đó, bạn sẽ được dẫn tới trình chỉnh sửa của Elementor, lúc này bạn muốn chỉnh sửa hay tạo thêm bất cứ section, column, element nào mà bạn muốn.

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

Cách thêm và điều chỉnh các đối tượng trong element pro
Khi bạn click vào elementor biểu tượng hình ảnh bên trái, bạn có thể thêm ảnh hoặc tiêu đề & mô tả

Template có sẵn của Plugin Elementor Pro

Template là yếu tố quan trọng nhất để giúp bạn xây dựng trang và quản lý trang trên WordPress với Elementor Pro.

Ngoài việc bạn tự tạo mới các template cho riêng mình, thì bạn hoàn toàn có thể sử dụng kho teamplate có sẵn của Elementor bằng cách chọn và import vào sau đó bạn chỉnh sửa theo ý bạn muốn. Như vậy bạn đã có 1 trang mới theo đúng ý của mình rồi.

Để sử dụng template trên thanh điều khiển bạn làm như sau: Chọn Template => Theme Builder => Add New. Ở đây, bạn sẽ thấy các kiểu template được phân riêng thành các tab cụ thể.

Rồi sau những template bạn tạo ra sẽ được phân chia vào các mục chi tiết này nhé.

Cách sử dụng template có sẵn của Elementor Pro
Cách sử dụng template có sẵn của Elementor Pro

Khi bạn click vào nút ” Add new” cửa sổ sẽ hiện ra các kiểu teamplate cụ thể, lúc này bạn có thể chọn kiểu template mà bạn đang cần.

Những Template được sử dụng hiều nhất:

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

Khi bạn click vào nút ” Add new” cửa sổ sẽ hiện ra các kiểu teamplate cụ thể, lúc này bạn có thể chọn kiểu teamplate mà bạn đang cần.

Hướng dẫn tìm kiếm và chọn các template có trong Elementor Pro
Hướng dẫn tìm kiếm và chọn các template có trong Elementor Pro

Để hiểu rõ hơn, mình sẽ hướng dẫn bạn cách sử dụng Elementor Pro cho một số thành phần cụ thể giúp bạn nắm bắt được cách làm nhanh hơn nhé.

Hướng dẫn bạn cách tạo Hearder trên Elementor Pro

Trước tiên bạn vào Template => Add New. Lúc này cửa sổ xuất hiện chọn “Header” và đặt tên cho header này, Bạn chọn “Create Template” để tiếp tục bước sau.

Hướng dẫn tạo header trên elementor pro
Hướng dẫn tạo header trên elementor pro

Lúc này xuất hiện 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 +”

Hướng dẫn tạo header trên elementor pro
Hướng dẫn tạo header trên elementor pro

Sau khi bạn check ở bản ” xem trước ” và cảm thấy ưng ý với mẫu header vừa tạo thì bạn click vào nút ” chèn”

Hướng dẫn tạo header trên elementor pro
Hướng dẫn tạo header trên elementor pro

Bây giờ bạn có thể tùy chỉnh header theo ý của mình:

  • Cột logo bạn có thể click vào và thay ảnh logo của bạn. Ảnh logo và site tile sẽ được tự động được lấy ở mục trong customize nhé.
  • Menu bạn cũng sẽ lấy trong phần tạo menu, bạn có thể tùy chọn hiển thị menu ở bên mục layout phía bên tay trái theo ý của bạn nhé.
  • Ngoài ra, 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ự tìm hiểu kỹ hơn để tạo ra một header đẹp theo ý mình nhé.

Lúc này bạn hoàn toàn có thể chỉnh sửa bản header này tùy theo ý của mình:

Hướng dẫn tạo header trên elementor pro
Hướng dẫn tạo header trên elementor pro

Sau khi đã chỉnh sửa xong, bạn có thể xuất bản, hoặc bạn chọn “Display Condition” để tuỳ chỉnh nơi xuất hiện theo ý mình. 

Ví dụ: Bạn muốn header vừa tạo hiển thị ở toàn bộ site nhưng không hiển thị tại trang 404 thì bạn làm như sau:

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

Cứ như vậy nếu bạn muốn loại trừ hiển thị ở các mục khác thì bạn chọn “ADD CONDITION” để thêm vào. Sau khi hoàn thành bạn chọn “SAVE & CLOSE” là xong.

Tương tự, bạn cũng có thể tạo các mục như: Footer, Single Post,… cho các trang, blog của mình nhé!

Hướng dẫn bạn cách tạo popup bằng Elementor Pro

Trong quá trình thiết kế website, có nhiều bạn quan tâm và tìm hiểu đến cách tạo một popup như thế nào.

Dưới đây chúng tôi sẽ bật mí cho các bạn cách tạo một popup bằng Elementor Pro chuyên nghiệp nhé.

Để tạo ra được 1 popup bạn vào Template => Add New. 

 Lúc này cửa sổ xuất hiện bạn chọn ” Popup” và bạn đặt tên cho popup theo ý bạn muốn, rồi bạn nhấn chọn ” Create Template”

Hướng dẫn cách tạo popup bằng elementor pro
Hướng dẫn cách tạo popup bằng elementor pro

Lúc này xuất hiện thư viện mẫu của Elementor Pro, tại đây có rất nhiều mẫu popup cho bạn lựa chọn.

Sau khi lựa chọn được mẫu popup ưng ý bạn nhấn ” chèn” để đưa popup vào sử dung & chỉnh sửa.

Hướng dẫn cách tạo popup bằng elementor pro
Hướng dẫn cách tạo popup bằng elementor pro

Các thao tác chỉnh sửa, bạn cũng làm tương tự như các đối tượng khác và nhớ thay đổi nội dung, hình ảnh và các trường thu thập email… theo ý của bạn nhé.

Hướng dẫn cách tạo popup bằng elementor pro
Hướng dẫn cách tạo popup bằng elementor pro

Lưu ý: riêng với đối tượng form thu thập email thì 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 đã điền mã API Key khi cài đặt plugin elementor pro rồi thì bây giờ hệ thống sẽ tự động lấy các danh bạ và bạn chỉ cần click chọn là xong.

Hướng dẫn cách tạo popup thu thập email bằng elementor pro
Hướng dẫn cách tạo popup thu thập email bằng elementor pro

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

Ví dụ: Bạn có thể bật mục ” On Scroll” lên để chọn thì khi người dùng kéo xuống dưới trang được 70% popup sẽ tự động bật lên

Tương tự các điều kiện khác bạn nghiên cứu thêm và cài đặt theo ý của mình nhé.

Hướng dẫn cách tạo popup bằng elementor pro
Hướng dẫn cách tạo popup bằng elementor pro

Ngoài ra, với Popup này nếu bạn muốn kết nối nó với một nút (button) để khi người dùng click vào thì popup mới xuất hiện thì các mục “Triggers” ở trên bạn bỏ qua và chỉ cần “Save & Close” lại.

Tiếp theo, để tạo một nút button ở trang bất kỳ nào (như ảnh bên dưới). Bạn cài đặt cho phần liên kết của nút là “Popup” với mục action là “Open popup” => bạn chọn tên popup mà đã tạo ở bước trên.

huong dan tao popup bang elementor pro 06
Hướng dẫn cách tạo popup bằng elementor pro

Thế là đã hoàn thành, từ bây giờ khi người đọc click vào nút button thì popup sẽ tự động bật lên.

Hướng dẫn bạn cách tạo landing page bằng Elementor Pro

Cuối cùng là cách tạo landing page bằng elementor pro, 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òn gì khó khăn nữa. 

Vẫn là các thao tác như cũ : Bạn vào Template => Add New.

Lúc này, cửa sổ xuất hiện chọn “page” và bạn cũng đặt tên cho langding page theo ý của mình sau đó nhấn Create Template.

Hướng dẫn cách tạo landing page bằng elementor pro
Hướng dẫn cách tạo landing page bằng elementor pro

Giờ đây bạn có thể tự xây dựng được trang landing page theo ý bằng cách sử dụng các đối tượng theo 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 cách tạo landing page bằng elementor pro
Hướng dẫn cách tạo landing page bằng elementor pro

Bạn click “dấu +” để xem trước các teamplate landing page có sẵn nhé

huong dan tao landing page bang elementor pro 03
Hướng dẫn cách tạo landing page bằng elementor pro

Bạn chọn “chèn” để thêm template này vào nhé.

Hướng dẫn cách tạo landing page bằng elementor pro
Hướng dẫn cách tạo landing page bằng elementor pro

Được rồi bây giờ bạn hoàn toàn có thể chỉnh sửa, thêm, xoá các đối tượng theo ý bạn muốn.

Hướng dẫn cách tạo landing page bằng elementor pro
Hướng dẫn cách tạo landing page bằng elementor pro

Cuối cùng bạn nhớ nhấn nút “xuất bản” để hoàn thành thành quả của mình nhé. 

Như vậy, với các chia sẻ ở bài viết ” hướng dẫn sử dụng Elementor Pro” chúng tôi hi vọng giúp bạn có thêm công cụ để thiết kế website/blog của mình sáng tạo, đẹp mắt và chuyên nghiệp hơn nhé.

Mua Elementor ở đâu? Cách mua như thế nào?

Mua Elementor Pro ở đâu?

Khi mọi người đã biết cách cài đặt rồi thì cây hỏi mua Plugin Elementor Pro ở đâu và như thế nào phải không.

Trên thị trường có rất nhiều đơn vị quảng cáo bán key của Elementor Pro. Nhưng chúng tôi không đảm bảo những key đó là tốt hay không. Trong trường hợp đa phần đó là các file được tải từ file Elementor xuống hoặc đã được null hoặc Crack dễ bị gây ảnh hưởng xấu cho website của chúng ta về sau.

Rất may đó là Alowebtot chúng tôi có cung cấp key chính chủ và bản quyền với giá 500k 1 website rẻ hơn nhiều so với Elementor pro đang bán.

Cách để kích hoạt tài khoản Elementor Pro.

Các bạn bây giờ đã chuyển khoản mua key.

Xong các bạn vào phần quản trị tạo cho chúng tôi 1 tài khoản quản lí có tên đăng nhập là : demo và mật khẩu là demo để gửi cho chúng tôi.

Sau khi nhận được tài khoản đó chúng tôi sẽ cài đặt và kích hoạt cho các bạn.

Khi đã thông báo kích hoạt xong các bạn vào xóa tài khoản demo trên đi là các bạn đã có key chính chủ rồi nhé.

Cảm ơn các bạn và Chúc các bạn thành công!

5/5 - (68 bình chọn)