Divi arka plan ayarları ile bir gradyan arka plan nasıl yapılır
Bugünün öğreticisinde, yeni Divi arka plan tasarımı özelliğinin web sitenize ve daha spesifik olarak taşındığı yeni ve zarif olasılıkları keşfedeceğiz; gradyanın arka planını kullanarak. Bu yeni arka plan güncellemesiyle, kendi web sitenizi tasarlarken veya müşteriler için ihtiyaçlarınızı karşılamanıza yardımcı olacak Divi üreticisine birçok yeni seçenek eklendi. Bu yeni seçenek, web sitenizin görünümü ve hissi ile oynamanızı sağlar. Bu güncellemenin piyasaya sürülmesinden önce, şimdi Divi-Must’ta yapılabilen değişikliklerin çoğu özel bir CSS kodu üzerinden yapılır. Arka planınızda tasarım değişiklikleri yapmak artık eskisinden daha kolay. Birkaç basit tıklama ile, web sitenizin tüm farklı bölümleri için güzel bir arka plan oluşturabilirsiniz.
Gradyan Arka Plan Örnekleri Gradyanımız, daha önce ve sonra görüntülerle üç parça yaptı, bu da yeni seçeneklerin web siteniz tarafından yansıtılan tüm hissi nasıl artırabileceğini ve belirli bir “je ne sais quoi” faktörü sağlayabileceğini gösterecektir. Kahraman bölümü, arka plan görüntüleri eklerken kahramanların görünümüdür:
Metin Oryantasyonu: Orta
Metin yazı tipi boyutu: 30
Metin yazı tipi rengi: #ffffff
İkinci metin modülünü şimdi ayarlar, bir sonraki metin modülünü açın ve metni içerik kutusuna da girin. Ardından, Tasarım sekmesini açın ve metin alt kategorisinde aşağıdaki değişiklikleri oluşturun: Metin Oryantasyonu: Orta
Metin Yazı Tipi Boyutu: 16 Renkli Yazı Tipi Metin: #ffffff
Aynı sekmeyi aşağı kaydırın ve alt kategori boyutlandırmasında maksimum genişliğe ‘500 piksel’ ve aralık alt kategorisinde alt kenar boşluğuna ‘%2’ ekleyin.
Son fakat en az değil, düğme modülü için modül ayarlarını açın. İçerik sekmesindeki metnin alt kategorisindeki düğmenizle bağlantılı olan CTA’yı yazın ve Tasarım sekmesini açın. Tasarım sekmesinin içinde, düğmenin alt kategorisinde aşağıdaki ayarları yapın: Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 20
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: RGBA (0.0,0,0)
Sınır sınır genişliği: 2
Düğme Sınır Rengi: #ffffff
Sınır sınır yarıçapı: 7
Şimdi, satır bölümünü açın ve tasarım modülünün spasi alt kategorisinde aşağıdaki ayarları yapın: Üst Marj:% 15 Alt Marj:% 10
Gradyan Arka Plan streç ayarları Şimdi hoş kısmına ulaşıyoruz; Arka plan görüntüsüne kaplama gradyan arka plan ekleme. Lütfen ve bölüm ayarlarını açın. Ardından, arka plan alt kategorisini açın ve gradyanın arka planını ekleyerek başlayın. Yaptığımız örnekler için aşağıdaki ayarları kullanıyoruz: İlk renk: #3730ff
İkinci renk: #E02B20
Gradyan Türü: Doğrusal
Gradien yönü: 272deg
Başlangıç Pozisyonu:% 40
Son pozisyon:% 100
Şimdi, Arka Plan Görüntüsü sekmesini açın ve seçtiğiniz resmi ekleyin. Yapmaya çalıştığımız etkileri artırmak için gökyüzünü içeren bir görüntü seçtik.
Şimdi, aynı sekmeyi aşağı kaydırın. Arka plan görüntülerini odaklayın ve karışık karışık resim karışımındaki çarpma seçeneğini etkinleştirin. Ayrıca, istediğiniz sonuçları elde etmenize yardımcı olabilecek birçok seçeneğiniz de var. Ve burada nihai sonucunuz var: Adım adım: Size nasıl yapacağımızı göstereceğimiz bulanıklığın ikinci örneği açıklama bölümüdür. Açıklamanın içeriğine odaklanmak istiyoruz, bu yüzden yoğun bir arka plan seçmiyoruz, bir desen arka planı seçiyoruz. Bu örnekte kullanılan arka plan paterni Toptal’dan gelir. Ticari hedefler de dahil olmak üzere her türlü hedef için kullanmak istediğiniz deseni indirebilirsiniz. SSS’de anlatıldığı gibi web sitenize kredilerini vermeyi unutmayın. Ayrıca gradyan renginin görünmesini sağlamak için biraz şeffaf bir açıklama simgesi yapıyoruz. Her bulanıklık aynı ayarlara sahip olsa da, biraz farklı bir simgeden görünen ve kullandığımız gradyan rengine uygun renkler. Yeni bir sayfaya veya mevcut sayfaya standart bir parça ekleyerek başlamaya başlayın. Bu bölümde, üç sütunlu bir satıra ihtiyacımız var. İlk satır sütununa bir bulanıklık modülü ekleyerek devam edin. Her sütunda aynı açıklama modülü ayarlarını kullanacağız. Bu yüzden sadece bir kez bir bulanıklık modülü yapmamız ve diğer iki sütun için klonlamamız gerekiyor. Blurb ayarları Bulanık modül ayarlarını açın ve içerik sekmesindeki metin alt kategorisine başlık ve içeriği yazın. Tasarım sekmesine geçin ve görüntü ve simge alt kategorisinde aşağıdaki ayarlamaları yapın: Ikon Renk: RGBA (255,255,255.0.36) Çember simgesi: evet
Çember rengi: RGBA (255,255,255.0)
Çevre Sınırlarını Göster: Evet
Daire Sınır Rengi: RGBA (255,255,255.0.36)
Resim Yerleştirme/Simge: Üst
Simge yazı tipi boyutu kullanın: evet
Simge yazı tipi boyutu: 96px
Aynı sekmeyi aşağı kaydırın ve metin yönünü metin alt kategorisindeki ‘orta’ye yerleştirin.
Başlık metninin alt kategorisini kaydırmaya ve açmaya devam edin. Lütfen ve aşağıdaki ayarları kullanın: Yazı Tipi Boyutu: 18
Yolsuzluk metni rengi: #ffffff Gölgelik çizgisinin yüksekliği: 1em Şimdi, değiştirilecek tek kişi vücut metninin alt kategorisidir. Aşağıdaki ayarların geçerli olduğundan emin olun:
Vücut Boyutu: 14
Gövde metni rengi: #ffffff
Vücut Hattı Yüksekliği: 1.5EM
Blurb modülünü iki kez klonlamayı, kalan iki sütuna yerleştirmeyi ve uygun içeriği değiştirmeyi unutmayın. Çizgi Ayarları Hat ayarlarını açın ve tasarım sekmesindeki boşluk alt kategorisini açın. Yapmanız gereken tek şey, üst ve alt marjları ‘%5’e değiştirmek.
Son fakat en az değil gradyan arka planının ayarları, kaplama gradyanına sahip bir arka plan görüntüsü ekleyeceğiz. Bölüm ayarlarınızı açın ve içerik sekmesinin arka plan alt kategorisini açın. Ardından, gradyan seçeneğinde aşağıdaki değişiklikleri yapın:
İlk renk: #52009B
Renk İkinci: #0edeed
Başlangıç Pozisyonu:% 28
Son pozisyon:% 100
Arka plan seçeneklerine geçin, seçilen desenleri yükleyin ve aşağıdaki değişiklikleri yapın:
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar (modelinize bağlı olarak)
Arka plan görüntü karışımı: çarpın İşte burada! Şimdi aşağıdaki şaşırtıcı sonuçlara sahip olmalısınız:
Adım Adım: Fiyat Bölümü
Bu yazının son örneği fiyat bölümüdür. Bu bölümde size her yerde gradyanların arka planını kullanabileceğinizi göstermek istiyoruz. Bu sadece parçalarda değil, sütunda da kullanılmak üzere yapılır. Yalnızca iki sütun için gradyanın arka planını kullanacağız ve ikinci sütun için gradyan arka planını kapacağız. Bunu yapmamızın nedeni, üstün fiyat paketini vurgulamaktı. Diğer iki sütuna göre daha yoğun bir renk kullanıyoruz ve ayrıca bir desen arka plan ekliyoruz. Bu iki şeyin kombinasyonu, insanları amiral gemisi fiyat paketinize, en çok tanıtmak istediğiniz şeylere çekme fırsatını artırır. Yeni bir sayfaya yeni bir standart parça ekleyerek veya zaten web sitenizde olan yeni bir standart parça ekleyerek başlamaya başlayın. Parça üç sütunlu bir satır gerektirir. Kullanacağımız modül her sütun için aynıdır ve aynı ayarları içerir. Bu yüzden ilk sütun için yapacağız ve daha sonra diğer iki sütuna klon yapacağız. Ayarlar İlk metin modülü ilk sütuna yeni bir metin modülü ekleyin, içerik sekmesinin metin alt kategorisindeki içerik kutusuna fiyat paketi türünü ekleyin ve tasarım sekmesine devam edin. Tasarım sekmesinin metin alt kategorisine aşağıdaki değişiklikleri uygulayın: Metin Oryantasyonu: Orta
Metin yazı tipi boyutu: 24 Metin yazı tipi rengi: #ffffff Yüksek çizgi metin: 1.5em Aynı sekmeyi aşağı kaydırın ve SPasi alt kategorisinde aşağıdaki değişiklikleri yapın:
Üst kenar boşluğu: 50 piksel
Alt kenar boşluğu: 20 piksel
Ayarlar İkinci metin modülü aynı sütuna başka bir metin modülü ekleyin. İçerik sekmesinin metin alt kategorisindeki içerik kutusuna paket fiyatını yazın ve Tasarım sekmesine devam edin. Tasarım sekmesinde aşağıdaki ayarları yapın:
Metin Oryantasyonu: Orta Boyut Metin Yazı Tipi: 82px Metin yazı tipi rengi: #ffffff
Yüksek çizgi metin: 1.1em
Aynı sekmeyi aşağı kaydırın ve alt kenar boşluğuna ’10px’ ekleyin. Ayarlar Üçüncü metin modülünü son metin modülümüz için, İçerik sekmesindeki metin alt kategorisindeki içerik kutusuna metin ekleyin. Ardından, Tasarım sekmesini açın ve metin alt kategorisinde aşağıdaki değişiklikleri yapın:
Metin Oryantasyonu: Orta
Metin yazı tipi boyutu: 16
Metin yazı tipi rengi: #ffffff
Yüksek çizgi metin: 1.1em Aynı sekmeyi aşağı kaydırın ve uzay alt kategorisindeki alt kenar boşluğuna ’33px’ ekleyin. Bu sütuna ekleyeceğimiz bir sonraki modül düğmesini ayarlamak düğme modülüdür. İçerik Metninin alt kategorisindeki içerik kutusuna görüntülemek istediğiniz CTA’yı yazın ve Tasarım sekmesine devam edin. Tasarım sekmesinin içinde, hizalama alt kategorisine düğme hizalamasını ‘merkeze’ koyun ve düğme alt kategorisinde aşağıdaki değişiklikleri yapın:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 13
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: RGBA (255,255,255.0.11) Sınır sınır genişliği: 2 Düğme Sınır Rengi: #ffffff
Sınır sınır yarıçapı: 4
Mektup Mesafesi Düğmesi: 1
Son bölücü ayarı, alan oluşturmak için sütuna bir bariyer ekleyeceğiz. İçerik sekmesinde ‘Bölücüyü Görüntülemeyin’ seçin ve yüksekliğe ’25px’ koyduğunuz tasarım sekmesini açın.
Şimdi tüm modülleri ekledikten sonra, klonladığınızdan ve başka bir sütuna da koyduğunuzdan emin olun. Gradyan Arka Plan Streç Ayarları Bu örnek için, farklı sütunlar için iki farklı arka plan ayarı kullanacağız. İlk ve son sütun aynı olacak ve ikinci sütun biraz farklı olacak. Satır ayarlarını açın ve içerik sekmesinin arka plan alt kategorisindeki birinci ve üçüncü sütun gradyan seçeneklerinde aşağıdaki değişiklikleri uygulayın: Birinci Renk: RGBA (10.122.178.0.57)
İkinci renk: RGBA (142,0,142.0.47)
Sütun 1 Tip gradyanı: Radyal
Sütun 1 radyal yön: sol üst
Sütun 1 Başlangıç Konumu: 0 Sütun 1:% 100’ün son konumu Ardından, sütunu 2’yi açın ve gradyan seçeneğinde aşağıdaki değişiklikleri yapın:
Birinci renk: #0A7AB2
Renk İkinci: #8E008E
Sütun 2 gradyan tipi: doğrusal
Sütun 2 gradyan yönü: 180deg
Sütun 2 Başlangıç Konumu: 0
Sütun 2 Son Konum: 100 Arka plan görüntüsüne geçin, arka plan resimlerini yükleyin ve ayarları değiştirin:
Sütun 2 Arka Plan Görüntü Pozisyonu: Sol üst
Sütun 2 Arka plan görüntüsünün tekrarlanması: tekrarlayın
Sütun 2 Karışık Arka Plan Görüntüsü: çarpın
Bu blog gönderisinde size gösterdiğimiz örneğin son zihni, yeni arka plan tasarımı özelliğini kullanırken elde edebileceğiniz sonuçların sadece küçük bir parçasıdır. Gelecek yayınlarda, oluşturduğunuz web sitesi için harika bir tasarım oluşturmanıza yardımcı olacak diğer örnekleri kesinlikle ele alacağız. Sorularınız, yorumlarınız veya önerileriniz varsa; Aşağıdaki yorumlar sütununa bir yorum bırakın! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
