Elementor là gì? Cài đặt, cấu hình và sử dụng plugin Elementor trong thiết kế web

Nếu website của bạn được xây dựng trên nền tảng wordpress thì có nhiều cách tạo giao diện web nhé. Từ thiết kế bằng photoshop xong chuyển sang code đến thiết kế bằng trình tạo trang (Page Builder). Nổi bật nhất trong các trình tạo trang là elementor, vậy elementor là gì? Những ưu nhược điểm và lý do nên sử dụng plugin Elementor trong thiết kế web.

Elementor là gì?

Elementor là một Plugin Page Builder giúp bạn xây dựng các trang web trong WordPress. Chỉ với những thao tác kéo thả đơn giản bạn đã thiết kế một Website ưng ý, đẹp mắt. Vì vậy, bạn không biết nhiều về Code cũng có thể xây được Website của mình với Elementor.

Với sự đơn giản và tiện lợi, Elementor đã trở thành một trong những plugin được cài đặt nhiều nhất. Tính đến tháng 11/2021 trên WordPress với hơn 5 triệu người sử dụng và 5.995 đánh giá.

Elementor có khả năng xử lý rất nhanh tất cả các yêu cầu. Khả năng tùy biến giao diện (Front-End) rất cao, chỉnh sửa Page với trình trực quan rất dễ nhìn.

Elementor có rất nhiều tiện ích về văn bản, hình ảnh, đánh giá của khách hàng, thanh trượt, biểu tượng, Tab, phương tiện truyền thông xã hội, sản phẩm … Mỗi tiện ích đều có thể thêm vào với cầu hình theme của bạn. Khi bạn đã chỉnh quen một tiện ích rồi thì các tiện ích khác cũng tương tự như vậy.

Plugin này có một bộ addons thêm vào như: Essential Addons for Elementor, Premium Addons for Elementor, Elementor Header & Footer Builder. Mặt khác, Elementor còn có nhiều mẫu sẵn trong thư viện để bạn sử dụng và chỉnh sửa ngay tức thời.

Ví dụ: sau khi cài đặt xong bạn vào phần template => theme builder bạn sẽ thấy các mẫu mặc định như: header, footer, single post, single page…

Cài đặt và cấu hình Elementor

Cách cài đặt plugin Elementor miễn phí

Bước 1: Trong tài khoản Admin website wordpress của bạn. Tại giao diện quản trị, bạn chọn Plugin và click Cài mới.

Bước 2: Ở ô tìm kiếm, bạn hãy nhập từ khóa “Elementor” và chọn tiếp vào mục Cài đặt.

Bước 3: Bạn đợi cài đặt xong, bạn click vào mục Kích Hoạt để sử dụng.

Xong bước này rồi bạn có thể sử dụng elementor rồi đó và mình khuyên bạn tạo ra một trang nháp nào đó. Từ đó bạn tìm hiểu elementor là gì, các thành phần nó hoạt động ra sao nhé.

Mời bạn xem thêm: Divi và Elementor: thật sự khó chọn lựa

Cài đặt plugin Elementor Pro (có phí)

Bước 1: Bạn có thể mua bản Elementor Pro trên trang chính của Elementor hoặc mua trên các sàn buôn bán. Sau đó bạn sẽ nhận được file có đuôi .zip về máy.

Bước 2: Sau đó, bạn đăng nhập vào trang quản trị admin. Chọn Plugin -> Cài mới -> Chọn thư mục -> Chọn tệp .zip vừa tải.

Chờ một chút để WordPress cài đặt xong. Sau đó bạn nhấp vào nút Kích hoạt Plugin sau đó chuyển đến bước tiếp theo.

Bước 3: Sau khi kích hoạt, bạn phải nhấp vào Connect & Activate để kích hoạt giấy phép cho Elementor trên trang chủ. Sau cùng, bạn chỉ cần click Activate để xong quá trình cài đặt.

Cách cấu hình plugin Elementor

Bước 1: Cấu hình Elementor là cách chọn các định dạng của website. Từ Elementor -> cài đặt (Setting) -> Tab Chung (General), chọn bài viết (Post) & trang (Page)…. Cho phép Elementor hoạt động ở trang và bài viết.

Bước 2: ở tab tích hợp (Integrations) dùng kết nối với dịch vụ bên thứ ba bằng API Key như Google Maps, reCAPTCHA… Chức năng này rất quan trọng vì mở ra cửa sổ kết nối đa nền tảng. Từ đó website của bạn có thể phát triển với nhiều tính năng hơn.

Chú ý: Ở phần này để tích hợp nhiều bên thì bạn sử dụng elementor pro mới có nhé.

Ngoài ra trong cấu hình plugin Elementor còn rất nhiều các mục như: custom font, icon, code… Tuy nhiên theo mình bạn cứ để mặc định nhé, còn nếu bạn là những lập trình viên thì nó là phần bổ sung rất hoàn hảo.

Sau khi cấu hình xong thì chúng ta cùng tìm hiểu cấu trúc Layout của Elementor là gì một chút nhé. Nó gồm 4 phần cơ bản để tạo nên không gian làm việc của elementor.

