Bạn có muốn sử dụng mặt nạ và hoa văn cho phần Anh hùng của mình trong Divi ?
Mặt nạ và mẫu nền mới của Divi là một trong những tính năng thiết kế mới thú vị nhất của chúng tôi. Mỗi mặt nạ và mẫu có thể được kết hợp với các yếu tố nền khác (như màu sắc, hình ảnh và độ dốc) để tạo ra vô số sự kết hợp độc đáo chỉ với một vài cú nhấp chuột.
Hôm nay chúng tôi sẽ hướng dẫn bạn cách sử dụng Divi và mặt nạ và mẫu nền mới của nó để thiết kế một phần anh hùng.
Trong hướng dẫn này, chúng tôi sẽ trình bày các bước quan trọng cần thiết để tạo mặt nạ và các mẫu nền.
Chúng tôi thậm chí sẽ hướng dẫn cách định vị hình ảnh nền cho phù hợp với thiết kế mặt nạ. Điều này sẽ cung cấp cho bạn công cụ bạn cần tạo phần Anh hùng hoàn hảo cho trang web của mình trong vài phút.
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.
Đọc cũng: Divi: Cách tạo lưới hình ảnh đáp ứng với các liên kết và hiệu ứng di chuột
Phần ví dụ về Anh hùng với mặt nạ và hoa văn màu trắng.
Đây là phiên bản đen tối của cùng một phần Anh hùng với mặt nạ và hoa văn màu đen.
Với thiết kế này, bạn có thể dễ dàng thay đổi mặt nạ và vị trí mặt nạ chỉ với một vài cú nhấp chuột!
Tạo một trang mới với Divi Builder
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 Xây dựng
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung trống để bắt đầu thiết kế Divi.
Cách sử dụng Mặt nạ và Mẫu nền của Divi trên Phần anh hùng của bạn
1. Tạo cấu trúc bố cục
Đối với phần anh hùng này, chúng ta sẽ sử dụng cấu trúc bố cục cổ điển với tiêu đề và lời kêu gọi hành động ở bên trái và hình ảnh (hoặc thiết kế trực quan) ở bên phải.
Đối với ví dụ này, thiết kế trực quan của chúng tôi sẽ được tạo bằng cách sử dụng các tùy chọn nền của Divi. Nhưng trước khi chúng ta đến với nitty-gritty, chúng ta cần tạo một hàng hai cột để tiết kiệm không gian ở phía bên phải của trang để hiển thị mặt nạ nền phần và thiết kế mẫu của chúng ta.
2. Thêm tiêu đề và lời kêu gọi hành động
Trong cột bên trái (cột 1), thêm mô-đun Văn bản cho tiêu đề chính của bạn, mô-đun Văn bản cho văn bản phụ đề và mô-đun Nút cho nút của bạn.
3. Thêm khoảng cách dọc vào phần
Để làm cho thiết kế nền của chúng ta trông cao và đẹp, chúng ta cần thêm chiều cao thẳng đứng vào phần. Một cách đơn giản để làm điều này là thêm phần đệm vào đầu và cuối phần. Hãy nhớ rằng chúng ta cần điều chỉnh phần đệm trên màn hình máy tính bảng và điện thoại để nhường chỗ cho thiết kế nền sau khi các cột được xếp chồng lên nhau theo chiều dọc.
Mở cài đặt phần. Trong tab thiết kế, cập nhật phần đệm như sau:
- Đệm:
- Máy tính để bàn: 20vw trên, 20vw dưới
- Máy tính bảng: Đầu 8vw, Dưới 48vw
- Điện thoại: 8vw trên, 70vw dưới
4. Thêm hình nền và gradient
Tiếp theo, chúng ta có thể thêm hình nền và gradient vào phần này. Hãy nhớ rằng tiêu điểm chính của hình nền sẽ được hiển thị ở phía bên phải của phần, vì vậy hãy sử dụng hình ảnh có những gì bạn muốn xem ở phía bên phải.
Đối với ví dụ này, chúng tôi đang sử dụng một hình ảnh có đường chân trời của thành phố. Bên phải của hình ảnh có các tòa nhà gần hơn và trông đẹp hơn, vì vậy nó hoạt động thực sự tốt.
Dưới tab Hình ảnh nền, tải lên hình ảnh trong nền phần.
Trong Divi, bạn có thể dễ dàng thêm một dải màu trên hình nền. Dưới tab Nền Gradient, thêm gradient sau vào nền của phần:
- Dừng Gradient:
- 0%: # 3e22ff
- 100%: rõ ràng
- Hình nền vuông phía trên Gradient: CÓ
5. Tạo mẫu nền cho phần
Bây giờ chúng ta đã có sẵn hình nền và độ dốc, chúng ta có thể thêm một mẫu nền để hoàn thành thiết kế.
Trong ví dụ này, chúng ta sẽ sử dụng một mẫu tinh tế chỉ thêm một chút họa tiết để tạo cho nó một cái nhìn độc đáo hơn.
Dưới tab Các mẫu nền, cập nhật những điều sau:
- Mô hình nền: Tufted
LỪA : Với các mẫu nền, tốt nhất bạn nên giữ cho nó thật tinh tế. Hãy thử sử dụng kích thước tùy chỉnh cho các thiết kế nhỏ hơn, sau đó giảm độ mờ của màu.
6. Tạo mặt nạ nền cho phần
Với mẫu nền của chúng tôi đã có, cuối cùng chúng tôi đã sẵn sàng thử nghiệm một mặt nạ nền hoàn toàn mới cho thiết kế của mình. Có một loạt các tùy chọn và biến thể để bạn lựa chọn. Đối với ví dụ này, chúng tôi sẽ sử dụng mặt nạ tổ ong.
Dưới tab Mặt nạ nền, cập nhật những điều sau:
- Mặt nạ: Tổ ong
- Màu mặt nạ: #ffffff
- Kích thước: Bìa
7. Điều chỉnh vị trí hình nền
Vì chúng ta đang sử dụng mặt nạ nền, một phần của hình nền của chúng ta bị che (hoặc "mặt nạ").
Trong ví dụ này, chúng tôi sẽ đảm bảo rằng phần dưới cùng bên phải của hình ảnh được hiển thị rõ ràng nhất và chúng tôi sẽ di chuyển nó một chút sang bên phải để hiển thị nhiều tòa nhà hơn.
Trong tab Hình ảnh, hãy cập nhật thông tin sau:
- Vị trí hình nền: Dưới cùng bên phải
- Hình nền Chênh lệch ngang: -4vw
8. Sử dụng một chế độ hòa trộn
Một cách để sáng tạo với tất cả các yếu tố nền này là thêm chế độ hòa trộn. Chế độ hòa trộn có thể được thêm vào bất kỳ tùy chọn nền nào và chúng có thể được sử dụng để trộn nhiều lớp nền (hình ảnh, gradient, mặt nạ, v.v.) theo những cách sáng tạo.
Đối với ví dụ này, chúng tôi sẽ trộn hình nền với màu gradient. Để làm điều này, hãy nhấp vào tab Hình ảnh nền và thêm chế độ hòa trộn để trộn màu gradient với hình nền như sau:
- Hỗn hợp ảnh nền: Multiply
9. Điều chỉnh mặt nạ nền cho điện thoại di động
Điều quan trọng là đảm bảo rằng thiết kế mặt nạ nền trông cũng đẹp trên thiết bị di động. May mắn thay, các tùy chọn tích hợp giúp quá trình này dễ dàng hơn.
Hãy nhớ rằng chúng tôi đã thêm phần đệm bổ sung trên máy tính bảng và điện thoại để nhường chỗ cho thiết kế nền của chúng tôi.
Bây giờ tất cả những gì chúng ta cần làm là sử dụng các tùy chọn biến đổi nền và tỷ lệ khung hình để điều chỉnh mặt nạ cho thiết bị di động.
Dưới tab Mặt nạ nền, bật các tùy chọn đáp ứng và cập nhật những điều sau:
Phiên bản dành cho máy tính bảng
- Biến đổi mặt nạ: Lật dọc, Lật ngang, Xoay
- Tỷ lệ khung hình mặt nạ: hình vuông
Phiên bản điện thoại
- Biến đổi mặt nạ: Lật dọc, Lật ngang, Xoay
- Tỷ lệ khung hình mặt nạ: Chân dung
Kết quả
Kiểm tra thiết kế chúng tôi đã tạo cho đến nay.
Máy tính desktop
Phiên bản dành cho máy tính bảng
Phiên bản điện thoại
10. Tạo phiên bản tối
Nếu bạn muốn có phiên bản tối của thiết kế này, chỉ cần thay đổi màu mặt nạ nền thành màu tối (như màu đen).
Sau đó, thay đổi màu của mô hình thành màu đen.
Sau đó, thay đổi tiêu đề và văn bản phụ đề thành màu trắng. Và bạn cũng có thể muốn cập nhật màu nút.
Đây là phiên bản tối trông như thế nào.
Kết quả cuối cùng
Đây là một cái nhìn khác về kết quả cuối cùng của chúng tôi.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Thiết kế phần Anh hùng cho Website rất vui với mặt nạ và các mẫu nền từ Divi. Tùy chọn nền rất dễ thay đổi để có được thiết kế hoàn hảo. Và có rất nhiều tùy chọn khác mà bạn có thể sử dụng (như các chế độ hòa trộn) để tạo ra các hình nền độc đáo hơn nữa.
Ngoài ra, bạn có thể thêm mặt nạ và mẫu vào bất kỳ phần tử Divi nào, không chỉ các phần. Vì vậy, hãy thử nghiệm vui vẻ!
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 thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách 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.
...
