Divi'nin Yeni Arka Plan Seçenekleriyle Duyarlı Afişler Oluşturma

Son yazımda, düğme modülünü sütun ve satır arka planları üzerine katmanlayarak Divi'nin arka plan seçenekleri arayüzünü kullanarak düğmelerin nasıl stillendirileceğini gösterdim. Bugün size Divi'nin arka plan seçenekleri arayüzünü kullanarak nasıl duyarlı tıklanabilir afişler tasarlayacağınızı göstereceğim.

Düğme arka planları için yaptığımız tekniklerin aynısını birkaç küçük değişiklikle kullanacağız. Temel olarak size gerçekten büyük düğmelerin nasıl oluşturulacağını ve onları biraz daha afiş gibi tasarlamayı göstereceğim. Buradaki önemli faktör, banner'ın tüm yüzey alanının tıklanabilir kalmasıdır. Ancak bu yöntemle sadece basit bannerlar yapabildiğimizi baştan bilmelisiniz. Düğme modülünün metin girişi ile sınırlı olduğumuz için, yalnızca tek bir metin dizesi içeren afişler oluşturabiliyoruz. Ancak, sütun arka plan seçeneklerini kullanarak Visual Builder'ı kullanarak çok kısa sürede oldukça havalı görünen banner'lar oluşturabiliriz.

Html Afişleri ve Resim Afişleri

Html banner'larını (html öğeleri kullanılarak oluşturulan banner'lar) resim banner'larına (herhangi bir html öğesi olmadan tek bir görüntü olarak oluşturulan banner'lar) göre kullanmanın birçok avantajı vardır. Html afişleri için metin web tarayıcıları tarafından tanınır (sayfa çevirmenleri ve ekran okuyucular için gereklidir). Tarayıcı pencerelerinin boyutuna göre ölçeklenirler, böylece bozulabilen veya okunaksız hale gelebilecek görüntülerin aksine her zaman net görünürler. Ve belki de html afişlerini resim afişleri yerine kullanmanın en sevdiğim yönü, html'nin değiştirilmesinin gerçekten kolay olmasıdır. Bir fotoğraf düzenleyicide düzenlemem gerekecek orijinal bir dosya için sabit diskimin derinliklerinde arama yapmak yerine metni birkaç tuşa basarak değiştirebilirim. Ayrıca Divi Lead'leri kullanarak bir bölme testi yapmak için banner'ın başka bir sürümünü hızlı bir şekilde yapabilirim.

