Support
Eraweb®: Trung tâm hỗ trợ
Cách sử dụng Addon Properties

Cách sử dụng Addon Properties

02-05-2020 | 15:38:53

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

Cách sử dụng Addon Properties

Width as container



Cách sử dụng Addon Properties

Display: Ẩn/Hiển thị nội dung


Cách sử dụng Addon Properties

Copy CSS: Sao chép CSS


Cách sử dụng Addon Properties

Paste CSS: Dán CSS


Cách sử dụng Addon Properties

Align left: Căn ngang - Căn trái


Cách sử dụng Addon Properties

Align center: Căn ngang - Căn giữa


Cách sử dụng Addon Properties

Align right: Căn ngang - Căn phải


Cách sử dụng Addon Properties

Top align: Căn dọc - Căn trên


Cách sử dụng Addon Properties

Middle Align: Căn dọc - Căn giữa


Cách sử dụng Addon Properties

Bottom align: Căn dọc - Căn dưới


TRANSFORM

Cách sử dụng Addon Properties

W - Width: Chiều rộng 

Có thể để các dạng

  1. 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: 

Cách sử dụng Addon Properties

- 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

Cách sử dụng Addon Properties

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ách sử dụng Addon Properties

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

Cách sử dụng Addon Properties

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 

Cách sử dụng Addon Properties

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

Cách sử dụng Addon Properties

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