🎯 Mục tiêu
Sau bài này, khách hàng sẽ:
Biết cách dùng Margin và Padding.
Biết căn giữa phần tử theo chiều ngang và chiều dọc.
Làm được 1 bố cục có ảnh và nút được căn giữa đẹp mắt.
📝 Nội dung hướng dẫn
1. Chuẩn bị bố cục
Mở lại trang ở Bài 1, hoặc tạo mới 1 Section có 1 cột.
Thêm Image (Ảnh) và Button (Nút) vào trong cột.
2. Hiểu về Margin và Padding
Margin = khoảng cách bên ngoài phần tử.
Padding = khoảng cách bên trong phần tử (tính từ viền vào nội dung).
Để điều chỉnh khoảng cách ngoài (Margin) và khoảng cách trong (Padding) của phần tử:
Vào tab Advanced (Nâng cao).
Mở mục Layout (Bố cục).
- Tại đây bạn sẽ thấy hai tùy chọn: Margin (Lề ngoài) và Padding (Lề trong).
Mặc định, Elementor sẽ áp dụng khoảng cách đồng đều cho tất cả các hướng (trên, phải, dưới, trái).
Để tùy chỉnh riêng cho từng hướng, bạn hãy:
Nhấp vào biểu tượng liên kết (🔗) để bỏ liên kết giữa các cạnh.
Sau đó nhập giá trị mong muốn cho từng cạnh riêng biệt.
👉 Ví dụ:
3. Căn giữa phần tử theo chiều ngang
Chọn phần tử → Tab Kiểu hiển thị → Vị trí → Căn giữa.
Nút sẽ căn ra giữa cột.
4. Căn giữa phần tử theo chiều dọc
- Chọn Phần (Section) hoặc Cột đang chứa Nút và các phần tử khác.
Vào tab Bố cục → Căn chỉnh nội dung → chọn Căn giữa.
Toàn bộ nội dung (ảnh + nút) sẽ nằm giữa màn hình theo chiều dọc.
5. Tạo khoảng cách giữa các phần tử
Kéo widget Khoảng cách vào giữa văn bản và nút.
Chỉnh Không gian 100px → sẽ tạo khoảng trống rõ ràng.
🎯 Bài tập thực hành
Tạo 1 Section có 1 cột, thêm ảnh + nút.
Căn giữa cả ảnh và nút.
Thêm khoảng cách 50px giữa ảnh và nút.
Dùng margin/padding để tạo khung thoáng cho toàn bộ section.