Tất tần tật về Section
Như đã nói ở phần Section và Cột, Section là các phần tử cơ bản cấu thành lên trang web. Trong bài viết này, tôi sẽ hướng dẫn chi tiết hơn các kỹ thuật với Section, đặc biệt là CSS.
Điều chỉnh ngang, cao cho Section
Chiều ngang mặc định của Section là full màn hình theo chiều ngang. Nếu bạn muốn Section lệch sang trái hoặc sang phải một chút thì không thể sử dụng tính năng điều chỉnh Margin bởi với Section, bạn chỉ có thể điều chỉnh giãn cách theo chiều dọc. Tuy nhiên, bạn vẫn có thể làm được điều đó bằng lệnh CSS như sau:
- Bấm chuột vào Section
- Vào Custom CSS gõ lệnh: selector { margin-left: 50px;} hoặc selector { margin-right: 50px;}
Chiều cao của Section mặc định sẽ tự mở rộng theo nội dung bên trong của nó. Nhưng nếu bạn cần định dạng cố định độ cao của Section thì làm như sau:
- Vào Layout
- Mục chiều cao chọn: Vừa màn hình. Section sẽ cố định chiều cao vừa với màn hình của thiết bị mà người dùng sử dụng.
- Mục chiều cao chọn: Min-height -> đặt chiều cao theo Pixel (PX) hoặc tỉ lệ % chiều dọc màn hình (VH), tỉ lệ % chiều ngang màn hình (VW)
Lưu ý: Nếu nội dung bên trong lớn hơn chiều cao mà bạn đặt cố định, chiều cao của Section cũng tự động mở rộng ra theo nội dung. Ví dụ: chiều cao bạn đặt là Vừa màn hình. Tuy nhiên nội dung của bạn có chiều cao = 1,5 lần màn hình thì Section cũng sẽ mở ra 1,5 lần màn hình.
Trang trí nền, viền cho Section
Đây là thao tác quen thuộc sau này mỗi khi bạn thiết kế web. Bạn có thể đặt nền (background) cho Section trong Elementor bằng màu sắc, ảnh, video hoặc slide bằng cách vào mục Kiểu -> Nền hoặc Lớp phủ nền rồi chọn loại nền mà bạn muốn trang trí. Lớp phủ nền giúp bạn thêm hình ảnh, video lên trên nền hoặc tạo màu sắc làm mờ đi hình nền để nổi bật các thông tin bên trong của Section.
Bạn có thể tạo viền đơn giản cho Section hoặc trang trí cầu kỳ hơn bằng Bộ chia khuôn với một vài kiểu trang trí đã được định sẵn. Bộ chia khuôn giúp kết nối mềm mại hơn giữa 2 Section thay vì 1 đường kẻ ngang thô sơ.
Trang trí background, viền cho cột
Nói tới Section thì không thể bỏ qua cột bên trong nó. Cột trong Elementor cũng có đầy đủ tính năng trang trí giống như Section. Tuy nhiên, khi bạn đặt nền cho cột bằng hình ảnh hoặc video. Bạn sẽ cần phải chỉnh padding của các phần tử bên trong. Kéo giãn không gian của cột ra, nhằm giúp ảnh nền của cột được thể hiện tốt hơn.
Inner Section là gì?
Inner Section là 1 phần tử cơ bản của Elementor. Nó tạo ra một Section con bên trong 1 Section cha. Inner Section nằm bên trong 1 cột của Section cha. Chúng ta không thể đặt thêm 1 Inner Section bên trong Inner Section đã tạo, trừ khi bạn sử dụng Shortcode.
Điều chỉnh CSS cho Inner Section cũng tương tự như khi điều chỉnh CSS cho Section.
Ứng dụng của Inner Section
Có rất nhiều ứng dụng quan trọng của phần tử Inner Section, tùy theo hoàn cảnh và tư duy của người thiết kế website. Tuy nhiên, về cơ bản, khi ta cần thêm 2 hoặc nhiều cột cho một phần của website đang chỉ có 1 cột, Inner Setion sẽ giúp ta thực hiện điều đó.
Các bạn có thể thấy ứng dụng của Inner Section như các ví dụ dưới đây:
Ví dụ 1 về Inner Section
Trong ví dụ này, tôi cần 2 tạo ra 2 nút kêu gọi hành động trên cùng 1 hàng. Vì vậy tôi phải sử dụng Inner Section để tạo ra 1 Section con có 2 cột, mỗi cột tôi thêm vào 1 nút.
Ngoài ra ta còn có thể ứng dụng Inner Section cho các phần tử khác ngoài nút, ví dụ như:
Hoặc là:
Bạn có thể tạo ra 2 nút trên cùng 1 hàng hay còn gọi là Dual Button với Inner Section
Bạn có thể tạo 1 danh sách hình ảnh (image list) với Inner Section
Ví dụ 2 về Inner Section
Ngoài cách tạo bảng cho Trang bằng Plugin Table Press, bạn có thể tự kẻ bảng trong Elementor bằng Inner Section như ví dụ dưới đây: