Bạn có muốn tạo chuyển tiếp nền giữa các phần tử Divi ?
Tạo chuyển tiếp thiết kế nền liền mạch giữa các yếu tố Divi là một cách tuyệt vời để nâng cao thiết kế của Website Divi.
Điều này cho phép bạn chuyển đổi liền mạch gradient, mẫu và mặt nạ nền giữa một đường và một phần theo cách sáng tạo.
Ví dụ: bạn có thể có một sự chuyển đổi hoa văn hoặc mặt nạ với các màu sắc khác nhau mà không làm mất sự liên kết tổng thể và giao diện đối xứng của thiết kế.
Trong hướng dẫn này, chúng tôi sẽ sử dụng các tùy chọn thiết kế nền có sẵn của Divi để tạo ra sự chuyển đổi thiết kế nền liền mạch giữa Phần Divi và Đường. Ứng dụng và tính linh hoạt của thiết kế này là vô hạn, đưa các tùy chọn thiết kế nền của Divi lên một tầm cao mới!
Chúng ta hãy bắt đầu.
khảo sát
Dưới đây là một cái nhìn nhanh về thiết kế mà chúng tôi sẽ xây dựng trong hướng dẫn này.
Dưới đây là một số thiết kế mẫu khác có thể thực hiện được chỉ với một vài thay đổi đơn giản đối với mặt nạ và mẫu nền.
Tạo một trang mới với Divi Builder
Để bắt đầu, bạn cần thực hiện những việc sau:
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Tạo chuyển tiếp liền mạch trong nền giữa phần Divi và một đường thẳng
Tạo tiêu đề làm nội dung trình giữ chỗ
Đọc cũng: Divi: Cách tạo tab với hiệu ứng di chuột từ các dòng
Trước khi bắt đầu, chúng ta cần thêm tiêu đề như nội dung hư cấu. Để bắt đầu, hãy thêm hàng một cột vào phần mặc định của trang.
Sau đó, thêm một mô-đun Văn bản vào dòng.
Thêm văn bản kích thước H1.
Dưới tab Thiết kế, cập nhật thiết kế văn bản tiêu đề như mong muốn.
- Phông chữ: Roboto Condensed
- Độ đậm phông chữ: Bold
- Phong cách: TT
- Căn chỉnh văn bản: Căn giữa
- Màu văn bản: # 000000
- Kích thước văn bản tiêu đề: 4vw
- Khoảng cách chữ: 0.1em
- Chiều cao dòng: 1.3em
Thiết kế nền phần
Đã thêm phần đệm vào phần
Khi tiêu đề giả đã có, hãy mở cài đặt phần và cập nhật khoảng cách như sau:
- Đệm (Trên và Dưới): 15vw
Đã thêm gradient nền vào phần
Bây giờ chúng tôi có nhiều không gian hơn để làm việc, chúng tôi đã sẵn sàng thêm thiết kế nền của mình vào phần này. Dưới tab Nền Gradient, thêm các điểm gradient sau:
- Dừng Gradient:
- 0%: # 4f0f75 (ở mức 0%)
- 25%: # 2843c9 (ở mức 25%)
- 50%: # 4ae2e0 (ở mức 50%)
- 75%: # 3881ff (ở mức 75%)
- 100%: # 4f0f75 (ở mức 100%)
Thêm một mẫu nền vào phần
Dưới tab Mẫu nền, cập nhật những điều sau:
- Mô hình: Sọc chéo
- Màu hoa văn: rgba (79,15,117,0.23)
- Chuyển đổi: Xoay
- Kích thước mô hình: Kích thước tùy chỉnh
- Chiều rộng: 7vw
- Chiều cao: 5vw
- Mô hình lặp lại Nguồn gốc: Trung tâm
Lưu ý: Đảm bảo sử dụng đơn vị chiều dài VW cho chiều rộng và chiều cao của mẫu. Và, hãy đảm bảo đặt điểm gốc lặp lại thành "trung tâm". Điều này sẽ giữ cho mẫu nền ở cùng một vị trí với mẫu nền mà chúng ta sẽ thêm vào hàng sau.
Thêm mặt nạ nền vào phần
Dưới tab Mặt nạ nền, thêm những điều sau:
- Mặt nạ nền: Layer Blob
- Màu mặt nạ: rgba (0,0,0,0.7)
- Chiều rộng mặt nạ: 100vw
- Chức vụ: Trung tâm
Lưu ý: Cũng giống như với mẫu, chúng ta cần định kích thước mặt nạ bằng đơn vị chiều dài VW. Chúng ta cũng cần đặt mặt nạ ở vị trí trung tâm.
Thiết kế nền đường
Sao chép và dán nền phần vào nền hàng
Để tăng tốc quá trình thiết kế nền đường, hãy sao chép cài đặt nền phần.
Sau đó dán nền trên dòng hiện có.
Tại thời điểm này, bạn đã có thể thấy cách mẫu nền và mặt nạ trên đường chuyển tiếp liền mạch với nền của phần.
Có vẻ như đường kẻ có nền trong suốt, nhưng nó thực sự là cùng một mẫu và mặt nạ được sử dụng trong phần có cùng kích thước và vị trí.
Điều chỉnh kích thước hàng và phần đệm bằng VW
Tiếp theo, chúng ta cần cung cấp cho hàng của mình một chiều rộng tùy chỉnh bằng cách sử dụng đơn vị chiều dài VW. Cập nhật thông tin sau:
- Chiều rộng: 75vw
- Chiều rộng tối đa: 75vw
- Đệm (Trên, Dưới, Trái và Phải): 10vw
Điều chỉnh điểm dừng gradient trên dòng
Tiếp theo, chúng ta cần điều chỉnh các điểm dừng của gradient trên nền đường để chuyển tiếp liền mạch sang gradient nền của phần.
Dưới tab Nền Gradient, chúng tôi sẽ giữ ba điểm gradient ở giữa được kế thừa từ nền phần) và loại bỏ các điểm dừng gradient đầu tiên và cuối cùng.
Sau đó, đặt điểm dừng đầu tiên là 0% và điểm dừng thứ ba là 100%. Sau khi hoàn thành, bạn sẽ có các gradient sau đây.
- Dừng Gradient
- 0%: # 2843c9
- 50%: # 4ae2e0
- 100%: # 3881ff
Thêm bóng hộp vào dòng
Để nâng cao thiết kế một chút và nhấn mạnh sự chuyển tiếp liền mạch của nền, chúng ta có thể thêm bóng hộp vào hàng.
- Box Shadow: xem ảnh chụp màn hình
- Vị trí dọc: 0px
- Box Shadow Blur Sức mạnh: 4vw
- Màu bóng: rgba (0,0,0,0.5)
Điều chỉnh màu của mẫu nền đường
Bây giờ chúng ta đã có tất cả các yếu tố nền, chúng ta có thể bắt đầu điều chỉnh màu sắc để có một thiết kế sáng tạo hơn.
Theo tùy chọn Mẫu nền hàng, cập nhật những điều sau:
- Màu hoa văn: rgba (255,255,255,0.23)
Điều chỉnh màu mặt nạ nền đường
Chúng tôi cũng có thể cập nhật màu mặt nạ cho dòng để thực sự làm cho thiết kế nổi bật.
Dưới tab Mặt nạ nền, cập nhật những điều sau:
- Màu mặt nạ: #ffffff
- Biến đổi mặt nạ: đảo ngược
Kết quả cuối cùng
Chúng ta hãy xem kết quả cuối cùng.
Tải DIVI ngay bây giờ !!!
Nhiều khả năng hơn
Dưới đây là một số thiết kế mẫu khác có thể thực hiện được chỉ với một vài thay đổi đơn giản đối với mặt nạ và mẫu nền.
Xem thêm: Divi: Cách sử dụng "Gradient Builder" để làm đẹp hình ảnh của bạn
Tải DIVI ngay bây giờ !!!
Kết luận
Chìa khóa để tạo ra các chuyển tiếp thiết kế nền liền mạch trong Divi là sử dụng các đơn vị độ dài VW này một cách khôn ngoan.
Đầu tiên, chúng ta cần tạo một thiết kế nền phần phù hợp với chiều rộng của khung nhìn trình duyệt (từ vị trí chính giữa trên trang). Sau khi hoàn thành, chúng ta có thể sử dụng cùng một thiết kế nền một dòng. Sau đó, chúng tôi chỉ có một số điều chỉnh về độ dốc và màu sắc để có một thiết kế tuyệt vời.
Hy vọng rằng kỹ thuật này sẽ bổ sung một kỹ năng thiết kế hữu ích khác cho các dự án trong tương lai.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
