Hướng dẫn sử dụng Elementor từ A đến Z cho người mới

Elementor là gì và bạn có thể làm được gì với nó?

Elementor là plugin page builder kéo-thả phổ biến nhất dành cho WordPress, có thể cài đặt trực tiếp từ WordPress.org. Plugin này bao gồm toàn bộ trình chỉnh sửa kéo thả trực quan, hơn 40 widget thiết kế, thư viện template đa dạng, chỉnh sửa responsive cho mobile và tablet, cùng lịch sử hoàn tác không giới hạn.

Với bộ công cụ này, bạn hoàn toàn có thể tự tay xây dựng landing page, trang giới thiệu, trang dịch vụ hay blog cá nhân mà không cần viết một dòng code. Nếu bạn chưa có giao diện ưng ý, hãy ghé kho theme Elementor chuyên nghiệp tại ThemeWP để chọn mẫu phù hợp rút ngắn thời gian tự thiết kế.

Yêu cầu hệ thống để cài Elementor

Trước khi cài đặt, hãy kiểm tra hosting của bạn đáp ứng các thông số tối thiểu sau để Elementor hoạt động ổn định:

PHP 7.4 trở lên (khuyến nghị PHP 8.1 hoặc 8.2)
MySQL 5.6+ hoặc MariaDB 10.0+
WordPress 6.0 trở lên
Bộ nhớ PHP (Memory Limit) tối thiểu 256MB
Dung lượng upload tối thiểu 64MB

Nếu chưa có hosting phù hợp, hãy xem các gói hosting WordPress tối ưu tại ThemeWP được cấu hình sẵn đáp ứng đầy đủ các yêu cầu trên. Gặp vấn đề kỹ thuật về hosting và tên miền, bạn có thể gửi ticket hỗ trợ trực tiếp.

Cách cài đặt Elementor trên WordPress

Toàn bộ quá trình cài đặt diễn ra ngay trong trang quản trị WordPress, không cần tải file về máy tính:

Đăng nhập vào WordPress Admin (yoursite.com/wp-admin).
Vào menu Plugins → Add New Plugin.
Nhập “Elementor” vào ô tìm kiếm.
Tìm plugin Elementor Website Builder của Elementor.com.
Nhấn Install Now và chờ quá trình cài đặt hoàn tất.
Nhấn Activate để kích hoạt plugin.

Sau khi kích hoạt thành công, menu Elementor sẽ xuất hiện trong sidebar WordPress Admin. Từ giờ, khi mở bất kỳ trang hay bài viết nào để chỉnh sửa, bạn sẽ thấy nút Edit with Elementor màu xanh lá.

Chọn theme nhẹ để đi kèm với Elementor

Elementor tương thích với hầu hết theme WordPress, nhưng để tránh xung đột CSS và đạt hiệu suất tốt nhất, nên dùng theme nhẹ. Elementor cung cấp miễn phí Hello Elementor, một theme tối giản không có code thừa, thiết kế riêng để làm nền cho Elementor. Để cài: vào Appearance → Themes → Add New, tìm “Hello Elementor” và cài đặt. Bạn cũng có thể khám phá thêm các mẫu theme Elementor chất lượng cao xây dựng sẵn theo ngành nghề kinh doanh tại kho theme ThemeWP.

Làm quen với giao diện Elementor editor

Mở một trang mới: vào Pages → Add New Page, đặt tên trang, rồi nhấn nút Edit with Elementor để khởi động trình chỉnh sửa.

Giao diện Elementor gồm hai vùng chính:

Sidebar trái: chứa tất cả widget, bảng cài đặt của phần tử đang chọn và các công cụ điều hướng.
Canvas phải: vùng xem trước trang theo thời gian thực, nơi bạn kéo thả và tương tác trực tiếp với thiết kế.

Điểm khác biệt lớn nhất so với trình soạn thảo WordPress mặc định: mọi thay đổi hiển thị ngay lập tức trên canvas, không cần nhấn Preview để kiểm tra.

Cấu trúc ba lớp cơ bản trong Elementor

Mọi trang thiết kế bằng Elementor đều được xây dựng từ ba lớp lồng nhau. Hiểu rõ cấu trúc này là bước quan trọng nhất cho người mới bắt đầu:

