Divi: So sánh các loại gradient khác nhau

mệnh Gaetan | Divi, Hướng dẫn Divi

Bạn có muốn sử dụng Gradient Builder của Divi nhưng bạn không biết chọn loại gradient nào?

Các loại Gradient là một phần của Divi Trình tạo Gradient . Các loại gradient mới Divi cho phép bạn thêm các hình dạng và màu sắc khác nhau vào nền của mình. 

Trong bài viết này, chúng tôi sẽ so sánh các loại gradient này và chỉ cho bạn cách sử dụng chúng để tạo ra các hình nền độc đáo!

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

Các loại gradient Divi là gì?

Trình tạo Gradient mới của Divi bổ sung một số tính năng gradient mới bao gồm các loại gradient. Có bốn loại gradient để lựa chọn:

  • Tuyến tính
  • Vòng tròn
  • Hình elip
  • Hình nón
Các loại Gradient Divi là gì

Mỗi kiểu hiển thị gradient khác nhau. Chúng được sử dụng để định hình gradient được hiển thị dưới dạng mẫu màu tuyến tính, trong hình tròn, hình elip hoặc hình nón. Chúng ta sẽ thấy chúng chi tiết trong các ví dụ của chúng tôi.

Các loại Gradient Divi là gì

Các loại gradient cũng bị ảnh hưởng bởi các điều khiển khác, chẳng hạn như vị trí, có lặp lại hay không, đơn vị đo cho thanh cuộn gradient và vị trí của gradient phía trên nền.

Các loại Gradient Divi là gì

Mỗi điều chỉnh có thể có tác động nhỏ hoặc lớn đến gradient. Gradient có thể tinh tế hoặc nổi bật. Các thay đổi nhỏ hoặc lớn có thể được thực hiện chỉ với một lần điều chỉnh.

Với ý nghĩ đó, chúng ta hãy xem xét một số ví dụ về gradient bằng cách sử dụng từng loại gradient. Chúng tôi sẽ đưa ra ba ví dụ về từng loại gradient. 

Đầu tiên sẽ là một loại gradient tiêu chuẩn mà bạn sẽ thấy trên web. Hai phần tiếp theo sẽ mang tính thử nghiệm hơn một chút, chỉ để xem bạn có thể làm gì với các loại gradient.

Ví dụ về các loại gradient

Đối với các ví dụ về loại gradient, chúng tôi sử dụng phần Hero trên trang chủ của gói bố trí giường và bữa sáng miễn phí có sẵn trong Divi. Phần này đã có một gradient, nhưng chúng tôi sẽ thay thế nó và thực hiện một số thử nghiệm. 

Chúng tôi có thể loại bỏ gradient nền ban đầu hoặc sửa đổi nó. Kết quả là như nhau. Để đơn giản, chúng tôi sẽ sửa đổi nó.

Ví dụ về các loại gradient

Chúng tôi đã tùy chỉnh văn bản tiêu đề bằng cách thay đổi nó từ màu đen sang màu trắng.

Ví dụ về các loại gradient

Loại gradient tuyến tính

Đọc cũng: Divi: Cách sử dụng hòa trộn hoa văn trên ảnh nền

Gradient tuyến tính hiển thị gradient như thể nó được trải rộng trên trang.

Ví dụ đầu tiên về loại gradient tuyến tính

Đây là bản xem trước của ví dụ đầu tiên của chúng tôi. Nó hiển thị màu sáng hơn ở bên trái màn hình và màu tối hơn ở bên phải, với sự chuyển đổi mượt mà giữa chúng.

Ví dụ đầu tiên về gradient tuyến tính

Để tạo ví dụ này, hãy thêm hai màu. các Thủ tướng là rgba (92,158,82,0.76) ở vị trí 0%. các 2 là rgba (0,10,4,0.76) ở vị trí 97%.

  • Dừng Gradient:
    • 0%: rgba (92,158,82,0.76)
    • 97%: rgba (0,10,4,0.76)
Ví dụ đầu tiên về gradient tuyến tính

Sau đó, thay đổi Kiểu gradient thành Linear và đặt Chiều hướng trên 131 độ. rằng ông đừng lặp lại. Đặtđơn vị trên Phần trăm. Đặt gradient phía trên hình nền.

  • Loại Gradient: Tuyến tính
  • Hướng Gradient: 131deg
  • Lặp lại Gradient: KHÔNG
  • Đơn vị Gradient: Phần trăm
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ đầu tiên về gradient tuyến tính

Ví dụ thứ hai về loại gradient tuyến tính