Düğmeleri afişlere dönüştürmenin bu yöntemi, blogunuz (veya podcast'iniz) için özelleştirilmiş bir öne çıkan gönderi, kategori veya dizi oluşturma gibi bazı yararlı uygulamaların kapısını açar.

Başlayalım.

Gizlice Bakış

Resmi olarak atılmadan önce. İşte bu gönderide oluşturacağımız afişlere bir göz atın.

Tasarımı Divi ile Uygulamak

Youtube Kanalımıza Abone Olun

Örnek 1: Logo Banner

Visual Builder'ı kullanarak bir sütun ve bir satır içeren normal bir bölüm ekleyin.

Ardından satıra bir Düğme Modülü ekleyin.

Ardından düğme modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Düğme Metni: [banner mesajınız için kullanmak istediğiniz metni girin]
Düğme URL'si: [URL girin]

Tasarım Seçenekleri

Düğme hizalaması: Merkez
Metin Rengi: Açık
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 32px
Düğme Kenar Genişliği: 0px
Düğme Yazı Tipi: Arvo
Düğme Simgesi: [simge ekle. İmleç simgesini kullanıyorum]
Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR

Gelişmiş seçenekler

Sütun genişliğini doldurmak için düğmenin genişliğini %100 olarak ayarlamamız gerekiyor. Banner içeriğimiz için yeterli alan sağlamak için düğmemizin yüksekliğini de genişletmemiz gerekiyor. Bunu yapmak için Ana Öğe kutusuna aşağıdaki özel CSS'yi girin:

 Width: 100%;
padding: 20px 0 200px; 

Not : Buradaki özel dolgu, başlık metninin görüntülenmesini istediğiniz yeri ayarlamanın anahtarıdır. Düğme hizalaması zaten ortalanmış olduğundan, tek yapmam gereken metni dikey olarak ayarlamak. Bu nedenle, düğme metnine üstte daha kısa bir dolgu ve altta daha uzun bir dolgu vermek, metni başlığın üstüne doğru ayarlayacaktır.

Ayarları kaydet

Şu anda her şey hala beyaz ve görünmez ama sorun değil. Satır ve sütun ayarlarına buton modülü için bir arka plan ekleyeceğiz.

Düğme modülünüzün oturduğu Satır Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka plan resmi sekmesi altında

Arka Plan Resmi: [resim ekle]
Arka Plan Görüntüsü Konumu: [başlığınızın görüntüsünü ayarlamak için bu seçeneği kullanın. Resmimin alt kısmının görünmesini istedim, bu yüzden “Alt Orta”yı seçtim.]

Şimdi Sütun 1 arka plan seçeneklerini güncellemek için biraz aşağı kaydırın.

Sütun 1 Arka Plan Gradyanı sekmesini seçin ve ardından beyaz artı sembollü gri dairesel düğmeye tıklayın.

Aşağıdakileri güncelleyin:

Arka Plan Gradyan Renkleri: rgba(131,0,233,0.92), rgba(0,0,0,0.69)
Sütun Gradyan Yönü: 180deg
Sütun Başlangıç ​​Konumu: %50
Sütun Bitiş Konumu: %0

Ayarları kaydet

Ardından banner'a bir logo ekleyeceğiz. Arka Plan Resmi sekmesine tıklayın ve aşağıdakileri güncelleyin:

Sütun 1 arka plan Resmi Boyutu: Gerçek Boyut (logom 120 x 120 png'dir)

Sütun 1 Arka Plan Resmi Konumu: Merkez

Bu kadar. Artık tıklanabilir ve duyarlı basit bir banner'ınız var. Banner'ı öne çıkarmak istediğiniz herhangi bir vurgulu efekti eklemek için Düğme Modülü ayarlarını kullanabilirsiniz.

Başka bir örnek yapalım.

Örnek 2: Basit Metin Başlığı

Sıradaki banner için, az önce tasarladığınız ilk banner'ın bulunduğu bölümün tamamını kopyalayalım . Bu, biraz kurulum süresi kazandıracaktır.

Ardından satır ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Resmi: [yeni resim girin]
Arka Plan Resmi Konumu: Merkez
Sütun 1 Arka Plan Gradyan Renkleri: rgba(0,0,0,0.41), rgba(12,113,195,0.66)
Sütun Gradyan Yönü: 270deg

Ardından sütun 1 arka plan resmi sekmesine tıklayın ve resmi/logoyu silin.

Ayarları kaydet

Düğme Modülü Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Düğme Metni: [banneriniz için metin girin]
Düğme URL'si: [banner için URL'yi girin]

Tasarım Seçenekleri

Düğme Metin Boyutu: 42px
Düğme Kenar Genişliği: 19px
Düğme Kenar Rengi: rgba(0,0,0,0.17)
Düğme Harf Aralığı: 8px
Düğme Yazı Tipi: Montserrat, Kalın(B)
Düğme Simgesi Ekle: HAYIR
Düğme Vurgulu Kenarlık Rengi: rgba(0,0,0,0.46)
Düğme Vurgulu Kenarlık Yarıçapı: 0px
Düğme Vurgulu Harf Aralığı: 12px

Gördüğünüz gibi, bu örnek afiş, kenarlık rengini değiştiren ve harf aralığını artıran benzersiz bir fareyle üzerine gelme efektine sahiptir:

Banner'ınızı Tam Genişlikte Nasıl Yapabilirsiniz?

Bu banner'ı tam genişlikte yapmak için, Tasarım sekmesi altındaki Bölüm Ayarları'nı aşağıdaki gibi güncellemeniz yeterlidir:

Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

Ayarları kaydet

Şimdi Satır Ayarlarına gidin ve Tasarım seçeneklerini aşağıdaki gibi güncelleyin:

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

Artık afiş, tüm cihazlarda ekranın tüm genişliğine yayılıyor.

Yapışkan Afiş Nasıl Yapılır

İsterseniz bu başlığı kolayca sabit (yapışkan) hale getirebilir ve tarayıcı pencerenizin üst kısmında düzeltebilirsiniz. Pencereyi çok fazla engellememesi için çok daha kısa hale getirmek için dolguyu azaltmanızı öneririm.

Yüksekliği azaltmak için, Gelişmiş sekmesi altındaki Düğme Modül Ayarlarına gidin, Ana Öğe kutusuna aşağıdaki CSS'yi ekleyin:

padding: 0px 0px !important;

Şimdi tüm bölümü yapışkan hale getirmek için Bölüm Ayarlarına gidin ve Gelişmiş sekmesi Seçeneklerini Ana Öğe kutusunda aşağıdaki Özel CSS ile güncelleyin:

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

Artık tüm bölümünüz sayfanın en üstüne yapışacak ve sayfayı aşağı kaydırdığınızda orada kalacaktır.

Bu tür bir afiş, gezinme çubuğu olmayan bir açılış sayfasındaki promosyon öğeleri için iyi çalışır, çünkü yapışkan afiş gezinme çubuğunu gizleyecektir.

Birden Çok Sütun Düzenine Afiş Ekleme

Ayrıca çok sütunlu satır yapısı üzerinde de banner oluşturabilirsiniz. Sayfanızın veya blogunuzun alt kısmında bazı öğeleri öne çıkarmak istiyorsanız bu kullanışlı olacaktır.

Bir şans verelim.

1/2 1/2 sütun satır yapısına sahip başka bir normal bölüm ekleyin.

Zaman uğruna, devam edin ve yeni oluşturduğumuz bir düğme modülünü kopyalayın veya çoğaltın ve ilk sütuna yapıştırın veya sürükleyin.

Banner arka plan tasarımını elde etmek için Satır Ayarlarındaki sütun arka planlarını kullanacağız. Satır Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Resmi Sekmesinin Altında

Sütun 1 Arka Plan: [arka plan resmini girin]
Sütun 1 Arka Plan Görüntüsü Konumu: [görüntünün konumunu beğeninize göre ayarlayın]
Sütun 1 Arka Plan Resmi Karışımı: Çarpma

Arka Plan Gradyan Sekmesinin Altında

Sütun 1 Degrade Renkleri: rgba(255,255,255,0), #e02b20
Sütun 1 Gradyan Yönü: 180deg
Sütun 1 Başlangıç ​​Konumu: %70
Sütun 1 Bitiş Konumu: %0

Son adım, Düğme Modülü Ayarlarını güncellemektir:

İçerik Seçenekleri

Düğme Metni: Seyahat Serisi

Tasarım Seçenekleri

Düğme Metin Boyutu: 32px
Düğme Kenar Genişliği: 2px
Düğme Harf Aralığı: 0px
Düğme Vurgulu Kenarlık Rengi: #edf000
Düğme Vurgulu Harf Aralığı: 0px

Gelişmiş seçenekler

Ana Öğe kutusundaki Özel CSS:

padding: 350px 0px 50px;
width: 100%;

Bu özel css, Düğme modülünün dolgusunu, metnin altta, arka plan gradyanının hemen arkasında olacak şekilde ayarlar.

Bir sonraki sütundaki başlık için bu işlemi çoğaltmaktan çekinmeyin ve içeriği istediğiniz gibi güncelleyin.

Sonucu kontrol edin.

Not : Bu işlevi kullanırken Sütun Yüksekliğini Eşitle'yi kullanmazdım. Sütun, düğme modülünü geçecek. Afiş yüksekliklerinin mükemmel bir şekilde eşleşmesini istiyorsanız, doğru yapmak için düğme modülündeki dolgu ile oynamanız gerekebilir.

Duyarlı mı?

Evet. Düğmeler Divi'nin sütun yapısı içinde oluşturulduğundan, düğmeler tüm cihazlarda güzel bir şekilde yanıt verecektir. Yatay banner'lar için, logonuzun ve metninizin yerleşimine, mobilde çakışabileceğinden dikkatli olurdum.

Aşağıda, daha küçük ekran boyutlarına küçültüldüğünde bunların nasıl göründüğüne dair bir örnek verilmiştir:

Tarayıcı Uyumluluğu

Şu anda, arka plan harmanlama modu CSS özelliği, Internet Explorer veya Edge tarafından desteklenmemektedir ve Safari'nin sınırlı karıştırma seçenekleri vardır. Bununla birlikte, çoğu durumda deneyimlerime göre geri dönüş önemli değil.

Son düşünceler

Duyarlı banner'lar oluşturmak için bu küçük ama kullanışlı tasarım hilesini beğeneceğinizi umuyoruz. İlgili sınırlamaları anladığınız ve basit tuttuğunuz sürece, oldukça havalı afişler oluşturabilirsiniz. Ayrıca, bu çözüm hem kolayca uygulanır hem de hızlı bir şekilde özelleştirilir.

Ve eminim bunun için başka faydalı uygulamalar da vardır. Fikirlerinizi yorumlarda duymak için sabırsızlanıyorum.

Şerefe!