Khi nói đến mặt nạ nền, người dùng có xu hướng sử dụng phần mềm chỉnh sửa hình ảnh ngoài Divi, sau đó tải hình ảnh lên Website mà họ tạo ra. Mặc dù đó là một cách khá tiện dụng để tùy chỉnh Website, nó không nhất thiết phải là giải pháp duy nhất. Bạn cũng có thể tạo mặt nạ nền trong Divi, kết hợp các yếu tố thiết kế khác nhau và các tùy chọn bộ lọc theo những cách sáng tạo. Đó chính xác là những gì chúng tôi sắp làm trong bài viết này! Chúng tôi biến các ký tự có kích thước lớn thành mặt nạ nền trông đẹp mắt ở mọi kích thước màn hình. Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn để tạo ra các thiết kế của riêng mình bằng cách sử dụng các ký tự cỡ lớn và các tùy chọn tích hợp của Divi.
Chúng ta hãy đi!
Bản xem trước mẫu
Trước khi chúng ta đi sâu vào hướng dẫn, đây là các loại nền bạn có thể đạt được bằng kỹ thuật này.
Conception
Chúng tôi sẽ bắt đầu thiết kế bằng cách tạo ra một nền đen với một chữ cái có hình ảnh làm nền.
Thêm một phần mới
Màu nền
Hãy bắt đầu với ví dụ đầu tiên! Thêm một phần thông thường mới vào một trang mới hoặc hiện có và thêm một nền tảng cho phần này:
- Màu nền: #000000
khoảng cách
Sau đó, chuyển đến cài đặt khoảng cách và xóa tất cả đệm trên và dưới mặc định.
- Đệm hàng đầu: 0px
- Đệm dưới: 0px
đầy tràn
Chuyển sang tab Nâng cao và ẩn phần tràn. Điều này sẽ trở nên quan trọng ở phần sau của hướng dẫn này khi chúng ta định vị lại mô-đun văn bản có chứa ký tự quá khổ.
- Tràn ngang: ẩn
- Tràn dọc: ẩn
Thêm hàng 1
Cấu trúc cột
Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:
Màu nền 1
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thêm màu nền vào cột đầu tiên.
- Màu nền của cột 1: #848484
Hình nền cột 1
Cũng thêm màu nền. Để kết hợp màu nền và hình ảnh, chúng ta sẽ áp dụng chế độ hòa trộn.
- Trộn hình nền cột: Multiply
kích thước
Chuyển sang tab Thiết kế và để hàng lấp đầy toàn bộ chiều rộng của màn hình áp dụng các cài đặt định cỡ sau:
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Chúng tôi cũng loại bỏ tất cả các phần đệm lên xuống tùy chỉnh trong hàng.
- Đệm hàng đầu: 0px
- Đệm dưới: 0px
Thêm một mô-đun văn bản vào một cột
Thêm một ký tự vào vùng nội dung
Đã đến lúc thêm mô-đun văn bản chứa ký tự quá khổ. Thêm chữ “o” vào ô nội dung.
Màu nền
Tiếp tục bằng cách đi vào cài đặt nền và thêm màu nền đen.
- Màu nền: #000000
Cài đặt văn bản
Chuyển đến tab Thiết kế và thay đổi cài đặt văn bản. Lưu ý cách chúng tôi sử dụng giá trị cao cho kích thước văn bản.
- Phông chữ: Poppin
- Kích thước văn bản: 100vw
- Định hướng văn bản: Trung tâm
khoảng cách
Sau đó, chuyển đến cài đặt khoảng cách và thêm các giá trị lề và đệm tùy chỉnh.
- Lề trên: -6vw
- Đệm tốt nhất: 15vw
- Đệm đáy: 49vw
Bộ lọc
Đã đến lúc làm phép thuật! Truy cập cài đặt bộ lọc của mô-đun và thay đổi chế độ hợp nhất cho phù hợp:
- Chế độ hòa trộn: Nhân lên
- Độ sáng: bạn có thể thay đổi giá trị này theo ý thích của bạn
Thêm dòng 2
Cấu trúc cột
Khi nhân vật quá khổ của bạn đã được thêm vào thiết kế, bạn có thể tiếp tục bằng cách thêm các mô-đun còn lại mà bạn muốn hiển thị trong phần, tốt nhất là bằng cách thêm một dòng mới:
kích thước
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và để nó lấp đầy toàn bộ chiều rộng của màn hình.
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Cũng loại bỏ tất cả phần đệm lên xuống mặc định
- Đệm hàng đầu: 0px
- Đệm dưới: 0px
Thêm mô-đun văn bản # 1 vào cột
Thêm nội dung H1
Trong dòng mới này, bạn có thể thêm các mô-đun bạn chọn. Để tạo lại ví dụ chính xác được chia sẻ trong bản xem trước của bài đăng này, hãy bắt đầu bằng cách thêm mô-đun văn bản có chứa nội dung H1
Cài đặt văn bản H1
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản H1.
- Phông chữ: Màn hình Playfair
- Trọng lượng phông chữ: đậm
- Sắp xếp tiêu đề văn bản: Trung tâm
- Màu văn bản tiêu đề: #ffffff
- Kích thước tiêu đề văn bản: 6vw
khoảng cách
Tiếp tục bằng cách chuyển đến cài đặt giãn cách và để mô-đun văn bản chồng lên ký tự quá khổ bằng cách thêm lề trên âm. Chúng tôi cũng đảm bảo rằng có khoảng trống ở bên trái và bên phải của mô-đun để đảm bảo khả năng đáp ứng.
- Lề trên: -47vw
- Lề trái: 1vw
- Lề phải: 1vw
Thêm một mô-đun phân chia vào cột
tầm nhìn
Mô-đun tiếp theo chúng ta cần là một mô-đun phân chia. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.
- Hiển thị dải phân cách: Có
Màu
Chuyển đến tab thiết kế tiếp theo và thay đổi màu sắc của dải phân cách.
- Màu: #ffffff
kích thước
Cũng thay đổi các tham số kích thước.
- Trọng lượng bộ chia: 13px
- Chiều rộng: 16%
- Sắp xếp mô-đun: trung tâm
khoảng cách
Đồng thời thêm một lề trên cùng để tạo khoảng cách giữa mô-đun văn bản và mô-đun phân chia.
- Lề trên: 16vw
Thêm mô-đun văn bản # 2 vào cột
Thêm nội dung
Mô-đun tiếp theo chúng ta cần là mô-đun văn bản có nội dung của đoạn văn.
Cài đặt văn bản
Truy cập cài đặt văn bản và thực hiện các thay đổi sau:
- Phông chữ: Mở Sans
- Màu văn bản: #ffffff
- Kích thước văn bản: 1vw (máy tính để bàn), 2vw (máy tính bảng), 2.5vw (điện thoại)
- Chiều cao của dòng văn bản: 1.9em
- Định hướng văn bản: Trung tâm
khoảng cách
Đồng thời thêm các giá trị khoảng cách tùy chỉnh.
- Lề trên: 3vw
- Lề dưới: 3vw (máy tính để bàn), 10vw (máy tính bảng và điện thoại)
- Lề trái: 27vw (máy tính để bàn), 10vw (máy tính bảng), 8vw (điện thoại)
- Lề phải: 27vw (máy tính để bàn), 10vw (máy tính bảng), 8vw (điện thoại)
Thêm một mô-đun nút vào cột
Thêm một bản sao
Trên mô-đun tiếp theo và cuối cùng, là mô-đun nút. Nhập một bản sao của sự lựa chọn của bạn.
sự liên kết
Tiếp tục bằng cách thay đổi căn chỉnh nút trên tab Thiết kế.
- Sắp xếp các nút: trung tâm
Cài đặt nút
Chuyển sang cài đặt nút và tùy chỉnh nút theo ý muốn.
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 1vw (máy tính để bàn), 2.5vw (máy tính bảng), 3vw (điện thoại)
- Màu văn bản nút: #ffffff
- Chiều rộng của đường viền nút: 1px
- Bán kính đường viền của nút: 0px
- Nút Phông chữ: Mở Sans
- Trọng lượng phông chữ: Ultra Bold
- Kiểu chữ: chữ hoa
khoảng cách
Cuối cùng, chúng tôi cũng thêm lề tùy chỉnh và điền giá trị để có kết quả mong muốn.
- Lề dưới: 10vw
- Đệm: 15px
- Đệm dưới: 15px
- Đệm trái: 50px
- Upholstery Right: 50px
Kết quả cuối cùng
Đây là những gì trông giống như những gì chúng tôi đã xây dựng cho đến nay.
cuối cùng suy nghĩ
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách sử dụng các ký tự quá khổ để tạo mặt nạ nền tuyệt vời với Divi. Đây là một cách tuyệt vời để tạo một thiết kế web tùy chỉnh mà không cần phải sử dụng phần mềm chỉnh sửa hình ảnh. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy nhớ để lại bình luận trong phần bình luận bên dưới!
