5/5 - (1 bình chọn)

Elementor là một plugin xây dựng website trực quan cho WordPress. Bạn có thể thiết kế website mà không cần code. Elementor giúp mở rộng khả năng tùy biến và tăng độ “đẹp đến mê hồn”. Bài viết này mình sẽ hướng dẫn những thao tác Elementor cơ bản khi sử dụng.

 

1. Cài đặt plugin Elementor

Bạn cài đặt Elementor như 1 plugin bình thường. Trình tự như sau: Trong Dashboard > chọn Plugins > Add New. Tại ô tìm kiếm plugin, bạn gõ Elementor, các kết quả hiện ra > chọn Elementor page builder và Install. Sau khi cài đặt xong, chọn Activate để kích hoạt.

 

2. Cài đặt Elementor Pro

Elementor Pro là gói mở rộng của plugin Elementor. Do đó, bạn phải cài đặt Elementor trước khi muốn cài Elementor Pro. Elementor Pro là plugin trả phí, bạn có thể mua bản quyền chính thức . Hoặc bạn có thể liên hệ HD AGENCY để được tư vấn sử dụng bản quyền theo chính sách khách hàng của HD AGENCY

Sau khi đã mua bản quyền chính thức, bạn truy cập vào my.elementor.com và truy cập theo tài khoản đã đăng ký. Trang tài khoản của bạn sẽ hiện ra, với nút download plugin  và key bản quyền đi kèm. Bạn download plugin về và cài đặt như bình thường.

 

Elementor Pro Tai Khoan No Code Building Thiet Ke Website Khong Can Code

 

Trong Dashboard, chọn Elementor > License > Connect & Activate. Bạn sẽ được chuyển đến trang tài khoản Elementor Pro của bạn > chọn Connect và quá trình kích hoạt bản quyền sẽ diễn ra tự động.

 

Kich Hoat Ban Quyen Elementor Pro No Code Building Thiet Ke Website Khong Can Code

 

3. Những thao tác đầu tiên của Elementor

Trong Dashboard, chọn Page > Add New. Giao diện trang mới hiện ra, chọn Edit with Elementor.

 

Tao Trang Moi Bang Elementor No Code Building Thiet Ke Website Khong Can Code

 

Và giao diện cơ bản hiện ra. Bên trái là Widget Panel tổng hợp tất cả các tính năng của Elementor. Bên phải là Editing Area để thực hiện thao tác chỉnh sửa. Bắt đầu chỉnh sửa sẽ là 1 trong 2 lựa chọn: Add New Section để tạo ra 1 vùng chỉnh sửa mới (xem mục 4), và Add a Template là chèn mẫu thiết kế đã có sẵn từ thư viện (xem mục 5).

 

Giao Diện Sử Dụng Elementor Cơ Bản

 

4. Thao tác cơ bản trong Section

 

Sử dụng ba cấp độ tính năng thiết kế đó là: SectionColumn và Widget.

Section là khối lớn nhất, và chứa trong nó là Column. Các Column sẽ là nơi chứa các Widget. Còn Widget là thành phần nhỏ nhất và đa dạng tính năng nhất. Mỗi thành phần đều có 1 handle để điều khiển.

 

Elementor Gioi Thieu Ve Section No Code Building Thiet Ke Website Khong Can Code

 

Có thể sử dụng handle để di chuyển các thành phần bằng cách drag chuột (giữ và kéo thả). Giữ và di chuyển thành phần đến vị trí bạn muốn, sau đó thả xuống. Để di chuyển chính xác hơn, bạn có thể sử dụng Navigator.

 

Di Chuyen Trong Elementor Bang Handle

 

Muốn chỉnh sửa thành phần, bạn Right click (nhấp chuột phải) vào handle của thành phần đó. Các tùy chọn sẽ xuất hiện như Edit, Duplicate, Copy

 

Right Click Elementor No Code Building

 

