Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Cách sử dụng tiện ích Khoảng cách
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 khoảng cách là gì ?
Dựa trên hình ảnh bạn cung cấp, tiện ích Khoảng cách (Spacer) trong Elementor là một khối chức năng đơn giản nhưng rất hữu ích, cho phép bạn tạo ra một khoảng trống thẳng đứng có thể tùy chỉnh giữa các phần tử khác trên trang web của mình.
3. Các bước sử dụng tiện ích khoảng cách
Bước 1. Chỉnh sửa nội dung
Đây là nơi bạn thiết lập chiều cao của khoảng trống.
1. Khoảng không gian (Space):
- Đây là thanh trượt chính và duy nhất trong tab Nội dung. Nó cho phép bạn điều chỉnh chiều cao của khoảng trống theo đơn vị pixel (px).
- Kéo thanh trượt sang phải để tăng chiều cao của khoảng trống, và sang trái để giảm.
- Bạn cũng có thể nhấp vào biểu tượng bên cạnh “px” để chuyển sang các đơn vị khác như % (phần trăm) hoặc vw (viewport width – theo chiều rộng màn hình). Tuy nhiên, px là đơn vị phổ biến nhất và dễ kiểm soát nhất cho tiện ích này.
Bước 2. Chỉnh sửa nâng cao
Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục và khả năng đáp ứng của tiện ích Khoảng cách (mặc dù các tùy chọn này thường ít được sử dụng cho tiện ích đơn giản như thế này).
- Bố cục (Layout):
- Căn chỉnh (Alignment): (Thường không có tác dụng với tiện ích khoảng cách vì nó là một khối trống).
- Chiều rộng (Width): Bạn có thể đặt chiều rộng của tiện ích. Mặc định nó sẽ có chiều rộng 100% của cột chứa nó.
- Chiều rộng tối đa (Max Width): Đặt chiều rộng tối đa mà tiện ích có thể đạt được.
- Lề và Khoảng đệm (Margin & Padding):
- Lề (Margin): Khoảng cách bên ngoài tiện ích với các phần tử khác xung quanh. Thường không cần thiết cho tiện ích Khoảng cách vì mục đích của nó đã là tạo khoảng cách.
- Khoảng đệm (Padding): Khoảng cách bên trong tiện ích. Cũng thường không cần thiết.
- Z-index:
- Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.
- CSS ID & CSS Classes:
- Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng (rất hiếm khi dùng cho tiện ích Khoảng cách).
- Hiệu ứng chuyển động (Motion Effects):
- Hiệu ứng khi vào (Entrance Animation): Chọn hiệu ứng xuất hiện cho khoảng trống khi trang được tải (cũng hiếm khi dùng vì nó chỉ là một khoảng trống).
- Hiệu ứng cuộn (Scrolling Effects): Tạo các hiệu ứng khi người dùng cuộn trang.
- Hiệu ứng chuột (Mouse Effects): Tạo các hiệu ứng khi di chuột qua tiện ích.
- Nền (Background):
- Bạn có thể thêm màu nền hoặc hình nền cho vùng chứa tiện ích (khoảng trống).
- Đường viền (Border):
- Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.
- Mặt nạ (Mask):
- Áp dụng một hình dạng mặt nạ cho vùng chứa tiện ích.
- Khả năng đáp ứng (Responsive):
- Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Đây là một tùy chọn quan trọng cho tiện ích Khoảng cách! Bạn có thể sử dụng nó để điều chỉnh khoảng trống trên các thiết bị khác nhau. Ví dụ, bạn có thể cần ít khoảng trống hơn trên điện thoại so với máy tính để bàn.
- Để làm điều này, bạn kéo tiện ích Khoảng cách vào, điều chỉnh chiều cao cho Desktop.
- Sau đó, chuyển sang chế độ Responsive (biểu tượng màn hình ở thanh công cụ dưới cùng), chọn Mobile hoặc Tablet.
- Lúc này, bạn có thể điều chỉnh lại chiều cao của khoảng trống (ở tab Nội dung) cho riêng thiết bị đó mà không ảnh hưởng đến thiết bị khác.
- Thuộc tính (Attributes):
- Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.
- CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):
- Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.
