Hình ảnh viền và nền tiếp tục là yếu tố thiết kế phổ biến khi xây dựng trang web. Sử dụng hình nền phù hợp có thể thêm cá tính và phong cách cho trang web của bạn mà không tốn thời gian và tiền bạc vào đồ họa tùy chỉnh. Và đường viền rất hữu ích cho việc thêm cấu trúc vào nội dung.
Hôm nay chúng ta sẽ kết hợp hai điều này lại với nhau bằng cách thiết kế hình nền làm đường viền. Divi có một tập hợp các tùy chọn hữu ích để tùy chỉnh ảnh nền, giúp bạn dễ dàng thiết kế ảnh nền cho các thiết kế đường viền độc đáo. Điều này cho phép chúng tôi kết hợp màu sắc, độ dốc, bóng hộp và chế độ hòa trộn theo tất cả các cách sáng tạo.
Chúng ta hãy bắt đầu.
Những gì bạn cần để bắt đầu
Để bắt đầu, bạn cần những điều sau đây:
- Le Chủ đề Divi đã cài đặt và hoạt động
- Một trang mới được tạo để xây dựng từ đầu trên front-end (hàm tạo trực quan)
- Hình ảnh sử dụng cho nội dung hư cấu
Sau đó, bạn sẽ có một khung trống để bắt đầu thiết kế Divi.
Mẹo chung để tạo các mẫu viền nền
Trước khi bạn bắt đầu xây dựng, đây là một số mẹo chung cần ghi nhớ khi tạo các mẫu viền nền hình ảnh.
# 1 Chọn hình ảnh có nhiều họa tiết
Hầu hết thời gian, bạn sẽ muốn biên giới của mình hẹp hơn. Điều này có nghĩa là bạn sẽ không thể nhìn thấy nhiều hình ảnh. Do đó, sẽ hữu ích khi sử dụng hình ảnh có nhiều kết cấu. Ví dụ: bạn có thể sử dụng ảnh phong cảnh, một bó hoa hoặc một tòa tháp cao. Đây là một số hình ảnh tôi đang sử dụng cho hướng dẫn này.
# 2 sử dụng gradient và độ trong suốt với đường viền của hình nền
Hình nền đôi khi có thể là đường viền tuyệt vời cho nội dung. Nhưng hầu hết bạn sẽ muốn thêm lớp phủ vào hình nền của mình để đạt được màu sắc hoặc làm cho nền tối hơn hoặc sáng hơn. Chuyển màu nền là một cách tuyệt vời để thêm lớp vào hình nền của bạn và tạo ra các thiết kế đường viền độc đáo.
# 3 Sử dụng các chế độ hợp nhất
Sử dụng chế độ hòa trộn trên ảnh nền của bạn có thể áp dụng màu sắc và kết cấu độc đáo cho các mẫu đường viền. Tất cả những gì bạn cần làm là thêm màu nền hoặc độ dốc với hình nền của bạn và sau đó chọn chế độ hòa trộn cho hình nền. Màu sắc, Độ sáng, Nhân và Màn hình là một số chế độ hòa trộn tuyệt vời cho đường viền hình nền.
Sử dụng các tùy chọn góc tròn cho hình dạng độc đáo
Không phải tất cả các đường viền đều cần phải có cạnh thẳng. Trộn nó lên một chút! Tùy chọn góc tròn Divi cho phép bạn định hình các góc này một cách sáng tạo.
Sử dụng hình nền thị sai làm đường viền
Điều tuyệt vời về thị sai là nó làm cho thiết kế trở nên sống động với chuyển động. Ngoài ra, nếu bạn sử dụng hình nền có thị sai cho các thiết kế đường viền của mình, bạn có thể tạo ra chuyển động tinh tế nổi bật và làm cho nội dung của bạn nổi bật.
Thiết kế viền ảnh nền trong Divi
Bây giờ chúng ta đã hiểu ý tưởng chung làm cơ sở cho việc tạo các mẫu viền hình nền, hãy cùng nhau tưởng tượng một vài thứ. Chúng tôi sẽ xây dựng các mô hình khác nhau 2. Mỗi người sẽ có một mô-đun trình bày cơ bản để phục vụ như là nội dung hư cấu. Và chúng ta sẽ sử dụng các tham số cột để thêm viền hình nền của mô-đun.
Hãy bắt đầu với thiết kế đầu tiên của chúng tôi.
Hình nền viền #1
Thiết kế đầu tiên này có đường viền hình ảnh nền hẹp với bóng vùng để làm cho nó trông giống khung cho nội dung hơn.
Đây là cách thiết kế nó.
Đầu tiên, thêm một hàng hai cột vào một phần thông thường.
Thêm mô-đun tóm tắt
Sau đó thêm một mô-đun blurb ở cột bên trái.
Khi phần ngoại cảnh đã sẵn sàng, hãy mở cài đặt ngoại cảnh và trích xuất hình ảnh mặc định để chỉ hiển thị tiêu đề và nội dung nội dung.
Sau đó cung cấp cho văn bản của bạn một nền trắng.
Sau đó cập nhật các thông số thiết kế trình bày như sau:
- Tiêu đề văn bản: Oswald
- Cảnh sát cơ thể: Lato
- Ký quỹ 5% ở trên cùng, 5% ở phía dưới, 5% ở bên trái, 5% ở bên phải
- Upholstery: 7% ở phía trên, 7% ở phía dưới, 10% ở bên trái, 10% ở bên phải
- Các góc được làm tròn: 20px ở trên cùng bên phải, 20px ở phía dưới bên trái
- Box Shadow: xem ảnh chụp màn hình
Thêm hình nền vào cột
Điều này sẽ chăm sóc mô-đun trình bày của chúng tôi. Bây giờ chúng ta hãy thêm đường viền hình nền của chúng ta. Để làm điều này, chúng tôi sẽ thêm một hình nền vào cột chứa mô-đun Blurb. Mở cài đặt hàng, sau đó mở cài đặt cho cột 1 và thêm nền sau:
- Hình nền: [tải lên hình ảnh bạn chọn]
- Màu nền: #303a7a
- Hình nền hỗn hợp: Độ sáng
Sau đó, cập nhật các góc tròn và bóng của hộp như sau:
- Các góc được làm tròn: 20px ở trên cùng bên phải, 20px ở phía dưới bên trái
- Box Shadow: xem ảnh chụp màn hình
Kết quả cuối cùng
Bây giờ, kiểm tra thiết kế cuối cùng.
Hình nền viền # 2
Thiết kế tiếp theo này nhấn mạnh một thực tế là sử dụng hình ảnh có kết cấu cao có thể tạo ra các đường viền đẹp, đặc biệt là khi bạn kết hợp chúng với các chế độ hòa trộn hình ảnh.
Đây là cách thiết kế nó.
Thêm mô-đun Blurb
Để tạo thiết kế, chúng ta sẽ thêm văn bản nổi bật vào cột 2 của cùng một hàng chứa thiết kế số 1. Tiếp tục và sao chép mô-đun bố cục thiết kế # 1 và dán vào cột 2. Sau đó, cập nhật cài đặt mô-đun bản trình bày như sau:
- Góc làm tròn: khôi phục cài đặt mặc định
- Ký quỹ: 10% ở trên cùng, 10% ở phía dưới, 10% ở bên trái, 10% ở bên phải
- Upholstery: 15% ở phía trên, 15% ở phía dưới, 10% ở bên trái, 10% ở bên phải
- Chiều rộng của đường viền: 1px
- Màu viền: #ffffff
Thêm hình nền vào cột
Với mô-đun của chúng tôi tại chỗ, mở cài đặt dòng và thêm một gradient nền vào cột 2.
- Độ dốc nền bên trái: #f7e0a5
- Màu nền bên phải Màu: rgba (237,240,0,0.79)
- Hướng Gradient: 90deg
- Vị trí bắt đầu: 50%
- Vị trí cuối cùng: 0%
Sau đó thêm một hình ảnh nền với hiệu ứng chuyển màu đẹp.
- Hình nền: [hình ảnh tải xuống]
- Trộn hình nền: Màu
Như bạn có thể thấy, chế độ hòa trộn màu giữ nguyên độ sáng của hai chuyển màu phía sau hình ảnh để tạo ra một mẫu đường viền hình ảnh đẹp với màu sắc nhẹ nhàng.
Kết quả cuối cùng
Khám phá kết quả cuối cùng của thiết kế.
Suy nghĩ mới nhất
Tạo đường viền bằng hình ảnh là một cách dễ dàng để thêm vẻ đẹp và cá tính cho thiết kế của bạn. Thiết kế được nhấn mạnh trong hướng dẫn này được thực hiện để làm nổi bật các khả năng có sẵn với Divi trong việc thiết kế các đường viền độc đáo. Do đó, với sự kết hợp màu sắc khác nhau, các thiết kế là vô hạn. Vì vậy, hãy lấy một số hình ảnh và khám phá thêm thiết kế đường viền bằng hình ảnh trên Divi.
Để sức khỏe của bạn.
