Thiết kế giao diện cho website, Blog chưa bao giờ dễ dàng hơn khi sử dụng Elementor Pro. Công cụ tạo, thiết kế kéo thả layout cho Blog, web không cần tới lập trình hay bất kì dòng code nào. Thuận lợi và dễ dàng cho bất cứ người dùng. Ngoài ra Elementor còn hỗ trợ nhiều tính năng hữu ích hơn thế nữa.
Cùng ATP SOFTWARE tìm hiểu cách sử dụng cũng như tính năng hỗ trợ ưu việt của nó nhé!
1. Elementor là gì
Một trong những Plugin được sử dụng phổ biến trong WordPress. Công cụ hỗ trợ xây dựng 1 page builder, Blog theo đúng ý của bạn mà không cần phải viết bất cứ dòng code nào. Chỉ bằng thao tác kéo thả. và để là được những công việc đó thì chính là Elementor Pro.
Thoải mái sáng tạo ra những trang Landing Page của riêng mình. Đặc biệt hơn, Với Elementor Pro giúp bạn:
- Tiết kiệm được rất nhiều chi phí thay vì phải mua và bổ sung tính năng bằng các Plugin trả phí khác.
- Khi sử dụng Elementor còn giúp cho site của bạn trở nên nhẹ nhàng, tiết kiệm dụng lượng hơn. Nhờ sự tích hợp tính năng của nhiều loại Plugin. Chỉ với Elementor bạn đã có thể thiết lập thêm nhiều trạng thái, chức năng cho Blog hay Website của mình.
2. Phân loại Elementor
Elementor cũng có 2 bản. Gồm:
- Elementor miễn phí: Elementor cung cấp cho bạn những tính năng cơ bản nhất mà Elementor cung cấp.
Ví dụ như thiết kế 1 Landing Page đơn giản,tạo trang, xây dựng những công cụ sử dụng Elementor miễn phí
- Elementor trả phí ( Elementor Pro). Không chỉ bao gồm những tính năng của bản miễn phí. Elementor Pro hỗ trợ người dùng theo tính cá nhân hóa thiết kế. Sử dụng nhiều chức năng, tối ưu hơn xây dựng Blog/Website cá nhân hóa của riêng bạn
Thông thường bạn có thể cài đặt cho Blog/Website của mình cả 2 bản trả phí và miễn phí để tương trợ sử dụng. nếu bạn chỉ sử dụng cho 1 site khuyên dùng gói ESSENTIAL với mức chi phí 49$/năm
Xem bảng giá chi tiết tại: Elementor.com
3. Elementor Pro
Về cơ chế hoạt động của Elementor 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 thực hiện công 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 chúng ta có thể tạo thêm nhiều inner section
- Column ( 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 chúng ta có thể tạo nhiều cột
- Element ( đối tượng): Trong mỗi cột có nhiều đối tượng mục tiêu, mỗi element Bạn có thể thêm: Hình ảnh, văn bản nội dung, clip, icon…
3.1 Hướng dẫn sử dụng
1+ Cài đặt
Giống như các Plugin thông thường sử dụng cho WordPress. Elementor Pro cài đặt cũng không có quá nhiều sự khác biệt.
Truy cập vào giao diện WordPress của Blog/website của bạn Chọn Plugin => Nhấp chuột chọn “Cài mới”
Trên công cụ search Elementor => Chọn Cài đặt
Hoàn tất cài đặt nhấp chuột Activate “Kích hoạt”
Plugin Elementor đã được xuất hiện trên trang quản trị
2+ Tạo Post/Page bằng Elementor Pro
Tính năng đầu tiên trong Elementor Pro trong mục viết bài Post lên Blog/Website. Bạn tạo bài đăng bình thường để đăng bài. Sau đó lựa chọn Sửa với Elementor để giao diện dựng trang Elementor page builder.
3+ Tạo Header trên Elementor Pro
Trên hết 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.
Xuất hiện thư viện mẫu của Elementor, ở đây Bạn có thể coi các mẫu có sẵn bằng cách click vào “dấu +”
Bạn check ở bản ” xem trước ” và cảm nhận thấy ổn thỏa với mẫu header vừa tạo thì bạn click vào nút ” chèn”
Bây giờ chúng ta 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 thu thập ở mục trong customize nhé.
- Menu bạn cũng sẽ lấy trong phần tạo thực đơn, chúng ta 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 chúng ta nhé.
- Ngoài ra, việc chỉnh sửa màu sắc, và các căn chỉnh chi tiết khác chúng ta có thể tự tham khảo kỹ hơn để tạo nên 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 vào ý 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 địa điểm xuất hiện theo ý mình.
Ví dụ: Bạn mong muốn header vừa tạo hiển thị ở tất cả website 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 đấy 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. Một khi coi như hoàn tất bạn chọn “SAVE & CLOSE” là okeyy.
Tương tự, bạn cũng có khả năng tạo các mục như: Footer, Single Post,… cho các trang, blog của mình nhé!
4+ Tạo Popup bằng Elementor Pro
Nếu chúng ta muốn tạo pop-up thu thập mail vào hệ thống getresponse thì trên hết bạn phải cần vào phần “cài đặt” của elementor pro -> chọn phần “tích hợp” -> Nhập mã API vào.
Ok bây giờ bạn tạo pop-up bằng việc vào phần “template” -> chọn “Popups” -> bấm nút “thêm mới popup”.
Bạn đặt tên cho mẫu popups rồi bấm nút “Tạo mẫu thiết kế”.
Bạn chọn 1 mẫu có sẵn rồi sau đấy nhấn vào nút “chèn”.
Bây giờ bạn chỉ phải chỉnh sửa lại thông tin cho phù hợp. Còn phần API của getresponse nếu như bạn đã tích ở bước phía trên rồi thì bạn có thể nhìn thấy nó tự động nhận bên cột trái và có danh sách danh bạ cho bạn tìm kiếm (trong hình dưới Ân chưa kết nối nên bạn sẽ không thấy).
Sau khi sửa xong bạn bấm nút “xuất bản” bạn có thể nhìn thấy phần cài đặt “Triggers” đây chính là phần điều kiện xảy ra popups. Giả sử bạn mong muốn nó xuất hiện sau 10s kể từ lúc độc giả vào xem bài viết thì bạn bật nút “On Page Load” rồi nhập 10 vào -> xong xuôi thì bấm nút “Save & Close” để hoàn tất.
5+ Tạo landing page trên Elementor Pro
Nếu như 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ì chông gai 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ự tạo ra được trang Landing Page theo ý bằng cách dùng các đối tượng theo cách kéo và thả sang phía bên phải nhé.
Mặc dù vậy để 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 +” để coi 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ó khả năng thay đổi, 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” để coi như hoàn tất thành quả của mình nhé.
3.2 Khả năng tương thích
Phiên bản Elementor Pro sẽ công việc tốt ở hầu hết mọi Theme của WordPress. Nhờ có đội ngũ kiểm duyệt thường xuyên trên nhiều môi trường khác nhau. Vì vậy mà Plugin này gần như sẽ vẫn chưa có lỗi phát sinh.
hiện nay, Elementor có một bản Template Full-Width và một Template Full-Screen phù hợp cho nhiều chọn lựa khác nhau. Bạn có thể sử dụng chúng để tạo landing page tuy nhiên ẩn Layout Header hay Footer hoặc ẩn cả hai.
không những vậy, phiên bản Elementor Pro còn được thêm tính năng Theme Builder. Nó giúp chúng ta có thể chọn Template mẫu sẵn có và xây dựng Website phù hợp dựa trên mẫu này. Bạn có thể dễ dàng thêm, xóa hay chỉnh sửa thành nội dung hay thành phần mà bạn thích.
Cảm ơn các bạn đã chọn ATP SOFTWARE làm nơi đồng hành tri thức cùng bạn. Mong rằng những kiến thức mà chúng tôi đem lại sẽ đem đến cho các bạn nhiều thông tin hữu ích.
