Divi ile 5 Asimetrik Eğri 1/2 Sütun Arka Planı İndirin ve Kullanın

Asimetrik kavisli arka planı canlı degrade renklerle birleştirmek, 2017'de büyüyen ve 2018'de varlığını ve büyümesini sürdüren bir tasarım trendidir. 2018'de bu trendi sorunsuz bir şekilde takip etmenize yardımcı olmak için 1/2'de kullanabileceğiniz beş farklı arka plan görüntüsü oluşturduk. sütun gradyan arka planları ile birlikte sütun arka planları.

Bu yazının devamında, Photoshop dosyası da dahil olmak üzere bu arka plan resimlerini ücretsiz olarak indirebilecek ve sonraki projeleriniz için kullanabileceksiniz. Bu arka plan resimlerinin açıkça 1/2 sütun arka planlarını hedeflediğini ve amaçlarını yalnızca bu belirli durumda yerine getireceğini unutmayın. Bunları diğer sütun yapılarına uygulamak istiyorsanız, Photoshop dosyasındaki her görüntünün görüntü boyutlarını değiştirmeniz gerekecektir.

Sonuç

Öğreticiye dalmadan önce, tüm sonuca ve bu yazının sonraki bölümünde ücretsiz olarak indirebileceğiniz 1/2 sütun arka plan resimlerine bir göz atalım.

1/2 Sütun Arka Planı 1

1/2 Sütun Arka Planı 2

1/2 Sütun Arka Planı 3

1/2 Sütun Arka Planı 4

1/2 Sütun Arka Planı 5

Bu Eğitimin Dosyalarını İndirin

Ücretsiz resimlere ve Photoshop dosyalarına el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak her Pazartesi daha fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Divi ile 5 Asimetrik Eğri 1/2 Sütun Arka Planı İndirin ve Kullanın

Youtube Kanalımıza Abone Olun

Bölümü Yeniden Oluştur

Bölüm Ayarları

Arka plan rengi

1/2 sütun arka plan resimlerini eklemeden önce, mevcut veya yeni bir sayfaya standart bir bölüm eklemeniz gerekir. Bunu yaptıktan sonra, bölümün arka plan rengi olarak '#f3f2f2' ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Yeni oluşturduğunuz bölüme iki eşit sütunlu bir satır ekleyerek devam edin.

Sütun 1 Gradyan Arka Planı

Ardından, satır ayarlarınızı açın ve ilk sütuna aşağıdaki degrade arka planını (veya kullanmak istediğiniz başka bir degrade arka planını) ekleyin:

• İlk Renk: #e02b20
• İkinci Renk: #8300e9
• Sütun 1 Gradyan Türü: Doğrusal
• Sütun 1 Gradyan Yönü: 180deg
• Sütun 1 Başlangıç ​​Konumu: 0
• Sütun 1 Bitiş Konumu: 100

Sütun 1 Arka Plan Resmi

Ardından, devam edin ve bu yazının başında indirdiğiniz klasörde kullanmak istediğiniz 1/2 sütun arka plan resimlerinden hangisini bulun ve aşağıdaki ayarlarla birlikte arka plan resminiz olarak ekleyin:

• Sütun 1 Arka Plan Resmi Boyutu: Kapak
• Sütun 1 Arka Plan Resmi Konumu: Merkez
• Sütun 1 Arka Plan Resmi Tekrarla: Tekrarla
• Sütun 1 Arka Plan Resmi Karışımı: Normal

Sütun 2 Gradyan Arka Planı

Aşağı kaydırın ve sıranızın ikinci sütununa da bir degrade arka planı ekleyin (yine bu, renk paletinize uyan başka bir degrade arka planı olabilir):

• İlk Renk: #2b87da
• İkinci Renk: #edf000
• Sütun 2 Gradyan Türü: Doğrusal
• Sütun 2 Gradyan Yönü: 180deg
• Sütun 2 Başlangıç ​​Konumu: 0
• Sütun 2 Bitiş Konumu: 100

Sütun 2 Arka Plan Resmi

Birinci sütun için yaptığınızla aynı seçenekleri kullanırken, tercih ettiğiniz 1/2 sütun arka plan resmini ikinci sütuna da ekleyin.

Her Sütun İçin Tablete Özel Dolgu Ekleme

Sütun arka planlarının tablette de iyi görünmesini sağlamak için, her sütunun üstüne ve altına ekstra özel '50 piksel' dolgu uygulayın (yalnızca tablette).

İlk Sütuna Bir Blurb Modülü Ekleyin

Bir Simge Seçin

Ardından, ilk sütununuza bir Blurb Modülü ekleyin, 'Simge Kullan' seçeneğini etkinleştirin ve istediğiniz bir simgeyi seçin.

Arka plan rengi

Ardından, Arka Plan alt kategorisini açın ve tanıtım yazısı arka plan renginiz olarak 'rgba(255,255,255,0.95)' ekleyin. Bu hafif şeffaf beyaz renk, içeriğinizin okunabilirliğini etkilemeden degrade arka planınızın Blurb Modülünüzde parlamasını sağlar.

Simge Ayarları

Tasarım sekmesine gidin ve aşağıdaki ayarları Görüntü ve Simge alt kategorisine uygulayın:

• Simge Rengi: #e02b20
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 46px

Metin Ayarları

Ardından Metin alt kategorisini açın ve aşağıdaki ayarların geçerli olduğundan emin olun:

• Metin Rengi: Koyu
• Tet Yönü: Merkez

boyutlandırma

Tasarım sekmesini aşağı kaydırın, Boyutlandırma alt kategorisini açın ve bunun için aşağıdaki ayarları kullanın:

• Genişlik: %70
• Modül Hizalaması: Merkez

aralık

Ardından, Aralık alt kategorisini açın ve Blurb Modülünüz için aşağıdaki özel kenar boşluğunu ve dolguyu kullanın:

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 100 piksel
• Üst Dolgu: 50px
• Sağ Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 50px

Kenarlık Ayarları

Kenarlık alt kategorisini açarak devam edin ve Blurb Modülünüzün köşelerinin her birine '10px' ekleyin:

Hala Border alt kategorisindeyken, üst ve alt için aşağıdaki kenarlık stilini kullanın:

• Kenar Genişliği: 5px
• Kenar Rengi: #FFFFFF
• Kenar Stili: Katı

Kutu Gölge

Son olarak, Blurb Modülünüze de aşağıdaki kutu gölgesini uygulayın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 18 piksel
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(0,0,0,0.3)
• Kutu Gölge Konumu: Dış Gölge

Blurb Modülünü Klonla ve İkinci Sütundaki Yeri

Simgeyi Değiştir

Artık Blurb Modülünü bitirdiğinize göre, kendinize biraz zaman kazandırabilir, kopyalayabilir ve ikinci sütuna da yerleştirebilirsiniz. Yapmanız gereken ilk şey, paylaştığınız içerikle eşleşen farklı bir simge seçmek.

Simge Rengini Değiştir

Simgenizin rengini, sütun gradyan arka planınızla da eşleşen bir renge değiştirin. Bu durumda, yeni simge rengi '#2b87da'dır.

'Parlaklık' Karışım Modunu Kullanmayı Deneyin

Blurb Modülünün Karışım Modu

Üstüne üstlük, degrade arka plan renklerinin simge ve metin boyunca parlamasını sağlamak için Blurb Modülünüzün Karışım Modu olarak 'Parlaklık'ı da kullanabilirsiniz.

Mobil Sürüm Düzenlemesi

Sonuç

Telefonlar, tabletler ve masaüstü bilgisayarlardan daha sınırlı bir ekran boyutuna sahiptir. Bu yüzden mobilde görünen satırda küçük değişiklikler yapmamız gerekecek. Size tam olarak ne yapacağınızı göstermeden önce, aradaki farka bir göz atalım.

Önce

Sonrasında

Klon Satırı

Şimdi, mobil sürümün masaüstü ve tablette olduğu kadar iyi görünmesini sağlamak için, oluşturduğunuz satırı klonlayarak başlayın.

Masaüstü ve Tablet Satırının Görünürlüğünü Değiştirin

Ardından, masaüstü ve tablet için satırı açın, Gelişmiş sekmesine gidin ve satırı telefonda devre dışı bırakın.

Mobil Satırın Görünürlüğünü Değiştir

Benzer şekilde, tablette ve masaüstünde mobil için satırı devre dışı bırakmanız gerekir.

Satır Boyutlandırmasını Değiştir

Sütun arka plan görüntülerinin mobil cihazlarda iyi görünmesini sağlamak için Tasarım sekmesine gidin, Boyutlandırma alt kategorisini açın ve aşağıdaki ayarları kullanın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Sonuç

Artık tüm adımların üzerinden geçtik, şimdi web sitenizdeki beş farklı 1/2 sütun arka plan resmini Blurb Modülü ile birlikte kullanarak elde edebileceğiniz çarpıcı sonuca son bir göz atalım.

1/2 Sütun Arka Planı 1

1/2 Sütun Arka Planı 2

1/2 Sütun Arka Planı 3

1/2 Sütun Arka Planı 4

1/2 Sütun Arka Planı 5

Son düşünceler

Bu gönderide, sonraki projeleriniz için kullanabileceğiniz 5 farklı 1/2 sütun arka plan görseli paylaştık. Bu arka plan resimlerini bu yazının başında ücretsiz olarak indirebilir ve herhangi bir kısıtlama olmaksızın kullanabilirsiniz. Bu asimetrik kavisli arka plan görselleri, gradyan arka planlarla birlikte 2017'de büyüyen ve 2018'de büyümeye devam eden bir tasarım trendi. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!