Hợp nhất nhiều hình ảnh có thể hữu ích để tạo hình nền chuyên nghiệp cho Website. Ý tưởng là chụp hai hoặc ba hình ảnh riêng biệt và chồng chúng lên nhau. Sau đó, sử dụng chế độ hòa trộn để trộn các lớp với nhau để tạo ra một thiết kế thống nhất, liền mạch.

Mỗi phần tử của Divi Builder có chế độ hợp nhất và các tùy chọn bộ lọc được tích hợp sẵn, giúp dễ dàng hợp nhất các phần tử trong Divi Builder. Tất nhiên, bạn có thể trộn hình ảnh trong Photoshop (hoặc một trình chỉnh sửa ảnh khác), nhưng đối với những người đang tìm kiếm một giải pháp Divi thực tế, hướng dẫn này sẽ giúp bạn, vì với Divi, việc này khá dễ dàng. Khi bạn có hình ảnh ở đúng vị trí, bạn có thể trộn chúng chỉ với một vài cú nhấp chuột. Và tất nhiên, bạn có một kho các tùy chọn Divi để thực hiện những bước hoàn thiện cuối cùng và đưa ra một chiều hướng sáng tạo mới cho thiết kế.

Chúng ta hãy bắt đầu.

khảo sát

Dưới đây là tổng quan về thiết kế chúng ta sẽ cùng nhau xây dựng.

Những gì bạn cần để bắt đầu

Để bắt đầu, bạn sẽ cần làm như sau:

1. Nếu bạn chưa có, hãy cài đặt và kích hoạt Chủ đề Divi đã cài đặt (hoặc plugin Divi Builder nếu bạn không sử dụng Chủ đề Divi).
2. Tạo một trang mới trong WordPress và sử dụng Divi Builder để chỉnh sửa trang trên giao diện người dùng (nhà xây dựng trực quan).
3. Tải một vài hình ảnh giả lên thư viện phương tiện để sử dụng cho hướng dẫn. Tôi đang sử dụng hình ảnh từ Gói bố trí bác sĩ mắt .

Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.

Cách kết hợp nhiều hình ảnh để tạo thiết kế nền tùy chỉnh trong Divi

Hãy bắt đầu với phần và dòng

Để hoàn thành công việc, hãy thêm một hàng của cột vào phần thông thường.

Thêm hình ảnh với mô-đun hình ảnh

Hình ảnh n ° 1

Khi hàng và cột được xác định, thêm mô-đun hình ảnh vào dòng.

Tải lên hình ảnh có kích thước khoảng 500 pixel x 700 pixel. Tôi đang sử dụng một cái từ Gói Bố cục Bác sĩ Mắt.

Sau khi hình ảnh được tải lên, hãy đặt hình ảnh có chiều rộng tối đa bằng cách sử dụng đơn vị chiều dài vw để nó vừa vặn với các hình ảnh khác mà chúng ta sẽ hợp nhất, sau đó căn chỉnh nó sang trái như sau :

• Chiều rộng tối đa: 33vw
• Sắp xếp mô-đun: bên trái

Chúng tôi muốn hình ảnh tiếp theo mà chúng tôi thêm để căn chỉnh ở bên phải của hình ảnh đó. Vì vậy, chúng ta cần làm nổi hình ảnh này sang bên trái. Để thực hiện việc này, hãy thêm CSS sau vào phần tử chính:

float: left;

Hình ảnh n ° 2

Sau đó, thêm một mô-đun hình ảnh mới dưới hình ảnh hiện tại.

Sau đó, tải xuống một hình ảnh mới có kích thước gần với pixel 1000 theo pixel 667.

Sau đó, cung cấp cho hình ảnh một chiều rộng mới và một căn chỉnh tối đa mới.

• Chiều rộng tối đa: 40vw
• Sắp xếp mô-đun: đúng

Vì hình ảnh đầu tiên nổi bên trái, hình ảnh thứ hai bây giờ phải liền kề bên phải.

Chúng tôi sẽ quay lại để hoàn thiện một số hình ảnh này, nhưng bây giờ hãy chuyển sang cài đặt trong phần này.

Cài đặt phần

Mở cài đặt phần và thêm hình ảnh nền và độ dốc như sau:

• Hình nền: [hình ảnh tải xuống khoảng 1920px x 1280px]
  

• Độ dốc nền bên trái Màu: rgba (1,16,63,0.64)
• Màu nền bên phải Màu: rgba (12,113,195,0.82)
• Đặt gradient phía trên hình nền: CÓ

Sau đó điều chỉnh phần đệm một chút.

• Upholstery (office): 0px ở trên cùng, 0px ở phía dưới
• Đệm (điện thoại): 0px ở trên cùng, 10vw ở dưới cùng

Cài đặt dòng

Khi phần hoàn thành, mở cài đặt dòng và cập nhật các mục sau:

• Chiều rộng: 100%;
• Chiều rộng tối đa: 100%;
• Upholstery: 0px ở trên cùng, 0px ở phía dưới

Thêm chế độ hợp nhất vào dòng

Bây giờ dòng sẽ bao phủ toàn bộ phần dưới cùng của phần. Điều này sẽ cho phép chúng tôi thêm chế độ hợp nhất vào dòng để hợp nhất hai hình ảnh với nền của phần. Để làm điều này, hãy thêm chế độ hòa trộn sau.

