Logo
DocsTạo Thiệp mời

Tùy chỉnh giao diện và thiết kế

Tìm hiểu cách tùy chỉnh màu sắc, phông chữ và bố cục thiệp mời theo phong cách cá nhân.

9 min read
2026-03-04

Tùy chỉnh giao diện và thiết kế

Biến thiệp mời thành của riêng bạn! Tùy chỉnh màu sắc, phông chữ và bố cục theo phong cách của bạn.

Tìm cài đặt giao diện

Tùy chỉnh ở đâu?

Vị trí:

  1. Khu vực chỉnh sửa bên trái
  2. Nhấp tab "Cài đặt giao diện" ở trên
  3. Hiển thị nhiều tùy chọn tùy chỉnh

Cài đặt chính:

  • Màu chính
  • Phông chữ (Typography)
  • Bố cục
  • Hiệu ứng

Giao diện trước hay nội dung trước?

Thứ tự khuyến nghị:

  1. Trước tiên, nhập tất cả nội dung
  2. Sau đó điều chỉnh cài đặt giao diện
  3. Tinh chỉnh khi xem tổng thể hài hòa

Tại sao? Bạn cần nội dung để xem màu sắc và phông chữ có phù hợp không!

Thay đổi màu chính

Thay đổi bảng màu chính của toàn bộ thiệp mời.

Chọn màu chính

Vùng bị ảnh hưởng:

  • Màu tiêu đề và phụ đề
  • Màu nút
  • Màu điểm nhấn
  • Màu biểu tượng

Cách chọn màu:

Cách 1: Màu có sẵn

Hồng lãng mạn Xanh dương cổ điển Vàng ấm áp Xanh lá tự nhiên Đen hiện đại Trắng thuần khiết

  1. Nhấp phần "Màu chính"
  2. Chọn từ màu có sẵn
  3. Áp dụng ngay khi nhấp!

