Bố cục cơ bản trong Elementor

🎯 Mục tiêu

Sau bài này, khách hàng sẽ:

  • Biết cách tạo Section (Phần) và chia Cột (Column).

  • Biết cách kéo các Widget (Phần tử) cơ bản (Heading, Text, Image, Button).

  • Làm được 1 bố cục đơn giản: hình bên trái, chữ + nút bên phải.

📝 Nội dung hướng dẫn

1. Mở trang bằng Elementor

  • Vào trang WordPress Admin → Pages (Trang) → Chọn 1 trang bất kỳ → Bấm Edit with Elementor (Sửa với Elementor).

2. Tạo Section mới

  • Trong giao diện Elementor → Bấm nút “+” → Chọn bố cục 2 cột (2 Columns).

3. Thêm Widget vào cột trái

  • Chọn Vùng chứa bên trái bằng cách bấm vào nút “+”.

  • Từ Panel (Bảng điều khiển) bên trái, kéo Widget Image (Hình ảnh) vào cột trái.

  • Chọn 1 hình bất kỳ từ Media Library (Thư viện).

Chọn vùng cần thêm hình ảnh
Kéo đối tượng cần sử dụng vào vùng chứa.

4. Thêm Widget vào cột phải

  • Chọn Vùng chứa bên phải.

  • Kéo Heading (Tiêu đề) vào cột phải → sửa thành “Sản phẩm nổi bật”.

  • Thêm Text Editor (Văn bản) bên dưới → nhập mô tả ngắn.

  • Kéo Button (Nút bấm) vào cuối → đổi text thành “Mua ngay”.

Chọn vào vùng cần thêm đối tượng
Kéo tiêu đề vào cột phải
Nhập nội dung cho tiêu đề
Chọn tiếp vào dấu cộng này để thêm thành phần mới cho vùng hiện tại
Kéo văn bản vào dưới vùng Tiêu đề ở trên

5. Căn chỉnh & hoàn thiện

  • Chọn Section (Phần) → Vertical Align: Middle (Căn giữa dọc).

Chọn khối vùng cần căn giữa
Click chọn icon căn giữa ở cột trái, toàn bộ nội dung sẽ được căn giữa.

 

  • Chọn Button (Nút bấm) → chỉnh Background color (Màu nền).

Chọn vào nút cần sửa => Chọn tab Kiểu hiển thị bên tay trái => thay đổi màu nền

LƯU Ý: SAU KHI THAO TÁC XONG, QUÝ KHÁCH VUI LÒNG BẤM NÚT XUẤT BẢN Ở GÓC PHẢI PHÍA TRÊN MÀN HÌNH ĐỂ LƯU KẾT QUẢ

Bấm “Xuất bản” để lưu kết quả.

🎯 Bài tập thực hành

  • Tạo 1 Section mới có 2 cột.

  • Bên trái: hình sản phẩm.

  • Bên phải: tiêu đề + mô tả + nút kêu gọi hành động.

  • Xuất bản trang và xem trên website.

Tagged: