Divi , chủ đề WordPress phổ biến, được biết đến với các mô-đun linh hoạt cho phép các nhà thiết kế và phát triển trang web tạo ra bố cục đẹp mắt một cách dễ dàng. Trong số các mô-đun ấn tượng của nó, Mô-đun phân chia Divi nổi bật như một công cụ độc đáo cho phép người dùng tạo ra các phân chia quyến rũ. Trong bài đăng trên blog này, chúng ta sẽ đi sâu vào thế giới hấp dẫn của các bộ chia độ dốc và khám phá cách bạn có thể tận dụng Mô-đun bộ chia Divi để nâng cao thiết kế của mình. Chúng ta sẽ xem xét kỹ hơn cách hoạt động của bộ chia độ dốc và cung cấp cho bạn những ví dụ đầy cảm hứng để khơi dậy khả năng sáng tạo của bạn.
Xem trước
Đây là bản xem trước về cách thiết kế gradient của chúng tôi sẽ trông như thế nào ở phần cuối.
Cách tạo dải phân cách bằng mô-đun phân chia của Divi
Tồn tại nhiều phương pháp để xây dựng bộ chia bằng Mô-đun bộ chia của Divi. Theo mặc định, mô-đun hiển thị một đường làm dải phân cách. Tuy nhiên, có thể tắt dòng này và sử dụng cài đặt Nền của mô-đun để tạo một dải phân cách có thể được tùy chỉnh bằng nhiều tùy chọn Nền khác nhau như màu sắc, độ dốc, hình ảnh, v.v. Thay vì hiển thị dải phân cách thực tế, chúng ta sẽ tập trung vào việc tạo kiểu cho vùng chứa của dải phân cách để tạo ra một dải phân cách có kiểu dáng độc đáo.
Ẩn dải phân cách
Thủ tục rất dễ dàng. Trước tiên, hãy thêm Mô-đun dải phân cách vào bố cục của bạn, sau đó ẩn dải phân cách trong tab nội dung.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờ
Nền phân chia
Tiếp theo, chọn loại nền bạn muốn sử dụng từ menu Cài đặt nền trên tab Nội dung. Chúng tôi sẽ tập trung vào các tùy chọn Background gradient trong bài đăng này.
Thêm kích thước và khoảng cách
Để xây dựng một dải phân cách kiểu cách với bất kỳ kích thước hoặc hình dạng nào, hãy sử dụng các tùy chọn Định cỡ và Khoảng cách trên tab Thiết kế để điều chỉnh chiều cao và chiều rộng của vùng chứa dải phân cách. Để tạo kích thước mong muốn, hãy sử dụng chiều rộng và chiều cao, chiều rộng tối đa và chiều cao tối đa, căn chỉnh mô-đun cũng như khoảng đệm trên và dưới.
Thêm bán kính đường viền
Để tạo kiểu thêm cho hình dạng, hãy thêm các tùy chọn đường viền như Bán kính đường viền. Các góc có thể được điều chỉnh chung hoặc riêng biệt để tạo ra những hình dạng hấp dẫn. Đối với một thiết kế đặc biệt, bạn có thể thêm Độ rộng đường viền, Kiểu, v.v.
Bộ chia độ dốc
Chúng tôi sẽ sử dụng trang đích từ Gói bố cục Home Baker miễn phí có trong Divi cho bộ chia độ dốc đầu tiên của chúng tôi. Tác phẩm nghệ thuật của gói bố cục này có độ dốc màu nâu và đường viền tối, mạnh mẽ. Chúng tôi sẽ sao chép điều này với dải màu của mình bằng cách sử dụng bảng màu của gói bố cục. Chúng ta sẽ sử dụng Mô-đun phân chia đã có trong phần anh hùng cho hình minh họa đầu tiên của chúng ta. Điều này tuy đơn giản nhưng lại tạo ra tác động trực quan lớn. Đây là bố cục trước khi chúng tôi thêm Mô-đun phân chia để tham khảo.
Hiển thị
Chọn Không cho Hiển thị Bộ chia trong tùy chọn Hiển thị cho Mô-đun Bộ chia.
- Hiển thị dải phân cách: Không
Dốc
Chọn tab Background gradient bằng cách cuộn xuống Background. Chúng ta sẽ thêm năm điểm dừng chuyển màu cho cái này. Các giá trị mặc định cho các tham số gradient khác sẽ được sử dụng. Các thông số cho mỗi điểm dừng chuyển màu được liệt kê bên dưới.
- Điểm dừng chuyển màu đầu tiên: 0px, #dcc087
- Điểm dừng chuyển màu thứ hai: 16px, #e6b060
- Điểm dừng chuyển màu thứ ba: 22px, #f19d33
- Điểm dừng chuyển màu thứ tư: 31px, #f49826
- Điểm dừng chuyển màu thứ năm: 48px, #3b261e
Pixel nên được sử dụng làm đơn vị gradient. Màu sắc chúng tôi đang tìm kiếm hiện đã có sẵn. Tất cả những gì còn lại phải làm là tối ưu hóa kích thước.
- Đơn vị chuyển màu: Pixel
Định cỡ
Sau đó chọn tab Thiết kế. Đặt 100% cho Chiều rộng trong Định cỡ. Tất cả ba kích thước thiết bị phải có Chiều cao được đặt thành 40px. Việc đóng mô-đun sẽ lưu cài đặt của bạn.
- Chiều rộng: 100%
- Chiều cao: 40px
Xem trước lần cuối
Bây giờ ở đây chúng ta có bản xem trước cuối cùng về thiết kế gradient đang hoạt động.
Kết thúc suy nghĩ
Điều đó kết thúc cuộc thảo luận của chúng ta về việc sử dụng Mô-đun phân chia của Divi để tạo các bộ chia độ dốc. Để tạo các dải phân cách độ dốc tùy chỉnh, hãy sử dụng tùy chọn độ dốc trong Mô-đun phân chia. Chúng ta có thể tạo các dải phân cách theo nhiều kích cỡ và hình dạng khác nhau bằng cách sử dụng các tùy chọn góc viền, khoảng cách và kích thước. Chúng ta có thể thiết kế các dải phân cách chuyển màu đặc biệt, nổi bật giữa đám đông chỉ bằng một vài lựa chọn cơ bản.