Cách 2: Màu tùy chỉnh

  1. Nhấp "Màu tùy chỉnh"
  2. Bảng chọn màu xuất hiện
  3. Nhấp vào màu mong muốn
  4. Hoặc nhập mã HEX (ví dụ: #FFB6C1)
  5. Nhấp nút "Áp dụng"

Chọn màu phụ

Phối hợp hài hòa với màu chính!

Vùng bị ảnh hưởng:

  • Nền các phần
  • Đường phân cách
  • Màu chữ nhỏ

Mẹo chọn:

  • Tông nhạt hơn màu chính
  • Hoặc màu khác cùng họ
  • Không quá tương phản

Hướng dẫn phối màu

Lãng mạn:

  • Chính: Hồng (#FFB6C1)
  • Phụ: Hồng nhạt (#FFE4E8)
  • Chữ: Xám (#555555)

Hiện đại:

  • Chính: Đen (#000000)
  • Phụ: Vàng (#FFD700)
  • Chữ: Trắng (#FFFFFF)

Tự nhiên:

  • Chính: Xanh lá (#8FBC8F)
  • Phụ: Be (#F5F5DC)
  • Chữ: Nâu (#8B4513)

Xem trước màu

Luôn kiểm tra sau khi đổi màu!

Kiểm tra:

  • Văn bản có đọc rõ không?
  • Có phối hợp tốt với ảnh không?
  • Có quá chói mắt không?
  • Tổng thể có hài hòa không?

Cách thử:

  1. Cuộn qua bản xem trước bên phải
  2. Kiểm tra tất cả các phần
  3. Xác nhận trên di động nữa

Thay đổi phông chữ (Typography)

Thay đổi đáng kể cảm giác thiệp mời!

Phông chữ có sẵn

1. Noto Sans

Cảm giác sạch sẽ và hiện đại Dễ đọc tuyệt vời Hiển thị tốt trên mọi thiết bị

  • Phong cách: Sans-serif
  • Khuyến nghị: Thiệp mời hiện đại, thiết kế đơn giản

2. Lora

Cảm giác sang trọng và truyền thống Trông trang trọng Hoàn hảo cho đám cưới

  • Phong cách: Phông chữ có chân (Serif)
  • Khuyến nghị: Thiệp mời cổ điển, cảm giác thanh lịch

3. Playfair Display

Thanh lịch và tinh tế Chi tiết serif đẹp Hoàn hảo cho sự kiện trang trọng

  • Phong cách: Serif trang trí
  • Khuyến nghị: Đám cưới sang trọng, phong cách thanh lịch

4. Montserrat

Hiện đại và sạch sẽ Hình dạng hình học Vẻ ngoài chuyên nghiệp

  • Phong cách: Sans-serif, hình học
  • Khuyến nghị: Thiết kế đương đại, thẩm mỹ tối giản

5. Dancing Script

Phong cách thư pháp viết tay Lãng mạn và cá nhân Nét nghệ thuật

  • Phong cách: Script, chữ viết tay
  • Khuyến nghị: Thiệp mời lãng mạn, thiết kế nghệ thuật

Điều chỉnh cỡ chữ

Yếu tố có thể điều chỉnh:

  • Cỡ tiêu đề: 24-48px
  • Cỡ văn bản: 14-18px
  • Chữ nhỏ: 12-14px

Cách:

  1. Sử dụng thanh trượt "Cỡ chữ"
  2. Kéo trái hoặc phải
  3. Xem trước thời gian thực

Cỡ khuyến nghị:

  • Cỡ thân thiện di động: 16px
  • Quá nhỏ khó đọc
  • Quá lớn trông rối

Lưu ý phối phông chữ

  • Tối đa 1-2 phông chữ
  • Quá nhiều phông trông lộn xộn
  • Nhất quán là chìa khóa
  • Dễ đọc là trên hết!

Kiểu bố cục

Chọn kiểu sắp xếp tổng thể thiệp mời.

Kiểu 1: Căn giữa

Đặc điểm:

  • Tất cả yếu tố căn giữa
  • Cân đối và ổn định
  • Truyền thống và linh hoạt

Khuyến nghị:

  • Đám cưới cổ điển
  • Cảm giác truyền thống
  • Lựa chọn an toàn!

Kiểu 2: Căn trái

Đặc điểm:

  • Tất cả yếu tố căn trái
  • Hiện đại và tinh tế
  • Cảm giác tạp chí

Khuyến nghị:

  • Thiết kế đương đại
  • Thiệp mời đơn giản
  • Thẩm mỹ tối giản

Kiểu 3: Dạng thẻ

Đặc điểm:

  • Mỗi phần trong dạng thẻ
  • Phân tách rõ ràng
  • Phân biệt rõ

Khuyến nghị:

  • Nhiều thông tin
  • Nhấn mạnh dễ đọc
  • Thiết kế hiện đại

Điều chỉnh khoảng cách và lề

Cho thiết kế không gian thở!

Khoảng cách phần

Tùy chọn:

  • Hẹp: 10-20px - Cảm giác gọn gàng
  • Bình thường: 30-40px (mặc định, khuyến nghị) - Khoảng cách vừa đủ
  • Rộng: 50-80px - Rộng rãi và sang trọng

Lề bên

Tùy chọn:

  • Hẹp: Lấp đầy toàn màn hình
  • Bình thường: Lề vừa phải
  • Rộng: Tập trung ở giữa

Mẹo bố cục

  • Nhiều khoảng trắng trông sang trọng hơn
  • Khoảng cách hẹp cho nhiều thông tin
  • Lề rộng cho nhiều ảnh
  • Giữ nhất quán!

Kiểu nền

Màu nền

Tùy chọn:

  • Trắng: Sạch sẽ và sáng
  • Ngà: Ấm áp và mềm mại
  • Be: Tự nhiên và thoải mái
  • Xám nhạt: Hiện đại và tinh tế

Hoa văn nền

Có sẵn:

  • Không (màu đơn sắc)
  • Kết cấu nhẹ
  • Mẫu sóng
  • Mẫu hoa (nhẹ nhàng)

Cách áp dụng:

  1. Vào phần "Nền"
  2. Chọn hoa văn
  3. Điều chỉnh độ trong suốt (10-30% khuyến nghị)
  4. Quá đậm làm chữ khó đọc!

Kiểu nút

Hình dạng nút

Kiểu:

  • Góc bo tròn: Cảm giác mềm mại
  • Góc sắc: Cảm giác hiện đại
  • Bo tròn hoàn toàn: Dễ thương và thoải mái
  • Chỉ gạch chân: Tối giản

Màu nút

Tùy chọn:

  • Dùng màu chính (tự động)
  • Chỉ định màu tùy chỉnh
  • Hiệu ứng gradient

Hiệu ứng hoạt ảnh

Thêm chuyển động cho thiệp mời!

Hiệu ứng chuyển trang

Tùy chọn:

  • Fade in: Xuất hiện dần
  • Slide up: Trượt lên từ dưới
  • Không: Hiển thị ngay

Khuyến nghị:

  • Fade in linh hoạt nhất
  • Tránh hiệu ứng quá lòe loẹt

Hiệu ứng hover

Khi di chuột qua các yếu tố!

Nút:

  • Đổi màu
  • Phóng to nhẹ
  • Xuất hiện bóng

Ảnh:

  • Phóng to
  • Sáng hơn
  • Đổi bộ lọc

Di động không có Hover

Hiệu ứng hover không hoạt động trên thiết bị di động! (Không có chuột trên màn hình cảm ứng) Đừng đặt thông tin quan trọng trong hiệu ứng hover.

Giao diện có sẵn

Áp dụng giao diện làm sẵn cùng lúc!

Giao diện 1: Hồng lãng mạn

Cài đặt:

  • Màu chính: Hồng (#FFB6C1)
  • Phông chữ: Noto Sans
  • Bố cục: Căn giữa
  • Nền: Ngà
  • Hiệu ứng: Cánh hoa rơi

Cảm giác: Dễ thương và lãng mạn

Giao diện 2: Đen hiện đại

Cài đặt:

  • Màu chính: Đen
  • Phụ: Vàng
  • Phông chữ: Lora
  • Bố cục: Căn trái
  • Nền: Trắng thuần
  • Hiệu ứng: Không

Cảm giác: Tinh tế và sang trọng

Giao diện 3: Xanh lá tự nhiên

Cài đặt:

  • Màu chính: Xanh lá
  • Phông chữ: Montserrat
  • Bố cục: Căn giữa
  • Nền: Be
  • Hiệu ứng: Hoạt ảnh nhẹ

Cảm giác: Tự nhiên và thoải mái

Giao diện 4: Xanh dương cổ điển

Cài đặt:

  • Màu chính: Navy
  • Phông chữ: Lora
  • Bố cục: Căn giữa
  • Nền: Trắng
  • Hiệu ứng: Không

Cảm giác: Truyền thống và đáng tin cậy

Thiết kế đáp ứng

Hoạt động trên mọi kích thước màn hình!

Tự động điều chỉnh

Được điều chỉnh tự động:

  • Cỡ phông chữ
  • Kích thước hình ảnh
  • Khoảng cách và lề
  • Kích thước nút

Mẹo tối ưu di động

Danh sách kiểm tra:

  • Cỡ chữ đủ lớn? (tối thiểu 14px)
  • Nút dễ nhấn? (tối thiểu 44x44px)
  • Ảnh tải nhanh?
  • Không cuộn ngang?

Danh sách kiểm tra hoàn thành

Cài đặt giao diện hoàn tất!

  • Màu chính đã chọn
  • Phông chữ đã chọn (chỉ 1-2)
  • Kiểu bố cục đã chọn
  • Khoảng cách và lề đã điều chỉnh
  • Kiểu nền đã thiết lập
  • Đã kiểm tra trên máy tính
  • Đã kiểm tra trên di động
  • Đã nhận phản hồi từ người khác
  • Đã lưu!

Tạo giao diện hoàn hảo

  1. Thử nhiều phối hợp khác nhau
  2. Chụp màn hình để so sánh
  3. Nhìn lại sau một ngày
  4. Ấn tượng đầu tiên rất quan trọng!

Bước tiếp theo

Khi giao diện hoàn thành!

Quay lại kiểm tra:

Hoàn thiện cuối: