Giới thiệu Giao diện và các tiện ích của Elementor

Trong bài hướng dẫn này tôi sẽ tập trung vào việc chính đó là hướng dẫn các bạn về các “Widgets” – các tiện ích có trong Elementor để phục vụ cho công việc thiết kế trang web của bạn.

Elementor có đầy đủ các Widgets từ cơ bản tới nâng cao đóng vai trò quan trọng trong việc thiết kế trang web của bạn.

Dưới đây là giao diện của Elementor sau khi bạn đã tạo một trang từ WordPress doanh nghiệp, công ty của bạn.

Bên trái trang web là thanh bên chứa các công cụ thiết kế cho website của bạn.

Ở giữa trên cùng là mục để xem cách cách trang web của bạn hiển thị trên máy tính, máy tính bảng hoặc điện thoại.

1.Giao diện các Widgets (Tiện ích)

Là một trình thiết kế Web, Elementor tất yếu sẽ có một công cụ để giúp ta trong việc thiết kế. Từng công cụ sẽ có một hướng dẫn riêng nhưng hiện tại chúng ta sẽ chỉ tìm hiểu qua giao diện của các Tiện ích này.

Ở thanh bên trái của trình chỉnh sửa Elementor, ta sẽ thấy một thanh công cụ, tiện ích phục vụ cho việc chỉnh sửa trang web.

Bạn có thể bấm vào bất kỳ Widgets nào mà bạn muốn sử dụng hoặc dùng chuột giữ vào kéo công cụ đó vào.

Ví dụ ở đây tôi có thể thay đổi các nội dung, cách hiển thị, của Tiện ích hay các chứng năng nâng cao khác, tuỳ thuộc vào gói Elementor của bạn là gói thường hay Pro.

Tiếp theo ta sẽ tìm hiểu thêm về cách sử dụng thư viện mẫu – Template library trong Elementor.

2.Các bước sử dụng các mẫu Templates từ Template library

Bước 1: Mở thư viện mẫu (Template Library)

Trong màn hình chỉnh sửa Elementor (bên phải, khu vực canvas trắng)

Đầu tiên bạn hãy mở trình chỉnh sửa của Elementor, nhấn vào biểu tượng thư mục như trên hình đây

• Dấu + (thêm section mới).

• Biểu tượng thư mục (đây chính là nút mở Template Library).

• Bạn hãy bấm vào biểu tượng thư mục để truy cập vào thư viện

Lần đầu tiên sử dụng mẫu, bạn sẽ được nhắc kết nối tài khoản Elementor miễn phí để truy cập Template Library. Nếu chưa có tài khoản, bạn có thể đăng ký tài khoản miễn phí trong quá trình này.

Bước 2: Chọn các mẫu Templates

Sau khi bấm, cửa sổ Template Library sẽ hiện ra, với 3 mục chính:

• Trang: Mẫu nguyên trang (About, Contact, Landing page…).
• Khối: Các khối nhỏ (hero, testimonial, contact form…).
• Mẫu: Các mẫu bạn đã lưu riêng.

Bạn có thể dùng thanh Search (Tìm kiếm) hoặc bộ lọc theo thể loại để tìm nhanh.

Bước 3: Xem các nút bấm tại thư viện mẫu

Di chuột lên mẫu bạn muốn dùng → bấm biểu tượng kính lúp Preview (Xem trước).

Nếu bạn thích và muốn lưu mẫu này, hãy bấm vào biểu tượng trái tim để đưa vào mục “Mẫu ưa thích”

Cuối cùng nếu thấy phù hợp sau khi xem mẫu, bấm Insert (Chèn).

Bạn hãy làm tương tự khi sang mục Trang, ở đây có thêm các bộ lọc giúp bạn tìm được các mẫu ưng ý cho mình, hoặc thanh tìm kiếm để tìm mẫu cụ thể mà bạn cần.

Sau khi bấm Insert:

• Elementor sẽ chèn toàn bộ nội dung mẫu vào canvas.

• Bạn có thể chỉnh từng thành phần (text, ảnh, nút, màu…) y hệt cách chỉnh các widget thông thường.

Lưu ý: Nếu dùng mẫu cho bản Elementor Pro mà bạn chưa kích hoạt Pro, hệ thống sẽ báo yêu cầu nâng cấp.

Bước 4: Tuỳ chỉnh lại nội dung

Bấm vào từng khối:Chỉnh Tiêu đề (Heading): Sửa trực tiếp hoặc chỉnh ở cột bên trái ví dụ như:

• Chỉnh Ảnh: Bấm chọn ảnh → Thay bằng ảnh của bạn hoặc ảnh mẫu
• Chỉnh Nút (Button): Sửa text, link, màu sắc, hiệu ứng hover.

Hay chỉnh bất cứ mục nào mà bạn cần cho trang web

Bước 5: Lưu và xuất bản (Template Library)

Hãy nhìn lên bên phải trên cùng của trang Elementor bạn sẽ thấy nút: Xuất bản, bạn có thể bấm vào mũi tên trỏ xuống của nút xuất bản để xem thêm tuỳ chọn.

Bạn có thể Lưu nháp về sau có thể chỉnh sửa tiếp hoặc Lưu dưới dạng mẫu.

Nếu Lưu dưới dạng mẫu, mẫu mà bạn vừa thiết kế sẽ được lưu vào thư viện cùng với các thiết kế trước đó của bạn.

Nếu bạn chọn tùy chọn Xuất bản, trang web của bạn sẽ được đưa vào sử dụng, để xem chúng, bạn hãy quay lại trang quản trị WordPress và mở trang web mà bạn vừa xuất bản trong phần Trang.

Bạn có thể bấm vào đường dẫn tĩnh để được điều hướng sang trang web hoặc bấm vào nút Xem trước như trên hình.

Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.