Section (Khối ngang): Lớp ngoài cùng, chia trang thành các hàng ngang. Bạn có thể thiết lập màu nền, ảnh nền, video nền, padding và nhiều hiệu ứng trực tiếp trên Section.
Column (Cột dọc): Nằm bên trong Section, chia Section thành các cột song song. Điều chỉnh tỷ lệ chiều rộng từng cột tự do bằng cách kéo thanh divider ở giữa.
Widget (Tiện ích nội dung): Nằm trong Column, là nội dung thực tế: văn bản, hình ảnh, nút bấm, video, bản đồ, icon…

Quy tắc quan trọng: Widget phải nằm trong Column, Column phải nằm trong Section. Bạn không thể đặt widget trực tiếp vào Section hay thả widget ra ngoài canvas trống.

Cách thêm Section và Column mới vào trang

Để thêm một Section mới, di chuyển chuột vào khoảng trống giữa hai section đã có hoặc xuống cuối trang, nhấn vào biểu tượng dấu + màu xanh xuất hiện. Elementor sẽ hỏi bạn muốn tạo bố cục mấy cột: 1 cột, 2 cột, 3 cột, hoặc các bố cục kết hợp khác. Chọn bố cục phù hợp rồi bắt đầu kéo widget vào.

Để thay đổi số cột sau khi đã tạo: nhấp chuột phải vào Section, chọn Add New Column để thêm hoặc nhấp chuột phải vào Column và chọn Delete để xóa bớt. Kéo thanh divider giữa các cột để điều chỉnh tỷ lệ chiều rộng.

Cách kéo thả, chỉnh sửa và xóa widget

Thêm widget vào trang

Trong sidebar trái, nhấp vào biểu tượng lưới ở thanh trên cùng để mở danh sách widget. Tìm widget cần dùng (hoặc gõ tên vào ô tìm kiếm), rồi kéo widget và thả vào vị trí mong muốn trên canvas. Vùng thả hợp lệ được đánh dấu bằng đường viền màu xanh khi bạn kéo qua.

Chỉnh sửa nội dung và style của widget

Nhấp chuột vào widget trên canvas để chọn. Sidebar trái ngay lập tức chuyển sang bảng cài đặt của widget với ba tab:

Content: Nội dung của widget như văn bản, URL, hình ảnh, icon…
Style: Màu sắc, font chữ, kích thước, border, shadow, spacing…
Advanced: Margin, padding, responsive visibility, CSS classes, hiệu ứng entrance animation…

Di chuyển widget sang vị trí khác

Hover chuột vào widget cho đến khi thấy biểu tượng sáu chấm (⠿) xuất hiện ở góc trên trái. Giữ chuột vào biểu tượng đó và kéo widget sang vị trí mới, có thể là trong cùng column, sang column khác hoặc sang section khác.

Xóa và nhân bản widget

Nhấp chuột phải vào widget trên canvas để mở menu ngữ cảnh. Chọn Delete để xóa hoặc Duplicate để tạo bản sao ngay bên dưới. Lỡ xóa nhầm, dùng Ctrl+Z (Windows) hoặc Cmd+Z (Mac) để hoàn tác.

Toàn bộ widget có trong Elementor

Elementor cung cấp hơn 40 widget được chia thành các nhóm sau:

Nhóm Basic – nội dung cơ bản

Heading: Tạo tiêu đề với thẻ H1 đến H6, tùy chỉnh font, màu, kích thước, alignment.
Text Editor: Soạn thảo đoạn văn bản phong phú với bold, italic, link, danh sách, tương tự Word.
Image: Chèn hình ảnh từ thư viện Media hoặc upload từ máy tính, thêm caption và link.
Video: Nhúng video từ YouTube, Vimeo hoặc self-hosted. Hỗ trợ autoplay, loop, thumbnail tùy chỉnh.
Button: Tạo nút CTA với icon, màu sắc, border radius và hiệu ứng hover.
Divider: Đường kẻ phân cách nội dung với nhiều kiểu dáng.
Spacer: Thêm khoảng trống dọc giữa các phần nội dung.
Google Maps: Nhúng bản đồ Google Maps với địa chỉ tùy chỉnh.

Nhóm Media và Gallery

Basic Image Gallery: Tạo lưới ảnh từ nhiều hình ảnh trong Media Library.
Image Carousel: Slider ảnh tự động với nút điều hướng và chỉ số trang.
SoundCloud: Nhúng trình phát nhạc từ SoundCloud.

Nhóm Icon và Box