Đây là bản xem trước của ví dụ về gradient tuyến tính thứ hai. Nó hoạt động giống như cách đầu tiên, nhưng nó có một điểm dừng khó ở bên trái, nơi bóng râm tối hơn chiếm ưu thế.

Ví dụ về gradient tuyến tính thứ hai

Để tạo cái này, hãy thêm ba Gradient Stops. các Thủ tướng là rgba (18,76,41,0.76) ở vị trí 13%. các 2 là rgba (92,158,82,0.76) ở vị trí 13%. màu 3 là rgba (18,76,41,0.76) ở vị trí 34%.

  • Dừng Gradient:
    • 13%: rgba (18,76,41,0.76)
    • 13%: rgba (92,158,82,0.76)
    • 34%: rgba (18,76,41,0.76)
Ví dụ về gradient tuyến tính thứ hai

Sau đó, thiết lập Kiểu gradient thành Linear và đặt Chiều hướng trên 90 độ. rằng ông đừng lặp lại . Thay đổiđơn vị tỷ lệ phần trăm. Đặt nó phía trên hình nền.

  • Loại Gradient: Tuyến tính
  • Hướng Gradient: 90deg
  • Lặp lại Gradient: KHÔNG
  • Đơn vị Gradient: Phần trăm
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ về gradient tuyến tính thứ hai

Ví dụ thứ ba về loại gradient tuyến tính

Ví dụ thứ ba của chúng tôi đặt một đường màu sáng theo đường chéo ở góc trên bên phải, chạm vào một đường màu tối hơn.

Ví dụ về gradient tuyến tính thứ ba

Cái này có ba màu. màu 1 là rgba (92,158,82,0.76) ở vị trí 13%. màu 2 là rgba (92,158,82,0.76) ở vị trí 23%. Các màu thứ ba là rgba (18,76,41,0.76) ở vị trí 32%.

  • Dừng Gradient:
    • 13%: rgba (92,158,82,0.76)
    • 23%: rgba (92,158,82,0.76)
    • 32%: rgba (18,76,41,0.76)
Ví dụ về gradient tuyến tính thứ ba

Xác định Kiểu gradient thành Linear trong một hướng 209 độ. Sinh ra đừng lặp lại và thiết lậpđơn vị trên Phần trăm. Đặt gradient phía trên hình nền.

  • Loại Gradient: Tuyến tính
  • Hướng Gradient: 209deg
  • Lặp lại Gradient: KHÔNG
  • Đơn vị Gradient: Phần trăm
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ về gradient tuyến tính thứ ba

Loại gradient tròn

Loại gradient tròn tạo ra một vòng tròn với các màu sắc.

Ví dụ đầu tiên về kiểu gradient tròn

Ví dụ về gradient tròn đầu tiên của chúng tôi đặt một màu sáng ở trung tâm và một màu tối hơn xung quanh các cạnh.

Ví dụ đầu tiên về gradient tròn

Cái này có 2 màu. các Thủ tướng là rgba (92,158,82,0.76) ở vị trí 0%. các 2 là rgba (0,10,4,0.76) ở vị trí 62%.

  • Dừng Gradient:
    • 0%: rgba (92,158,82,0.76)
    • 62%: rgba (0,10,4,0.76)
Ví dụ đầu tiên về gradient tròn

Xác định Kiểu gradient trên hình tròn. Căn giữa hướng . Hãy chắc chắn rằng anh ấy đừng lặp lại , thay đổiđơn vị dưới dạng phần trăm và đặt nó phía trên hình nền.

  • Loại Gradient: Hình tròn
  • Vị trí Gradient: Trung tâm
  • Lặp lại Gradient: KHÔNG
  • Đơn vị Gradient: Phần trăm
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ đầu tiên về gradient tròn

Ví dụ thứ hai về kiểu gradient tròn

Gradient này đặt một cạnh tròn rõ ràng ở giữa màn hình.

Ví dụ về gradient hình tròn thứ hai

Nó có bốn màu. Hai màu được chồng lên nhau. các Thủ tướng là rgba (18,76,41,0.76) ở vị trí 13%. các 2 là rgba (92,158,82,0.76) ở vị trí 33%. màu 3 là rgba (92,158,82,0.76) ở vị trí 51%. màu 4 là rgba (18,76,41,0.76). Nó được đặt ở vị trí 51%, trên màu 3.

  • Dừng Gradient:
    • 13%: rgba (18,76,41,0.76)
    • 33%: rgba (92,158,82,0.76)
    • 51%: rgba (92,158,82,0.76)
    • 51%: rgba (18,76,41,0.76)
Ví dụ về gradient hình tròn thứ hai

