Bước 1: Truy cập vào trình chỉnh sửa Elementor
- Đăng nhập vào WordPress Admin.
- Vào mục Trang (Pages) hoặc Bài viết (Posts).
- Chọn trang/bài viết cần chỉnh sửa → Click vào nút “Chỉnh sửa với Elementor”.
Bước 2: Chọn phần tử bạn muốn ẩn/hiện
Click vào phần tử (element) bạn muốn điều chỉnh (ví dụ: tiêu đề, hình ảnh, nút…).
Bước 3: Truy cập cài đặt Responsive
- Trong bảng bên trái, chuyển sang tab Nâng cao (Advanced).
- Kéo xuống phần Responsive (Biểu tượng thiết bị 📱).
Bước 4: Thiết lập ẩn/hiện phần tử theo thiết bị
Tại mục Responsive, bạn sẽ thấy 3 lựa chọn:
- Ẩn trên Desktop (Hide on Desktop)
- Ẩn trên Tablet (Hide on Tablet)
- Ẩn trên Mobile (Hide on Mobile)
👉 Chỉ cần tick vào ô tương ứng để ẩn phần tử trên thiết bị mong muốn.
📌 Lưu ý:
- Nếu bạn tick vào “Ẩn trên Mobile”, phần tử đó sẽ không hiển thị khi người dùng xem website trên điện thoại.
- Tính năng này rất hữu ích khi bạn muốn tối ưu giao diện riêng biệt cho từng loại thiết bị.
Bước 5: Kiểm tra lại
- Ở dưới cùng của trình chỉnh sửa Elementor, click vào biểu tượng Responsive Mode (📱).
- Chọn lần lượt các thiết bị: Desktop, Tablet, Mobile để xem trước sự thay đổi.
📌 Mẹo nhỏ cho bạn:
Đôi khi, bạn muốn tạo hai phiên bản của cùng một thành phần, mỗi cái hiển thị cho từng thiết bị riêng. Ví dụ:
- Một nút CTA dành cho mobile.
- Một nút khác dành riêng cho desktop.
👉 Hãy nhân bản (duplicate) phần tử, sau đó dùng tính năng Responsive để ẩn/hiện phù hợp.