Thiết kế web hiện đại luôn hướng tới việc phá vỡ mạng lưới. Điều này được thực hiện bởi các phần tử so le và các điểm nhấn tạo điểm nhấn ở các vị trí phá vỡ cấu trúc bình thường của lưới. Bạn có thể thấy chúng được áp dụng trong các thiết kế lưới bị hỏng trên các bố cục tuyệt vời Divi. Điều này thường liên quan đến việc di chuyển các mô-đun ra bên ngoài cột hoặc hàng để chúng mở rộng ra bên ngoài vùng chứa hoặc chồng lên các phần tử khác trên trang. Nhưng bạn có thể không nghĩ đến việc di chuyển cột.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sắp xếp các cột và mô-đun Divi cho các thiết kế lưới phá vỡ độc đáo. Với tin tức tùy chọn cột của Divi , bạn có thể dễ dàng di chuyển các cột cũng như các mô-đun chứa trong đó. Điều này cho phép bạn thiết kế cả mô-đun và cột với các kiểu độc đáo để có thiết kế lưới gãy sáng tạo.
Hãy bắt đầu nào!
khảo sát
Dưới đây là tổng quan về các ví dụ thiết kế mà chúng tôi sẽ xây dựng trong hướng dẫn này.
Những gì bạn cần để bắt đầu
Để bắt đầu, bạn cần những điều sau đây:
- Le Chủ đề Divi đã cài đặt và hoạt động
- Một trang mới được tạo để xây dựng từ đầu trên front-end (hàm tạo trực quan)
- Một số hình ảnh dùng để nội dung hư cấu
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Sự đình trệ của các cột và mô-đun để tạo ra một thiết kế lưới bị hỏng độc đáo trong Divi
Bắt đầu bằng cách tạo một phần thông thường mới với một hàng gồm hai cột.
Sau đó, thêm lời gọi vào mô-đun hành động trong cột 1.
Thay đổi văn bản tiêu đề thành "Mô-đun Divi" hoặc một tiêu đề ngắn khác mà bạn chọn.
Sau đó cập nhật mô-đun với màu nền tối, sau đó chỉnh sửa văn bản tiêu đề như sau:
Màu nền: #333333
Sắp xếp văn bản: trái
Tiêu đề phông chữ: đắng
Kích thước văn bản tiêu đề: 50px
Giãn cách dòng tiêu đề: 2px
Sau đó cập nhật nút gọi mô-đun hành động như sau:
Kích thước văn bản nút: 16px
Màu văn bản nút: #333333
Màu nền nút: Màu của
nút viền: #ffffff
Bán kính đường viền của nút: 25px
Khoảng cách giữa các chữ cái của các nút: 2px
Nút phông chữ: Kích thước Raleway của
Nút phông chữ: In đậm
Kiểu chữ chính: TT
Sau đó sao chép mô-đun và dán bản sao vào cột 2 để bạn có cùng lệnh gọi đến mô-đun hành động trong mỗi cột.
Cập nhật giãn cách dòng
Bây giờ thêm một số lề trên và dưới để nhường chỗ cho thiết kế.
Ký quỹ: 20% tăng, 20% giảm
Thêm hình nền của cột
Mặc dù chúng tôi sẽ không thể nhìn thấy chúng, chúng tôi sẽ thêm hình nền vào mỗi cột. Chúng sẽ hiển thị khi chúng ta di chuyển mô-đun của mình ra khỏi vùng chứa cột bằng phép dịch chuyển đổi.
Hãy tiếp tục, mở các cài đặt trong cột 1 và thêm hình nền.
Sau đó mở cài đặt cho cột 2 và thêm hình nền.
Thêm hộp bóng vào mỗi cột
Mở cài đặt cho cột 1 và thêm bóng của hộp sau:
Box Shadow: xem ảnh chụp màn hình
Hộp bóng Vị trí ngang: 0px
Vị trí dọc của hộp Shadow: 0px
Hộp bóng trải rộng: 100px
Màu bóng: rgba (151, 178, 193, 0.21)
Sau đó thêm kiểu bóng hộp tương tự vào cột 2. Để tăng tốc độ, bạn có thể sử dụng các tùy chọn nhấp chuột phải để sao chép kiểu bóng hộp vào cột 1, sau đó dán chúng vào kiểu bóng hộp của cột 2.
Bạn sẽ nhận thấy rằng các bóng trong hộp sẽ chồng lên nhau. Sử dụng màu ombre bán lì sẽ giúp tạo hiệu ứng nhiều lớp. Đây là ưu điểm chính của việc sử dụng bóng hộp trong thiết kế. Không giống như đường viền, bạn có thể thêm bóng lớn trông giống như đường viền nhưng không ảnh hưởng đến khoảng cách bố cục thực tế.
Các lớp phủ cột sử dụng Transform Translate
Tại thời điểm này, chúng tôi đã sẵn sàng chuyển các cột và mô-đun để hoàn thành thiết kế lưới gián đoạn. Đầu tiên, chúng ta cần di chuyển các cột ra rìa ngoài của trang. Sau đó, chúng ta có thể chuyển các mô-đun đến trung tâm sau.
Cột Stagger 1
Mở tham số cột 1 và thêm thuộc tính chuyển đổi dịch sau đây.
Chuyển đổi dịch trục X: 25%
Chuyển đổi dịch trục Y: -25% (máy tính để bàn), -5% (máy tính bảng)
Cột Stagger 2
Đối với cột 2, thêm thuộc tính chuyển đổi chuyển đổi sau.
Chuyển đổi dịch trục X: -25%
Chuyển đổi dịch trục Y: 25% (máy tính để bàn), 5% (máy tính bảng)
Bù đắp mô-đun sử dụng dịch chuyển đổi
Bây giờ chúng tôi đã sẵn sàng để trải rộng các mô-đun của mình bằng cách chuyển chúng ra khỏi vùng chứa cột. Điều này sẽ hiển thị hình nền của cột và cho phép chúng tôi thêm bóng vùng khác vào mô-đun để có thêm phần tử thiết kế chồng chéo.
Bù đắp mô-đun 1
Mở cài đặt gọi hành động của cột 1 và cập nhật các thông tin sau:
Chuyển đổi dịch trục X: -60%
Chuyển đổi dịch trục Y: 50% (máy tính để bàn), 10% (máy tính bảng)
Thêm bóng hộp vào mô-đun 1
Sau đó, thêm bóng của hộp sau vào mô-đun gọi hành động trong cột 1:
Box Shadow: xem ảnh chụp màn hình
Hộp bóng Vị trí ngang: 0px
Vị trí dọc của hộp Shadow: 0px
Hộp bóng trải rộng: 100px
Màu bóng: rgba (151,178,193,0.21)
Khoảng cách mô-đun 2
Để di chuyển mô-đun trong cột 2, hãy cập nhật như sau:
Chuyển đổi trục X dịch: 60%
Chuyển đổi trục dịch Y: -50% (máy tính để bàn), -10% (máy tính bảng)
Thêm bóng hộp vào mô-đun 2
Tiếp theo, chúng ta có thể thêm bóng hộp vào mô-đun kêu gọi hành động ở cột 2. Chúng ta cần làm cho bóng hộp này gần như trong suốt hoàn toàn vì nó sẽ chồng lên mô-đun 1 và chúng tôi không muốn làm cho việc đọc mô-đun trở nên khó khăn hơn. nội dung.
Box Shadow: xem ảnh chụp màn hình
Hộp bóng Vị trí ngang: 0px
Vị trí dọc của hộp Shadow: 0px
Hộp bóng trải rộng: 100px
Màu bóng: rgba (151,178,193,0.09)
Thêm khung hộp bóng
Để hoàn thành thiết kế, thêm bóng vùng vào đường kẻ đóng vai trò là thành phần thiết kế khung trong nền.
Box Shadow: xem ảnh chụp màn hình
Vị trí dọc của hộp Shadow: 0px
Màu bóng: #97b2c1
cuối cùng suy nghĩ
Hy vọng hướng dẫn này đã cung cấp cho bạn một chút ý tưởng về cách bạn có thể bù đắp các cột và mô-đun Divi để tạo các thiết kế lưới bị hỏng của riêng bạn. Kỹ thuật này rất đơn giản. Nó chủ yếu liên quan đến một số thuộc tính dịch chuyển đổi để bù đắp các cột và mô-đun, cũng như các bóng hộp để tạo ra một mẫu bị hỏng duy nhất. Vui lòng khám phá thêm các tùy chọn màu sắc và giới thiệu thêm các mod để xem thiết kế có thể đưa bạn đến đâu.
Hy vọng nhận được từ bạn trong các ý kiến.
