Hướng dẫn cách sử dụng Elementor chi tiết nhất

Bạn muốn tạo website chuyên nghiệp mà không cần biết code? Elementor là công cụ kéo thả giúp bạn thiết kế dễ dàng. Hãy cùng WebsiteDaNang khám phá cách sử dụng Elementor qua hướng dẫn chi tiết để tối ưu giao diện, tăng trải nghiệm người dùng và cải thiện hiệu suất website!

Giới thiệu về Elementor

Elementor là một trình tạo trang (Page Builder) kéo thả mạnh mẽ dành cho WordPress, giúp người dùng thiết kế website một cách trực quan mà không cần biết lập trình. Với giao diện trực quan, Elementor cho phép bạn chỉnh sửa trang web theo thời gian thực, tùy chỉnh từng chi tiết từ bố cục, màu sắc, font chữ đến hiệu ứng động.

Elementor có hai phiên bản: miễn phí và Pro. Phiên bản Pro cung cấp nhiều tính năng nâng cao như trình tạo theme (Theme Builder), trình tạo popup (Popup Builder), tích hợp WooCommerce, cùng hàng trăm template và widget chuyên nghiệp.

Nhờ khả năng linh hoạt, dễ sử dụng và tối ưu SEO, đặc biệt không yêu cầu người dùng phải am hiểu về code, Elementor trở thành một trong những trình tạo trang phổ biến nhất, được hàng triệu người tin dùng để xây dựng website chuyên nghiệp.

>>>Tìm hiểu chi tiết về: Elementor là gì?

Một số tính năng nổi bật của Elementor

Elementor là một plugin all – in – one tất cả giúp bạn kiểm soát toàn bộ quá trình thiết kế website trên một nền tảng duy nhất với các tính năng nổi bật như:

• Trình tạo trang kéo thả trực quan: Elementor cung cấp giao diện kéo thả dễ sử dụng, cho phép bạn thiết kế website mà không cần viết code. Mọi thay đổi được hiển thị ngay lập tức trong thời gian thực.
• Thư viện template phong phú: Hàng trăm mẫu giao diện sẵn có giúp bạn tạo website nhanh chóng, chuyên nghiệp mà không cần thiết kế từ đầu.
• Tùy chỉnh linh hoạt: Elementor hỗ trợ điều chỉnh màu sắc, font chữ, hiệu ứng động, background, khoảng cách, giúp bạn cá nhân hóa website theo phong cách riêng.
• Trình tạo Theme (Theme Builder): Cho phép bạn thiết kế header, footer, trang bài viết, trang 404 theo ý muốn mà không bị giới hạn bởi theme mặc định.
• Trình tạo Popup (Popup Builder): Hỗ trợ tạo popup chuyên nghiệp để thu hút khách hàng, quảng bá ưu đãi hoặc thu thập email một cách hiệu quả.
• Tích hợp WooCommerce mạnh mẽ: Elementor Pro cung cấp các widget chuyên dụng cho WooCommerce, giúp bạn tùy chỉnh trang sản phẩm, giỏ hàng, thanh toán mà không cần dùng code.
• Hỗ trợ widget đa dạng: Elementor có sẵn nhiều tiện ích như nút bấm, thanh trượt, bảng giá, bộ đếm, đánh giá khách hàng, biểu tượng, v.v., giúp tối ưu giao diện website.

Các bước cài đặt Elementor cho website

Để học cách sử dụng Elementor, hãy chắc chắn website của bạn đã cài đặt plugin này. Dưới đây là 2 cách cài đặt đơn giản nhất:

Cài đặt Elementor qua WordPress Dashboard

• Bước 1: Truy cập Bảng điều khiển WordPress, điều hướng đến Plugins > Add New.
• Bước 2: Sử dụng thanh tìm kiếm, nhập Elementor, sau đó tìm plugin Elementor Website Builder.
• Bước 3: Nhấn Install Now để cài đặt. Sau khi quá trình hoàn tất, bấm Activate để kích hoạt. Elementor sẽ tự động xuất hiện trong thanh công cụ bên trái, sẵn sàng để bạn sử dụng.