Xác định Kiểu gradient sang hình tròn và đặt Chiều hướng ở góc trên cùng bên trái. Hãy chắc chắn rằng anh ấy đừng lặp lại , thay đổi đơn vị dưới dạng phần trăm và đặt nó phía trên hình nền.

  • Loại Gradient: Hình tròn
  • Vị trí Gradient: Trên cùng bên trái
  • Lặp lại Gradient: KHÔNG
  • Đơn vị Gradient: Phần trăm
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ về gradient hình tròn thứ hai

Ví dụ thứ ba về kiểu gradient tròn

Ví dụ này đặt một số vòng tròn sáng ở màu tối nhất, bắt đầu ở giữa vòng tròn.

Ví dụ về gradient hình tròn thứ ba

Cái này cũng xếp chồng hai màu theo một thứ tự nhất định để đạt được thiết kế này. Các ra mắt màu là rgba (18,76,41,0.76) ở vị trí 13%. màu 2 là rgba (18,76,41,0.76) ở vị trí 44%. Các thứ ba màu chồng lên màu thứ hai. Đây là rgba (92,158,82,0.76) ở vị trí 44%. màu 4 là rgba (92,158,82,0.76) ở vị trí 51%.

  • Dừng Gradient:
    • 13%: rgba (18,76,41,0.76)
    • 44%: rgba (18,76,41,0.76)
    • 44%: rgba (92,158,82,0.76)
    • 51%: rgba (92,158,82,0.76)
Ví dụ về gradient hình tròn thứ ba

thay đổi nó loại gradient trong vòng tròn. Đặt hướng phía dưới. lặp lại cái này. Đặtđơn vị trên Percentage và đặt gradient phía trên hình nền.

  • 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 Gradient: CÓ
Ví dụ về gradient hình tròn thứ ba

Loại gradient hình elip

Gradient hình elip đặt các màu trong hình elip.

Ví dụ đầu tiên về loại gradient hình elip

Ví dụ hình elip đầu tiên của chúng tôi đặt một hình elip có màu sáng ở giữa màn hình với màu tối hơn xung quanh nó.

Ví dụ đầu tiên về gradient hình elip

Cái này có hai màu. các Thủ tướng là rgba (92,158,82,0.76) ở vị trí 0%. các 2 là rgba (0,10,4,0.76) ở vị trí 50%.

  • Dừng Gradient:
    • 0%: rgba (92,158,82,0.76)
    • 50%: rgba (0,10,4,0.76)
Ví dụ đầu tiên về gradient hình elip

thay đổi nó loại gradient trong hình elip. Đặt hướng trên Trung tâm. Hãy chắc chắn rằng cái này đừng lặp lại , điều chỉnhđơn vị trên Phần trăm và đặt nó phía trên hình nền.

  • Loại Gradient: Hình elip
  • Vị trí Gradient: Trung tâm
  • Lặp lại Gradient: KHÔNG
  • Đơn vị Gradient: Phần trăm
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ đầu tiên về gradient hình elip

Ví dụ thứ hai về kiểu gradient hình elip

Ví dụ thứ hai của chúng tôi đặt nhiều đường tròn mỏng trong suốt gradient.

Ví dụ thứ hai về gradient hình elip

Nó có hai màu. các Thủ tướng là rgba (92,158,82,0.76) ở vị trí 34pt. các 2 là rgba (0,10,4,0.76) ở vị trí 39pt.

  • Dừng Gradient:
    • 34pt: rgba (92,158,82,0.76)
    • 39pt: rgba (0,10,4,0.76)
Ví dụ thứ hai về gradient hình elip

thay đổi nó Kiểu gradient thành Elliptical và điều chỉnh Chiều hướng bên trái. Có cái này tại nói lại. Thay đổiđơn vị trong dấu chấm. Đặt nó phía trên hình nền.

  • Loại Gradient: Hình elip
  • Vị trí Gradient: Phải
  • Lặp lại Gradient: CÓ
  • Đơn vị Gradient: Dấu chấm (pt)
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ thứ hai về gradient hình elip

Ví dụ thứ ba về loại gradient hình elip

Ví dụ thứ ba của chúng tôi đặt rất nhiều nửa vòng tròn trong gradient.

Ví dụ về Gradient Elip thứ ba

Cái này có hai màu. các Thủ tướng là rgba (32,68,35,0.73) ở vị trí 34vmin. các 2 là rgba (0,10,4,0.76) ở vị trí 39vmin.

  • Dừng Gradient:
    • 34vmin: rgba (32, 68, 35, 0.73)
    • 39vphút: rgba (0,10,4,0.76)
Ví dụ về Gradient Elip thứ ba

