Trang này làm gì

Trình quản lý kiểu dáng cho phép bạn tùy chỉnh và cảm nhận trang web của bạn mà không cần viết bất kỳ mã lệnh nào. Hãy nhấp vào bất kỳ yếu tố nào bạn thấy trên trang web của bạn và thay đổi màu sắc, phông chữ, khoảng cách, bóng và nhiều thứ khác. Bạn có thể tạo các kiểu dáng khác nhau cho chế độ ánh sáng và chế độ tối, kiểm tra cách mọi thứ nhìn vào thiết bị di động, và áp dụng thay đổi vào các trang nhất định hoặc toàn bộ trang web của bạn.

Hãy nghĩ về nó như một biên tập viên hình ảnh ngồi trên trang web của bạn, cho phép bạn chỉ và click để làm cho thiết kế thay đổi ngay lập tức.

[ Hình ảnh nền: trang-xem qua]

Làm sao đến được đây

Chuyển tới Quản trị > Mẫu > Bảng

Hiểu trang đó

Khi bạn mới mở trình quản lý Style, bạn sẽ thấy hai khu vực chính cạnh nhau:

Bảng bên trái:

Đây là bảng điều khiển của bạn với bảy thẻ cho các tùy chọn xếp gạch khác nhau:

• Màu - Màu văn bản và nền tảng (bao gồm cả các dốc)
• Typography - Phông chữ, kích cỡ và định dạng văn bản
• Khoảng cách - Bỏ và lề
• Viền - Kiểu biên giới, chiều rộng, màu sắc và bóng tối
• Bố trí - Hiển thị thiết lập, định vị và hộp xoay
• Hiệu ứng - Độ đậm đặc, sự biến đổi và bộ lọc.
• Cỡ - Độ dài, chiều cao và tỷ lệ hình thể

Khi bạn chọn một yếu tố trên trang web của bạn, bảng điều khiển này hiển thị kiểu dáng hiện tại và cho phép bạn thay đổi chúng.

Bảng bên phải: Xem thử trực tiếp

Chương trình này hiển thị trang web của bạn trong một cửa sổ xem thử. Bạn có thể:

• Chuyển tới trang khác
• Nhấn vào yếu tố để chọn và kiểu dáng chúng
• Bật/ tắt giữa màn hình làm việc, máy tính bảng và ô xem di động
• Name
• Xem những thay đổi của bạn ngay lập tức khi bạn thực hiện chúng

Điều khiển trên

Thanh tiêu đề bao gồm:

• Chế độ ánh sáng/ Chế độ tối Nút - Chọn chế độ bạn đang sửa
• Lưu tất cả - Lưu tất cả các thay đổi kiểu dáng
• Đặt lại tất cả - Xóa bỏ mọi kiểu dáng riêng và bắt đầu lại

Tác vụ chung

Làm thế nào để kiểu một yếu tố

Đây là luồng công việc cơ bản mà bạn sẽ dùng cho tất cả các công việc lặt vặt.

1. Nhấn vào Chế độ sửa Nút (hiện ra) trong thanh công cụ xem thử.
2. Một chỉ thị « Sửa chế độ hoạt động » xanh lá cây xuất hiện ở đầu màn hình của bạn.
3. Di chuyển con chuột của bạn qua phần tử trong ô xem thử - chúng sẽ tô sáng bằng đường nét xanh.
4. Nhấn vào một yếu tố để chọn nó.
5. Bạn sẽ thấy thông tin về các yếu tố được chọn ở đầu bảng bên trái.
6. Dùng các thẻ (mặc định, Typography, etc.) để thay đổi ngoại hình của nó.
7. Xem các thay đổi xuất hiện ngay trong ô xem trước.
8. Khi bạn hài lòng với những thay đổi, click Lưu thay đổi ở cuối bảng bên trái.

[Tiếng súng]

Cách thay đổi màu

Sau khi chọn một yếu tố:

1. Nhấn vào Màu Thẻ trên bảng bên trái.
2. Mở rộng Màu chữ phần để thay đổi màu chữ.
3. Ấn vào đồng hồ màu (hình vuông màu) để mở bộ kén màu.
4. Chọn một màu hoặc gõ mã Hex trong trường văn bản.
5. Yếu tố cập nhật ngay trong ô xem thử.

Để thay đổi nền:

1. Trong Màu tab, mở rộng Nền Khu vực.
2. Chọn Rắn chắc cho một màu hay một màu Gradient để pha trộn màu sắc.
3. Để tìm nguồn gốc vững chắc, hãy nhấp chuột vào thanh màu và chọn màu.
4. Check Trong suốt Nếu anh không muốn biết lý lịch.

