Bạn có muốn sử dụng lớp phủ mẫu nền và mặt nạ của Divi không?
Với cuối cùng phiên bản của mặt nạ nền và tính năng của mô hình nền của Divi, bạn có thể tạo các phần Anh hùng độc đáo cho Website. Phần anh hùng là phần đầu tiên của Website và đó là điều đầu tiên của bạn khách xem trước khi cuộn Website, vì vậy điều quan trọng là phải bắt mắt!
Bài viết này sẽ hướng dẫn bạn cách tạo năm mặt nạ nền và lớp phủ hoa văn độc đáo mà bạn có thể áp dụng cho ảnh nền để tạo ra các Phần anh hùng thực sự tuyệt đẹp.
Hướng dẫn này sẽ bao gồm các bước cần thiết để tạo từng phần Anh hùng và cung cấp cho bạn các công cụ cần thiết để tạo phần Anh hùng nổi bật cho trang web của bạn trong vài phút.
Hãy bắt đầu nào!
khảo sát
Dưới đây là tổng quan nhanh về năm Phần anh hùng mà chúng tôi sẽ tạo trong bài viết này ngày hôm nay.
Tải DIVI ngay bây giờ !!!
Các thiết kế rất tinh tế, đơn giản và hiệu quả.
Đọc cũng: Divi: Cách sử dụng "Gradient Builder" để làm đẹp hình ảnh của bạ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.
Năm ví dụ về mặt nạ nền và lớp phủ mẫu để áp dụng cho hình nền
Đầu tiên, hãy tạo phần Anh hùng
Tất cả các thiết kế mẫu của chúng tôi đều sử dụng cùng một cấu trúc phần, hàng và cột, vì vậy hãy thiết lập chúng ngay bây giờ.
1. Tạo cấu trúc bố cục
Thêm một hàng vào trang của bạn, sau đó nhấp vào biểu tượng "+" màu xanh lục để hiển thị cấu trúc cột và chọn cột đầu tiên, cột có chiều rộng đầy đủ.
2. Thêm khoảng cách phần
Bây giờ chúng ta đã xác định hàng và cột của mình, đã đến lúc thêm một số khoảng cách vào phần.
Trên tab Khoảng cách, cập nhật những điều sau:
- Máy tính để bàn: 400 pixel (Trên cùng và Dưới cùng)
- Máy tính bảng: 200 pixel (Trên và Dưới); 25px (Trái và Phải)
- Điện thoại: 50 pixel (Trên và Dưới); 25px (Trái và Phải)
Thiết kế phần anh hùng # 1
Hãy thiết kế phần Hero đầu tiên.
Tải DIVI ngay bây giờ !!!
1. Thêm văn bản tiêu đề
Nhấp vào biểu tượng “+” màu xám để hiển thị thư viện mô-đun. Di chuyển đến văn bản và nhấp để tải.
Nhập văn bản tiêu đề, sau đó dưới tab Tiêu đề văn bản, định cấu hình các cài đặt này:
- Phông chữ tiêu đề: Work Sans
- Màu văn bản: Trắng #ffffff
- Kích thước văn bản tiêu đề:
- Máy tính để bàn: 3 em
- Máy tính bảng: 2,2 em
- Điện thoại: 1.4em
2. Thêm mô-đun nút
Thêm một nút và định cấu hình các cài đặt này:
- Dưới tab Nội dungs: Tìm hiểu thêm
- Dưới tab Alignment, chọn: Trung tâm
- Bấm vào Sử dụng các kiểu tùy chỉnh cho nút sau đó cấu hình:
- Kích thước văn bản nút:
- Máy tính để bàn: 20px
- Máy tính bảng: 16px
- Điện thoại: 14px
- Màu văn bản nút: #ffffff
- Nền: # 1d1d1d
- Chiều rộng đường viền nút: 0
- Bán kính viền: 0
- Khoảng cách chữ cái: 3 điểm
- Phông chữ nút: Work Sans
- Kiểu phông chữ: TT
- Kích thước văn bản nút:
3. Thêm hình nền
Bây giờ của chúng tôi nội dung được cấu hình, đã đến lúc bắt đầu thiết kế nền của phần này.
- Đi tới chuyển đổi nền và nhấp vào tab thứ 3, tab hình ảnh, sau đó nhấp vào “Thêm hình nền”.
- Thao tác này sẽ hiển thị thư viện phương tiện của bạn, nơi bạn có thể chọn ảnh hoặc tải ảnh mới lên.
- Khi bạn đã chọn ảnh của mình, hãy nhấp vào nút "Tải lên hình ảnh" ở góc dưới bên phải.
4. Thêm một mẫu nền
Bây giờ chúng ta đã thiết lập hình nền của mình, hãy thêm một mẫu.
- Trong tab Tiểu sử, điều hướng đến tab thứ 5, tab Mẫu nền, sau đó nhấp vào “Thêm hình nền”.
- Sélectionnez Chần chừ từ menu thả xuống và định cấu hình các cài đặt này:
- Màu hoa văn - rgba (255,255,255,0.31)
- Biến đổi mẫu: không có
- Kích thước: Kích thước thực tế
- Mô hình lặp lại Nguồn gốc: Trên cùng Dưới cùng
- Lặp lại mẫu: Lặp lại
- Chế độ hòa trộn: bình thường
5. Thêm mặt nạ nền
Bây giờ chúng ta đã thiết lập hình nền và mẫu, hãy thêm mặt nạ nền.
- Trong tab Tiểu sử, điều hướng đến tab thứ 6, tab Mặt nạ nền, sau đó nhấp vào “Thêm mặt nạ nền”.
- Sélectionnez hạt đậu từ menu thả xuống và định cấu hình các cài đặt này:
- Màu mặt nạ: rgba (0,0,0,0.36)
- Tỷ lệ khung hình mặt nạ: hình chữ nhật ngang
- Kích thước: Kéo dài để lấp đầy
Vì thế ! Bây giờ bạn có một phần Anh hùng được thiết kế đẹp mắt.
Phần thiết kế Hero # 2
Bây giờ chúng ta hãy thiết kế phần anh hùng thứ hai.
1. Thêm hình nền và đặt chế độ hòa trộn thành Overlay
Chọn hình nền của bạn, đặt chế độ hòa trộn thành Overlay và thêm lớp phủ màu rgba (10,10,10,0.64).
2. Thêm một mẫu nền
Bây giờ chúng ta đã thiết lập hình nền, hãy thêm một mẫu nền.
- Trong tab Nền, chuyển đến tab thứ 5, tab Mẫu nền, sau đó nhấp vào “Thêm hình nền”.
- Sélectionnez Chần chừ từ menu thả xuống và định cấu hình các cài đặt này:
- Màu hoa văn - rgba (255,255,255,0.09)
- Biến đổi mẫu: không có
- Kích thước: Bìa
- Mẫu lặp lại Nguồn gốc: Trên cùng bên trái
- Lặp lại mẫu: Lặp lại
- Chế độ hòa trộn: bình thường
3. Thêm mặt nạ nền
Bây giờ chúng ta đã thiết lập hình nền và mẫu, hãy thêm mặt nạ nền.
- Trong tab Tiểu sử, điều hướng đến tab thứ 6, tab Mặt nạ nền, sau đó nhấp vào “Thêm mặt nạ nền”.
- Sélectionnez Caret từ menu thả xuống và định cấu hình các cài đặt này:
- Màu mặt nạ: rgba (0,0,0,0.36)
- Biến đổi mặt nạ: Không có
- Tỷ lệ khung hình: hình chữ nhật ngang
- Kích thước mặt nạ: Kéo dài để lấp đầy
- Chế độ hòa trộn mặt nạ: Bình thường
Phần thiết kế Hero # 3
Bây giờ chúng ta hãy thiết kế phần Anh hùng thứ ba.
1. Thêm hình nền và đặt chế độ hòa trộn thành Overlay
Chọn hình nền của bạn, đặt chế độ hòa trộn thành Overlay và thêm lớp phủ màu rgba (10,10,10,0.39).
2. Thêm một mẫu nền
Bây giờ chúng ta đã thiết lập hình nền của mình, hãy thêm một mẫu nền.
- Trong tab Tiểu sử, điều hướng đến tab thứ 5, tab Mẫu nền, sau đó nhấp vào “Thêm hình nền”.
- Sélectionnez Sọc chéo 2 từ menu thả xuống và định cấu hình các cài đặt này:
- Màu hoa văn - rgba (0,0,0,0.06)
- Biến đổi mẫu: không có
- Kích thước: Kích thước thực tế
- Mẫu lặp lại Nguồn gốc: Trên cùng bên trái
- Lặp lại mẫu: Lặp lại
- Chế độ hòa trộn: Bình thường
3. Thêm mặt nạ nền
Bây giờ chúng ta đã thêm một hình nền và một mẫu, hãy thêm một mặt nạ nền.
- Trong tab Tiểu sử, điều hướng đến tab thứ 6, tab Mặt nạ nền, sau đó nhấp vào “Thêm mặt nạ nền”.
- Sélectionnez Hình tam giác từ menu thả xuống và định cấu hình các cài đặt này:
- Màu mặt nạ: rgba (10, 10, 10, 0,61)
- Biến đổi mặt nạ: không có
- Tỷ lệ khung hình: hình chữ nhật ngang
- Kích thước mặt nạ: Kéo dài để lấp đầy
- Chế độ hòa trộn mặt nạ: Bình thường
Phần thiết kế Hero # 4
Bây giờ chúng ta hãy thiết kế phần thứ tư của Hero.
1. Thêm hình nền
Chọn hình nền của bạn.
2. Thêm một mẫu nền
Bây giờ chúng ta đã thêm hình nền của mình, hãy thêm một mẫu nền.
- Trong tab Tiểu sử, điều hướng đến tab thứ 5, tab Mẫu nền, sau đó nhấp vào “Thêm hình nền”.
- Sélectionnez Nụ cười từ menu thả xuống và định cấu hình các cài đặt này:
- Màu hoa văn - rgba (0,0,0,0.2)
- Biến đổi mẫu: không có
- Kích thước: Bìa
- Lặp lại Nguồn gốc: trên cùng bên trái
- Lặp lại mẫu: Lặp lại
- Chế độ hòa trộn mẫu: Bình thường
3. Thêm mặt nạ nền
Bây giờ chúng ta đã áp dụng hình nền và mẫu, hãy thêm mặt nạ nền.
- Trong tab Tiểu sử, điều hướng đến tab thứ 6, tab Mặt nạ nền, sau đó nhấp vào “Thêm mặt nạ nền”.
- Sélectionnez Hồ góc từ menu thả xuống và định cấu hình các cài đặt này:
- Màu mặt nạ: rgba (10, 10, 10, 0,61)
- Biến đổi mặt nạ: ngang
- Tỷ lệ khung hình: Hình chữ nhật ngang
- Kích thước: Bìa
- Vị trí mặt nạ: Trung tâm bên trái
- Chế độ máy xay sinh tố mặt nạ: Bình thường
3. Cấu hình các thông số dòng
Trước khi chúng ta bắt đầu, phần Anh hùng này có các kiểu đường độc đáo. Hãy thiết lập điều này.
- Kích thước:
- Chiều rộng: 80%
- Chiều rộng tối đa: 800px
- Căn chỉnh hàng:
- Máy tính để bàn: Mặc định
- Máy tính bảng: Trung tâm
- Điện thoại: Trung tâm
- Lợi nhuận:
- Còn lại: 20vw
Phần thiết kế Hero # 5
Bây giờ chúng ta hãy thiết kế phần Anh hùng thứ năm.
Tải DIVI ngay bây giờ !!!
1. Thêm hình nền
Chọn hình nền của bạn.
2. Thêm một mẫu
Bây giờ chúng ta đã thiết lập hình nền của mình, hãy áp dụng một mẫu nền.
- Trong tab Tiểu sử, điều hướng đến tab thứ 5, tab Mẫu nền, sau đó nhấp vào “Thêm hình nền”.
- Sélectionnez Đi qua từ menu thả xuống và định cấu hình các cài đặt này:
- Màu hoa văn - #ffffff
- Biến đổi mẫu: không có
- Kích thước: Kích thước tùy chỉnh
- Chiều rộng mô hình: 10px
- Chiều cao mẫu: 10px
- Nguồn gốc lặp lại: Trên cùng dưới cùng
- Lặp lại mẫu: Lặp lại
- Chế độ hòa trộn mẫu: Bình thường
3. Thêm mặt nạ nền
Bây giờ chúng ta đã áp dụng hình nền và mẫu, hãy thêm mặt nạ nền.
- Trong tab Tiểu sử, điều hướng đến tab thứ 6, tab Mặt nạ nền, sau đó nhấp vào “Thêm mặt nạ nền”.
- Sélectionnez Thuốc chéo từ menu thả xuống và định cấu hình các cài đặt này:
- Màu mặt nạ: rgba (10, 10, 10, 0,61)
- Biến đổi mặt nạ: ngang
- Tỷ lệ khung hình: Hình chữ nhật ngang
- Kích thước: Bìa
- Vị trí mặt nạ: giữa bên trái
- Chế độ hòa trộn mặt nạ: Bình thường
3. Cấu hình các thông số dòng
Trước khi chúng ta bắt đầu, phần Anh hùng này cũng có các kiểu đường nét độc đáo. Hãy thiết lập điều này.
- Kích thước:
- Chiều rộng: 80%
- Chiều rộng tối đa: 800px
- Căn chỉnh hàng:
- Máy tính để bàn: Mặc định
- Máy tính bảng: Trung tâm
- Điện thoại: Trung tâm
- Khoảng cách:
- Biên (Phải): 18vw
Kết luận
Dễ dàng thiết kế phần Anh hùng độc đáo và bắt mắt cho trang web của bạn với các tùy chọn mới nền và mặt nạ hoa văn từ Divi. Mỗi tính năng có nhiều tùy chọn cho phép bạn tạo hình nền thực sự sáng tạo.
Ngoài ra, bạn có thể thêm các mẫu nền và mặt nạ vào bất kỳ mục nào của Divi Builder! Các tùy chọn thiết kế là vô tận.
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.
...