Cài đặt Elementor qua Elementor.com

• Bước 1: Truy cập Elementor.com và nhấn “Get Started” để bắt đầu. Nhập email và tạo mật khẩu để đăng ký tài khoản Elementor và trả lời một số câu hỏi liên quan đến mục đích, nhu cầu sử dụng trang web.

• Bước 2: Chọn gói dịch vụ xây dựng website mong muốn, bạn có thể mua Elementor Pro hoặc chọn gói miễn phí nếu muốn dùng bản demo.

• Bước 3: Nhập tên miền trang web vào trình kiểm tra để xác nhận rằng website đang chạy trên WordPress và hoạt động bình thường.
• Bước 4: Nếu trang web tương thích, nhấn “Install Elementor” để tiến hành cài đặt.
• Bước 5: Nếu được chuyển hướng đến trang đăng nhập WordPress, hãy đăng nhập vào bảng điều khiển. Sau đó, nhấn “Install Now” để cài đặt Elementor.
• Bước 6: Khi quá trình cài đặt hoàn tất, nhấn “Activate Plugin” để kích hoạt Elementor và bắt đầu sử dụng trình tạo trang.

Hướng dẫn cách sử dụng Elementor chi tiết

Cách tạo và chỉnh sửa trang với Elementor

Bước 1 – Tạo trang mới và mở trình chỉnh sửa Elementor

Truy cập WordPress Dashboard > Pages > Add New (hoặc Posts > Add New nếu tạo bài viết). Nhấn vào Edit with Elementor để mở trình chỉnh sửa trực quan.

Bước 2 – Khởi động trình chỉnh sửa Elementor

Giao diện Elementor Page Editor sẽ hiển thị, cho phép bạn thao tác kéo thả để thiết kế trang. Elementor sử dụng ba thành phần chính:

• Sections: Các khối lớn chứa nội dung.
• Columns: Các cột giúp chia bố cục trong section.
• Widgets: Các yếu tố nội dung (tiêu đề, hình ảnh, video, nút bấm, v.v.).

Các sections và columns sẽ được đánh dấu bằng khung màu xanh lam để dễ chỉnh sửa. Nhấn chuột phải vào bất kỳ section, column, hoặc widget nào để mở tùy chọn chỉnh sửa. Lưu ý: Không thể kéo widget vào các khu vực như thanh điều hướng hoặc tiêu đề trang.

Bước 3 – Thêm widget vào trang và tùy chỉnh: Chỉ cần nhấp, giữ và kéo thả widget vào vị trí mong muốn trên trang để thêm nội dung. Elementor cung cấp nhiều widget từ cơ bản đến nâng cao:

• Cơ bản: Tiêu đề (Heading), hình ảnh (Image), thư viện ảnh (Gallery).
• Nâng cao: Tiêu đề động (Animated Headlines), đánh giá khách hàng (Testimonial Carousels).

Bước 4 – Cài đặt giao diện tổng thể: Nhấn vào biểu tượng Menu (☰) ở góc trái > chọn Site Settings.Tại đây, bạn có thể: Điều chỉnh màu sắc, font chữ mặc định cho toàn bộ website và thiết lập các cài đặt chung khác của Elementor.

Bước 5 – Xem lại lịch sử chỉnh sửa và khôi phục phiên bản cũ: Nhấp vào biểu tượng History (Lịch sử) ở cuối bảng điều khiển. Trong tab Actions, bạn có thể: Xem lại từng thay đổi đã thực hiện, chuyển đổi giữa các thao tác trước đó và khôi phục trang về phiên bản trước nếu cần.

Cách tạo trang đầu tiên với Elementor