• Chế độ kết hợp: nhân lên

Vì sao nhân lên?

Chế độ hòa trộn Multiply nhân lớp / hàng hiện tại (bao gồm bất kỳ hình ảnh nào trong đó) với lớp bên dưới nó (nền phần). Một cách dễ dàng để nghĩ về hiệu ứng này là tưởng tượng hai trang chiếu trong một máy chiếu slide xếp chồng lên nhau. Nếu bạn chiếu hai hình ảnh lên màn hình, bạn sẽ nhận được hỗn hợp tối hơn một chút của hai hình ảnh.

Hình ảnh trung tâm theo chiều dọc

Bạn không cần phải làm như vậy, nhưng nếu bạn muốn đảm bảo rằng cả hai hình ảnh trong hàng đều được căn giữa theo chiều dọc, bạn có thể thêm đoạn mã CSS vào cột. Để làm điều này, hãy mở cài đặt hàng và sau đó nhấp vào cài đặt cột. Sau đó, thêm mã CSS sau vào phần tử chính.

hiển thị: flex; align-item: trung tâm;

Liên lạc cuối cùng để hai hình ảnh tốt nhất

Hiện tại, hai hình ảnh hàng đầu của chúng tôi đã ghép nối tốt, nhưng chúng có thể sử dụng một số thay đổi thiết kế để làm cho nó trông chuyên nghiệp hơn một chút. Chúng ta có thể sử dụng bóng hộp màu trắng để làm mềm các cạnh của hình ảnh và sử dụng lệnh Transform để định vị chúng chính xác nơi chúng ta muốn chúng ở lại.

Hình ảnh # 1 Phím cuối cùng

Mở cài đặt mô-đun hình ảnh bên trái và cập nhật như sau:

• Box Shadow: xem ảnh chụp màn hình
• Hộp Shadow Shadow Force: 6vw
• Độ dày bóng râm: 6vw
• Màu bóng: #ffffff
  

• Biến hình Dịch: 5vw (trục X), 11vw (trục Y)

Hình ảnh # 2 Phím cuối cùng

Khi bạn đã hoàn tất thao tác với hình ảnh số 1 ở bên trái, hãy mở cài đặt cho hình ảnh số 2 ở bên phải và thực hiện các thay đổi sau:

• Box Shadow: xem ảnh chụp màn hình
• Hộp Shadow Shadow Force: 3vw
• Lực lượng lây lan bóng hộp: 3vw
• Màu bóng: #ffffff

Chúng tôi thậm chí có thể thêm một số bộ lọc để làm cho hình ảnh sắc nét hơn.

• Độ bão hòa: 30%
• Độ mờ đục: 60%

Thêm nội dung văn bản

Bây giờ phần của chúng ta đã hoàn tất với ba hình ảnh được pha trộn độc đáo, chúng ta có thể thêm nội dung ở đầu phần. Để thực hiện việc này, hãy thêm phần mới bên dưới phần hiện tại.

Sau đó thêm một hàng của một cột vào phần thông thường.

Sau đó thêm một mô-đun văn bản vào dòng.

Nội dung cơ thể

Cập nhật nội dung của mô-đun văn bản với nội dung của cơ thể sau:

Đặt lịch khám mắt Nội dung của bạn ở đây. Chỉnh sửa hoặc loại bỏ văn bản này trong dòng hoặc trong cài đặt Nội dung mô-đun. Bạn cũng có thể tạo kiểu cho mọi khía cạnh của nội dung này trong cài đặt Thiết kế mô-đun và thậm chí áp dụng CSS tùy chỉnh cho văn bản này trong mô-đun Cài đặt nâng cao

Định dạng văn bản

Khi nội dung cơ thể được đặt đúng chỗ, hãy cập nhật các thông số thiết kế như sau:

• Màu văn bản văn bản: #ffffff
• Phông chữ: Poppin
• Màu văn bản tiêu đề: #ffffff
• Kích thước tiêu đề văn bản: 5vw
• Chiều rộng: 60vw (máy tính để bàn), 100% (điện thoại)
• Ký quỹ (máy tính để bàn): -35% tăng, 35% xuống
• Ký quỹ (điện thoại): -70% tăng, 70% giảm

Thiết kế cuối cùng

Đây là thiết kế cuối cùng.

cuối cùng suy nghĩ

Chế độ hòa trộn và tùy chọn bộ lọc của Divi cung cấp mọi thứ bạn cần để trộn hình ảnh để tạo nền chuyên nghiệp. Mẹo là định vị hình ảnh bằng đơn vị độ dài vw để thiết kế nền cũng đáp ứng trên thiết bị di động. Nhưng một khi các hình ảnh đã vào đúng vị trí, chúng ta có thể thử nghiệm với tất cả các loại chế độ hòa trộn và vô số tùy chọn thiết kế khác để tạo ra những thiết kế vô cùng hài hòa.

Hy vọng bài viết này đã cung cấp cho bạn một số cảm hứng và hy vọng sẽ nhận được phản hồi từ bạn trong các ý kiến.

Để sức khỏe của bạn!