Benzersiz bir dairesel arka plan şekli tasarlamak için bir divi gradyan üreticisi nasıl kullanılır
Gradyan Oluşturucu Divi birçok ilginç arka plan yapabilir. Bu renkler, genellikle zor olan şekiller ve desenler oluşturmak için birlikte çalışır. Divi’nin gradyan üreticisi, dairesel bir arka plan şekli gibi dairesel bir desen yapımı yapan ayarlar içerir, bu da benzersiz bir arka planı kolay bir iş haline getirir. Bu yazıda, herhangi bir parçaya veya sütuna dikkat çeken benzersiz bir dairesel arka plan şekli tasarlamak için Divi gradyan oluşturucusunun nasıl kullanılacağını göreceğiz. Başlayalım. Önizlemenin ilk olarak, ne inşa ettiğimizi görelim.
Masaüstü ilk dairesel arka plan
Arka plan rengi: #fff7ef Ardından, Tasarım sekmesini seçin. Alana doğru kaydırın ve üst ve alt dolgu için 0px girin. Bölümün ayarlarını kapatın.
Yukarıda: 0px
Aşağıda: 0px Bir sonraki satırı ekleyin, iki sütun ekleyin. Ardından, diş simgesine tıklayarak satır ayarlarını açın. Tasarım sekmesini seçin ve sütun yüksekliklerini etkinleştir. Genişliği% 100’e ayarlayın ve maksimum genişliği hiçbirine değiştirin. Yüksek sütunu eşitleyin: evet
Genişlik:% 100
Maksimum genişlik: yok
Ardından, alana gidin ve üst ve alt dolgu için 0px girin. Dolgu: 0px üst, 0px aşağıda
Bir sonraki sütun ayarı, sütunda bazı alan ayarlamaları yapacağız. Dairesel bir arka plan yaptığımızda sütun ayarlarına döneceğiz. İlk sütun ayarlarını açın. Tasarım sekmesini açın ve üst ve alt dolgu için 8VW ve sol ve sağ dolgu için% 10 girin. Sütun ayarlarını kapatın. Üst: 8VW
Aşağıda: 8VW
Sol:% 10
Doğru:% 10
Ardından, ikinci sütun ayarlarını açın. Tasarım sekmesini açın ve üst ve alt dolgu için 8VW ve sağ dolgu için% 12 girin. Sütun ve satır ayarlarını kapatın. Üst: 8VW
Aşağıda: 8VW
Doğru:% 12
Sonraki bölücü modülü, bölücü modülünü sol sütuna ekleyin. Bölme modülü ayarlarını açın ve görünürlüğü görüntüleyememek için seçin. Görünürlük Göster: Hayır
Ardından, Tasarım sekmesini seçin ve alana doğru kaydırın. Tablet simgesini seçin ve Tablet sekmesini seçin. Üst ve alt dolguya 15vh ekleyin. Telefon ayarları tablet ayarlarını takip edecektir. Masaüstü sürümü için bu ayara ihtiyacımız yok. Modül ayarlarını kapatın. Dolgu (tablet): 15vh üst, 15vh aşağı
Bir sonraki başlık metin modülü, metin modülünü sağ sütuna ekleyin. Bu, iletişim formu için bir başlık oluşturacaktır. “İletişim Kur” başlığını ekleyin ve yazı tipini başlık 1 olarak değiştirin. Yazı Tipi: Başlık 1
Vücut İçeriği: İletişim
Tasarım sekmesini seçin ve başlık metnine gidin. Yazı tipi için Inter’i seçin ve yazı tipi ağırlığı için ışık seçin. Yazı tipi: inter Mektup Ağırlığı: Hafif
Yazı tipi rengini siyah, masaüstü yazı tipi boyutunu 78px, tablet yazı tipi boyutunu 44px’e ve mobil yazı tipi boyutuna 28 piksel olarak ayarlayın. Çizginin yüksekliğini 1.1em olarak değiştirin. Modül ayarlarını kapatın.
Renk: #000000 Yazı tipi boyutu: 78px (masaüstü), 44px (tablet), 28px (cep telefonu)
Hat yüksekliği: 1.1em
Bir sonraki açıklama metin modülü, metin modülünü başlık metin modülünün altına ekleyin.
Ayarları açın ve açıklamanızı içerik alanına ekleyin. Kukla içeriği yalnızca örneğim için kullanıyorum. Vücut Metni: Açıklama Ardından, Tasarım sekmesini seçin ve yazı tipleri için Inter’i seçin. Yazı tipi ağırlığı için ışığı seçin ve rengi siyah olarak ayarlayın.
Yazı Tipi: Inter Mektup Ağırlığı: Hafif
Renk: #000000
Her ekran türünün boyutunu ayarlamak için tablet simgesini seçin. Masaüstü simgesini tıklayın ve boyutu 24 piksel olarak değiştirin. Tablet simgesini seçin ve boyutu 20px olarak değiştirin. Telefon simgesini seçin ve boyutu 16px olarak değiştirin. Çizginin yüksekliğini 1.6EM olarak değiştirin. Modül ayarlarını kapatın.
Son Kontak Form Modülü, Açıklama metninin altına Kontak Formu modülünü ekleyin. Ayarları açın, spam koruması için aşağı kaydırın ve spam koruma hizmetlerini kullanarak etkinleştirin. Bu özellik hakkında daha fazla bilgi için, Optin E -posta Divi modülünde Spam Koruma Hizmetlerinin Nasıl Kullanılacağı makalesine bakın. Spam Koruma Hizmetlerini Kullanın: Evet Tasarım sekmesini açın ve düzlemin arka plan rengini RGBA’ya (0.0.0.0) ayarlayın. Alan metninin rengini siyah olarak ayarlayın.
Alan arka plan rengi: RGBA (0.0,0,0) Metin rengi: #000000
Ardından, yazı tipi alanları için Inter’i seçin. Boyutu 16px ve hat yüksekliği 1.6EM olarak değiştirin.
Yazı Tipi: Inter Boyut: 16px
Hat yüksekliği: 1.6em
Düğmeyi düğmeye kaydırın ve özel stili kullanın. Metin boyutunu 16px olarak değiştirin. Metnin rengini beyaz olarak değiştirin ve arka plan rengini #B35330 olarak ayarlayın.
Özel bir stil kullanın: evet Metin Boyutu: 16px
Metin rengi: #ffffff
Arka plan rengi: #B35330
Sınır yarıçapını 100 piksel olarak değiştirin. Yazı tipi düğmesi için Inter’i seçin. Ağırlığı orta olarak değiştirin.
Sınır yarıçapı: 100 piksel Yazı tipi düğmesi: inter
Ağırlık: Orta
Dolgu düğmesine aşağı kaydırın ve sol ve sağ için 16px, üst ve altta ve 40 piksel ekleyin.
Dolgu düğmesi: 16px (üst, alt), 40px (sol, sağ) Alan sınırları sınıra doğru ilerleyin ve giriş sınır genişliğini 1 piksel olarak değiştirin. Giriş sınırının rengini #B35330 olarak değiştirin.
Giriş Sınırı Genişliği: 1 piksel Giriş Sınırı Rengi: #B35330
Sonraki alan ayarları, adın adı için ayarları açın.
Tasarım sekmesini seçin ve tam genişlik yapısını etkinleştirin. Ad ayarlarını kapatın. Tam genişlik yapın: evet Ardından, e -posta alanı ayarlarını açın.
Tasarım sekmesini seçin ve tam genişlik yapısını etkinleştirin. E -posta ayarlarını kapatın, iletişim formu ayarlarını kapatın ve çalışmanızı kaydedin. Tam genişlik yapın: evet Çıktı Parçamızın artık solda boş bir sütun ve iki metin modülü ve sağdaki temas formu modülü ile oluşturulan iletişim formu olan bir parçası var. Bir arka plan yapmadan önce, bu bölümü ikiye katlayalım.
İmleci bölümün ayarlarına gidin ve yinelenen simgeyi üç kez tıklayın. Daha sonra dört parçamız olacak. Her biri için farklı bir dairesel arka plan ekleyeceğiz. Bir arka plan gradyanı ekleyin Dairemizin her arka planı için, satırın sol sütununa bir arka plan gradyanı ekleyeceğiz. Çoğunlukla aynı rengi kullanacaklar ve bazılarının kazık bir gradyan durağı olacak. Kazık dizisine ekstra dikkat edin, çünkü bu gradyanı değiştirecektir. Ayrıca farklı birimler kullanacağız, ancak her şey yüzde olarak başlayacak. Arka plan gradyanı yapmak için, diş tekerleklerinin simgesine tıklayarak satır ayarını açın. İlk sütun için dişli simgesine tıklayın. Arka plana doğru kaydırın, Arka Plan Yasası sekmesini seçin ve arka plan gradyanını ekleyin. Degrade çubuğunu tıklayarak gradyan durdurmasını yerleştirin. Rengi seçerek değiştirin. Gradyan çubuğu varsayılan olarak yüzde olarak gösterir, ancak devam ettiğimizde değiştireceğiz. Şimdi, dairesel arka planımıza bir örnek verelim. Dairesel bir dairesel arka planın arka plan şekli beş gradyan durağına sahip olacak ve dairede birçok daire yapacak. Birinci gradyan durması için birinci gradyan durağı,% 29 konuma ayarlayın ve #FFB482 rengini kullanın. Pozisyon: 29 Renk: #FFB482 İkinci gradyan durağı,% 31 işaretine ikinci gradyan durağını ekler ve rengi #A84321 olarak değiştirir.
Pozisyon: 31
Renk: #A84321 Üçüncü gradyan durağı üçüncü gradyan durağını% 51 olarak ayarladı ve rengi #FFC99B olarak değiştirdi.
Pozisyon: 51
Renk: #FFC99B Dördüncü gradyan durağı, dördüncü gradyan durağını% 63 olarak ayarlar ve rengi #ffc99b olarak değiştirir.
Pozisyon: 63
Renk: #FFC99B Beşinci gradyan durağı,% 78 işaretinde beşinci gradyan durağını ayarlar ve rengi #ffb67f olarak değiştirir.
Pozisyon: 78
Renk: #FFB67F Gradyan Ayarları Degrade ayarları için, türü dairesel olarak değiştirin ve ortaya konumlandırın. Gradyanı yeniden etkinleştirin, üniteyi piksel olarak değiştirin ve degradeyi arka plan görüntüsünün üzerine yerleştirin. Tür: Dairesel
Pozisyon: Orta
Gradien’i tekrarlayın: Evet Gradyan Birimi: Pixel
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
İkinci dairesel iki dairesel arka plan şeklinin arka plan şekli, beş gradyan durağını kaplayacağız. Bu, desenin bir kısmını bir köşeden daire içine alacaktır. İlk gradyan durağı için birinci gradyan durağı% 31 olarak ayarlanır ve rengi #A84321 olarak değiştirir.
Pozisyon: 31
Renk: #A84321
İkinci gradyan durağı ikinci gradyan durağını% 51 olarak yerleştirir ve rengi #FFB482 olarak değiştirir. Pozisyon: 51
Renk: #FFB482
Üçüncü gradyan durağı üçüncü gradyan durağını% 52’ye yerleştirir ve rengi #FFC99B olarak değiştirir. Pozisyon: 52
Renk: #FFC99B
Dördüncü gradyan durağı, dördüncü gradyan durağını% 63 olarak ayarlar ve rengi #ffc99b olarak değiştirir. Pozisyon: 63
Renk: #FFC99B
Beşinci gradyan durağı Son gradyan durağını% 78’e ayarlayın ve rengi #ffb67f olarak değiştirin. Pozisyon: 78
Renk: #FFB67F
Bir sonraki gradyan ayarı, gradyan ayarını ayarlayın. Türü dairesel olarak değiştirin ve konumu sağ üste ayarlayın. Degradeyi bildirin, ünite için piksel seçin ve degradeyi arka plan görüntüsünün üzerine yerleştirin. Modülünüzü kapatın ve ayarlarınızı kaydedin. Tür: Dairesel
Pozisyon: Sağ üst
Gradien’i tekrarlayın: Evet Gradyan Birimi: Yüzde
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Üç dairesel arka plan şekli üçüncü dairesel arka plan şeklimiz için, beş gradyan durağımızı iki kazıkla kullanacağız. Bu merkezi bir daire haline getirecektir. Birinci Degrade Durumu Birinci gradyan durağını% 7’ye yerleştirin ve rengi #ffb482 olarak değiştirin. Konum: 7
Renk: #FFB482
İkinci gradyan durağı ikinci gradyan durağını% 51’e yerleştirin ve rengi #A84321 olarak değiştirin.
Pozisyon: 51 Renk: #A84321
Üçüncü gradyan durağı, üçüncü gradyan durağını ikincinin%51’e yerleştirir ve rengi #FFC99B olarak değiştirir.
Pozisyon: 51 Renk: #FFC99B
Dördüncü gradyan durağı, dördüncü gradyan durağını% 63 işaretine yerleştirir ve rengi #FFC99B olarak değiştirir.
Pozisyon: 63 Renk: #FFC99B
Son beşinci gradyan durağı, son gradyan durağını% 78 işaretine yerleştirin ve rengi #ffb67f olarak değiştirin.
Pozisyon: 78 Renk: #FFB67F
Son gradyan ayarı, gradyan tipini dairesel olarak değiştirin ve bir merkeze konumlandırın. Degradeyi bildirin, ünite için yüzde seçin ve arka plan görüntüsünün üzerindeki degradeyi etkinleştirin. İş ayarlarınızı kapatın ve çalışmanızı kaydedin.
Tür: Dairesel Pozisyon: Orta
Gradien’i tekrarlayın: Evet
Gradyan Birimi: Yüzde Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Son dört örneğin arka plan şekli beş gradyan durağı kullanıyoruz ve dairesel bir desenin dörtte birini gösteriyoruz. İlk gradyan durağı,%51 işaretinde ilk gradyan durağını ayarlar. Ayarlarımızda VH olarak değiştireceğiz. Rengi #A84321 olarak değiştirin.
Pozisyon: 51
Renk: #A84321
İkinci gradyan durağı, bir sonraki gradyan durağını%51 oranında birinci sıraya yerleştirir. Rengi #FFC99B olarak değiştirin.
Pozisyon: 51 Renk: #FFC99B
Üçüncü gradyan durağı% 63 işaretine üçüncü gradyan durağı yerleştirin ve rengi #ffb482 olarak değiştirin. Pozisyon: 63
Renk: #FFB482 Dördüncü gradyan durağı, dördüncü gradyan durağını%63 işaretinde üçüncü gradyan durağının üzerine yerleştirir.
Pozisyon: 63
Renk: #FFC99B Beşinci gradyan durağı% 78 işaretine beşinci gradyan durağı yerleştirin ve rengi #ffb67f olarak değiştirin.
Pozisyon: 78
Renk: #FFB67F Son gradyan ayarı, türü dairesel olarak değiştirin ve konumu sağ altta ayarlayın. Degradeyi bildirin, üniteyi VH olarak değiştirin ve arka plan görüntüsünün üzerindeki gradyanı etkinleştirin. Ayarlarınızı kapatın ve çalışmanızı kaydedin.
Tür: Dairesel
Pozisyon: alt sağ Gradien’i tekrarlayın: Evet
Gradyan Birimi: Görünüm Yüksekliği Alanı (VH)
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet İlk dairesel masaüstünün arka plan şeklinin sonuçları
Telefon
Arka Plan Şeksı Genelge her iki masaüstü
Telefon
Üç masaüstü çemberinin arka plan şekli
Telefon Dört masaüstü dairenin arka plan şekli Telefon