Icon: Chèn icon từ thư viện Font Awesome, Eicons hoặc các bộ icon khác.
Icon Box: Khối gồm icon kèm tiêu đề và mô tả, dùng phổ biến để trình bày tính năng dịch vụ.
Image Box: Tương tự Icon Box nhưng dùng hình ảnh thay icon.
Icon List: Danh sách với icon đầu dòng thay cho bullet point thông thường.
Social Icons: Hiển thị các biểu tượng mạng xã hội với link đến profile.

Nhóm tương tác và hiển thị dữ liệu

Counter: Hiển thị số liệu thống kê với hiệu ứng đếm số khi cuộn đến.
Progress Bar: Thanh tiến trình với label và phần trăm.
Testimonial: Khối đánh giá khách hàng với ảnh đại diện, tên và nội dung.
Alert: Hộp thông báo với các loại: success, warning, danger, info.

Nhóm điều hướng và cấu trúc nội dung

Tabs: Nội dung dạng tab nằm ngang, tiết kiệm không gian trang.
Accordion: Nội dung dạng xếp chồng mở/đóng, phù hợp cho FAQ.
Toggle: Tương tự Accordion nhưng có thể mở nhiều mục cùng lúc.
Menu Anchor: Tạo điểm neo để link nội trang nhảy đến section cụ thể.
Sidebar: Hiển thị widget sidebar WordPress trong layout Elementor.

Nhóm code và nhúng nội dung ngoài

HTML: Chèn code HTML tùy chỉnh trực tiếp vào trang.
Shortcode: Chèn shortcode từ các plugin khác vào thiết kế Elementor và xem trước kết quả ngay trong editor.
Off Canvas: Tạo panel trượt từ cạnh màn hình, dùng cho menu mobile hoặc sidebar ẩn.

Cách dùng template có sẵn trong Elementor

Thay vì thiết kế từ trang trắng, bạn có thể chèn template có sẵn và chỉ cần thay nội dung. Đây là cách nhanh nhất để có trang web đẹp ngay.

Nhấn vào biểu tượng thư mục (Library icon) ở giữa canvas trống hoặc trên thanh công cụ dưới sidebar để mở thư viện template.

Thư viện có hai loại template bạn cần biết:

Pages: Template thiết kế cho toàn bộ một trang hoàn chỉnh như landing page, trang about, trang dịch vụ. Chọn template, nhấn Insert là trang đã có layout đầy đủ.
Blocks: Template cho từng phần nhỏ như hero section, bảng giá, testimonial, team… Dùng khi muốn ghép từng phần từ nhiều nguồn khác nhau.

Sau khi chèn template, hãy đặt layout trang về Elementor Full Width: nhấn biểu tượng bánh răng ở góc dưới trái sidebar → tab Page Layout → chọn Elementor Full Width. Bước này giúp canvas chiếm toàn bộ chiều rộng màn hình, loại bỏ sidebar và margin mặc định của theme.

Cài đặt nền cho Section trong Elementor

Nhấp chọn Section (nhấp vào phần viền ngoài cùng hoặc thanh xanh lá phía trên section). Trong sidebar, chuyển sang tab Style và mở phần Background. Elementor hỗ trợ bốn kiểu nền:

Classic: Màu đơn hoặc hình ảnh tĩnh làm nền. Với nền ảnh, bạn có thể điều chỉnh position, size (cover, contain, custom) và repeat.
Gradient: Nền chuyển màu với hai màu tùy chọn, hướng chuyển và kiểu (linear hoặc radial).
Video: Video tự động phát làm nền section, hỗ trợ YouTube, Vimeo và self-hosted.
Slideshow: Nhiều ảnh thay nhau làm nền theo chu kỳ.

Trong tab Style còn có phần Background Overlay cho phép thêm lớp màu trong suốt lên trên nền, giúp văn bản dễ đọc hơn khi dùng ảnh hoặc video làm nền.

Căn chỉnh khoảng cách với Padding và Margin

Đây là kỹ năng quan trọng nhất để trang web trông chuyên nghiệp. Trong tab Advanced của bất kỳ Section, Column hoặc Widget nào, bạn sẽ thấy hai phần:

Margin: Khoảng cách bên ngoài phần tử, đẩy phần tử ra xa các phần tử xung quanh.
Padding: Khoảng cách bên trong phần tử, tạo khoảng đệm giữa viền và nội dung bên trong.

Mỗi thuộc tính có bốn giá trị: trên (top), phải (right), dưới (bottom), trái (left). Nhấp vào biểu tượng liên kết ở giữa để đồng bộ cả bốn cạnh cùng lúc, hoặc bỏ liên kết để điều chỉnh riêng từng cạnh.

