Là một Plugin hỗ trợ đắc lực trong việc thiết kế Website, giao diện Website. Elementor Pro là một plugin khá phổ biến và được cho là plugin dễ dùng hiện nay. Việc thiết kế giao diện của bạn sẽ trở nên dễ dàng và đơn giản hơn rất nhiều với thao tác kéo thả.
Nội dung
Elementor Pro là gì?
Elementor Pro là một plugin WordPress cao cấp với giao diện kéo và thả dễ sử dụng. Nó có thể được sử dụng bởi các nhà phát triển, nhà thiết kế và các blogger.
Elementor Pro có giao diện trực quan cho phép bạn xây dựng trang web của mình trong vài phút. Nó đi kèm với hơn 200 widget tùy chỉnh, 5 kiểu tiêu đề, 4 plugin tiêu đề, 15 bố cục trang và 10 định dạng bài đăng.
Bạn có thể thiết kế website 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í khi phải thuê đơn vị khác để thiết kế giao diện.
- 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.
Phân loại Elementor
Với Elementor, bạn có thể thiết lập các mẫu tùy chỉnh và sử dụng các lớp phần tử được tích hợp sẵn để tạo thiết kế của bạn dễ dàng và nhanh chóng. Bạn cũng có thể nhập các tệp CSS và HTML vào Elementor để tùy chỉnh thêm hoặc tích hợp chúng với chủ đề của bạn.
Hiện tại thì có 2 loại Elementor để dùng:
- Bản Elementor free: 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.
- Bản Elementor Pro: Elementor có phí (Elementor Pro). Không những gồm những chức năng của bản không lấy tiền. Elementor pro giúp đỡ khách hàng theo tính cá nhân hóa xây dựng. Dùng đa năng, tùy chỉnh hơn tạo nên blog/trang web cá nhân hóa của riêng bạn.
Hướng dẫn sử dụng Elementor Pro
Elementor Pro là một trong những plugin WordPress phổ biến nhất để tạo các trang web đáp ứng. Với Elementor, bạn có thể xây dựng trang web của mình trong vài phút mà không cần phải lo lắng về việc viết code.
Cài đặt Elementor Pro
Việc cài đặt Elementor cũng khá giống việc cài các Plugin thông thường khác. Tại giao diện quản trị wordpress, bạn chọn “Plugin” › click “Cài mới”.
Tìm từ khóa “Elementor” tại thanh công cụ tìm kiếm › sau đó click “Cài đặt”.
Sau khi cài đặt plugin xong, bạn click “Kích hoạt”.
Elementor đã được xuất hiện tại trang quản trị WordPress của bạn.
Bạn hoàn toàn có thể tải trực tiếp plugin thông qua trang chủ elementor.com về và úp lên lại Website của bạn.
Như vậy bạn đã hoàn tất việc cài đặt plugin Elementor bản miễn phí. Tiếp theo chúng ta sẽ đi vào chi tiết hướng dẫn sử dụng Elementor.
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.
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.
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à được.
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é!
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é.
Hoàn tác và lịch sử sửa đổi
Trong quá trình làm việc với nội dung bài đăng, chúng ta khó có thể tránh khỏi sai sót về text cũng như bố cục.
Việc khắc phục những sai sót đối với Elementor hoàn toàn đơn giản và nhanh chóng bằng công cụ “Lịch sử“.
Ngoài ra, phím tắt hoàn tác thông thường “Ctrl + Z” cũng sẽ sử dụng được trong Elementor.
Các hành động nhỏ nhất sẽ được lưu lại ngay sau khi bạn thực hiện.
Chúng sẽ được lưu lần lượt từ cũ và mới theo từng lớp hành động. Bạn chỉ cần di chuột tới hành động cần “hoàn tác” và click vào biểu tượng trong hình.
Lời kết
Và bên trên là tổng thể những kiến thức mà mình đã tổng hợp được về Elementor cho bạn đọc hiểu hơn về Plugin này. Cũng như hướng dẫn cách có thể sử dụng tốt nhất để thiết kế giao diện. Mong rằng bài viết này đã giúp bạn phần nào trong việc tìm hiểu và thiết kế web.
