Chỉnh sửa Row và Column trong Flatsome
Row và Column là hai phần tử (element) luôn đi đôi với nhau, trong Row luôn có Column và Column chỉ có thể ở trong Row.
Thông thường, trong các giao diện của KanS, bất kỳ thành phần nào của trang web cũng được đặt theo thứ tự Section > Row > Column để dễ chỉnh sửa, thao tác hơn, phần phía dưới chúng tôi cũng sẽ giải thích sự khác biệt giữa việc đặt Row bên trong Section và không đặt bên trong Section có gì khác nhau.
Ứng dụng các column và row trong thiết kế website của KanS:
Row là một hàng ngang, một row được mặc định chia làm 12 phần, tùy vào số cột trong row mà column sẽ chiếm bao nhiêu phần của 12. Có thể hiểu như sau:
- Row có 1 cột => 1 Column 12/12
- Row có 2 cột => 2 Column 6/12
- Row có 3 cột => 3 Column 4/13
- …
Điều đó có nghĩa bạn sẽ không thể tạo 5 col đầy 2,5/12 trên 1 hàng mà chỉ có thể tạo 5 col 2/12 và để trống 1 phần. Lát nữa chúng ta sẽ tìm hiểu kỹ hơn về phần này sau.
1. Row và cài đặt Row
Để tạo row, bạn chọn Add Element > Row > Chọn số cột được thiết lập sẵn tùy mục đích của bạn. Thông thường, KanS sẽ chọn Row 1 cột, sau đó có thể điều chỉnh độ rông của Col sau.
Các ô bạn cần lưu ý ở phía dưới như sau
Trong trường hợp bạn muốn mở rông row đầy màn hình, chọn Collapse ở khung Column Spacing và Full ở Width như hình dưới.
Column Style để điều chỉnh dải phân cách giữa các col trên cùng một hàng, điều này bạn có thể tự mình tìm hiểu xem nhé!
Columm Background : chọn màu nền cho cột và chỉ cột mới có màu, row sẽ không màu. Ví dụ:
Nếu bạn muốn cả Row đều có màu nền, bạn phải đặt Row bên trong Section, sau đó đặt màu nền cho section. Đây là sự khác biệt giữa việc có Section và không có section. Bên cạnh đó, bạn có thể tham khảo tại đây hoặc tại đây để xem hiệu ứng đặc biệt bởi section.
Các điều chỉnh:
- Column Radius: Hiệu ứng bo góc col
- Align Vertical: Căn chỉnh col theo chiều dọc (đặc biệt khi các col có chiều dài chên lệch nhau)
+ Top: căn trên
+ Equal: căn cho các col có chiều cao bằng nhau
+ Middle: các col căn giữa, lấy col có chiều cao lớn nhất làm chuẩn
+ Bottom: các col căn dưới, lấy col có chiều cao lớn nhất làm chuẩn
- Column padding: căn nội dung của col. Ví dụ sau đây có thể giúp bạn hiểu rõ hơn về padding
- Column depth: tạo hiệu ứng chiều sâu cho col
- Column depth hover: tạo hiệu ứng chiều sâu khi bạn rê chuột tới col.
Trong Row bạn chỉ có thể thêm các Col vào, nếu muốn thêm các phần tử khác, bạn phải thêm vào bên trong Col. Sau đây chúng ta cùng tìm hiểu về col
2. Col và cài đặt col
Sau khi thêm col vào bên trong row, bạn nhấp đúp chuột vào col hoặc nhấp vào bánh răng (hoặc chuột phải tại column) > chọn Options. Bạn thấy giao diện hiện ra như sau:
Bạn thấy các mục tùy chỉnh cần lưu ý như sau:
- Width: độ rông của col, tương ứng từ 1 tới 12 phần
- Padding: tương tự như Column Padding ở phần trên’
- Margin: bạn xem ví dụ dưới đây về sự khác biệt giữa có và không có margin để hiểu hơn về margin nhé:
- Text align: căn chỉnh vị trí cho các phần tử bên trong column, không chỉ riêng text mà cả button, image,…
- Bg Column: chọn nền cho một column, nếu như column background của row chọn nền cho tất cả các col bên trong nó thì Bg Column chỉ chọn nền cho 1 mình col đó
- Animate: hiệu ứng động khi bạn tải trang web
- Hover Effect: Hiệu ứng tùy chỉnh khi bạn rê chuột tới col đó
- Tooltip: khi rê chuột đến col sẽ hiện ra tooltip như hình dưới:
- Viền:
+ width: độ rộng của viền, sau khi tùy chọn viền width sẽ hiện ra thêm tùy chọn cho viền như hình dưới
Bạn có thể chọn màu sắc, hiệu ứng cho viền tùy ý
Bên trong col bạn có thểm thêm đa dạng các phần tử như banner, text, image, image box, icon box, accordion,… Các phần tử này cũng sẽ được cập nhật chi tiết cách sử dụng sau
Hãy liên hệ với Kan Solution để được hỗ trợ miễn phí và nhanh nhất mọi thắc mắc về website bạn nhé!