Chỉnh sửa responsive cho mobile và tablet

Ở thanh công cụ dưới cùng sidebar có ba biểu tượng thiết bị: Desktop, Tablet và Mobile. Nhấp vào từng biểu tượng để chuyển sang chế độ xem trước tương ứng và thực hiện chỉnh sửa riêng cho kích thước màn hình đó.

Nguyên tắc kế thừa cài đặt: Thay đổi ở Desktop áp dụng xuống Tablet và Mobile. Thay đổi ở Tablet chỉ áp dụng cho Tablet và Mobile. Thay đổi ở Mobile chỉ áp dụng cho Mobile. Điều này có nghĩa là bạn chỉ cần chỉnh sửa những điểm khác biệt, không cần thiết kế lại từ đầu cho từng thiết bị.

Các điều chỉnh phổ biến cho mobile: giảm font size tiêu đề, tăng padding section để nội dung không sát viền màn hình, ẩn widget không cần thiết qua tùy chọn Hide on Mobile trong tab Advanced.

Tính năng Entrance Animation trong Elementor

Elementor có sẵn tính năng thêm hiệu ứng xuất hiện cho widget khi người dùng cuộn trang đến vị trí đó. Chọn widget muốn thêm hiệu ứng, vào tab Advanced → Motion Effects → Entrance Animation, chọn kiểu hiệu ứng từ dropdown (fadeIn, slideInLeft, zoomIn, bounceIn…) và điều chỉnh tốc độ (Duration) theo ý muốn.

Lưu ý: không nên lạm dụng hiệu ứng animation vì có thể làm trang trở nên rối mắt và ảnh hưởng đến trải nghiệm người dùng.

Lưu trang và lưu template để tái sử dụng

Sau khi hoàn thành thiết kế, nhấn nút Publish (màu xanh lá) ở góc dưới trái sidebar để xuất bản trang. Nếu trang đã công khai trước đó, nút này sẽ là Update.

Để lưu thiết kế thành template tái sử dụng cho trang khác: nhấn mũi tên nhỏ cạnh nút Publish/Update và chọn Save as Template. Đặt tên cho template và nhấn Save. Template đã lưu sẽ xuất hiện trong tab My Templates của thư viện Elementor, sẵn sàng để chèn vào bất kỳ trang nào.

Để lưu riêng một section, nhấp chuột phải vào section đó và chọn Save as Template.

Lịch sử chỉnh sửa và hoàn tác trong Elementor

Elementor lưu lịch sử mọi thao tác chỉnh sửa trong phiên làm việc hiện tại. Nhấp vào biểu tượng đồng hồ ở thanh công cụ dưới sidebar để mở bảng Revision History xem danh sách các phiên bản trước. Nhấp vào bất kỳ mốc thời gian nào để khôi phục về phiên bản đó.

Ngoài ra, Elementor cũng tích hợp tính năng hoàn tác/làm lại của WordPress, cho phép khôi phục các phiên bản đã lưu trước đó.

Các phím tắt thường dùng trong Elementor editor

Ctrl+Z / Cmd+Z: Hoàn tác thao tác vừa thực hiện.
Ctrl+Shift+Z / Cmd+Shift+Z: Làm lại (Redo).
Ctrl+S / Cmd+S: Lưu hoặc cập nhật trang.
Ctrl+D / Cmd+D: Nhân bản phần tử đang chọn.
Delete: Xóa phần tử đang chọn.
Ctrl+E / Cmd+E: Mở hộp tìm kiếm nhanh Finder để tìm widget, trang hoặc cài đặt.
Esc: Bỏ chọn phần tử hiện tại, chuyển lên lớp cha (từ Widget lên Column, từ Column lên Section).

Những điều Elementor bản miễn phí không làm được

Để tránh mất thời gian tìm kiếm tính năng không có, dưới đây là danh sách rõ ràng những gì chỉ có trong Elementor Pro:

Thiết kế header và footer bằng Elementor (cần Theme Builder Pro)
Tạo template cho trang bài viết đơn lẻ, trang archive, trang 404
Form Widget với kết nối Mailchimp, HubSpot, Zapier
Popup Builder
Global Settings cho màu sắc và typography toàn site
WooCommerce Builder
Dynamic Content từ Advanced Custom Fields
Custom CSS cho từng phần tử
Hiệu ứng scroll và motion effects nâng cao
Global Widget (widget dùng chung, cập nhật một nơi áp dụng toàn site)