Tạo Section mới: chọn icon (+) để tạo Section mới, lựa chọn số lượng Column mong muốn, sau đó thực hiện các thao tác tùy chọn. Phần handle của Section có 3 ký hiệu thao tác nhanh, lần lượt là (+) tạo mới, (:::) di chuyển, (x) xóa bỏ.

 

Tao Section Elementor No Code Building Thiet Ke Website Uy Tin Tphcm

 

Chỉnh sửa Column cơ bản: bạn có thể chỉnh sửa độ rộng của các Column bằng cách kéo đường phân cách giữa chúng. Các tùy chọn như Duplicate (nhân đôi), Delete (xóa)… cũng thể hiện đầy đủ khi bạn Right click vào handle.

 

Xem thêm : Hướng dẫn viết bài chuẩn SEO trên WordPress

 

Elementor Cơ Bản

 

Thêm mới Widget: để thêm mới, bạn giữ chuột và kéo Widget từ thanh công cụ vào Column mà bạn muốn. Độ rộng của Widget được mặc định bằng với độ rộng của Column.

 

Tao Widget Elementor No Code Building Thiet Ke Website Uy Tin Tphcm

 

5. Chèn các mẫu Templates có sẵn

 

Để chèn Templates, bạn chọn biểu tượng Add a Template để mở thư viện Elementor.

Trong thư viện, có 3 tab ở trên là Blocks (khối mẫu), Pages (trang mẫu) và My Templates (các mẫu do chính bạn thiết kế và lưu lại). Góc trái có các tùy chọn các nhóm mẫu. Góc phải là ô Search để tìm kiếm mẫu. Khi chọn được mẫu ưng ý, bạn nhấp chuột vào để phóng to mẫu và xem cụ thể. Đồng ý thì chọn Insert. Nếu chưa đồng ý thì chọn Back to Library để chọn tiếp. Nếu không muốn sử dụng mẫu thì chọn icon (x) để đóng thư viện.
Sử Dụng Thư Viện Elementor Cơ Bản

6. Lưu nháp và xuất bản (Save Draft and Publish)

Phía góc dưới cùng của bảng công cụ, có một nút Publish màu xanh lá cây kèm ký hiệu mũi tên. Bạn chọn Publish nếu bạn muốn xuất bản ngay thiết kế của mình.
Publish Elementor No Code Building
Nếu chưa hoàn thiện, bạn nhấp vào ký hiệu mũi tên và chọn Save Draft. Nếu muốn sử dụng phần thiết kế làm mẫu sử dụng nhiều lần thì chọn Save as Template. Và mẫu này sẽ nằm trong phần My Template của thư viện (đã nêu ở mục 5).
Save Draft Elementor No Code Building Thiet Ke Website Khong Can Code
Như vậy là mình vừa chia sẻ những thao tác cơ bản . Hẹn gặp lại các bạn trong các bài hướng dẫn tiếp theo về chuyên đề Elementor.

THÔNG TIN LIÊN HỆ

CÔNG TY TNHH PHÁT TRIỂN CÔNG NGHỆ HD

 

Tác giả: Đỗ Huy Hiếu
Avatar Of Đỗ Huy Hiếu
Tôi là: Đỗ Huy Hiếu CEO công ty HD Agency. Với đam mê công nghệ số, muốn dùng kiến thức và kinh nghiệm của mình để hỗ trợ các doanh nghiệp cùng nhau phát triển thương hiệu bền vững trên nền tảng online. Sau hơn 7 năm kinh nghiệm, Tôi đã giúp cho rất nhiều doanh nghiệp phát triển thương hiệu và tăng trưởng doanh thu mạnh mẽ trên nền tảng online. Một số đối tác lớn của HD Agency như: Bidrico, Breadtalk Việt Nam, Đại Đồng Tiến, Bitex, Sài Gòn Milk....Chúng tôi cam kết sẽ đồng hành lâu dài, đem lại giá trị bền vững cho các doanh nghiệp và sự hài lòng khi sử dụng dịch vụ tại HD Agency. Kết nối với chúng tôi qua Facebook | Youtube | Zalo | TikTok