Giới thiệu #
Global Settings trong Elementor là nơi thiết lập màu sắc, font chữ, khoảng cách và theme style cho toàn bộ website. Đây là “hệ thống thiết kế” (Design System) giúp trang đồng bộ, nhất quán và dễ quản lý.
LƯU Ý QUAN TRỌNG: Việc chỉnh sai Global Settings có thể làm toàn bộ website thay đổi màu, font, spacing. Hãy cẩn thận và chỉ chỉnh khi thực sự hiểu tác động của nó.
Cách mở Global Settings #
Khi đang ở giao diện Elementor, nhấn vào biểu tượng ba dấu gạch (Menu) phía trên bên trái → chọn Site Settings.
Bạn sẽ thấy các nhóm sau:
- Global Colors
- Global Fonts
- Typography
- Buttons
- Images
- Layout
- Theme Style
LƯU Ý: Đây là khu vực dành cho Designer/Dev. Người dùng bình thường chỉ nên xem, không nên chỉnh lung tung.
Global Colors – Màu sắc toàn trang #
Global Colors là bảng màu chính của website. Khi bạn dùng màu từ Global, các block/section sẽ tự update khi màu Global thay đổi.
Các nhóm màu thường có #
- Primary: màu chính (nút, liên kết)
- Secondary: màu phụ
- Text: màu chữ
- Accent: màu nhấn
- Bg: màu nền
LƯU Ý QUAN TRỌNG: Không đổi màu Global nếu không hiểu rõ. Ví dụ đổi Primary từ đỏ → xanh, toàn bộ nút, icon, heading có thể đổi theo.
Cách sử dụng màu đúng chuẩn #
- Khi chọn màu trong widget → chọn màu từ bảng Global (không chọn mã HEX tùy ý)
- Nếu cần màu mới → yêu cầu team thiết kế bổ sung vào Global
Global Fonts – Font chữ toàn trang #
Các nhóm font quan trọng #
- Primary: font tiêu đề H1, H2, H3
- Secondary: font nội dung
- Text: đoạn text nhỏ
- Accent: font dùng cho highlight hoặc special
LƯU Ý: Không thay đổi font toàn trang nếu không được phép. Việc đổi font có thể làm website lệch layout hoặc quá nặng.
Typography – Thiết lập chi tiết cho Heading & Text #
Trong Site Settings → Typography, bạn có thể chỉnh:
- Kích thước font cho H1 → H6
- Line-height
- Letter spacing
- Weight (độ đậm)
LƯU Ý: Đổi Typography ở đây = đổi toàn website. Rất nguy hiểm nếu không biết các kích thước đang liên kết với Global.
Gợi ý kích thước chuẩn cho Mobile/Desktop #
- H1: 40–60px desktop / 26–32px mobile
- H2: 28–40px desktop / 22–28px mobile
- H3: 22–28px desktop / 18–22px mobile
- Body: 16–18px desktop / 14–16px mobile
Buttons – Style nút bấm #
Elementor cho phép bạn đổi style toàn bộ nút:
- Radius (bo góc)
- Màu nền
- Màu chữ
- Padding
LƯU Ý: Đổi style tại đây sẽ ảnh hưởng tất cả các nút trên website.
Layout – Chiều rộng website #
Trong phần Layout, bạn có thể đổi:
- Content Width (rộng nội dung trung tâm)
- Space Between Widgets
KHÔNG NÊN: đổi Content Width nếu không biết rõ theme đang dùng kích thước nào → dễ gây “lệch khung”.
Theme Style – Áp dụng kiểu chữ và màu toàn trang #
Theme Style thường được sử dụng để đồng bộ:
- Heading toàn website
- Text
- Links
- Form Fields
LƯU Ý QUAN TRỌNG: Một số website dùng Theme Style để override style từ theme, nếu chỉnh sai sẽ làm toàn bộ typography thay đổi.
Cách thay đổi Fonts/Màu sắc ĐÚNG CHUẨN #
Trường hợp 1 — Chỉ thay đổi 1 block #
- Không chỉnh Global
- Vào Style của widget đó và chỉnh local
Trường hợp 2 — Cần thêm màu mới #
- Không thêm HEX trực tiếp vào widget
- Vào Site Settings → Global Colors → Add Color
Trường hợp 3 — Muốn đổi font toàn trang #
- Phải xin xác nhận từ Designer
- Phải test responsive trước khi publish
Lỗi thường gặp khi chỉnh Global Settings #
1. Đổi màu Primary → toàn website đổi màu #
Người mới thường không biết Primary đang liên kết với các nút, icon và link.
2. Chỉnh font H1 quá lớn → vỡ layout mobile #
Các block hero dễ bị “bể khung”.
3. Dùng màu không theo Global #
Gây tình trạng: block A màu #ff0000, block B màu #fb0000 → nhìn không đồng nhất.
4. Override kiểu chữ từng widget #
Khi chỉnh quá nhiều style local → website mất đồng bộ, khó bảo trì.
Best Practices #
- ✔ Luôn dùng Global Colors & Global Fonts
- ✔ Không chỉnh Global Settings nếu không cần
- ✔ Chỉ người thiết kế hoặc kỹ thuật chỉnh Global
- ✔ Luôn kiểm tra Tablet/Mobile sau khi đổi Global
- ✔ Ghi chú các thay đổi để dễ rollback
Checklist cho người dùng #
- ✔ Không đổi màu Primary
- ✔ Không đổi font toàn trang
- ✔ Không chỉnh Typography từ Global nếu không có kiến thức
- ✔ Khi đổi style, ưu tiên chỉnh local (trong widget)
- ✔ Không tạo màu HEX mới bừa bãi
Bài 5 – Typography, Color & Global Settings kết thúc.
