Trong bài trước mình có giới thiệu qua các theme hỗ trợ tính năng Block Editor dạng Full site editing có sẵn trong WordPress để hỗ trợ thiết kế và dàn trang. Tuy được đánh giá là có nhiều đột phá, dễ sử dụng nhưng hiện nay nếu xét về tính linh hoạt và phổ biến thì Elementor vẫn phải gọi là đỉnh chóp, kịch trần, tung bay phấp phới.
Cái gì có người yêu thì sẽ có kẻ ghét, người không thích thì cho rằng Elementor nặng, rối rắm, khó sử dụng, nhưng thực tế là nó vẫn đang phát triển mạnh để chiếm lượng người dùng đông đảo, điều này chứng tỏ mặc tính cực nó mang lại nhiều hơn.
Khi mới bắt đầu với Elementor, mình thấy rất rối và khó để làm quen mà sẽ cần nhiều thời gian để tìm hiểu dần. Do vậy mình muốn các bạn tiết kiệm thời gian hơn trong việc tìm hiểu Elementor, thông qua các hướng dẫn chi tiết của mình. Để các bài hướng dẫn về Elementor có chiều sâu và hiệu quả, mình sẽ có 2 bài viết nói về Elementor bao gồm:
- Giới thiệu Elementor và các thao tác cơ bản
- Thực hành thiết kế landing page trên Elementor
Giới thiệu về Elementor
Elementor là gì?
Elementor là một plugin bổ sung tính năng sửa trang (page builder) với thao tác kéo-thả trong WordPress, giúp người dùng dễ dàng tạo và tùy chỉnh giao diện website mà không cần phải biết lập trình. Với Elementor, bạn có thể thiết kế các trang web đẹp mắt bằng cách kéo-thả các khối (widgets) như văn bản, hình ảnh, nút bấm, video, v.v., vào các vị trí mong muốn trên trang. Nó cho phép xem trước thiết kế trong thời gian thực và cung cấp nhiều mẫu giao diện sẵn có để người dùng lựa chọn và tùy chỉnh theo nhu cầu. ChatGPT nói như vậy.
Cái tên Elementor bắt nguồn từ khái niệm mỗi thành phần trong trang được gọi là một Element, nghĩa là một thành phần bên trong website. Ta chỉ việc kéo element đó vào khu vực cần hiển thị là xong. Nhưng có một cái mình hơi khó hiểu với nhà phát triển, là trên các trang họ không nói các thành phần này là Element, họ gọi là Widget. Nó có thể gây nhầm lẫn với tính năng widget mặc định của WordPress, và một số khác thì họ không gọi là widget mà lại gọi là element. Hơi rối chỗ này, nên nếu bạn có thấy rối thì cũng nên kệ đi, mình cũng vậy.
Bởi vì Elementor là một plugin, nên theo lý thuyết nó có thể hoạt động trên bất kỳ theme nào, chỉ cần cài vào là bạn có thể tuỳ chỉnh thiết kế của trang đó bằng thao tác kéo thả. Tuy nhiên với các theme được làm với mục đích tương thích với Elementor thì có thể hiển thị các thành phần của nó được tốt hơn, thậm chí còn bổ sung nhiều thành phần có sẵn để bạn chèn vào làm phong phú website.
Elementor có trả phí không?
Elementor hoàn toàn miễn phí để sử dụng các tính năng cơ bản cần thiết, đủ để giúp chúng ta thiết kế một số trang trên website. Nhưng với một số tính năng nâng cao hoặc bạn muốn dùng Elementor để thiết kế toàn bộ trên website thì sẽ cần trả phí để sử dụng một số tính năng nâng cao.
Bạn có thể tham khảo qua bảng so sánh Elementor Free vs Pro để nhận ra sự khác biệt giữa miễn phí và trả phí, mình thấy bản miễn phí khá là đầy đủ để chúng ta làm một website thông thường cơ bản rồi, một số tính năng ở phiên bản trả phí cần thiết bao gồm:
- Thiết kế các template trong trang, như header, footer, trang single bài viết, trang lưu trữ,…
- Chèn code PHP tuỳ chỉnh.
- Thêm CSS tuỳ chỉnh vào từng widget.
- Sử dụng Global template, nghĩa là lưu các widget dạng toàn cục để khi thay đổi nội dung trong nó thì toàn bộ vị trí sử dụng widget đó trên trang đều thay đổi (giống Synced Pattern trong Block Editor).
- Sử dụng font tuỳ chỉnh và font từ TypeKit. Tuy nhiên font tích hợp sẵn trong Elementor miễn phí đã quá nhiều và đầy đủ.
- Hỗ trợ một số widget trả phí nâng cao để bạn sử dụng. Tuy nhiên nếu bạn sử dụng theme trả phí hỗ trợ cho Elementor thì không cần phần này.
- Công cụ tạo popup (Popup Builder).
- Tạo điều kiện hiển thị một widget.
Còn lại các tính năng khác nếu cần thiết chúng ta sẽ cài thêm plugin từ bên thứ ba vào, nhưng nếu có điều kiện thì bạn có thể sử dụng bản Pro để tận dụng tối đa chức năng của Elementor, mình cũng đang dùng bản trả phí ở một số dự án.
Vì sao Elementor lại phổ biến?
Ban đầu Elementor mới ra mắt, nó thu hút lượng người dùng cơ bản trong việc tìm giải pháp để thao tác thiết kế lại trang dễ dàng hơn trong thao tác kéo thả. Chính vì sự vượt trội này, một số lập trình viên chuyên nghiệp đã nhận ra cơ hội kiếm tiền với Elementor bằng cách thiết kế những widget riêng bắt mắt hơn, và thiết kế ra theme chỉ sử dụng Elementor để người dùng đã làm quen trước đó dễ tiếp cận. Hiện tại bản thân mình cũng có thói quen ưu tiên các theme sử dụng Elementor luôn.
Nếu bạn muốn xem qua thử một số plugin bổ sung widget trả phí để xem sự thần kỳ của Elementor thì có thể tham khảo các plugin như:
- ElementsKit
- Essential Addons by WPDevelopers
- Unlimited Elements
- Lên Codecanyon tìm kiếm với từ khoá Elementor sẽ có hơn 1.600 kết quả
Thông tin thêm: Các plugin bổ sung widget cho Elementors chỉ nên dùng duy nhất một bộ nếu cần, và không cần thiết nếu dùng theme trả phí hỗ trợ Elementor. Bởi các thành phần này chủ yếu sẽ sử dụng thêm CSS và Javascript nên sẽ gây nặng website ở bên ngoài trình duyệt.
Còn với theme thì nhiều vô kể, cách dễ nhất để tìm kiếm là bạn xem mục Elementor trên ThemeForest tha hồ mà lựa chọn.
Thao tác sử dụng Elementor cơ bản
Lưu ý reset website trước khi tìm hiểu
Để cho tối ưu trong việc tìm hiểu theo hướng dẫn này, bạn nên cài mới lại một website WordPress hoàn toàn mới, hoặc nếu bạn đang thực hành trên website đã cài đặt trước đó thì có thể reset lại thông qua cài plugin WP Reset để xoá toàn bộ các plugin/theme cùng các tuỳ chọn trước đó. Ở dưới là video hướng dẫn thao tác reset lại website.
Cảnh báo: Thao tác này sẽ xoá toàn bộ các dữ liệu, lưu ý thao tác đúng website đang thực hành.
Cài đặt theme Hello Elementor
Hello Elementor là một starter theme được thiết kế tối ưu dành cho Elementor, ưu điểm là có dung lượng rất nhẹ, lược bỏ hết các tính năng không cần thiết và chỉ giữ lại cấu trúc theme được tối ưu tận dụng hết các tính năng của Elementor. Theme này sẽ phù hợp để sử dụng khi bạn muốn bắt tay vào tự làm một giao diện hoàn toàn theo ý mình bằng Elementor.
Bù lại, nhược điểm của nó là sẽ không có sẵn những widget hỗ trợ đi kèm đẹp mắt, nên việc thiết kế sẽ mất thời gian hơn. Trong khuôn khổ thực hành này, mục đích là làm quen với Elementor và thiết kế một giao diện landing page cơ bản ở bài sau, nên chúng ta chọn theme này để làm quen thì hợp lý hơn cả.
Trước tiên bạn cần cài đặt theme Hello Elementor vào website, sau đó kích hoạt lên. Trong lúc kích hoạt, nó cũng sẽ kích hoạt plugin Elementor và nó sẽ hỏi bạn một số thông tin cơ bản ở lần đầu kích hoạt, bạn có thể điền vào hoặc ấn Skip để bỏ qua cũng được.
Sau khi cài đặt xong, nó sẽ tự tạo một page mới với giao diện thiết kế Elementor, phần tiếp theo chúng ta sẽ cùng tìm hiểu qua những thao tác cơ bản cần biết khi sử dụng Elementor.
Các thao tác sử dụng Elementor
Tổng quan giao diện sử dụng
Để truy cập vào giao diện Elementor trong trình chỉnh sửa, bạn vào trang sửa nội dung và ấn nút Edit with Elementor ở trên đầu trang.
Giao diện Elementor hiện tại sẽ có 4 phần chính mình đánh số theo thứ tự như ảnh dưới.
- 1: Khu vực này sẽ là các thiết kế hiển thị ra bên ngoài, mọi cái chúng ta sẽ chỉnh sửa trên website sẽ hiển thị ra ở đây.
- 2: Thanh hiển thị các thông tin về những Widget đang được sử dụng, và khi nhấp chọn vào một widget nào đó đã thêm vào trang thì nó sẽ hiển thị ra trang tuỳ chỉnh thông số của widget.
- 3: Thanh điều hướng những thành phần đã thêm vào trang theo dạng danh sách, để bạn dễ dàng điều hướng và tìm thấy khu vực cần chỉnh sửa nhanh nhất.
- 4: Thanh công cụ màu đen ở phía trên tương ứng với một số tính năng như hiển thị thiết kế trên giao diện thiết bị di động, điều hướng qua các trang khác, bật/tắt thanh điều hướng,…
Thao tác thiết lập Site Settings
Trong lúc thiết kế với Elementor, bạn có thể sẽ cần sử dụng thông số mã màu, font chữ để thiết lập cho từng widget. Để đảm bảo các màu bạn sử dụng có tính đồng nhất xuyên suốt trên website, cũng như đồng nhất về font chữ thì nên sử dụng tính năng Site Settings của Elementor để thiết lập các thông tin này trước, sau đó chỉ cần tái sử dụng lại trên các widget là hợp lý hơn cả.
Thông tin thêm: Sau này khi sử dụng theme dành cho Elementor, nếu bạn muốn đổi font chữ hay các màu sắc mặc định,…thì nên kiểm tra khu vực Site Settings trước để tuỳ chỉnh.
Để truy cập vào khu vực Site Settings, bạn nhấp vào biểu tượng Site Settings trên thanh công cụ màu đen phía trên.
Tại khu vực Site Settings sẽ phân thành 3 khu vực nhỏ bao gồm:
- Design System: Cấu hình những thông số cơ bản mặc định trong thiết kế, bao gồm thiết lập về font chữ và màu sắc.
- Theme Style: Các thiết lập cấu hình dành cho theme, tuỳ theo theme hỗ trợ mà nó sẽ có những phần thiết lập khác nhau. Với Hello Elementor, phần này sẽ cho bạn cấu hình mặc định về kiểu chữ, nút bấm, hình ảnh, khu vực header và footer,…
- Settings: Các thiết lập khác bên trong website, tuỳ theo theme mà nó có ảnh hưởng hay không, với dự án làm việc trên theme Hello Elementor thì chúng ta sẽ sử dụng tuỳ chọn Layout để thiết lập chiều rộng nội dung mặc định trên website.
Thao tác thêm và chỉnh sửa nội dung trong Elementor
Khi sử dụng Elementor chúng ta sẽ thao tác hoàn toàn bằng phương pháp kéo thả, nghĩa là sẽ kéo widget ở cột bên trái vào khu vực cần hiển thị ra ở khu vực bên phải. Bạn cũng có thể di chuyển một thành phần nào đó qua vị trí khác cũng với thao tác kéo thả.
Thao tác chia cột trong Elementor
Elementor sử dụng flexbox để dàn trang, vì vậy việc chia cột nhờ vậy cũng rất linh hoạt, dễ sử dụng và hiển thị tương thích với các thiết bị di động cũng tốt hơn.
Trong Elementor có một widget tên là Container, đây tượng trưng cho một vùng chứa nội dung của một thành phần nào đó. Chẳng hạn trong website có rất nhiều thành phần khác nhau, nhưng một khu vực hiển thị nội dung sẽ là một container, trong container đó bạn sẽ chia cột (mỗi cột là một container lồng vào) và mỗi cột bạn sẽ thêm tiêu đề, chữ hay hình ảnh vào trong đó.
Vì vậy để chia cột theo hàng ngang, chúng ta sẽ thêm một Container vào, điều chỉnh Direction (phương hướng) cho container đó xếp theo chiều ngang; nghĩa là nếu có bất cứ một container nào khác có kích thước chiều ngang nhỏ hơn thì nó sẽ hiển thị trên cùng một hàng theo phương ngang.
Viết ra thì dài như vậy thôi chứ thao tác thì ca sĩ chỉ cần hít thở chưa cần thốt ra nốt nhạc nào là đã xong, hãy xem đây.
Tương tự nếu bạn muốn sắp xếp container hiển thị theo chiều dọc thì chỉnh Direction của container mẹ là được.
Trong thiết lập container còn có một tuỳ chỉnh nữa rất hữu ích là Justify Content và Align items để canh lề và điều chỉnh thứ tự sắp xếp các nội dung bên trong, bạn có thể tự trải nghiệm phần này để hiểu dễ hơn.
Thao tác copy thiết lập hoặc copy cả widget
Khi sử dụng Elementor, có một số thành phần bạn sẽ cần sử dụng lại nhiều lần nên bạn nhớ sử dụng công cụ copy widget, bạn có thể paste nó ra cả widget hoặc chỉ paste styles, nghĩa là nó chỉ áp dụng các tuỳ chọn trong widget mà không thay đổi nội dung.
Tương tự với copy thì có thao tác Duplicator cũng hữu dụng khi bạn cần nhân bản mọi thứ dễ dàng. Video dưới mình sẽ áp dụng cả 3 thao tác này.
Thao tác sử dụng cửa sổ điều hướng (Structure)
Khi một trang đã có nhiều thành phần được thêm vào, lúc này tính năng Structure của Elementor hay mình có giới thiệu trước đó gọi là cửa sổ điều hướng. Thông qua việc xác định vị trí của các thành phần trên trang qua tính năng này, bạn cũng có thể dụng nó để thay đổi nhanh vị trí của các thành phần.
Tuỳ chỉnh thiết kế hiển thị trên di động (Responsive)
Hầu hết những widget trong Elementor đều đã được tuỳ chỉnh hiển thị tốt trên thiết bị di động, cụ thể là nếu bạn có thử chia cột của website thành 3 cột, nhưng khi thu nhỏ trình duyệt thì các cột sẽ xếp chồng lại với nhau để hiển thị tốt hơn.
Nhưng Elementor không chỉ hỗ trợ Responsive một cách thụ động như vậy mà nó còn giúp bạn tuỳ chỉnh lại thiết kế lại trên từng loại thiết bị khác nhau, mà đúng hơn là tuỳ chỉnh thiết kế trên nhiều kích thước trình duyệt khác nhau. Để tận dụng tính năng này, bạn sử dụng công cụ Responsive mà Elementor cung cấp sẵn để xem trước website của mình hiển thị thế nào trên các thiết bị, và điều chỉnh lại nội dung trên đó.
Các tuỳ chọn mà Elementor hỗ trợ cho nhiều thiết bị sẽ có biểu tượng thiết bị kế bên tuỳ chọn đó, xem ảnh bên dưới.
Khi giao diện chỉnh sửa đang kích hoạt cho thiết bị nào, thì các thay đổi sẽ chỉ áp dụng cho các thiết bị đó. Tuy nhiên các thay đổi cho thiết bị máy tính sẽ trở thành mặc định nhưng cũng có hỗ trợ Responsive sẵn rồi.
Còn nếu bạn muốn một thành phần nào đó ẩn đi trên trên từng thiết bị thì chuyển qua tab Advanced của thiết lập widget, tìm phần Responsive sẽ có các tuỳ chọn ẩn đi.
Thiết lập Style và Advanced của Widget
Nếu bạn muốn tuỳ chỉnh lại màu nền hay bất cứ gì liên quan đến giao diện hiển thị của Widget đó thì nó đều cung cấp một khu vực tuỳ chỉnh gọi là Style.
Trường hợp nếu bạn cần tuỳ chỉnh về khoảng cách lề (margin) hoặc độ rộng giữa nội dung và viền (padding) thì sẽ tìm thấy tại mục Advanced.
Các tuỳ chọn khác do ít sử dụng nên mình không giải thích chi tiết ở đây, bạn có thể tự mò mẫm thêm.
Kết bài
Nói về các thao tác trong Elementor thì nó sẽ không chỉ dừng lại các thao tác trên, nhưng nếu liệt kê ra đầy đủ thì không biết kể sao cho hết, may mắn là Elementor rất dễ dàng để sử dụng nên bạn có thể tự nghiên cứu thêm các thao tác khác để tận dụng tối đa sức mạnh của nó.
Tiếp tục qua bài sau chúng ta sẽ cùng ứng dụng Elementor trong việc tự làm một giao diện landing page đơn giản mà không cần sử dụng theme hỗ trợ nào.
