Bạn có muốn tạo các mẫu nền tùy chỉnh bằng cách sử dụng tùy chọn Lặp lại Gradient của Divi ?
Các tùy chọn nền của Divi đưa ra nhiều cách tạo mẫu nền. Bạn thậm chí có thể tạo các mẫu nền chỉ bằng cách sử dụng gradient. Tùy chọn Gradient Lặp lại làm cho việc này trở nên đơn giản và dễ dàng.
Trong bài viết này chúng ta sẽ xem cách sử dụng tùy chọn gradient Repeat của Divi để tạo các mẫu nền tùy chỉnh.
Chúng ta hãy bắt đầu.
Xem thêm: Divi: Cách tạo biểu mẫu liên hệ xuất hiện sau khi nhấp vào nút
Lặp lại gradient là gì
Tùy chọn Lặp lại Gradient tạo ra một mẫu dựa trên các Điểm dừng Gradient. Điểm dừng gradient là phép đo xác định vị trí màu xuất hiện và dừng lại trong gradient. Divi và Gradient Builder của nó sử dụng các điểm dừng này để tạo mẫu.
Màu cuối cùng cho biết gradient nơi điểm ngắt nằm trong gradient. Bạn có thể có bao nhiêu màu tùy thích trước điểm ngắt này.
Le Trình tạo Gradient sau đó sẽ lặp lại nó để lấp đầy màn hình tạo mẫu. Tùy chọn có thể được thêm vào bất kỳ phần, hàng, cột hoặc mô-đun nào và chúng có thể được sử dụng cùng nhau.
Kích hoạt tùy chọn “Background Gradient”
Để kích hoạt tùy chọn Lặp lại Gradient, mở cài đặt của phần bằng cách nhấp vào biểu tượng bánh răng của nó. Nó cũng hoạt động với các hàng, cột và mô-đun.
Di chuyển đến Tiểu sử . Chọn tab Nền Gradient và nhấp vào Thêm Gradient Nền.
Bên dưới thanh dừng gradient là một cài đặt được gọi là Lặp lại Gradient . Điều này được tắt theo mặc định. Chỉ cần nhấp vào nó để kích hoạt nó.
Gradient bây giờ sẽ lặp lại, tạo một mẫu dựa trên các điểm dừng gradient của bạn và các cài đặt gradient khác của bạn, chẳng hạn như đơn vị gradient.
Đơn vị Gradient
Đơn vị gradient là đơn vị đo lường. Điều này chỉ định số điểm dừng của gradient trên thanh gradient cho biết gì, xác định cách đo các điểm dừng của gradient. Điều này ảnh hưởng đến mẫu được tạo bởi tùy chọn lặp lại.
Trình tạo gradient nền của Divi cung cấp 15 đơn vị. Hãy xem xét một ví dụ về bốn tùy chọn phổ biến nhất. Như chúng ta sẽ thấy trong các ví dụ của mình, kết quả sẽ thay đổi tùy thuộc vào số lượng điểm dừng gradient và cài đặt của bạn.
Percent (phần trăm)
Tỷ lệ phần trăm đo điểm dừng gradient theo tỷ lệ phần trăm. Điều này sẽ tính toán các điểm gradient dựa trên phần tử chính. Đường may gradient cuối cùng càng nhỏ, mẫu được tạo ra càng chặt chẽ. Khi điều chỉnh vị trí của một trong các màu, màu đó sẽ di chuyển trong khi các màu khác vẫn giữ nguyên vị trí.
Điểm ảnh (px)
Pixels đo số lượng pixel cho mỗi điểm dừng gradient. Điều này mang lại cho gradient một mẫu nhỏ hơn so với hầu hết các loại đơn vị khác. Di chuyển vị trí của màu đầu tiên hoặc cuối cùng sẽ thay đổi vị trí của từng màu.
Chiều cao cửa sổ (vh)
Khung nhìn là khu vực cửa sổ trình duyệt có thể nhìn thấy được. Nó được đo chiều cao và chiều rộng riêng biệt. Chiều cao cửa sổ sử dụng điểm dừng gradient để đo tỷ lệ phần trăm chiều cao kích thước cửa sổ. Điều chỉnh vị trí của màu đầu tiên hoặc cuối cùng ảnh hưởng đến tất cả các màu.
Chiều rộng cửa sổ (vw)
Chiều rộng cửa sổ sử dụng điểm dừng gradient để đo phần trăm chiều rộng kích thước cửa sổ (hoặc chiều rộng trình duyệt). Các điều chỉnh thay đổi tùy thuộc vào chiều rộng. Khi bạn điều chỉnh số lớn hơn hoặc nhỏ hơn, màu cụ thể đó sẽ thay đổi vị trí trong khi các màu khác vẫn giữ nguyên.
Ví dụ về việc sử dụng tùy chọn "Lặp lại Gradient"
Đọc cũng: Divi: Cách tạo máy tính bảng có nội dung mở đầu có thể cuộn
Đối với các ví dụ của chúng tôi, chúng tôi sử dụng phần Kêu gọi hành động trên trang chủ của gói bố trí châm cứu miễn phí có sẵn trong Divi.
Chúng tôi sẽ cần điều chỉnh cột đầu tiên của phần. Mở chúng thông số dòng bằng cách nhấp vào biểu tượng bánh răng của nó.
Sau đó, chọn biểu tượng bánh răng cho cột đầu tiên.
cột một gradient
Cột đầu tiên có độ dốc nền của riêng nó. Đó là một phần của bố cục. Chúng tôi sẽ không thay đổi điều đó. Chúng tôi sẽ sử dụng cùng một gradient này trong bốn ví dụ của chúng tôi. Dưới đây là các cài đặt trong trường hợp bạn cần.
- Dừng Gradient:
- 0px: # f4d5b8
- 100px: rgba (244,213,184,0)
Cài đặt Gradient
- Loại Gradient: Tuyến tính
- Vị trí Gradient: 180 độ
- Lặp lại Gradient: KHÔNG
- Đơn vị Gradient: Phần trăm
- Hình nền vuông phía trên: KHÔNG
khoảng cách
Chúng tôi sẽ thêm khoảng cách vào bên trái của cột. Truy cập tab Thiết kế, cuộn đến Khoảng cách và chọn biểu tượng máy tính bảng để mở các tùy chọn thiết bị.
Thêm 5% phần đệm bên trái cho tab máy tính để bàn và máy tính bảng. Chọn tab điện thoại và xóa phần đệm bên trái. Rời khỏi trên cùng và bên phải ở cài đặt hiện tại của họ.
- Đệm
- Trên cùng: 180px
- Còn lại: 5%
- Trái: 80px
ví dụ một
Ví dụ đầu tiên của chúng tôi tạo ra một mô hình lặp lại theo đường chéo với các đường mảnh.
Cái này có ba điểm dừng gradient.
- Dừng Gradient:
- 4px: # fff6ee
- 9px: # ede3dc
- 14px: # e8ded7
Sử dụng các cài đặt sau.
- Loại Gradient: Tuyến tính
- Hướng Gradient: 156 độ
- Lặp lại Gradient: CÓ
- Đơn vị Gradient: pixel
- Hình nền vuông phía trên: không
Ví dụ thứ hai
Ví dụ thứ hai của chúng tôi tạo ra một mô hình lặp lại theo đường chéo với các đường lớn hơn.
Cái này có ba điểm dừng gradient.
- Dừng Gradient:
- 4px: # fff6ee
- 43px: # ede3dc
- 50px: # e8ded7
Đối với cài đặt gradient,
- Loại Gradient: Tuyến tính
- Hướng Gradient: 156 độ
- Lặp lại Gradient: CÓ
- Đơn vị Gradient: pixel
- Hình nền vuông phía trên: KHÔNG
Ví dụ ba
Ví dụ thứ ba của chúng tôi tạo ra một mẫu hình tròn lặp lại với các hình tròn có kích thước trung bình.
Cái này có ba điểm dừng gradient.
- Dừng Gradient
- 4px: # fff6ee
- 7px: # e8ded7
- 8px: # ede3dc
Áp dụng các cài đặt gradient sau
- Loại Gradient: Hình tròn
- Vị trí Gradient: Dưới cùng
- Lặp lại Gradient: CÓ
- Đơn vị Gradient: Phần trăm
- Hình nền vuông phía trên: KHÔNG
Ví dụ 4
Ví dụ thứ tư của chúng tôi tạo ra một mẫu hình tròn với các vòng tròn lớn.
Cái này có ba điểm dừng gradient.
- Dừng Gradient:
- 4px: # fff6ee
- 23px: # e8ded7
- 31px: # ede3dc
Đối với cài đặt Gradient, hãy thay đổi như sau:
- Loại Gradient: Hình tròn
- Vị trí Gradient: Trung tâm
- Lặp lại Gradient: CÓ
- Đơn vị Gradient: Phần trăm
- Hình nền vuông phía trên: không
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Đây là cái nhìn của chúng tôi về cách sử dụng tùy chọn để Lặp lại Gradient từ Divi để tạo hình nền tùy chỉnh. Nhiều điều chỉnh trong cài đặt gradient ảnh hưởng đến thiết kế của gradient.
Gradient Repeat hoạt động tốt với tất cả các tinh chỉnh này để dễ dàng tạo các mẫu nền tùy chỉnh thú vị.
Chúng tôi khuyên bạn nên thử các ví dụ mà chúng tôi đã cung cấp ở đây và thực hiện các thay đổi để xem độ chuyển màu bị ảnh hưởng như thế nào và tạo độ dốc nền tùy chỉnh của riêng bạn.
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 thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách 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.
...
