Divi: Sử dụng cài đặt mặt nạ nền và các tùy chọn chuyển đổi mẫu

Bạn có muốn kết hợp cài đặt mặt nạ nền và các tùy chọn biến đổi mẫu không Divi để tạo nền độc đáo?

Thiết kế nền là một cách tuyệt vời để cung cấp cho bạn Website thị giác tinh tế và nổi bật giữa đám đông. Cài đặt Mặt nạ nền và Biến đổi mẫu mới từ Divi có thể được kết hợp theo nhiều cách để tạo ra các mẫu nền này.

Trong bài viết này, chúng ta sẽ thấy cách sử dụng mặt nạ nền và cài đặt chuyển đổi mẫu từ Divi để tạo hình nền thú vị cho bố cục của bạn Divi.

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

khảo sát

Đầu tiên, đây là bản xem trước của từng ví dụ trên các kích thước màn hình khác nhau (điện thoại và máy tính để bàn).

Đọc cũng: Divi: Cách sử dụng hiệu ứng đổ bóng và di chuột để tạo nội dung tương tác

Ví dụ 1

Phiên bản 1 trên máy tính để bàn

Phiên bản 1 trên điện thoại

Tải xuống DIVI ngay bây giờ !!!

Phiên bản 2 trên máy tính để bàn

Phiên bản 2 trên điện thoại

Ví dụ 2

Phiên bản 1 trên máy tính để bàn

Phiên bản 1 trên điện thoại

Tải xuống DIVI ngay bây giờ !!!

Phiên bản 2 trên máy tính để bàn

Phiên bản 2 trên điện thoại

Ví dụ 3

Phiên bản 1 trên máy tính để bàn

Phiên bản 1 trên điện thoại

Tải xuống DIVI ngay bây giờ !!!

Phiên bản 2 trên máy tính để bàn

Phiên bản 2 trên điện thoại

Mặt nạ nền Divi và các tùy chọn chuyển đổi mẫu

Các tính năng mặt nạ và mẫu nền mới của Divi bao gồm một số tùy chọn để điều chỉnh chúng. Các điều chỉnh bao gồm lật ngang và dọc, xoay và đảo ngược. Để xem các tùy chọn, hãy chuyển đến cài đặt nền của một phần hoặc dòng và chọn tab Mẫu nền hoặc Mặt nạ nền.

Khi bạn đã thêm một mẫu hoặc mặt nạ, các cài đặt biến đổi sẽ được hiển thị. Đơn giản chỉ cần nhấp vào các tùy chọn bạn muốn sử dụng. Chúng ta có thể sử dụng chúng cùng nhau và kết hợp với nhau.

Cách thức hoạt động của các cài đặt chuyển đổi mẫu và mặt nạ của Divi

Mẫu bên dưới là Zig Zag với cài đặt mặc định.

Mặt nạ nền Divi và các tùy chọn chuyển đổi mẫu

Chúng tôi thêm một mặt nạ Layer Blog trong hình ảnh bên dưới. Hãy sử dụng chúng để chứng minh cách hoạt động của cài đặt Background Mask và Pattern Transform.

Lật ngang

Đó là sự đảo ngược theo chiều ngang. Chúng tôi đã áp dụng cài đặt biến đổi cho cả mẫu và mặt nạ.

Lật dọc

Đây là lật dọc cho mẫu và mặt nạ.

Rotation

Cái này hiển thị Xoay cho mẫu và mặt nạ.

Đảo ngược

Ví dụ này cho thấy Invert cho mẫu và mặt nạ.

Mặt nạ nền và kết hợp biến đổi mẫu

Tất nhiên, chúng ta cũng có thể sử dụng các tham số biến đổi trong nhiều cách kết hợp khác nhau. Dưới đây là một số ví dụ.

Thao tác này sẽ xoay mẫu và đảo ngược mặt nạ.

Ví dụ này sử dụng lật dọc, xoay và đảo ngược cho mẫu nền. Mặt nạ nền sử dụng lật ngang, lật dọc và xoay.

Đối với ví dụ này, chúng tôi đã sử dụng lật và xoay ngang cho mẫu nền và lật và xoay dọc cho mặt nạ nền.

