Responsive trong Elementor là gì? #
Responsive là khả năng website hiển thị đúng trên các thiết bị khác nhau: Desktop, Tablet và Mobile. Elementor cho phép bạn tùy chỉnh từng thiết bị một cách độc lập, đảm bảo trải nghiệm tốt trên mọi màn hình.
Đây là một phần quan trọng khi chỉnh sửa giao diện, vì hơn 60–80% người dùng truy cập bằng điện thoại.
Cách chuyển chế độ Responsive trong Elementor #
Khi đang chỉnh sửa bằng Elementor:
- Mở bảng điều khiển dưới cùng
- Nhấn biểu tượng Responsive Mode
- Chọn: Desktop – Tablet – Mobile
(Placeholder ảnh: nút Responsive Mode trong Elementor)
Những gì có thể chỉnh riêng cho Mobile/Tablet #
Typography #
- Kích thước chữ
- Khoảng cách dòng
- Căn lề
Spacing (Margin và Padding) #
- Chỉnh lại khoảng cách ở mobile để nội dung gọn hơn
- Xóa khoảng cách thừa của desktop
Align (Căn trái – giữa – phải) #
Nhiều nội dung trên desktop hiển thị đẹp nhưng sang mobile bị lệch. Bạn có thể căn lại độc lập.
Kích thước Column #
Mỗi cột có thể thay đổi width hoặc xếp chồng (stack) khác nhau giữa desktop và mobile.
Ẩn hoặc hiện phần tử riêng theo thiết bị #
Elementor cho phép ẩn các phần tử trên từng thiết bị:
- Ẩn trên Desktop
- Ẩn trên Tablet
- Ẩn trên Mobile
Chỉnh sửa Section theo từng thiết bị #
1. Chiều cao Section #
Tránh đặt Height cố định trên mobile, vì màn hình điện thoại khác nhau. Nên dùng:
- Min Height
- Fit to Screen (cẩn thận khi dùng)
2. Padding trên Mobile #
Vì điện thoại màn hình nhỏ, bạn nên giảm:
- Padding trái/phải
- Padding trên/dưới
3. Bố cục Columns #
Các cột ở Desktop thường là 3–4 cột. Trên mobile nên:
- Chuyển thành 1 cột
- Xếp chồng theo thứ tự hợp lý
- Đảo thứ tự nếu cần (Reverse Columns)
Chỉnh Typography theo thiết bị #
Kích thước chữ là vấn đề lớn nhất trên mobile. Chữ desktop 40px → sang mobile rất to.
Gợi ý kích thước chuẩn #
- Heading desktop: 40–70px
- Heading mobile: 24–32px
- Body text desktop: 16–20px
- Body text mobile: 14–16px
Chỉnh ảnh theo thiết bị #
Tránh dùng ảnh kích thước lớn trên Mobile #
- Giảm chiều cao/width ảnh khi vào mobile
- Sử dụng object-fit: cover nếu ảnh bị méo
Ẩn ảnh quá lớn ở mobile #
Nếu banner nặng → nên ẩn ở mobile và dùng ảnh đơn giản hơn.
Chỉnh khoảng cách (Spacing) #
Khoảng cách là thứ khiến mobile dễ bị “dài & rỗng”. Bạn nên:
- Giảm padding trái/phải (8–16px)
- Giảm padding trên/dưới
- Đặt margin = 0 nếu không cần
Kiểm tra giao diện trước khi Publish #
Checklist Desktop #
- Bố cục đúng
- Ảnh đủ lớn
- Typography không quá to
Checklist Mobile #
- Text không bị tràn viền
- Các cột xếp thẳng 1 cột
- Heading không quá lớn
- Nút CTA dễ bấm
- Khoảng cách hợp lý
Checklist Tablet #
- Tránh font quá lớn
- Tránh layout desktop đè lên nhau
Lỗi thường gặp khi chỉnh responsive #
1. Quên chuyển sang Mobile Mode #
Dẫn đến thay đổi desktop → phá layout mobile.
2. Margin âm trên mobile #
Dễ làm nội dung chồng lên nhau.
3. Hidden không đúng thiết bị #
Ẩn nhầm khiến khách không thấy nội dung trên mobile.
4. Chữ quá to hoặc quá nhỏ #
Do không chỉnh Typography riêng cho mobile.
Best Practices khi chỉnh responsive #
- ✔ Chỉnh desktop trước, mobile sau
- ✔ Luôn dùng chế độ Responsive Mode khi sửa
- ✔ Dùng ít margin, nhiều padding
- ✔ Ưu tiên layout đơn giản cho mobile
- ✔ Test trên nhiều điện thoại nếu có thể
Bài 4 – Chỉnh Responsive kết thúc.
