Hướng dẫn sử dụng Elementor Pro thành thạo ngay sau 5 phút

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.

MUA PLUGIN ELEMENTOR PRO CHÍNH HÃNG

Cam kết chính hãng và sạch 100%, hỗ trợ 24/7/365 mọi vấn đề

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.

hướng dẫn cài đặt elementor

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.

cai dat chung tren elementor pro

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.

cách chỉnh sửa trang 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.

cac thanh phan tren widget elementor

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…

them section bat ky elementor
cau truc section tren elementor pro

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.

thêm widget vào cột elementor pro

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.

hiển thị  danh sách hoa tiêu trên elementor
hướng dẫn nhân bản xóa các cột và section

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.

bạn chọn thêm mẫu lêmntor
chọn thư viện mẫu elementor pro

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.

responsive tren thiet bi khac nhau elementor

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.

tùy chọn hiển thị nâng cao elementor

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 Elemetor 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.

luu template elemetnor
điền tên và lưu template elementor

Để 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.

thêm lại mẫu đã sử dụng template elementor
chọn mẫu và chọn template cho elementor pro

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ả.

cách tạo popup trên elementor pro

Chọn thêm mới popup.

tạo mẫu popup elementor

Chọn tạo mẫu thiết kế.

dien ten popup elementor pro

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 mẫu popup elementor pro

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.

chọn conditions popup trên elementor pro

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
chọn điều kiện hiển thị popup trên elementor pro

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ó.

điều kiện hiển thị nâng cao elemetnor pro popup

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

cách thêm mới template maintenance mode
tạo template maintenance mode elementor mới

Vào phần cài đặt chọn dạng bố trí Elementor Canvas và chọn ẩn tiêu đề.

thiết lập 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ó.

lưu template coming soon cho elementor

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ó.

truy cập công cụ chế độ bảo trì elementor

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.

truy cập tính năng elementor theme builder

Chọn loại trang cần builder và tiếp tục chọn Add new.

chon loai trang can bulder va tiep tuc chon add new

Chọn template thích hợp để sử dụng.

chọn template single post thích hợp elementor

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é.

set điều kiện hiển thị theme builder elementor

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.

Van Khai Cris
Van Khai Cris

Chào bạn mình là Van Khai Cris một chàng trai 9x đến từ vùng đất Tây Nguyên đầy nắng và gió, mình là người cực kỳ đam mê công nghệ, Digital Marketing và WordPress, hy vọng có thể chia sẻ những kiến thức và kinh nghiệm của bản thân, để giúp bạn kiếm tiền online dễ dàng hơn.

guest

2 Bình luận
Đánh giá
Xem toàn bộ bình luận
Minh Kim
Minh Kim
17/02/2022 11:32 sá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 ạ.