thay đổi nó Kiểu gradient thành Elliptical và điều chỉnh Chiều hướng trên Cao. Có cái này tại nói lại. Thay đổiĐơn vị trong Viewport Minimum. Đặt nó phía trên hình nền.

  • Loại Gradient: Hình elip
  • Vị trí Gradient: Trên cùng
  • Lặp lại Gradient: CÓ
  • Đơn vị Gradient: Viewport Minimum (vmin)
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ về Gradient Elip thứ ba

Loại gradient hình nón

Xem thêm: Divi: Cách tạo chuyển tiếp nền giữa các phần tử

Loại gradient hình nón hiển thị gradient dưới dạng hình nón như thể hình nón được nhìn từ trên xuống.

Ví dụ đầu tiên về loại gradient hình nón

Ví dụ này đặt một đường chéo từ tâm của gradient sang trái với màu sáng ở một bên và màu tối ở bên kia.

Ví dụ đầu tiên về gradient hình nón

Nó có hai màu. các Thủ tướng là rgba (92,158,82,0.76) ở vị trí 0%. các 2 là rgba (0,10,4,0.76) ở vị trí 50%.

  • Dừng Gradient:
    • 0%: rgba (92,158,82,0.76)
    • 50%: rgba (0,10,4,0.76)
Ví dụ đầu tiên về gradient hình nón

thay đổi nó loại gradient trong hình nón. Điều chỉnh hướng trên 221 độ. Căn giữa vị trí et đừng lặp lại nó . Đặt gradient phía trên hình ảnh.

  • Loại Gradient: Hình nón
  • Hướng Gradient: 221deg
  • Chức vụ: Trung tâm
  • Lặp lại Gradient: KHÔNG
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ đầu tiên về gradient hình nón

Ví dụ thứ hai về kiểu gradient hình nón

Ví dụ này tương tự như ví dụ trước, nhưng nó đặt trung tâm dòng.

Ví dụ về gradient hình nón thứ hai

Cái này có bốn màu. các Thủ tướng là rgba (20,40,20,0.76) ở vị trí 7%. màu 2 là rgba (30,73,25,0.68) ở vị trí 24%. màu 3 là rgba (103,132,30,0.68) ở vị trí 65%. Các thứ tư màu là rgba (38,86,26,0.68) ở vị trí 85%.

  • Dừng Gradient:
    • 7%: rgba (20,40,20,0.76)
    • 24%: rgba (30,73,25,0.68)
    • 65%: rgba (103,132,30,0.68)
    • 85%: rgba (38,86,26,0.68)
Ví dụ về gradient hình nón thứ hai

Xác định loại gradient trên hình nón và hướng ở 0 độ. Căn giữa vị trí . Sinh ra đừng lặp lại và đặt nó phía trên hình ảnh.

  • Loại Gradient: Hình nón
  • Hướng Gradient: 0deg
  • Chức vụ: Trung tâm
  • Lặp lại Gradient: KHÔNG
  • Hình nền vuông phía trên Gradient: CÓ
Trình tạo Gradient của Divi

Ví dụ thứ ba về loại gradient hình nón

Ví dụ cuối cùng của chúng tôi đặt một loạt các đường từ tâm trên cùng của gradient ra ngoài theo mọi hướng.

Ví dụ về gradient hình nón thứ ba

Cái này có hai màu. các Thủ tướng là rgba (30,73,25,0.68) ở vị trí 5deg. các 2 là rgba (20,40,20,0.76) ở vị trí 7deg.

  • Dừng Gradient:
    • 5deg: rgba (30,73,25,0.68)
    • 7deg: rgba (20,40,20,0.76)
Trình tạo Gradient của Divi

Đặt GradientType trên Conical và Chiều hướng ở 221 độ. Đặt vị trí ở trên cùng. Nói lại cái này và đặt nó phía trên hình nền.

  • Loại Gradient: Hình nón
  • Hướng Gradient: 221deg
  • Chức vụ: Trên cùng
  • Lặp lại Gradient: CÓ
  • Hình nền vuông phía trên Gradient: CÓ
Ví dụ về gradient hình nón thứ ba

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

Kết luận

Đây là cái nhìn của chúng ta về việc so sánh các loại gradient trong Trình tạo Gradient của Divi. 

Như bạn có thể thấy từ những ví dụ này, các cài đặt rất đơn giản, nhưng bất kỳ cài đặt nào trong số chúng đều có thể tạo ra sự khác biệt lớn trong thiết kế của gradient. 

Để có kết quả tốt nhất, hãy thử nghiệm với các loại gradient với các hướng và vị trí khác nhau, đồng thời bật hoặc tắt tùy chọn lặp lại để xem bạn có thể tạo những gì.

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 nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.

Đừng ngần ngại cũng 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.

...

Đăng bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.