Hướng dẫn sử dụng Elementor Pro chi tiết cho người mới, thành thạo ngay các thao tác sử dụng chỉ sau 5 phút, bạn sẽ biết cách phân chia các section, cột và widget một cách khoa học, cách làm thế nào để tùy chỉnh header và footer, cách tạo các popup cho trang web.
Cài đặt Elementor Pro và thiết lập cơ bản
Để Elementor Pro hoạt động bạn cần cài đặt đầy đủ 2 phiên bản miễn phí và Pro, trong bài viết này mình chủ yếu sẽ hướng dẫn cách sử dụng Elementor Pro bởi vì tính năng của nó rất hay và đa dạng, còn bản Elementor miễn phí thì chỉ sử dụng được duy nhất tính năng xây dựng landing page thôi nên mình sẽ không hướng dẫn chuyên sâu.
Bạn cài đầy đủ Elementor bản miễn phí và Elementor phiên bản Pro lên website sau đó kích hoạt bản quyền, lưu ý phần kích hoạt bản quyền bên bán sẽ hỗ trợ cho bạn, nếu không kích hoạt bản quyền bạn sẽ không thể cập nhật tự động, không thể sử dụng thư viện template. Tham khảo ngay group mua chung Elementor Pro của mình bên dưới.
Elementor Pro
Page builder chuyên nghiệp hỗ trợ tùy chỉnh trang WordPress chuyên sâu
Bạn có thể tải Elementor lên website theo 2 cách đó là upload zip và cài đặt trực tiếp trên website, chọn plugin > cài mới.
Thiết lập cơ bản cho Elementor
Để quá trình sử dụng được trơn tru nhất bạn nên thiết lập các thông số cơ bản cho Elementor Pro, đầu tiên bạn truy cập phần cài đặt chọn kiểu bài trang, sau đó ấn lưu thay đổi, các phần còn lại bạn để như mặc định.
Danh sách các theme thương thích
Elementor Pro nổi tiếng với khả năng builder mạnh mẽ cho toàn bộ trang web, tuy nhiên không phải theme nào cũng hỗ trợ builder với Elementor, mình khuyên bạn nên chọn một theme tương thích cao và tối giản nhất để quá trình builder được dễ dàng hơn. Danh sách các theme tương thích cao với Elementor bao gồm: Hello Elementor, Layers WP, GeneratePress, Oceanwp, Astra…
Hướng dẫn sử dụng Elementor Pro để dựng landing page cơ bản
Cách tạo một trang landing page với Elementor bạn chọn thêm trang mới, điền thông tin tiêu đề, sau đó chọn sửa với Elementor.
Xây dựng landing page là tính năng được sử dụng phổ biến nhất của Elementor, với bản miễn phí bản sẽ bị giới hạn các widget, công việc của bạn giờ đây chỉ cần kèo thả mà không cần tác động gì đến code, thông thường mỗi widget sẽ có 3 phần cho bạn chỉnh sửa đó là nội dung, kiểu, nâng cao.
Cách bố trí của Elementor rất đơn giản mỗi trang landing page sẽ gồm nhiều section, mỗi section sẽ gồm nhiều cột, mỗi cột sẽ gồm nhiều widget. Để hình dung rõ nhất bạn chọn vào dấu + và thêm 1 section có cấu trúc bất kỳ, như hình bên dưới bạn có thể thấy cấu trúc bao gồm 1 section 1 cột, 1 section 2 cột, 1 section 3 cột…
Khi đã tạo xong section và cột bây giờ bạn có thể thêm các widget vào Elementor, thao tác chỉ cần kéo và thả, bạn có thể chọn bất cứ widget nào ở bên tay trái.
Chú ý góc trái màn hình chọn biểu tượng hoa tiêu để xem danh sách các section và cột, có thể thao tác kéo và thả để sắp xếp lại thứ tự của các section, cột, widget ngay trên hoa tiêu, bạn cũng có thể xóa, sao chép, nhân đôi bằng cách nhấp chuột phải.
Với những bạn mới ban đầu sẽ cảm thấy hơi phức tạp xíu nhưng dần dần sẽ quen, hãy thử import template dựng sẵn và xem cách họ bố trí các section từ đó học hỏi thêm cách dựng. Cách thêm template bạn chọn biểu tượng thêm mẫu, tiếp theo chọn mẫu mà bạn thích sau đó chọn chèn.
Elementor cho phép tùy chỉnh hiển thị trên thiết bị có kích thước màn hình khác nhau, để tùy chỉnh bạn chọn biểu tượng responsive ở góc trái màn hình.
Bạn cũng có thể tùy chọn ẩn hiển thị widget, cột, section trên từng loại thiết bị khác nhau bằng cách truy cập nâng cao chọn responsive.
Xây dựng template cho Elementor Pro
Theo mặc định nhà sản xuất cung cấp bộ template khá khủng dành cho Elementor tuy nhiên bạn cũng có thể tự xây dựng template cho riêng mình, để lưu trang của bạn thành template bạn chọn vào dấu mũi tên ở góc trái, chọn lưu dưới dạng mẫu.
Để sử dụng lại các template đã lưu bạn thêm mẫu, vào mẫu của tôi và cuối cùng chọn chèn.
Tạo popup cho Elementor Pro
Popup là tính năng rất hữu ích với mọi website, nó giúp gia tăng chuyển đổi, tăng tương tác người dùng, thu thập dữ liệu… bạn phải trả trung bình khoảng 59$/năm để mua các plugin popup ngoài, tuy nhiên Elementor Pro lại tích hợp tính năng này hoàn toàn miễn phí, popup của Elementor Pro chỉnh sửa rất dễ dàng thao tác chỉ cần kéo thả.
Chọn thêm mới popup.
Chọn tạo mẫu thiết kế.
Chọn mẫu popup bất kỳ mà bạn thấy đẹp sau đó chọn chèn, chỉnh sửa lại các thông tin cơ bản.
Chọn xuất bản để tiến hành lưu popup, phần conditions chọn entire site để áp dụng cho toàn trang, chọn Woocommerce và setup nếu bạn chỉ muốn popup xuất hiện ở những trang sản phẩm, danh mục sản phẩm.
Tiếp theo chọn sự kiện để popup kích hoạt, các sự kiện bao gồm:
- On page load: khi đã tải trang xong
- On scroll: khi cuộn chuột
- On scroll to element: khi cuộn chuột đến phần tử
- On click: khi click chuột
- After inactivity: sau khi không hoạt động
- On page exit intent: khi có ý định thoát trang
Tiếp theo đến phần setup điều kiện nâng cao, giải thích cơ bản như sau:
- Show after x page views: hiển thị sau khi xem số lượng trang nhất định
- Show after x sessions: hiển thị sau khi truy cập đủ số lần
- Show up to x time: hiển thị sau một khoảng thời gian
- When arriving from specific URL: hiển thị khi truy cập url cụ thể
- Hide for logged in users: ẩn cho các người dùng đăng nhập
- Show on devices: hiển thị trên thiết bị cụ thể
- Show on browsers: hiển thị trên trình duyệt cụ thể
Khi setup toàn bộ điều kiện xong bạn chọn save & close, lưu ý xóa toàn bộ cache trên plugin cache hoặc Cloudflare nếu có.
Xây dựng trang maintenance mode (chế độ bảo trì)
Trong quá trình xây dựng website nếu muốn xây dựng chế độ bảo trì cho website thông thường bạn sẽ phải cài đặt thêm các plugin ngoài có phí hoặc trả phí, mục đích của việc làm này là để người dùng và Google bot hiểu rằng website của bạn đang bảo trì, bạn có thể sử dụng tính năng này ngay trên Elementor Pro mà không cần cài thêm bất cứ plugin nào.
Đầu tiên bạn cần xây dựng một template maintenance mode, chọn template > thêm mới, tiếp theo điền tên mẫu và kiểu mẫu là trang.
Vào phần cài đặt chọn dạng bố trí Elementor canvas và chọn ẩn tiêu đề.
Tiếp tục chỉnh các thành phần theo ý thích của bạn, có thể tìm mẫu theo từ khóa: maintenance mode trong thư viện template, cuối cùng lưu mẫu lại và đặt tên dễ nhớ cho nó.
Truy cập phần công cụ của Elementor chọn tab chế độ bảo trì, chọn bật chế độ bảo trì, chọn mẫu coming soon mà bạn vừa mới tạo lúc nãy, cuối cùng hãy xóa cache trên plugin cache hoặc Cloudflare nếu có.
Tính năng theme builder cho Elementor
Một tính năng rất hay và vô cùng mạnh mẽ khác của Elementor Pro đó là theme builder, tính năng cho phép dựng lại cấu trúc của toàn bộ trang web chỉ với phương pháp kéo thả, cùng những widget đã cung cấp sẵn, bạn có thể dựng lại header, footer, trang sản phẩm, trang bài viết, danh mục, trang 404, trang tìm kiếm… Để builder bạn truy cập template > theme builder.
Chọn loại trang cần builder và tiếp tục chọn add new.
Chọn template thích hợp để sử dụng.
Chỉnh sửa lại màu sắc, bố cục và các thành phần, cuối cùng chọn xuất bản và set điều kiện hiển thị cho thích hợp, ví dụ bạn custom single post thì hãy set đều kiện ở phần bài viết hoặc bạn custom single product thì hãy set điều kiện ở phần sản phẩm. Trường hợp bạn set sai có thể gây lỗi toàn trang hãy chú ý xem cấu trúc toàn trang trước khi xuất bản nhé.
Như vậy là mình đã hướng dẫn bạn builder trên bằng Elementor Pro hoàn chỉnh, để kiểm tra theme builder đã hoạt động chưa bạn cần xóa cache, các hình thức builder khác bạn chỉ cần làm tương tự, mình sẽ ra video hướng dẫn sớm nhất, chúc bạn thành công.
Em mới làm web. Giao diện của Trang sanmawp.com rất đẹp. Admin cho em xin thông tin bộ Themes mà trang đang sử dụng ạ.
mình sử dụng theme Blocksy Pro nhé bạn.