Divis bölücü ile arka plan dokusu nasıl yapılır
Bölücü web sitenizi bir sonraki seviyeye getirebilir. Buna ek olarak, varsayılan Divi tasarım seçeneğini kullanmak, sayfanıza benzersiz tasarım öğeleri eklemek için görüntü düzenleme yazılımına ihtiyaç duymazsınız. Yaratıcı yaklaşımlardan biri, web siteniz için bir arka plan dokusu oluşturmak için bir parça bölücü kullanmaktır. Bunu nasıl yapacağınızı öğrenmenin en iyi yolu pratik yapmaktır. Bu yüzden bu yazıda, aşağıda görebileceğiniz inanılmaz bir örnek oluşturacağız, ancak bu kavramı başarılı kılmak için bazı önemli unsurları paylaşarak başlayacağız.
Haydi Yapalım şunu! Sonuçlar Eğiticiye girmeden önce, farklı bir ekran boyutunda tekrar ne yapacağımıza bakalım. Masaüstünde
Bu işlevi yapmak için, hatırlamanız gereken ilk şey, ilk bölüm için daha düşük bir yatak sıfırına ve ikinci için üst yatak sıfırına sahip olmaktır.
Sıra da sıfır dolma gerektirir
Bu, parçalar ve satırlar arasındaki tüm alanları siler ve bölücünün çarpışmasına izin verir
Bölücü bölümü ayrıca yüksek bölücü ve yatay tekrar için daha yüksek bir değer gerektirecektir
Bu, tasarım tercihlerinize ve modülünüz için kullandığınız renkleri yenmediklerinden emin olmak için bölümleri bölmek için yarı saydam renkler kullanarak bölümü ne kadar bölmek istediğinize bağlıdır.
Giriş bölücülerine izin vermek için, sütununun arka plan rengi veya gradyanınızın arka planı da belirli bir şeffaflık gerektirir
Bölüm #1’i oluşturun Arka plan renk parçalarını ayarlayın İlk standart kısımla başlayalım. Bu bölümü ekledikten sonra yapmanız gereken ilk şey, arka plan rengi olarak ona ‘#2F2542’ vermektir.
Arka plan gradyanı Arka plan renginin üzerinde, degradenin arka planını kullanacağız. Gradyanın arka planı için kullandığımız ilk yarı saydam renk nedeniyle gradyanın arka plan rengini ve arka planını birleştiriyoruz. Bu, her iki rengin de birleştirilmesine izin verecektir. Aşağıdaki ayarları kullanın: Birinci Renk: RGBA (96,165,165.0.55)
Renk İkinci: #2F2542
Gradyan Türü: Doğrusal
Gradyan yönü: 150deg
Başlangıç pozisyonu:% 0
Son pozisyon:% 37
Alt bölücü bu bölümdeki tasarım sekmesine geçer ve hemen bölücü bölümünü uygulur: Bölme Stili: Listede bulun
Renk Renk: RGBA (109,52,93.0.35)
Böcek Yüksekliği: 300 piksel
Yatay bölücü tekrar: 5px (masaüstü), 2px (tablet ve cep telefonu)
Bu bölümün alanını değiştirerek mesafemiz devam edecektir. Daha önce de belirtildiği gibi, bu bölüm ile gelecekteki adımlara ekleyeceğimiz çizgi arasındaki mesafeyi ortadan kaldırmaya yardımcı olmak için bu bölümün altına sıfır bir rulmana sahip olmalıyız. Bu kullandığımız dolgu değeri: Yukarıda: 65px (bir sonraki adımda ekleyeceğimiz üst kısımlar ve satırlar arasında boşluk yapın) Doğru: 0px
Alt 0px (satırlar ile parçanın alt kısmı arasındaki boşluğu kaldırır)
Sol: 0px
Geçerli sütun yapısının yeni bir satırı ekleyin Parça ayarlarıyla bitirdikten sonra, ona satır ekleyeceğiz. Kullandığımız sütun yapısı aşağıdaki gibidir:
Gradyan arka planımız, bu çizgi için şeffaf bir renge sahip bir gradyan arka plan kullanır. Bu, giriş bölücüsünü yapmamızı sağlar: Birinci Renk: RGBA (255,255,255.0) İkinci renk: RGBA (109,52,93.0.56)
Gradyan Türü: Doğrusal
Gradyan yönü: 40deg
Başlangıç Pozisyonu:% 62
Son pozisyon:% 91
Sütun 1 Arka Plan Gradient Scroll, satır ayarlarınızın altındaki kaydırır ve gradyanın arka planını ilk sütununuza da ekleyin. Bir sonraki adımda, bu gradyanın arka planını sütunun arka plan görüntüsüyle birleştireceğiz:
Birinci renk: #60A5A5 Renk İkinci: #44335D
Sütun 1 Gradyan Türü: Doğrusal
Sütun 1 Degrade Yönü: 141deg
Sütun 1 Başlangıç Konumu:% 0
Sütun 1:% 78’in son konumu
Sütun 1 Arka Plan Görüntüsü Şimdi ilk sütununa tercih edilen bir arka plan görüntüsü ekleyin ve karışım görüntüsü arka planı 1’in ‘çarpma’ olarak ayarlandığından emin olun. Bu, önceki adımda seçtiğimiz gradyanın arka plan ve arka plan görüntülerini birleştirecektir. Arka plan görüntüsü yalnızca masaüstünde görünecektir, daha sonra bu yazıda, tabletlerde ve cep telefonlarında görünecek aynı görüntüye sahip bir görüntü modülü ekleyeceğiz.
Yapıştırıcı daha sonra tasarım sekmesine devam edin, boyut alt kategorisini açın ve aşağıdaki ayarları uygulayın: Özel genişlik kullanın: evet Özel genişlik: 1700px
Özel Talang genişliğini kullanın: Yalebar Talang: 1 (sütunlar arasındaki boşluğu ortadan kaldırma)
Sütun yüksekliklerini eşitleyin: Evet (aynı sütunun aynı olduğundan emin olun)
Uzay alanını açarak ve tüm dolgu seçeneklerine ‘0px’ ekleyerek daha fazla mesafe. Bu, parça için alt rulman sıfır ile bir kombinasyon halinde, çizgi ile alt arasında bir mesafe kalmadığından emin olacaktır.
Yuvarlak açımız ayrıca sol üst ve üst köşelere birkaç yuvarlak ’50px’ açısı ekleyecektir.
Son kutu resmi, Box Shadow Alt Kategorisindeki ilk seçeneği bu konuda hiçbir şey değiştirmeden seçeceğiz. Görüntü modülünü ikinci sütuna ekleyin, satır ayarlarımız tamamlandıktan sonra görüntüyü şimdi yükleyin, modülü eklemeye ve değiştirmeye başlayabiliriz. İkinci sütuna ekleyeceğimiz ilk modül görüntü modülüdür. Bu görüntü modülünün yalnızca tabletlerde ve cep telefonlarında görünmesi amaçlanmıştır. Masaüstü için, önceki adımda eklediğimiz sütunun arka planına sahibiz. Divisor’un bir görüntü ile birleştirilmesini sağlamak için karanlık, bu görüntü modülünün opaklığını ‘%40’ olarak değiştireceğiz. Son görünürlük, bu görüntü modülünü masaüstünde devre dışı bırakacağız. Metin Modülü #1, oluşturduğunuz görüntü modülünün hemen altındaki metin ayarlarının ikinci sütununa yükleyin, metin modülünü ekleyin ve metin alt kategorisi için aşağıdaki ayarları kullanın: Metin yazı tipi ağırlığı: çok kalın Metin yazı tipi stili: sermaye Metin Boyutu: 40 piksel (masaüstü ve tablet), 30px (telefon)
Metin rengi: #85e2db
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Görüntü modülü ile bu metin modülü arasındaki boşluk yapmak için mesafe, bu metin modülünün kenarına ‘100px’ ekleyeceğiz.
Metin Modülü #2, önceki metin modülünün hemen altındaki metin ayarlarının ikinci sütununa yükleyin, aşağıdaki metin ayarlarına sahip başka bir metin modülü ekleyin: Metin Yazı Tipi Ağırlığı: Normal
Metin yazı tipi stili: büyük harf Metin Boyutu: 30 piksel Metin rengi: #ffffff
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Mesafemiz, bu sonraki metin modülüne ’20px’in üzerine biraz marj ekleyecektir.
Metin modülü #3, bu sütun için son metin için son metin ayarlarının ikinci sütununa yükleyin Bir açıklama içerir ve aşağıdaki metin ayarlarını kullanır:
Metin rengi: #dddddd
Metin Oryantasyonu: Sol veya Orta (tercihinize bağlı olarak) Bir sonraki yapıştırıcı, bu metin modülünün boyutunun alt kategorisini açın ve aşağıdaki değişiklikleri yapın: Genişlik:% 55
Modül hizalaması: merkez
Mesafemiz, aşağıdaki özel marjı uygulayarak bu metin modülü, bir önceki ve alt kısmı arasındaki mesafeyi yapacaktır: Yukarıda: 50 piksel
Aşağıda: 100 piksel
Bölüm #2 Oluşturun Arka planı ayarlama Gradyanın bir önceki parçanın hemen altında, aşağıdaki gradyan arka planına sahip diğer standart parçaları ekleyeceğiz (bu durumda arka plan rengi yok): İlk renk: #2F2542
Renk İkinci: #6D345D
Gradyan Türü: Doğrusal Gradyan yönü: 166deg
Başlangıç Pozisyonu:% 38
Son pozisyon:% 100
Üst Bölücü Bir sonraki adım, üst bölücüyü eklemektir. Önceki alt bölücüyle neredeyse aynı ayarları kullanacağız. Tek fark renktir:
Bölme Stili: Listede bulun
Renk Renk: RGBA (96,165,165,0.18)
Böcek Yüksekliği: 300 piksel Yatay bölücü tekrar: 5px (masaüstü), 2px (tablet ve cep telefonu)
Mesafe Bu bölümü taşıyan üstü de kaldırdığınızdan emin olun:
Yukarıda: 0px
Doğru: 0px
Aşağıda: 68px Sol: 0px
Önceki bölümün klon çizgisi ve yeni bölüme yerleştirin, sadece önceki bölümde kullandığımız çizgileri klonlayarak ve bu yeni bölüme yerleştirerek zaman kazanacağız. Bu çizgide bazı değişiklikler. Değiştirmemiz gereken şeylerden biri, gradyan satırının arka planıdır:
Birinci Renk: RGBA (255,255,255.0)
İkinci renk: RGBA (96,165,165.0.27)
Gradyan Türü: Doğrusal Gradyan yönü: 219 derece Başlangıç Pozisyonu:% 74
Son pozisyon:% 100
Sil Sütun 1 Arka Plan Gradyan ve Arka Plan Görüntüsü Yazdırma ekran örneğinde gördüğünüz gibi, ikinci satırdaki modül karşı tarafta. İşlevini sağlamak için yapmamız gereken ilk şey, ilk sütun gradyanı ve arka plan görüntüsünün arka planını kaldırmaktır.
Gradyan Sütun 2’nin arka planını ekleyin Bunun yerine, gradyan ve arka plan görüntüsünün arka planını ikinci sütuna ekleyeceğiz. Aşağıdaki gradyan arka planını ekleyerek başlayın:
İlk renk: #44335D
İkinci renk: RGBA (109,52,93.0.72)
Sütun 2 gradyan tipi: doğrusal Sütun 2 gradyan yönü: 109deg Sütun 2 Başlangıç Konumu:% 0
Sütun 2’nin son konumu:% 100
Sütun 2’nin arka plan görüntüsünü ekleyin Arka plan görüntüsü sekmesini açın, arka plan görüntüsünüzü yükleyin ve arka plan görüntülerini gradyan arka planla birleştirmek için görüntülerin bir karışımı olarak ‘Multom’ kullandığınızdan emin olun.
Bu satırın yuvarlak yuvarlak açısını değiştirin Sol ve sağ altta, sol ve sağ üstte değil.
Modülü Sütun 1’e yerleştirin, ayrıca tüm sütunları ilk sütun yerine ikinci sütuna tek tek sürükleyerek yerleştirmemiz gerekir.
Son görüntü modülü için görüntüyü değiştirin, görüntü modülünüzdeki görüntüyü değiştirin ve bitirin! Alternatif bölüm bölücüsü #1 İlk alternatif bölücüyü kullanmak için #1 bölümünün alt bölücüsünü değiştirin, bölme kuvvetini değiştirmelisiniz. Aşağıda (ki (listede bulabilirsiniz):
İkinci bölümün üst bölücüsü için aynı şeyi seçin. Alternatif Bölücü #2 Bölüm 1’in alt bölücüsünü değiştirin İkinci alternatif aşağıdaki bölücü stilini kullanır: Bölüm #2’nin üst bölücüsünü tekrar değiştirin, bunu ikinci bölümün üst bölücüsüne de uygulayın: Tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstünde Tablette Hücresel olarak Alternatif Bölme Stili #1 Alternatif Bölme Stili #2 Bu öğreticideki son zihin, size bir arka plan dokusu oluşturmak için bölücü bölümünü kullanmanın yaratıcı yollarını gösterdik. Başlangıçtan itibaren yukarıdaki muhteşem örneği nasıl yeniden yapacağınızı göstermenin yanı sıra, bu yöntemin yapmak istediğiniz herhangi bir tasarım üzerinde çalışması için birkaç temel unsur da sunuyoruz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