Elementor nổi bật nhờ giao diện trực quan và dễ sử dụng. Dưới đây là cách sử dụng Elementor để tạo trang đầu tiên cho website nhanh chóng:

• Truy cập WordPress Dashboard > Pages > Add New > Nhấn Edit with Elementor.
• Thêm các tiện ích như Heading, Text Editor, Image vào trang.
• Kéo và chỉnh sửa từng tiện ích theo ý muốn.
• Xem trước thiết kế qua Preview, sau đó nhấn Publish để hoàn tất.

Cách sử dụng Templates của Elementor

Templates trong Elementor là các mẫu trang và block được thiết kế sẵn, giúp bạn tiết kiệm thời gian khi xây dựng website. Templates có thể là các page hoàn chỉnh hoặc các block với các tiện ích con đã được tạo sẵn. Bạn có thể dễ dàng tìm kiếm và sử dụng các templates này cho doanh nghiệp của mình, tất cả đều đáp ứng trên thiết bị di động. Dưới đây là cách sử dụng templates trong Elementor:

• Trong Elementor, kéo xuống cuối trang và nhấp vào Add widget here. Sau đó, bấm vào biểu tượng folder trắng. Một thư viện templates sẽ xuất hiện. Để xem trước, nhấp vào biểu tượng kính lúp hoặc di chuột qua các mẫu.
• Chọn template muốn sử dụng và nhấn Insert để chèn vào trang. Nếu chưa kết nối với thư viện template, bạn sẽ nhận thông báo yêu cầu đăng nhập hoặc đăng ký.
• Sau khi đăng nhập và kết nối, quay lại trang để sử dụng template đã chọn.

Cách tạo Popup trong Elementor Pro

Elementor Pro mang đến các tính năng nâng cao giúp bạn thiết kế website chuyên nghiệp với nhiều tiện ích mở rộng so với phiên bản miễn phí. Một trong những công cụ hữu ích là Popup Builder, hỗ trợ tạo biểu mẫu thu thập email khách hàng tiềm năng một cách nhanh chóng.

• Truy cập WordPress Dashboard > Templates > Popups > Add New.
• Đặt tên cho template, sau đó nhấn Create Template.
• Chọn thiết kế từ thư viện hoặc tạo popup riêng > Nhấp Publish > Save & Close.
• Mở trình chỉnh sửa Elementor (Ctrl + E trên PC, Command + E trên Mac).
• Kéo widget mong muốn vào trang > Trong Layout, chọn Link > Dynamic > Actions > Popup.
• Vào Popup, chọn popup đã tạo, sau đó mở trang live và kiểm tra bằng cách nhấn vào nút kích hoạt popup.

Cách tạo trang sản phẩm WooCommerce với Elementor

WooCommerce là nền tảng thương mại điện tử phổ biến giúp bạn xây dựng cửa hàng online chuyên nghiệp. Kết hợp với Elementor, bạn có thể thiết kế các trang sản phẩm trực quan, thu hút và tối ưu chuyển đổi.

• Cài đặt & Kích hoạt plugin WooCommerce và Elementor trên WordPress.
• Truy cập Elementor > My Templates > Add New.
• Chọn Single Product làm template và nhấn Create Template.
• Chọn template có sẵn từ thư viện hoặc tự thiết kế từ đầu.
• Thêm các tiện ích sản phẩm để tùy chỉnh trang theo ý muốn.
• Nhấp vào Preview (biểu tượng con mắt) > Settings > Chọn sản phẩm cần hiển thị.
• Khi hoàn tất, nhấn Publish để xuất bản trang sản phẩm.

Elementor là một công cụ mạnh mẽ giúp bạn dễ dàng thiết kế và tùy chỉnh website trên WordPress mà không cần biết lập trình. Hy vọng qua bài viết này, bạn đã nắm được cách sử dụng Elementor để tối ưu hóa trải nghiệm thiết kế web. Hãy bắt đầu khám phá và ứng dụng ngay để tạo nên những trang web ấn tượng!