Bạn có muốn tạo một nền độc đáo và tuyệt đẹp với mặt nạ và các mẫu nền từ Divi ?
Các mẫu và mặt nạ nền mới có tính năng Divi được sử dụng phổ biến nhất cho các phần của trang. Nhưng chúng ta cũng có thể thêm chúng vào tiêu đề!
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm mặt nạ và mẫu nền vào mẫu tiêu đề Divi sử dụng hàm tạo chủ đề.
Đó là một cách tuyệt vời để tạo các thiết kế tiêu đề hoàn toàn độc đáo cho Website.
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ẽ tạo trong hướng dẫn này.
Chuyển đến trình tạo chủ đề của Divi và bắt đầu tạo tiêu đề chung
Từ bảng điều khiển WordPress, hãy chuyển đến Divi> Trình tạo chủ đề
Bấm vào “Thêm tiêu đề chung”
Sélectionnez “Xây dựng tiêu đề toàn cầu”.
Sau đó, bạn có thể bắt đầu thiết kế một tiêu đề mới bằng Trình tạo Divi.
Cách thêm Mặt nạ và Mẫu nền vào Tiêu đề Divi
Tạo nền phần với màu nền và hoa văn
Để bắt đầu, hãy mở cài đặt của phần hiện có.
Dưới tab Nội dung, cập nhật các tùy chọn nền với các cài đặt sau:
Màu nền:
- Nền: # 262d3f
BackgroundPattern:
- Mô hình: Thuốc
- Màu hoa văn: rgba (255,255,255,0.1)
- Kích thước mô hình: kích thước tùy chỉnh.
- Chiều rộng mẫu: 1px
Đệm
Dưới tab Thiết kế, cập nhật phần đệm phần như sau:
- Đệm (Trên và Dưới): 0px
Điều này sẽ làm giảm không gian dọc của tiêu đề một chút.
Thêm một hàng với bố cục cột sau
Đã thêm nội dung tiêu đề trình giữ chỗ (một menu và một nút)
Trong cột bên trái của hàng, hãy thêm một menu mới.
Chọn một menu.
Sau đó, thêm logo và sử dụng cài đặt để tùy chỉnh menu và logo theo ý muốn.
Trong cột bên phải, thêm một mô-đun nút và cũng có thể tùy chỉnh nó theo ý thích của bạn.
Tạo nền đường với gradient, mặt nạ và mẫu
Gradient
Mở cài đặt hàng có chứa menu và nút của bạn. Sau đó, cập nhật các tùy chọn nền với các cài đặt nền sau:
Gradient nền:
- Gradient Dừng 1 (50%): Rõ ràng
- Gradient Dừng 2 (75%): # ff4c00
- Chỉ đạo: 90 độ
Họa tiết
- Mô hình: Thuốc
- Màu hoa văn: rgba (38,45,63,0.48)
- Kích thước mẫu: 1 pixel
- Chênh lệch dọc: 20px
Lưu ý: Độ lệch dọc của mẫu được đặt thành 20px vì có phần đệm trên cùng 20px trên phần phía trên đường thẳng. Điều này đảm bảo rằng mẫu phần phù hợp với mẫu hàng.
Mặt nạ nền
- Mặt nạ: Xương cá
- Màu mặt nạ: # 262d3f
LƯU Ý: Đối với tiêu đề, tốt nhất nên giữ kích thước mặt nạ được đặt thành "Mở rộng để lấp đầy" để nó bao phủ không gian ngang mà không ảnh hưởng đến thiết kế của mặt nạ.
Những lần chạm cuối cùng vào dòng
Xem thêm: Divi: Cách sử dụng "Gradient Builder" để làm đẹp hình ảnh của bạn
Để hoàn thành thiết kế, chúng tôi sẽ thêm bán kính đường viền và một vài chỉnh sửa khác cho đường.
Bán kính, đường viền và khoảng cách đường viền
Dưới tab Thiết kế, cập nhật phần đệm như sau:
- Đệm (Trên và Dưới): 5px
Sau đó, cung cấp cho hàng một góc tròn đẹp để có thêm yếu tố thiết kế.
- Góc tròn: 50px
- Chiều rộng đường viền trái: 50px
- Màu viền trái: # 262d3f
Chúng ta cần cung cấp một đường viền ở phía bên trái của hàng vì cạnh hình vuông của mặt nạ sẽ tràn ra hàng mặc dù các góc được bo tròn.
Kết quả cuối cùng
Chúng ta hãy xem kết quả cuối cùng.
Gradient là một chút tinh tế, vì vậy đây là một cái nhìn về nó trông như thế nào.
Và đây là thiết kế tiêu đề máy tính để bàn và thiết bị di động.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Thiết kế nền tiêu đề chỉ là phần nổi của tảng băng chìm. Có rất nhiều điều phải khám phá với các tùy chọn nền có sẵn trong Divi.
Chúng tôi hy vọng hướng dẫn này đã giúp bạn hiểu cách các mẫu và mặt nạ nền của Divi có thể kết hợp với nhau để tạo ra một thiết kế nền độc đáo cho tiêu đề của bạn.
Hãy thử nghiệm với nhiều kết hợp thiết kế nền khác để phù hợp với thiết kế của riêng bạn. Website hoặc dự án sắp tới của bạ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.
...