Mẹo sử dụng Elementor hiệu quả hơn

Bắt đầu từ template, không từ trang trắng: Chèn block template cho từng phần (hero, features, testimonial…) rồi thay nội dung sẽ nhanh hơn nhiều so với kéo từng widget.
Dùng Shortcode Widget để mở rộng tính năng: Bất kỳ plugin nào có shortcode đều có thể nhúng vào thiết kế Elementor qua widget Shortcode. Ví dụ: form từ plugin Contact Form 7, bảng giá từ plugin khác…
Thiết lập Global Fonts ngay từ đầu: Dù không có Global Settings đầy đủ như Pro, bạn vẫn có thể chọn font chữ mặc định cho theme thông qua Appearance → Customize để đảm bảo nhất quán.
Tối ưu ảnh trước khi upload: Nén ảnh về dưới 200KB và dùng định dạng WebP để trang tải nhanh hơn đáng kể.
Lưu section thường dùng thành template: Các phần hay dùng lại như hero section, CTA section nên lưu thành template để tái sử dụng, tiết kiệm thời gian thiết kế.

FAQ: Câu hỏi thường gặp về Elementor

Elementor có giới hạn số trang thiết kế không?

Không. Bạn có thể dùng Elementor để thiết kế không giới hạn số trang và bài viết trên website, không có bất kỳ giới hạn nào về số lượng.

Elementor có tương thích với WooCommerce không?

Có một phần. Elementor tương thích với WooCommerce ở mức cơ bản: bạn có thể dùng widget Shortcode để nhúng shortcode của WooCommerce vào trang, hoặc thiết kế trang nội dung bình thường. Tuy nhiên để tùy chỉnh giao diện trang sản phẩm, trang shop và trang thanh toán, bạn cần Elementor Pro với WooCommerce Builder.

Có thể thiết kế header và footer bằng Elementor miễn phí không?

Không. Tính năng thiết kế header và footer bằng Elementor chỉ có trong Elementor Pro thông qua Theme Builder. Với Elementor, header và footer vẫn do theme WordPress kiểm soát, bạn chỉ có thể chỉnh sửa qua Appearance → Customize.

Elementor có ảnh hưởng đến SEO không?

Elementor cho phép đầy đủ các tùy chỉnh SEO on-page cơ bản giống trình soạn thảo WordPress thông thường. Kết hợp với plugin SEO như Yoast SEO hoặc Rank Math, bạn vẫn có thể tối ưu đầy đủ title, meta description và cấu trúc heading cho từng trang. Điều quan trọng là tối ưu hình ảnh và tốc độ tải trang để không ảnh hưởng đến Core Web Vitals.

Có thể dùng Elementor với Contact Form 7 không?

Có. Cài đặt plugin Contact Form 7, tạo form và lấy shortcode của form đó. Sau đó trong Elementor, kéo widget Shortcode vào vị trí mong muốn trên trang và dán shortcode vào. Form sẽ hiển thị và hoạt động đầy đủ trong thiết kế Elementor.

Elementor có hỗ trợ nhiều ngôn ngữ không?

Có. Giao diện admin của Elementor hỗ trợ nhiều ngôn ngữ bao gồm tiếng Việt. Về nội dung website đa ngôn ngữ, bạn cần cài thêm plugin dịch như WPML hoặc Polylang, cả hai đều tương thích tốt với Elementor.

Nên làm gì khi Elementor bị lỗi hoặc trang trắng?

Thực hiện theo thứ tự: xóa cache trình duyệt, xóa cache plugin caching đang dùng, kiểm tra phiên bản PHP có đạt tối thiểu 7.4 không, tăng bộ nhớ PHP lên 256MB trong wp-config.php (define('WP_MEMORY_LIMIT', '256M');), tắt tạm các plugin khác để tìm plugin xung đột. Nếu vẫn chưa khắc phục được, hãy gửi yêu cầu hỗ trợ kỹ thuật để được hỗ trợ trực tiếp.

Elementor có giới hạn băng thông hoặc lưu lượng truy cập không?

Không. Elementor là plugin WordPress cài trên hosting của bạn, không có bất kỳ giới hạn nào về lưu lượng truy cập hay băng thông từ phía Elementor. Giới hạn duy nhất là từ gói hosting bạn đang dùng.

Xem thêm: