Divi'de Sayfa Şablonlarınız için Animasyonlu Promosyon Çubuğu Nasıl Oluşturulur

Yayınlanan: 2019-11-23

Divi'de sayfa şablonunuz için animasyonlu bir promosyon çubuğu oluşturmak, bir eklentiye güvenmek zorunda kalmadan ürünleri ve fırsatları şık bir şekilde tanıtmanın harika bir yolu olabilir. Divi'nin güçlü tasarım özelliklerini kullanarak Divi's Theme Builder'da bir şablonu düzenlerken tanıtım çubuğunu görsel olarak oluşturabilirsiniz. Ardından şablon hazır olduğunda, o şablona atanmış herhangi bir sayfada tanıtım çubuğu açılır. Kolay!

Hadi atlayalım ve başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tanıtım çubuğuna hızlı bir bakış.

Ayrıca promosyon çubuğunun nasıl sabit (veya yapışkan) hale getirileceğini de göstereceğiz.

Promosyon Çubuğu Sayfa Şablonunu ÜCRETSİZ olarak indirin

Bu öğreticiden promosyon çubuğu sayfası şablonuna 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 da 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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için, zip dosyasını çıkarın ve Theme Builder Taşınabilirlik seçeneğini kullanarak json dosyalarından birini Divi Theme Builder'a ekleyin.

Hadi öğreticiye geçelim mi?

Youtube Kanalımıza Abone Olun

Başlamak için Gerekenler

Başlamak için Divi Temasını yüklemeniz ve etkinleştirmeniz gerekir. Divi'nin en son sürümüne sahip olduğunuzdan emin olun.

Ayrıca, sonucu göstermek üzere promosyon çubuğu şablonunu o sayfaya atamak için Divi Builder ile test amacıyla oluşturulmuş en az bir sayfaya ihtiyacınız olacaktır.

Bundan sonra, gitmeye hazırsınız.

Sayfa Şablonunun En Üstünde Animasyonlu Promosyon Çubuğu Oluşturma

Yeni Şablon Oluşturma

WordPress Kontrol Panelinden Divi > Tema Oluşturucu'ya gidin. Ardından yeni bir şablon oluşturmak için “Yeni Şablon Ekle” kutusunu tıklayın.

Promosyon çubuğunun görüntülenmesini istediğiniz sayfaya/sayfalara şablonu atayın.

Yeni şablonda, “Özel Gövde Ekle” alanını tıklayın ve ardından “Özel Gövde Oluştur” seçeneğini seçin.

NOT: Divi'nin varsayılan başlığıyla ve gelecekte ekleyebileceğiniz özel başlıklarla çalışabilmesi için promosyon çubuğunu şablonun gövde alanına (başlığa değil) ekliyoruz.

Ardından “Sıfırdan Oluştur” seçeneğini seçin.

Şablona Promosyon Çubuğunu Ekleme

Template Layout Editor içinde, Divi Builder'ı kullanarak promosyon çubuğunu oluşturmaya başlayabiliriz.

Normal bölüme tek sütunlu bir satır ekleyerek başlayın.

Satır Ayarları

Modül eklemeden önce Satır ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Gradyanı Sol Renk: #4a42ec
Arka Plan Gradyanı Sağ Renk: #521d91
Gradyan Yönü: 90deg
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Genişlik: %100
Maksimum Genişlik: %100
Dolgu: 0 piksel üst, 0 piksel alt

Bu, oluşturduğumuz tanıtım çubuğunun arka plan rengini ve genişliğini önemser.

Sütun Ayarları

Satır ayarlarından ayrılmadan önce, sütunun ayarlarını açmak için tıklayın. Ardından, aşağıdaki özel CSS'yi Sütun Ana Öğesine ekleyin:

display: flex;
align-items: center;
justify-content: center;

Bu CSS, sütun içindeki içeriği (veya modülleri) yatay olarak (yan yana) istiflemek üzere hizalamak için flex özelliğini kullanır. Ayrıca kolon içindeki modülleri hem dikey hem de yatay olarak ortalar. Bunu bu şekilde yapmamızın nedeni, mobilde üst üste yığılacak birden çok sütun satır yapısı kullanmak zorunda kalmamaktır. Bu kurulumla içerik, tüm tarayıcı genişliklerinde yatay bir hizada kalacaktır.

Artık tanıtım çubuğuna biraz içerik eklemeye hazırız.

Blurb Modülünü Ekleme

