Divi'nin Arka Plan Deseni ve Maske Seçenekleriyle Eşsiz Bir CTA Nasıl Oluşturulur

Divi'nin yeni arka plan deseni ve maske seçenekleri, web sitenizde göz alıcı ve benzersiz harekete geçirici mesaj (CTA) bölümleri oluşturmayı kolaylaştırır. Ziyaretçilerinizin dikkatini çekecek benzersiz arka plan tasarımları oluşturmak için görüntüleri, degradeleri, desenleri ve maskeleri birçok özelleştirme seçeneğiyle birleştirebilirsiniz.

Bu derste size Divi'nin yeni arka plan deseni ve maske seçenekleriyle benzersiz bir CTA bölümünün nasıl oluşturulacağını göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde tasarlayacağımız CTA bölümünün bir önizlemesi.

Başlamak için Gerekenler

Başlamadan önce Divi Temasını kurup etkinleştirin ve web sitenizde Divi'nin en son sürümünün bulunduğundan emin olun.

Hadi atlayalım.

Divi'nin Arka Plan Deseni ve Maske Seçenekleriyle Eşsiz Bir CTA Nasıl Oluşturulur

Hazır Düzen ile Yeni Bir Sayfa Oluşturun

Eğitimimiz için Divi kitaplığından önceden hazırlanmış bir düzen kullanacağız. Bu tasarım için, Dondurma Dükkanı yerleşim paketindeki Dondurma Dükkanı Açılış Sayfasını kullanacağız.

Yeni bir sayfa oluşturun, bir başlık ekleyin ve ardından Divi Builder'ı Kullan seçeneğini belirleyin.

Bu örnek için Divi kitaplığından önceden hazırlanmış bir düzen kullanacağız, bu nedenle Düzenlere Gözat'ı seçin.

Dondurma Dükkanı Açılış Sayfası düzenini arayın ve seçin.

Düzeni sayfanıza eklemek için Bu Düzeni Kullan'ı seçin.

Artık tasarımımızı oluşturmaya hazırız.

Arka Plan Deseni ve Maske için Düzeni Değiştirme

Bu düzenden ayın CTA bölümünün lezzetini değiştireceğiz. Arka plan deseni ve maske tasarımı için düzenimizde bazı değişiklikler yapalım.

Satır Ayarları

Satır Ayarları'nı açın, ardından Tasarım'ı seçin.

Boyutlandırma altında sütun yüksekliklerini eşitleyin.

• Sütun Yüksekliklerini Eşitle: Evet

Boşluk altında, koniyi bölümün üstüne getirmek için üst dolguyu çıkarın.

• Üst Dolgu: 0px

Sütun 1 Ayarları

Satır ayarları için İçerik sekmesi altında, Sütun 1 ayarlarını seçin. Arka Plan altında, turuncu arka planı silin.

Sütun 2 Ayarları

Şimdi, Sütun 2 ayarlarını seçin. Orijinal tasarımda ihtiyacımız olmayan bazı boşluklar var, o yüzden ondan kurtulalım. Tasarım altında, Aralık'a gidin ve üst dolguyu silin.

Ardından Gelişmiş'i seçin ve "ayın tadı" metnimizin dikey olarak ortalanması için Ana Öğeye aşağıdaki özel CSS'yi ekleyin.

margin:auto;

Bölüm Ayarları

Bölüm Ayarları'nı açın. Tasarım altında Dolgu'yu seçin. Bölüm dolgusunu, üst koni sayfanın en üstüne hizalanacak şekilde ayarlayın.

• Dolgu: 0 piksel

CTA Bölümüne Arka Plan Deseni ve Maske Ekleme

Düzenimiz değiştirildiğine göre artık arka plan desenimizi ve maskemizi ekleyebiliriz. Divi'nin yeni seçenekleriyle arka plan desenleri ve maskeler için sonsuz seçenek var, bu da sadece birkaç tıklamayla CTA bölümünüz için benzersiz tasarımlar oluşturabileceğiniz anlamına geliyor. Bu ayarlarla göz alıcı bir arka plan tasarlamayı öğrenmek için takip edin.

Arka Plan Rengi, Deseni ve Maske Ayarları

Bölüm Arka Planı ayarlarına gidin.

Renk sekmesinin altına turuncu bir arka plan ekleyin

• Renk: #FFA256

Desen sekmesi altında desen şeklini ve rengini ayarlayın.

• Şekil: Konfeti
• Renk: #FF7D14

Şimdi maskeyi ekleyelim. Maske sekmesini seçin, ardından ayarları aşağıdaki gibi ekleyin:

• Şekil: Köşe Blob
• Maske Rengi: #FFFFFF
• Maske Dönüşümü: Yatay
• Maske En Boy Oranı: Manzara
• Maske Boyutu: Kapak