[hình chụp:

Làm thế nào tạo nền

Gradient trộn nhiều màu với nhau một cách trơn tru.

1. Chọn nguyên tố của bạn và đi đến Màu Thẻ.
2. Mở rộng Nền và nhấp vào Gradient Nút.
3. Chọn hướng bằng cách nhấn vào nút 8 hướng (hoặc góc tự chọn).
4. Bạn sẽ thấy ít nhất 2 điểm dừng màu. Nhấn vào mỗi khe màu để chọn màu.
5. Điều chỉnh con trượt vị trí (0- 100%) để điều khiển mỗi màu xuất hiện.
6. Ấn Thêm để thêm màu sắc vào dốc màu.
7. Nhấn vào nút X cạnh một nút dừng màu để gỡ bỏ nó (bạn phải giữ ít nhất 2).
8. Xem cập nhật thanh xem thử dốc màu khi bạn thực hiện thay đổi.

Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương

Cách thay đổi phông chữ

Sau khi chọn đoạn hoặc bất kỳ yếu tố nào có đoạn:

1. Nhấn vào Typography Thẻ.
2. Mở rộng Cỡ & gia đình phông chữ.
3. Chọn một phông chữ từ Nhóm phông thả xuống (Roboto, Inter, Montserrat, etc.).
4. Đặt Cỡ phông chữ sử dụng số đầu vào và chọn đơn vị (px, rm, em hoặc %).
5. Chọn một Trọng lượng Phông chữ Để làm cho văn bản mỏng hơn hoặc táo bạo hơn (400 là bình thường, 700 là táo bạo).

Để định dạng văn bản:

1. Mở rộng Định dạng văn bản Khu vực.
2. Ấn nút canh lề để thẳng hàng bên trái, giữa, bên phải hoặc bào chữa.
3. Chọn Biến hình Để làm cho văn bản UPSCASE, chữ thường, hoặc thủ đô hóa.
4. Chọn Trang trí văn bản để thêm gạch dưới, gạch ngang, hoặc gạch ngang.

Dịch bởi Vũ Hạnh, Mai Linh, Nga, Ann, Yuki, Phương The Vampire3X Subteam

Cách thêm khoảng cách

Khoảng cách điều khiển khoảng trống xung quanh và bên trong yếu tố.

1. Chọn yếu tố của bạn và nhấn vào Khoảng cách Thẻ.
2. Mở rộng Bỏ và nhập một số để thêm không gian bên trong các yếu tố.
3. Mở rộng Lề và nhập một số để thêm không gian bên ngoài yếu tố.

Làm sao thêm biên giới và bóng tối

Sau khi chọn một yếu tố:

1. Nhấn vào Viền Thẻ.
2. Mở rộng Viền để tùy chỉnh biên giới.
3. Chọn một Viền (Solid, Dashed, Dotted, etc.).
4. Đặt Viền theo điểm ảnh.
5. Nhấn vào Viền swatch để chọn một màu.
6. Đặt Bán kính Viền để vòng các góc.

Để thêm một bóng:

1. Mở rộng Bóng hộp Khu vực.
2. Nhấn vào nút định sẵn bóng (Không, SM, MD, LG, XL) cho kiểu dáng bóng thông thường.
3. Hoặc gõ giá trị bóng riêng trong Bóng tự chọn cánh đồng.

[Bức ảnh chụp: biên giới và kiểm soát bóng tối]

Làm thế nào để thay đổi kiểu ăn mặc

Hiệu ứng lơ lửng gây ra khi một người di chuyển con chuột trên một yếu tố (như nút).

1. Chọn phần tử bạn muốn thêm hiệu ứng lơ lửng vào.
2. Tìm kiếm Trình chọn trạng thái Thanh bên dưới thông tin yếu tố.
3. Nhấn vào :hover Nút.
4. Trình chọn hiển thị cập nhật cho thấy bạn đang sửa đổi kiểu dáng lơ lửng.
5. Thay đổi: thử thay đổi màu nền hoặc thêm vào biến đổi.
6. Chuyển con chuột qua phần tử trong ô xem thử để xem hiệu ứng lơ lửng.
7. Ấn Lưu thay đổi khi xong việc.

[Tiếng súng]

Cách riêng

Trang web của bạn có thể trông khác nhau trong chế độ ánh sáng so với chế độ tối.

1. Ấn Chế độ ánh sáng trong đầu trang để sửa đổi chế độ ánh sáng.
2. Chọn các yếu tố và tùy chỉnh chúng theo ý muốn.
3. Ấn Lưu thay đổi cho mỗi yếu tố.
4. Ấn Chế độ tối trong đầu trang để chuyển sang chế độ tối.
5. Xem thử tự động chuyển sang chế độ tối để bạn có thể thấy những gì bạn đang sửa.
6. Chọn cùng một yếu tố và tùy chỉnh chúng cho chế độ tối.
7. Giữ chế độ tối thay đổi.

Cách áp dụng kiểu dáng cho các trang cụ thể

Theo mặc định, kiểu dáng áp dụng cho toàn bộ trang web của bạn. Nhưng bạn có thể tạo ra những kiểu dáng chỉ xuất hiện trên những trang nhất định.

Trình quản lý kiểu dáng tự động phát hiện trang nào bạn đang xem:

Để áp dụng kiểu dáng đặc trưng cho trang:

1. Dùng ô xem thử để xem trang bạn muốn tùy chỉnh.
2. Ấn Chế độ sửa và chọn các yếu tố trên trang đó.
3. Thay đổi phong cách.
4. Ấn Lưu thay đổi.
5. Những kiểu này chỉ áp dụng cho trang nhất định đó.

Cách đặt lại kiểu dáng

Đặt lại một phần tử đơn:

1. Chọn nguyên tố bạn muốn đặt lại.
2. Ấn Đặt lại phần tử ở cuối bảng bên trái.
3. Xác nhận bằng cách nhắp vào Được rồi trong sự bật lên.
4. Mọi phong cách tùy chỉnh cho yếu tố đó đều bị loại bỏ.
5. Nguyên tố trở lại như ban đầu.

Đặt lại mọi thứ:

1. Ấn Đặt lại tất cả trong cái đầu.
2. Hãy đọc kỹ lời cảnh báo, điều này loại bỏ mọi phong tục của bạn.
3. Ấn Được rồi để xác nhận.
4. Mọi phong cách phong tục trên toàn bộ trang web của bạn bị loại bỏ.
5. Trang web của bạn trở lại xuất hiện mặc định.

Điều khiển xem thử

Thanh công cụ duyệt qua

Thanh công cụ nằm trên cùng của ô xem thử giúp bạn định vị và điều khiển ô xem thử:

Xem thử thiết bị

Kiểm tra cách dáng của bạn nhìn trên các kích cỡ màn hình khác nhau bằng cách nhấn các nút này vào đầu trang xem thử:

Xem thử thu nhỏ kích cỡ đã chọn với viền bóng để bạn có thể thấy chính xác cách mà người dùng di động sẽ xem nơi Mạng của bạn.

Dịch bởi Vũ Hạnh, Mai Linh, Nga, Ann, Yuki, Phương The Vampire3X Subteam

Chế độ tối Bật/ tắt

Biểu tượng mặt trăng trong ảnh xem thử bật/ tắt ô xem thử giữa chế độ ánh sáng và chế độ tối. Đây là riêng biệt với các nút chế độ trong tiêu đề chính:

• Nút: - Kiểm soát kiểu dáng nào của các bạn.
• Nút Xem thử - Điều khiển chế độ nào bạn đang nhìn

Hiểu các kiểu dáng

Mỗi thẻ trong bảng bên trái tập trung vào các tính chất thị giác khác nhau.

Thẻ màu

• Màu chữ - Màu văn bản bên trong yếu tố
• Nền - Màu đặc, dốc hoặc nền trong suốt
• Bộ xây dựng Gradient - Tạo các màu mịn trộn với nhiều màu dừng

Thẻ đánh máy

• Nhóm phông - Chọn từ các phông chữ web chuyên nghiệp
• Cỡ phông chữ - Kích thước văn bản với đơn vị linh hoạt (px, rem, em, %)
• Trọng lượng Phông chữ - Làm thế nào mỏng hoặc táo bạo văn bản xuất hiện
• Chiều cao dòng - Khoảng trống giữa dòng văn bản
• Khoảng cách chữ - Khoảng trống giữa các chữ cái riêng
• Định dạng văn bản - Giới hạn, vốn, gạch dưới, vân vân.

Khoảng cách

• Bỏ - Không gian bên trong yếu tố (giữa nội dung và biên giới)
• Lề - Không gian bên ngoài nguyên tố (giữa nguyên tố và hàng xóm)

Viền

• Viền - Rắn, gạch, chấm, hay đường trang trí
• Viền - Biên giới rộng bao nhiêu?
• Viền - Màu của đường biên
• Bán kính Viền - Làm thế nào tròn các góc là
• Bóng hộp - Thả bóng để tạo độ sâu

Bố trí thẻ

• Hiển thị - Các yếu tố hoạt động như thế nào?
• Vị trí - Làm thế nào các yếu tố được định vị ( tĩnh, tương đối, tuyệt đối, vv.)
• Flexbox - Điều khiển để sắp xếp các yếu tố trẻ em theo hàng hoặc cột

Name

• Độ trong suốt - Làm thế nào trong suốt các yếu tố là (0% = vô hình, 100% = rắn)
• Biến hình - Phóng, xoay, hoặc di chuyển các yếu tố
• Lọc - Hiệu ứng mờ, độ sáng, độ tương phản và mức xám

Cỡ thẻ

• Bề rộng: - Yếu tố rộng cỡ nào?
• Chiều cao - Nguyên tố cao bao nhiêu?
• Tối & dài - Hạn chế kích cỡ
• Vừa với đối tượng - Làm thế nào mà hình ảnh và video vừa với các hộp đựng
• Tỷ lệ Hình thể - Duy trì tỷ lệ ( vuông, 16:9, etc.)

Mẹo cho người dùng mới

Name

Xem thử không tải hay hiển thị trang trống

Những gì bạn thấy: Bảng bên phải trống, trắng, hoặc hiện lỗi.

Cách sửa chữa nó:

1. Nhấn vào Cập nhật Nút trên thanh công cụ xem thử.
2. Kiểm tra xem nơi Mạng của bạn có hoạt động không bằng cách mở nó trong một thẻ trình duyệt mới.
3. Nếu nơi Mạng hoạt động nhưng ô xem thử không, hãy liên lạc quản trị nơi Mạng, có thể là vấn đề cấu hình.

Tôi không thể chọn các yếu tố khi tôi click vào chúng

Những gì bạn thấy: Nhấn vào yếu tố trong ô xem thử không làm gì cả.

Cách sửa chữa nó:

1. Đảm bảo Chế độ sửa Nút (hình trước) được tô sáng bằng màu xanh lá cây.
2. Hãy thử làm tươi tỉnh ô xem thử bằng cách dùng cái nút làm tươi.
3. Một số yếu tố rất nhỏ (ít hơn 5x5 điểm ảnh) không thể được chọn - thử nhấn vào các yếu tố gần đó.

Thay đổi của tôi không xuất hiện trên trang mạng

Những gì bạn thấy: Thay đổi hiển thị trong ô xem thử nhưng không phải trên trang web thực tế.

Cách sửa chữa nó:

1. Nhớ nhấn vào Lưu thay đổi ở dưới cùng của bảng bên trái (không chỉ Lưu Tất cả).
2. Dọn sạch bộ nhớ tạm trình duyệt và làm tươi nơi Mạng.
3. Nếu bạn đang xem nơi Mạng trong chế độ khác (ánh sáng và tối), hãy chuyển đổi chế độ để xem các thay đổi của bạn có áp dụng được không.

Hiệu ứng thừa không có tác dụng.

Những gì bạn thấy: Anh đã thiết kế trạng thái này nhưng không có gì xảy ra khi anh bay lượn.

Cách sửa chữa nó:

1. Hãy chắc chắn rằng bạn nhấp chuột vào :hover Nút trong bộ chọn Nhà nước trước khi thay đổi.
2. Hiệu ứng cán cân chỉ hoạt động với một con chuột - người dùng di động sẽ không thấy chúng.
3. Kiểm tra xem kiểu trang web gốc của bạn có hiệu ứng lơ lửng mâu thuẫn hay không mà có thể đè lên bạn.

Màu sắc nhìn sai hoặc không khớp với những gì tôi chọn

Những gì bạn thấy: Bộ kén màu hiển thị một màu, còn yếu tố này hiển thị khác.

Cách sửa chữa nó:

1. Nhấn vào yếu tố để chọn lại nó và làm tươi các giá trị màu hiện có.
2. Hãy chắc chắn rằng bạn đang sửa đổi tính chất đúng - màu văn bản là riêng biệt với nền.
3. Lưu và làm tươi lại hình trước để xem kết quả cuối cùng.

Tôi không thể lưu các thay đổi ( Nút tiết kiệm bị tắt)

Những gì bạn thấy: Lưu tất cả và đặt lại tất cả các nút đã bị tắt và bị tắt.

Cách sửa chữa nó:
Một băng cờ màu cam ở đầu trang cho thấy chế độ chứng minh đã được bật. Chế độ chứng minh ngăn chặn việc lưu các thay đổi. Nếu bạn cần lưu các thay đổi, hãy liên lạc với quản trị nơi Mạng để tắt chế độ chứng minh.

Chuyển tiếp không xuất hiện

Những gì bạn thấy: Bạn tạo một dốc màu, nhưng các yếu tố vẫn hiển thị một màu rắn.

Cách sửa chữa nó:

1. Hãy chắc chắn rằng bạn nhấp chuột vào Gradient Nút (không cứng) trong phần nền.
2. Kiểm tra xem bạn có ít nhất 2 chấm có màu khác nhau.
3. Lưu các thay đổi và làm tươi lại ô xem thử.

Trang liên kết

Hướng dẫn viên này là cho các chủ sở hữu và điều hành công ty ComusThumbz. Nó tập trung vào việc sử dụng giao diện quản lý kiểu dáng để tùy chỉnh diện mạo của trang web mà không cần mã hóa.