Cách sử dụng tiện ích Inner Section
1. 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.
2. Tiện ích Inner Section là gì ?
Inner Section (Phần bên trong) là tiện ích giúp chia khối (section) thành nhiều cột nhỏ hơn.
Bạn có thể lồng thêm nhiều nội dung bên trong một section lớn, sắp xếp linh hoạt,
ví dụ: chia thành 2 cột để đặt hình + text, hoặc chia 3 cột để hiển thị dịch vụ.
3. Các bước sử dụng Inner Section
Bước 1: Kéo tiện ích Inner Section vào khung
- Trong phần bên trái (Thanh tiện ích), tìm mục Cơ bản → Inner Section (ở đầu danh sách).
- Kéo và thả vào khung chính (nơi đang hiện chữ “Kéo tiện ích vào đây”).
Khi thả xong, mặc định Inner Section sẽ tạo 2 cột bên trong section.
Bên thanh bên trái sẽ hiển thị cột có các phần nội dung để bạn thay đổi bố cục hay kích cỡ của khung Inner Section (Chiều rộng nội dung, chiều cao, khoảng cách các cột,…)
Bước 2: Thêm nội dung vào từng cột
- Mỗi cột bạn có thể kéo thêm các tiện ích khác như:
- Hình ảnh
- Tiêu đề
- Văn bản
- Nút bấm
- Icon
- Video…
Bạn cứ kéo – thả thoải mái vào từng cột.
Bước 3: Chỉnh số lượng cột
- Nếu muốn thêm cột mới:
- Nếu muốn xóa cột:
- Bấm chuột phải lên cột → chọn Xóa.
Bước 4: Tùy chỉnh bố cục cột
- Bấm vào biểu tượng cột (hình ô vuông viền xanh).
- Bên trái (panel chỉnh sửa), bạn có thể:
- Chỉnh Chiều rộng cột (theo %).
- Căn giữa, căn trái, căn phải nội dung.
- Thêm padding, margin, nền, viền,…
Bên cạnh đó bạn cũng có thể chỉnh:
- Chiều rộng nội dung: Đóng khung hoặc Toàn bộ chiều rộng.
- Chiều cao: Mặc định hoặc Chiều cao tối thiểu.
- Khoảng cách giữa các cột.
- Màu nền, viền, bóng, padding… (tab Kiểu hiển thị & Nâng cao).
Bước 5: Tùy chỉnh kiểu hiển thị của Inner Section
Bạn có thể tùy chỉnh các chất liệu, animation, hiển thị ở trong mục này để giúp việc thiết kế trải nghiệm người dùng tốt hơn.
Dưới đây là các mục mà bạn có thể thay đổi tuỳ thuộc vào mục đích sử dụng trang web của bạn:
Nền
- Bình thường: Làm nền khi hiển thị bình thường.
- Di chuột: Hiển thị khi người dùng hover chuột.
Loại nền có thể chọn:
- Màu đơn sắc.
- Gradient (chuyển màu).
- Hình ảnh.
- Video (Pro).
Bạn có thể upload ảnh, chỉnh vị trí, lặp lại, kích thước và hiệu ứng di chuyển (parallax).
Lớp phủ nền
- Thêm 1 lớp mờ hoặc màu phủ lên trên nền (ảnh hoặc video).
- Dùng để làm chữ nổi bật hơn khi nền có nhiều chi tiết.
Viền
- Chọn Loại viền: Solid (liền), Dotted (chấm), Dashed (gạch), Double (kép), Groove…
- Chỉnh độ dày (Width), màu viền (Color), và bo góc (Border Radius).
Bộ chia hình dạng
- Thêm các “hình chia” trang trí giữa section này và section tiếp theo (ví dụ: sóng, zigzag, tam giác…).
- Có thể chỉnh màu, độ rộng, vị trí (trên hoặc dưới).
Kiểu chữ
- Chỉnh toàn bộ typography của section hoặc column: font, cỡ chữ, đậm/nhạt, kiểu chữ, khoảng cách dòng, khoảng cách chữ.












