🎯 Mục tiêu
Sau bài này, khách hàng sẽ:
Biết chuyển sang chế độ xem Mobile/Tablet.
Biết chỉnh font, kích thước, khoảng cách riêng cho từng thiết bị.
Biết ẩn/hiện widget tùy thiết bị.
Biết biến bố cục nhiều cột thành 1 cột khi hiển thị trên điện thoại.
📝 Nội dung hướng dẫn
1. Chuyển sang chế độ Responsive
Trong màn hình Elementor → góc trên ở giữa.
Chọn Desktop – Tablet – Mobile để xem trước.
2. Chỉnh font & khoảng cách riêng cho Mobile
Ví dụ với Tiêu đề:
Chọn Kiểu chữ → Kích thước → chỉnh cho Mobile nhỏ hơn Desktop (vd: Desktop 40px → Mobile 24px).
Với Lề Trong / Lề Ngoài: nhập giá trị khác cho Mobile (ví dụ: giảm Lề Trong để tiết kiệm không gian).
3. Biến bố cục 3 cột → thành 1 cột
Mặc định Elementor sẽ tự động xếp cột.
Vào Phần/Cột → Tab Bố cục → Chiều rộng Cột → chỉnh “100%” cho Mobile nếu cần.
Có thể thay đổi thứ tự hiển thị bằng: Tùy chỉnh trên thiết bị (Responsive) → Đảo ngược cột (Reverse Columns).
Layout Desktop 3 cột.
4. Ẩn/hiện widget theo thiết bị
Chọn 1 Phần tử → Tab Nâng cao → Tương thích.
Có tùy chọn: Ẩn trên Máy tính/ Máy tính bảng dọc/ Di động dọc.
Ví dụ: nút “Gọi ngay” chỉ hiển thị trên Điện thoại, ẩn trên Máy tính.
5. Kiểm tra toàn bộ trang
Sau khi chỉnh xong, bấm Preview để xem trang trên nhiều thiết bị.
Có thể dùng trình duyệt Chrome → DevTools (F12 → chọn Device Toolbar) để test thêm.
🎯 Bài tập thực hành
Tạo 1 Phần 3 cột (dịch vụ).
Trên Desktop: 3 cột ngang.
Trên Mobile: xếp thành 1 cột.
Tiêu đề giảm từ 36px xuống 22px.
Thêm nút “Gọi ngay” chỉ hiển thị trên Mobile.