• Section: Khu vực làm việc trên trang và mỗi trang có nhiều Section khác nhau.
• Inner Section: Trong mỗi Section, bạn thêm được nhiều mục con. Tuy nhiên không bị bắt buộc phải có.
• Cột: đối với cột thì nằm trong Section hoặc Inner Section. Trong mỗi khối sẽ có nhiều cột với nhiều nội dung khác nhau.
• Element: Ở mỗi cột sẽ có nhiều đối tượng, ví dụ như văn bản, icon, hình ảnh, video,…

Sử dụng plugin Elementor trong thiết kế web

Sau khi đã cài đặt và cấu hình xong rồi chúng ta sử dụng plugin elementor để thiết kế các trang web của mình. Trong thiết kế website bằng các trình tạo trang, mọi người thiết kế luôn trên website của mình. Sau đây mình xin trình bài sơ bộ khi thiết kế website giới thiệu nhé.

Đối với bản plugin elementor pro

Các bước thiết kế sẽ khác nhau tùy thuộc vào mỗi bạn. Nhưng mình xin đưa ra một số các bước sau để bạn có thể tham khảo.

Thiết kế header và footer

Trong bước này bạn vào Template => theme builder bạn sẽ thấy các phần header và footer. Trong bản pro sẽ có một số mẫu để bạn chọn hoặc bạn có thể tự builder riêng theo ý tưởng của mình.

Phần header và footer là phần mà hiển thị từ đầu đến cuối website của bạn. Do đó trong bước này các bạn cần làm tỉ mỉ, tinh chỉnh nhiều lần.

Mẹo nhỏ: Trong quá trình làm bạn nên lưu các phần header và footer là làm 2 bản. Bạn vào phần quản lý mẫu đã lưu sau đó nhân bản mẫu mình đang làm. Bạn chỉnh sửa bản nhân đó, còn lại 1 bản để còn phòng trường hợp bị lỗi vẫn còn cái để thay vào.

Không giống như thiết kế web từ các phần mềm đồ họa. Bạn thiết kế xong phần footer và header là thiết kế luôn phần giao diện trang chủ. Trong trình tạo website của wordpress thì vẫn được, như theo mình thì để tiện trong quá trình tạo theme builder. Bạn nên tạo luôn các trang danh mục và chi tiết luôn.

Trang danh mục bài viết, chi tiết bài viết

Cũng tương tự như bước tạo header và footer bạn vào phần Template => theme builder. Tại đây sẽ có các thành phần danh mục bài viết, chi tiết bài viết (Archive và single post).

Cách làm cũng không khác bước trên là mấy. Bạn vào mục Archives và single post bạn chọn các giao diện có sẵn hoặc bạn có thể tự xây riêng cho mình.

Thiết kế các trang

Xây dựng các trang web trên website của bạn gồm các trang như: trang chủ, trang giới thiệu, trang liên hệ… Bước này bạn không vào phần Template nữa mà vào các trang (page) luôn.

Tại các trang này bạn sửa với Elementor luôn, sau đó sẽ vào cửa sổ làm việc của elementor. Tại đây bạn chỉ cần kéo thả các thành phần mà mình muốn mà thôi. Thật đơn giản phải không bạn.

Trong khi bạn dùng bản plugin Elementor pro bạn sẽ có thêm tính năng chọn thư viện giao diện mẫu. Tại cửa sổ làm việc của elementor bạn kích vào “thêm mẫu”, sau đó sẽ hiện các giao diện có sẵn đã được elementor xây dựng và thiết kế.

Các bước thiết kế mình nghỉ cơ bản là vậy thôi. Tuy nhiên để ra một bản thiết kế đẹp bạn cần nhiều thời gian và hiểu khách hàng của bạn.

Ví dụ: khi mình thiết kế website cho 1 bạn về thợ sửa chữa điều hòa. Do bạn không sử dụng website nhiều nên bạn ý giao mình xây dựng lên website về tin tức sửa chữa. Sau đó mình gửi lại bạn ý và chỉnh sửa vài lần mới ưng ý.

Nhưng có khách mình làm thiết kế bán hàng “Đông trùng hạ thảo” bạn đó thích giao diện của một web rồi. Lúc đó mình làm tương đương và có chỉnh sửa thêm về bố cục, màu sắc. Khi gửi lại bạn đó thì chỉ cần chỉnh thêm 1 chút nữa là xong.

Đối với bản elementor free

Đối với bản này thực sự mà nói để thiết kế website đẹp là tương đố khó. Bởi các thành phần quan trọng như header, footer, danh mục… và thư viện không có. Mặt khác các phần header và footer thường theo themes mặc định của giao diện rồi.

Điểm mạnh của elementor free là giúp bạn tạo ra các trang giới thiệu, liên hệ… đẹp hơn khi lên nội dung bằng trình biên tập.

Tóm lại

Những chia sẻ của mình ở trên về elementor là gì khá cơ bản. Còn để hiểu sâu hơn cũng như cách triển khai, xây dựng một website đẹp và hoàn chỉnh mình xin chia sẻ ở những bài sau.

Hy vọng những nội dung trên giúp bạn hình dung phần nào về trình tạo trang (Page Builder). Đặc biệt là plugin elementor với xu hướng phát triển rất nhanh hiện nay.

Xin cảm ơn các Anh/Chị đã tham khảo bài viết Elementor là gì của Webaoe. Nếu có chỗ nào còn thiếu sót, xin các Anh/Chị góp ý ở phía dưới để hoàn thiện bài viết hơn.