Trong quá trình thiết kế, sẽ có những phần mà bạn muốn nội dung phần đó sẽ được cuộn ngang thay vì cuộn dọc xuống dưới như bình thường. Điều này sẽ giúp trải nghiệm website của bạn sẽ thú vị hơn
Nếu phần nội dung này bạn sử dụng nhiều trong website của bạn, bạn nên tạo một mẫu để tái sử dụng nhiều lần, trong các thiết kế khác bạn chỉ cần chọn phần tử Templates và chọn mẫu này để thêm vào canvas khi thiết kế.
Tạo Layout Cuộn Ngang Trong Bricks (Horizontal Scrolling)
Cách 1: Thêm mã CSS trực tiếp vào phần tử
Chia sẻ này nhằm giúp bạn hiểu hơn về cách tạo layout có thể kéo ngang trong Bricks, khi bạn hiểu rồi có thể làm theo ý của mình.
Bước 1:
Trước tiên bạn mở trình soạn thảo Bricks, tạo một Section mới và tiếp theo tạo thêm một container bên trong Section, và bên trong Container ban tiếp tục tạo thêm 4 block nữa bên trong Container
Bước 2:
Sau khi tạo các phần tử layout, tiếp theo bạn thêm mã CSS vào cho từng phần tử này.
Thêm mã CSS cho phần tử Container: Bạn chọn phần tử container, sau đó ở phần thiết lập bên trái, chọn phần menu CSS và nhập mã sau đây:
%root% { overflow-x: auto; }Thuộc tính overflow-x trong CSS được sử dụng để kiểm soát cách xử lý nội dung tràn ra ngoài chiều rộng của một phần tử
- Chức năng: Khi bạn đặt overflow-x = auto, trình duyệt sẽ tự động thêm thanh cuộn ngang nếu nội dung bên trong phần tử vượt quá chiều rộng của phần tử đó.
- Tự động: Từ “auto” có nghĩa là trình duyệt sẽ quyết định khi nào cần hiển thị thanh cuộn. Nếu nội dung không vượt quá chiều rộng của phần tử, thanh cuộn sẽ không xuất hiện. Nếu bạn có một container với chiều rộng cố định và nội dung bên trong dài hơn chiều rộng đó, thanh cuộn ngang sẽ xuất hiện để người dùng có thể cuộn qua nội dung.
Thêm mã CSS cho phần tử Container
Thêm mã CSS cho phần tử Block:
Tiếp theo đối với các phần tử block bên trong của container, bạn cũng thao tác giống như khi thêm mã CSS cho container.
Thêm mã CSS sau đây cho các phần tử Block:
%root% {
min-width: 100vw;
height: 50vh;
display: flex; justify-content: center;
align-items: center;
font-size: 2em;
background-color: lightblue;
border: 1px solid #000;
}Phân tích từng thuộc tính
%root%: Đây là một class selector. Các thuộc tính CSS bên trong sẽ được áp dụng cho tất cả các phần tử. Trong Bricks theme thì %root% là áp dụng trực tiếp với phần tử đó
min-width: 100vw;: Đặt chiều rộng tối thiểu của phần tử là 100% chiều rộng của viewport (khung nhìn của trình duyệt). Điều này đảm bảo phần tử luôn chiếm ít nhất toàn bộ chiều rộng của màn hình.
height: 50vh;: Đặt chiều cao của phần tử là 50% chiều cao của viewport. Điều này giúp phần tử chiếm một nửa chiều cao của màn hình.
display: flex;: Sử dụng Flexbox để bố trí các phần tử con bên trong phần tử này. Flexbox giúp dễ dàng căn chỉnh và phân phối không gian giữa các phần tử con.
justify-content: center;: Căn giữa các phần tử con theo chiều ngang. Các phần tử con sẽ được đặt ở giữa phần tử cha theo chiều ngang.
align-items: center;: Căn giữa các phần tử con theo chiều dọc. Các phần tử con sẽ được đặt ở giữa phần tử cha theo chiều dọc.
font-size: 2em;: Đặt kích thước font chữ của phần tử là 2 lần kích thước font chữ mặc định của phần tử cha.
background-color: lightblue;: Đặt màu nền của phần tử là màu xanh nhạt.
border: 1px solid #000;: Đặt viền của phần tử là viền đặc, dày 1 pixel, và có màu đen.
Thêm mã CSS cho phần tử Block
Khi áp dụng đoạn mã này, phần tử được áp dụng class sẽ chiếm toàn bộ chiều rộng của khung trình duyệt và một nửa chiều cao của khung trình duyệt. Nội dung bên trong phần tử sẽ được căn giữa cả theo chiều ngang và chiều dọc, với kích thước font chữ lớn, màu nền xanh nhạt và viền đen.
Các Block được tạo bên trong container bạn sẽ cho áp dụng class mà bạn vừa tạo. Nếu block áp dụng class tạo thứ 2 thì nó sẽ hiển thị 100% bằng với container, như vậy khi tạo thêm 1 block nữa thì đương nhiên nó sẽ bị tràn ra ngoài, bây giờ thì container sẽ xuất hiện Scrolling kéo ngang (vì container đang áp dung class đã tạo thứ nhất)
Giờ đây bạn có thể thêm các nội dung khác như text, image … vào bên trong block, khi người dùng view tới phần này sẽ kéo ngang để xem nội dung
Lưu ý: %root% chỉ có tác dụng trong Bricks.
Cách 2: Tạo Class CSS
Đối với cách này bạn sẽ dễ dàng quản lý hơn, nhưng để sử dụng cách này Bricks cần cài thêm Plugin bổ trợ có tên là Advanced Themer for Bricks, bạn có thể tìm hiểu về Advanced Themer for Bricks để biết rõ hơn về Plugin bổ trợ rất tốt cho Bricks Theme.
Bước 1: Tạo và quản lý Class
Advanced Themer for Bricks cho phép bạn tạo và quản lý tất cả các class mà bạn đang sử dụng trên website của mình. Bạn có thể tạo danh mục cho class để lưu trữ class vào khi bạn xem lại sẽ dễ hiểu hơn, đặt tên cho từng class cho dễ nhớ.
Tiếp theo chia sẻ trong bài viết này chúng tôi đặt tên cho class áp dụng cho container là dm-Horizontal-Scrolling và class cho block là dm-Block-Horizontal-Scrolling, như 2 hình ảnh phía trên. Tạo xong class quay trở lại giao diện soạn thảo của Bricks và tiếp hành áp dụng mã CSS cho các phần tử.
Khi áp dụng class vào phần tử thì tại phần CSS của phần tử sẽ hiện nội dung giống như khi bạn thêm mã trực tiếp vào phần này.
Các bạn hãy thực hành để trải nghiệm nhé.
