Addon Properties là bảng Tùy chỉnh của Addon. Bao gồm các thao tác: căn gióng, ẩn/hiện Addon, chỉnh thông số width/height ( chiều ngang, chiều dọc ), vị trí Addon, fonts, màu sắc chữ, background, border, padding, ...
TAB GENERAL
Width as container
Display: Ẩn/Hiển thị nội dung
Copy CSS: Sao chép CSS
Paste CSS: Dán CSS
Align left: Căn ngang - Căn trái
Align center: Căn ngang - Căn giữa
Align right: Căn ngang - Căn phải
Top align: Căn dọc - Căn trên
Middle Align: Căn dọc - Căn giữa
Bottom align: Căn dọc - Căn dưới
TRANSFORM
W - Width: Chiều rộng
Có thể để các dạng
- - Phần trăm (%) - Thường dùng 100%
VD: 100% - rộng 100% website.
60% - rộng 60% website.
2. Max-content: Rộng bằng nội dung
H - Height: Chiều cao
Có thể để các dạng như:
Max-content: Cao bằng nội dung - Khuyến khích sử dụng với nội dung chữ
Số - Khuyến khích sử dụng với nội dung hình ảnh
VD: 500 - Cao 500px
X - Horizontal Axis: Tọa độ ngang/Trục hoành
Y - Vertical Axis: Tọa độ dọc/Trục tung
Nên để dưới dạng 0
Lưu ý: Không khuyến khích sử dụng - Nên dùng căn ngang/doc thay thể
Z - Z Index: Thứ tự lớp
Số càng cao thì sẽ càng hiển thị lên trên
R - Rotate: Độ xoay
APPERANCE
Position:
- Absolute: Vị trí không cố định, có thể căn chỉnh.
- Relative: Vị trí cố định nối tiếp nhau, khuyến khích sử dụng.
Float: Left - Center - Right
FONT
Family: Tên Font ( Font đã được cài đặt mặc định ở Main Setting ) - Font style
Size: Kích thước font
Color: Màu sắc chữ
Transform:
- Capitalize: Viết hoa chữ cái đầu mỗi từ
- UPPERCASE: Viết hoa toàn bộ nội dung
- lowercase: Không viết hoa
- None: Bình thường
Letter spacing: Khoảng cách giữa các ký tự
Line height: Giãn cách dòng
Căn lề văn bản
- Căn lề trái
- Căn lề phải
- Căn lề giữa
- Cân bằng 2 lề
TAB ADVANCE
Box shadow - Đổ bóng
Truy cập đường link https://www.cssmatic.com/box-shadow
Tuỳ chỉnh phần đổ bóng theo ý mình muốn.
Copy đoạn Box-shadow > Dán vào Box Shadow
VD: Sau khi tuỳ chỉnh, ta tìm được dòng box-shadow như bên dưới.
Sao chép và dán nội dung: 10px 10px 5px 0px rgba(0,0,0,0.75)
Border - Viền
Nhập theo định dạng: 1px solid #000000
Trong đó:
1px: Độ dày của viền
solid: Dạng viền
#000000: Mã màu- màu của viền
Border Radius - Bo tròn góc
Nhập theo thứ tự: Góc trên bên trái - Góc trên bên phải - Góc dưới bên phải - Góc dưới bên trái
VD: 5px 5px 0px 0px
Trong đó: Bo góc trên bên trái 5px, bo góc trên bên phải 5px, không bo góc dưới bên phải, không bo góc dưới bên trái
Margin - Đẩy bên ngoài Elements, Addon
Thêm khoảng cách bên ngoài Addon
Nhập theo thứ tự: Trên - Phải - Dưới - Trái
VD: 40 20 40 10
Trong đó: đẩy bên trên 40px, đẩy bên phải 20px, đẩy bên dưới 40px, đẩy bên trái 10px
Padding - Đẩy vào bên trong Elements, Addon
Thêm khoảng cách bên trong Addon
Trên - Phải - Dưới - Trái
VD: 40 20 40 10
Trong đó: đẩy bên trên 40px, đẩy bên phải 20px, đẩy bên dưới 40px, đẩy bên trái 10px
BACKGROUND
Image: chọn Background là Hình ảnh
Color: chọn Background là Màu sắc
Attachment:
- Scroll: Hình nền sẽ trượt theo khi trượt trên website
- Fixed: Hình nền sẽ được giữ cố định khi trượt trên website
Size: Chiều rộng và chiều cao của hình nền
Nhập theo định dạng: Width - Height
VD: 100% auto
Trong đó: 100% chiều rộng hình nền, chiều cao thay đổi theo chiều rộng
Position - Vị trí hình nền
Center: trung tâm
Bottom: phía dưới
Top: phía trên
Left: bên trái
Right: bên phải
Repeat: Lặp lại ảnh
No-repeat: Không lặp lại
Repeat - x: Lặp lại theo chiều ngang
Repeat - y: Lặp lại theo chiều dọc
Round:
TAB HOVER: Chuyển động khi rê chuột tới
TAB ANIMATION: Chuyển động khi trượt web tới
