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 nhất năm 2023 nhé
Elementor 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 hơn 5 triệu lượt cài đặt sử dụng – theo thống kê trên cài mới Plugin). Nên Elementor được đánh giá là một plugin Page Builder số 1 hiện nay và sau này.

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.
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 plugin Elementor cùng các chức năng thêm của bản Pro.
Elementor Pro giúp tiết kiệm chi phí:
Chi phí để mua một theme có giá khoảng 49$ /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 các chức năng 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.

Tóm lại: chỉ với plugin 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 plugin Elementor Pro
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 cài đặt plugin Elementor 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.

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.

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

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é.

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)

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.

Như vậy là bạn đã cài đặt plugin 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…

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

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”.

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é.

Giao diện có sẵn của Plugin Elementor Pro
Giao diện (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 Giao diện 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é.

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.

Để 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.

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 +”

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”

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:

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ứ 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”

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.

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é.

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.

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é.

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.

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 Plugin 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.

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.

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

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

Đượ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.

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!
- Thiết kế website thẩm mỹ viện, spa
- Hướng dẫn cách tạo một website miễn phí bằng google site chuyên nghiệp
- 5 Plugin chia sẻ mạng xã hội cho WordPress tốt nhất
- Hướng dẫn xóa chế độ Responsive trên thiết bị di động sử dụng Theme Flatsome
- Hướng dẫn làm website bằng WordPress miễn phí từ A đến Z