Bu örnek promosyonun içeriği için, küçük bir simgeye sahip bir tanıtım yazısı modülü ve sağda bir düğme bulunan bir metin blogu ekleyeceğiz (buna Elegantthemes.com'daki promosyon çubuğu gibi).

Satırın içindeki gri daire artı simgesine tıklayın ve bir tanıtım yazısı modülü ekleyin.

Tanıtım yazısının içeriği için aşağıdakileri girin:

Başlık: [promosyon metnini girin]
Simgeyi Kullan: EVET
Simge: hediye simgesi (ekran görüntüsüne bakın)

Tanımlama yazısı tasarım ayarlarını aşağıdaki gibi güncelleyin:

Simge Rengi: #ff4a9e
Resim/Simge Yerleşimi: Sol
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 16px
Başlık Metin Boyutu: 16px (masaüstü), 14px (telefon)
Başlık Satırı Yüksekliği: 1.3em
Maksimum Genişlik: 230 piksel (yalnızca telefon)
Dolgu: 10 piksel üst
Animasyon Stili: Slayt
Animasyon Yönü: Sağ
Animasyon Gecikmesi: 250ms

Düğme Modülünü Ekleme

Ardından, tanıtım modülünün altına bir düğme modülü ekleyin. Esnek özelliği nedeniyle modül, tanıtım yazısının altında değil sağında görünecektir.

Düğme tasarım ayarlarını aşağıdaki gibi güncelleyin:

Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 15px (masaüstü), 13px (telefon)
Düğme Metin Rengi: #ffffff
Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 20px
Düğme Yazı Ağırlığı: Yarı Kalın

Kenar boşluğu (masaüstü): 20 piksel kaldı
Kenar boşluğu (telefon): 10 piksel kaldı
Dolgu (masaüstü): 0 piksel üst, 0 piksel alt
Dolgu (telefon): 2 piksel üst, 2 piksel alt, 8 piksel sol, 8 piksel sağ
Animasyon Stili: Sıçrama
Animasyon Gecikmesi: 1000ms

Bölüm Ayarları

Promosyon çubuğu tasarımını tamamlamak için promosyon çubuğunu içeren bölümü aşağıdaki gibi güncelleyin:

Dolgu: 0 piksel üst, 0 piksel alt
Animasyon Stili: Sıçrama
Animasyon Yönü: Aşağı
Animasyon Süresi: 500ms
Animasyon Gecikmesi: 250ms
Animasyon Opaklığı Başlatma: %100
Z-endeksi: 999

Tam Genişlikli Gönderi İçeriği Modülünü Ekleme

Bu noktada promosyon çubuğu kullanıma hazırdır. Ancak bu bir şablon olduğu için, bu şablonu kullanan sayfaların içeriğini görüntülemek için post içerik modülünü eklememiz gerekiyor.

Divi Builder kullanılarak oluşturulmuş (veya oluşturulacak) sayfalar için, içerik alanını en üst düzeye çıkarmak için tam genişlikte bir gönderi içeriği modülü kullanmak isteyeceksiniz.

(NOT: Varsayılan düzenleyiciyi kullanan sayfalar için, varsayılan olarak benzer bir maksimum 1080 piksel genişliğine sahip olmanız için normal bir bölüm içinde normal bir gönderi içeriği modülü kullanmak isteyeceksiniz.)

Tam Genişlik Bölümü Ekle

Promosyon çubuğunuzu içeren bölümün altına tam genişlikte bir bölüm ekleyin.

Tam Genişlikli Gönderi İçeriği Modülü Ekle

Ardından Tam Genişlikli Gönderi İçeriği Modülünü seçin.

Bu konuda yapar. Şimdi düzenleyiciden çıkmadan önce düzeni kaydettiğinizden emin olun.

Ardından, tema oluşturucu için değişiklikleri de kaydedin.

Son sonuç

Önce

Şimdi, şablonu promosyon çubuğuyla atamadan önceki sayfa.

Sonrasında

Ve işte promosyon çubuğuna sahip yeni şablonla aynı sayfa.

İşte mobilde.

İşte sayfa yüklendiğinde promosyon çubuğu animasyonu.

Promosyon Çubuğunu Yapışkan Yapmak

Promosyon çubuğunun varsayılan Divi başlığının altına yapışmasını sağlamak için, promosyon çubuğunu içeren bölüme basit bir CSS parçacığı ekleyebiliriz.

Bölüm ayarlarını açın ve aşağıdaki CSS'yi Masaüstündeki Ana Öğeye ekleyin:

position: fixed;
width: 100%;

Ardından, Tabletteki Ana Öğeye aşağıdaki CSS'yi ekleyin:

position: relative;

Şimdi sonucu kontrol edin.

Linkleri Unutmayın

Promosyon çubuğunu oluşturduktan sonra, bağlantı URL'sini promosyon teklifine veya sayfasına eklemek isteyeceksiniz. Düğme bağlantı URL'sini düğme ayarları içerik sekmesinde ekleyebilirsiniz.

Hatta dönüşümler için, satır ayarları bağlantı seçeneğinin altındaki bağlantı url'sini satırın tamamına ekleyebilirsiniz.

Son düşünceler

Bu eğitimde, Divi Theme Builder'ı kullanarak bir promosyon çubuğunun (sıfırdan) nasıl tasarlanacağını gösterdik. Promosyon çubuğu, ziyaretçiler için gerçekten öne çıkmasını sağlamak için birden fazla animasyon ve tasarımla tamamlandı. Hatta daha fazla görünürlük için sayfayı aşağı kaydırırken tanıtım çubuğunu sabitleyebilirsiniz. Ve sitenizde promosyon çubuğunun nerede göründüğünü kontrol etme yeteneği ile uygulama son derece pratiktir.

Umarım bu, kendinize ait birkaç promosyon çubuğu oluşturmanız için size ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!