Tasarım Ayarlamaları

Artık arka planımız hazır olduğuna göre, tasarımda bazı son ayarlamalar yapalım.

“Satın Al” düğmesi ayarlarını açın ve Tasarım sekmesi altındaki hizalamayı değiştirin.

• Düğme Hizalama: Sol

"Satın Al" düğmesinin üzerine gelme durumu arka plan rengini, turuncu arka planda öne çıkacak şekilde değiştirin.

• Hover'da Düğme Arka Planı: #FF7D14

Ayrıca, turuncu arka plan ile sağdaki “Ayın Lezzeti” bölümü arasına biraz daha boşluk eklemek için satır düzenini ayarlayacağız. Düzeni 1:1'den 3:2'ye değiştirin.

Ve şimdi masaüstü tasarımı tamamlandı ve Divi'nin arka plan deseni ve maske seçenekleriyle benzersiz bir CTA bölümü oluşturmayı öğrendiniz!

CTA Bölümünü Duyarlı Yapma

CTA bölümümüz bir telefonda veya tablette görüntülendiğinde, 2. sütundaki içerik 1. sütunun altına yığılır. Bu, tasarımımızda bazı okunabilirlik sorunlarına neden olabilir. Divi'nin yerleşik duyarlı ayarlarını kullanarak içeriğimizi ve tasarımımızı daha küçük ekranlar için optimize etmek için bazı ayarlamalar yapalım.

Yazının butonlardan önce gelmesini istediğimiz için “Ayın Lezzetini Vurgula” metnini “Temmuz Portakal Çikolatası” metin modülüne kopyalayın. Bu metni yalnızca telefon ve tablet sürümlerine eklediğinizden emin olun.

• “Orange Chocolate” metnini H3 olarak değiştirin.

Ardından, metinde bu arka planda öne çıkması için bazı değişiklikler yapacağız. Tasarım sekmesine gidin ve aşağıdaki değişiklikleri yapın:

• H2 (Telefon ve Tablet) Metin Rengi: #000000
• H2 (Telefon ve Tablet) Metin Boyutu: 30px
• H3 (Telefon ve Tablet) Metin Rengi: #000000
• H4 (Telefon ve Tablet) Metin Rengi: #000000

Şimdi orijinal “Ayın Lezzet” metin modülünün ayarlarına gidin ve görünürlüğü yalnızca masaüstü cihazlarda görünecek şekilde değiştirin. Bu, orijinal metin modülünün daha küçük cihazlarda gizlenmesini sağlar. Ayın Tadı metni, sayfadaki diğer metinle birlikte düğmenin üzerinde görünecektir.

• Devre dışı bırak: Telefon ve Tablet

Ardından, satır ayarlarını açın ve ardından sütun 1 ayarlarını açın. Sağ ve sol dolguyu çıkarın.

• Sağ dolgu: 0px
• Sol dolgu: 0px

Bölüm ayarlarına, ardından arka plana gidin, ardından maske ayarlarını düzenleyin

• Maske Dönüşümü: Ters Çevir
• Maske En Boy Oranı: Portre

Ve şimdi Divi'nin Arka Plan Deseni ve Maske seçenekleri sayesinde benzersiz bir arka plana sahip tamamen duyarlı bir CTA bölümü oluşturdunuz.

Son sonuç

Nihai sonuca bir göz atalım.

Son düşünceler

Divi'nin güçlü arka plan deseni ve maske seçenekleri sayesinde benzersiz ve göz alıcı bir harekete geçirici mesaj bölümü tasarlamak çok kolay. Farklı renkler, desenler, maskeler ve ayar kombinasyonları deneyerek yaratıcılığınızı ortaya çıkarın. Tasarımı kolaydır ve sadece birkaç tıklamayla mükemmel görünümü bulana kadar ayarlarınızı değiştirebilirsiniz. En önemlisi, doğrudan Divi'de yerleşiktir! Artık başka bir programda arka plan grafikleri tasarlamaya gerek yok. Daha da benzersiz tasarımlar için arka plan ayarlarını diğer bölümlere, satırlara ve modüllere uygulayabilirsiniz. Divi'nin arka plan deseni ve maske özellikleri hakkında daha fazla bilgi edinmek istiyorsanız, arka plan maskeleri ve desenleri içeren bir kahraman bölümü öğreticimize göz atın ve Divi'nin degrade oluşturucusunu arka plan maskeleri ve desenleriyle nasıl birleştireceğinizi öğrenin.

Web sitenizde Divi'nin arka plan deseni ve maske seçeneklerini nasıl kullandınız? Aşağıdaki yorumlarda ne yarattığınızı bize bildirin!