Ví dụ về cài đặt mặt nạ nền và biến đổi mẫu

Tiếp theo, hãy xem cách các cài đặt này có thể được sử dụng với bố cục Divi. Chúng tôi sẽ sử dụng một phần làm điểm bắt đầu và tạo ba ví dụ. Chúng tôi sẽ tùy chỉnh nó và sau đó sử dụng cài đặt biến đổi để sửa đổi nó cho từng ví dụ.

Đối với các ví dụ của chúng tôi, chúng tôi đang sử dụng phiên bản sửa đổi của phần Anh hùng của trang đích bố cục Kế hoạch Bất động sản có sẵn trong Divi.

Đây là tổng quan về phần được đề cập. Nó sử dụng màu nền: # 92a5ab.

Nền: # 92a5ab

Ví dụ về cài đặt mặt nạ nền và biến đổi mẫu

Mặt nạ nền và tham số biến đổi mẫu Ví dụ 1

Ví dụ đầu tiên của chúng tôi cung cấp cho chúng tôi một vòm nằm theo chiều dọc ở giữa màn hình. Một bên của màn hình có một mô hình chần. Tiếp theo, chúng ta sẽ tạo một phiên bản thay thế với vòng cung hướng về phía khác.

mô hình nền

Mở cài đặt phần, cuộn xuống Tiểu sử và chọn tab Hình nền. Chọn Tufted cho mẫu nền và Đảo ngược cho biến đổi mẫu.

Mô hình nền: Tufted
Biến đổi mẫu: Đảo ngược

Mặt nạ nền

Chọn tab Mặt nạ nền và lựa chọn Arch cho mặt nạ nền. Thay đổi màu mặt nạ thành # 616d72 và đặt biến đổi mặt nạ thành Invert. Điều này hoàn thành phiên bản nơ đầu tiên của chúng tôi với các búi tóc.

Mặt nạ nền: Vòm
Màu mặt nạ: # 616d72
Biến đổi mặt nạ: Đảo ngược

Ví dụ 1 Phiên bản 2

Tiếp theo, hãy tạo một biến thể của thiết kế của chúng tôi. Chỉ cần sửa đổi mặt nạ biến hình cho mẫu nền ở dạng lật ngang và lật dọc. Điều này thay đổi vòm đối diện với hướng khác và làm lệch mô hình, vì vậy nó không chỉ giống như một hình ảnh phản chiếu.

Chuyển đổi mặt nạ: lật ngang, lật dọc

Mặt nạ nền và tham số biến đổi mẫu Ví dụ 2

Đối với ví dụ thứ hai của chúng tôi, chúng tôi sẽ tạo một hình bầu dục ở giữa màn hình với một mẫu bên trong hình bầu dục. Tiếp theo, chúng tôi sẽ thay đổi vị trí của mẫu. Chúng tôi cũng sẽ sửa đổi cái này cho các kích thước màn hình khác nhau.

Hình nền

Trong cài đặt nền, hãy chọn tab Mẫu nền và lựa chọn Shippo cho động cơ. Đặt biến đổi mẫu thành Invert.

Nền mô hình: Shippo
Biến đổi mẫu: Đảo ngược

Mặt nạ nền

Sau đó chọn tab Mặt nạ nền và thay đổi các cài đặt sau.

Mặt nạ nền: Hình elip
Màu: # 758489
Mask Transform: lật ngang, xoay

Máy tính bảng và điện thoại

Cả máy tính bảng và điện thoại sẽ sử dụng cùng một cài đặt, vì vậy chúng tôi sẽ chỉ phải thay đổi cài đặt máy tính bảng. Chọn Tab máy tính bảng và sửa đổi biến đổi mặt nạ trong sự đảo ngược ngang.

Biến đổi mặt nạ: lật ngang, đảo ngược

Ví dụ 2 Phiên bản 2

Tiếp theo, chúng tôi sẽ tạo biến thể cho ví dụ thứ hai của chúng tôi. Đầu tiên, chọn tab Mẫu nền và đặt Màu hoa văn thành rgba (0,0,0,0.06).

Màu hoa văn: rgba (0,0,0,0.06)

Sau đó chọn tab Mặt nạ nền và chọn Flip Horizontal, Rotate và Invert để chuyển đổi mặt nạ.

Biến đổi mặt nạ: lật ngang, xoay, đảo ngược

Máy tính bảng và điện thoại

Đối với các tùy chọn máy tính bảng và điện thoại, hãy chọn biểu tượng của Máy tính bảng . Sửa đổi biến đổi mặt nạ trong sự đảo chiều và đảo chiều ngang. Phiên bản thay thế của ví dụ hai hiện đã hoàn tất.

Biến đổi mặt nạ: lật ngang, đảo ngược

Mặt nạ nền và tham số biến đổi mẫu Ví dụ 3

Đối với ví dụ thứ ba của chúng tôi về cài đặt biến đổi mẫu và mặt nạ, chúng ta sẽ sử dụng mẫu tổ ong với mặt nạ sơn. Chúng tôi cũng sẽ tạo phiên bản di động cho phiên bản này.

mô hình nền

Đầu tiên, chọn tab Cài đặt thiết bị và chọn biểu tượng Thiết bị. văn phòng. Chọn tab Mẫu nền và chọn Honeycomb cho mẫu nền. Thay đổi Màu thành rgba (0,0,0,0.42). Đối với cái này, chúng tôi sẽ để lại các tùy chọn Biến đổi mẫu đã ngừng hoạt động. Chúng tôi sẽ thêm chúng cho phiên bản thay thế.

Mô hình nền: Honeycomb
Màu hoa văn: rgba (0,0,0,0.42)
Biến đổi mẫu: không có

Mặt nạ nền

Sau đó chọn tab BackgroundMask. Chọn Sơn cho mặt nạ nền. Thay đổi màu thành # 697b82. Chọn Flip Vertical cho biến đổi mặt nạ.

Mặt nạ nền: Sơn
Màu mặt nạ: # 697b82
Biến đổi mặt nạ: lật dọc

Sau đó chọn Che cho kích thước. Điều này mở ra một số tùy chọn khác. Chọn Góc phải ở phía dưới cho vị trí. Đó là nó cho phiên bản máy tính để bàn. Tiếp theo, chúng tôi sẽ tạo phiên bản di động.

Kích thước mặt nạ: Bìa
Vị trí mặt nạ: Dưới cùng bên phải

Máy tính bảng và điện thoại

Sau đó chọn tab máy tính bảng và sửa đổi sự chuyển đổi của mặt nạ nền trong lật dọc và xoay. Điều này hoàn thành phong cách cho ví dụ thứ ba của chúng tôi. Tiếp theo, chúng tôi sẽ tạo phiên bản thay thế.

Mask Transform: lật dọc, xoay

Ví dụ 3 Phiên bản 2

Đối với phiên bản thay thế của ví dụ này, chúng tôi sẽ điều chỉnh cả mẫu nền và mặt nạ nền.

mô hình nền

Đối với mẫu nền, hãy thay đổi màu mẫu thành rgba (0,0,0,0.11). Thay đổi chuyển đổi mẫu thành lật ngang, lật dọc và xoay.

Màu mặt nạ: rgba (0,0,0,0.11)
Biến đổi mặt nạ: lật ngang, lật dọc, xoay

mặt nạ nền

Sau đó chọn tab BackgroundMask. Thay đổi màu sắc thành màu trắng và sự chuyển đổi của mặt nạ thành lật ngang, lật dọc và đảo ngược.

Màu mặt nạ: #ffffff
Biến đổi mặt nạ: lật ngang, lật dọc, đảo ngược

Tiếp theo, thay đổi kích thước của mặt nạ để che, sau đó chọn Trung tâm cho vị trí của mặt nạ.

Kích thước mặt nạ: Bìa
Vị trí mặt nạ: Trung tâm

Máy tính bảng và điện thoại

Cuối cùng chọn tab máy tính bảng để tạo phiên bản di động. Chọn tab mặt nạ nền và chọn bốn tùy chọn biến đổi mặt nạ. Điều này hoàn thành phiên bản thay thế của ví dụ thứ ba.

Biến đổi mặt nạ: lật ngang, lật dọc, xoay, đảo ngược