bar oluştur tanıtım Divi'deki sayfa şablonunuz için animasyon, bir eklentiye güvenmek zorunda kalmadan şık ürünlerin ve tekliflerin reklamını yapmanın harika bir yolu olabilir. Divi'nin güçlü tasarım özelliklerini kullanarak görsel olarak tanıtım Divi Theme Builder'da bir şablonu düzenlediğinizde. Daha sonra model hazır olduğunda çubuk tanıtım bu şablona atanan herhangi bir sayfada görünecektir. 

Ayrıca, tanıtım çubuğunun nasıl sabitleneceğini (veya yapışkan hale getirileceğini) göstereceğiz.

Başlamak için neye ihtiyacınız var?

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

Ayrıca, tanıtım çubuğu şablonundan etkilenecek test amacıyla Divi Builder ile oluşturulmuş en az bir sayfaya ihtiyacınız olacaktır.

Bir sayfa şablonunun üstünde animasyonlu bir tanıtım çubuğu oluşturun

Yeni bir şablon oluştur

WordPress kontrol panelinden Divi> Tema oluşturucu'ya gidin. Ardından, yeni bir şablon oluşturmak için "Yeni bir şablon ekle" kutusunu tıklayın.

Şablonu, promosyon çubuğunun gösterilmesi gereken sayfalara atayın.

Yeni şablonda, "Özel Gövde Ekle" kutusuna tıklayın ve "Özel Gövde Oluştur" u seçin.

NOT: terfi çubuğunu model gövde alanına (başlığa değil) ekliyoruz, böylece Divi varsayılan başlığının yanı sıra tüm başlıklarla da çalışabilir. daha sonra ekleyebileceğiniz özel.

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

Promosyon çubuğunu modele ekleme

Şablon düzeni düzenleyicisinde, 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 Parametreleri

Bir modül eklemeden önce, Row parametrelerini şu şekilde güncelleyin:

• Sol arka plan gradyanı: # 4a42ec
• Sağ arka plan gradyanı: # 521d91
• Gradyan Yönü: 90deg
• Özel bir oluk genişliği kullanın: EVET
• Oluk genişliği: 1
• Genişlik:% 100
• Maksimum genişlik:% 100
• Döşeme: Üstte 0px, altta 0px

Bu, oluşturduğumuz promosyon çubuğunun arka plan rengini ve genişliğini destekler.

Sütun parametreleri

Satır ayarlarından çıkmadan önce, sütun ayarlarını açmak için tıklayın. Ardından, ana sütun öğesine aşağıdaki özel CSS'yi ekleyin:

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

Bu CSS, hizalamak için flex özelliğini kullanır. içindekiler (veya modülleri) yatay olarak (yan yana) istiflemek için sütuna yerleştirin. Ayrıca sütundaki modülleri dikey ve yatay olarak ortalar. Bunu bu şekilde yapmamızın nedeni, mobil cihazlarda üst üste yığılacak birden çok sütun satır yapısını kullanmak zorunda kalmamak. Bu yapılandırmayla, içindekiler tüm tarayıcı genişliklerinde yatay olarak hizalanmış kalacaktır.

Artık eklemeye hazırız içindekiler promosyon çubuğuna gidin.

Blurb modülü ekle

Bu promosyon örneğinin içeriği için, küçük bir simgeye sahip bir sunum modülü ve sağda bir düğmeli bir metin blogu (Elegantthemes.com'daki promosyon çubuğuna benzer şekilde) içereceğiz.

Gri daireye ve satırın içindeki simgeye tıklayın ve bir sunum modülü ekleyin.

Sunu metninin içeriği için aşağıdaki bilgileri girin:

• Başlık: [tanıtım metnini girin]
• Simgeyi kullanın: EVET
• Simge: hediye simgesi (ekran görüntüsüne bakın)

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

• Simge Rengi: # ff4a9e
• Simgelerin resmi / konumu: sol
• Simge yazı tipi boyutunu kullan: EVET
• Simge Yazı Tipi Boyutu: 16px
• Metin Başlığı Boyutu: 16px (masaüstü), 14px (telefon)
• Hewight başlık satırı: 1.3em
• Maksimum genişlik: 230px (yalnızca telefon)
• Dolgu: En iyi 10px
• Animasyon Stili: Slayt
• Animasyon yönü: sağ
• Animasyon gecikmesi: 250 ms

Düğme modülünü ekleme

Ardından, Blurb modülünün altına bir düğme modülü ekleyin. Flex özelliği nedeniyle, modül aşağıda değil, tanıtıcının sağ tarafında görünecektir.

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

• Button için özel stiller kullan: YES
• Düğme metni boyutu: 15px (masaüstü), 13px (telefon)
• Düğme metni rengi: #ffffff
• Düğme kenarlığının genişliği: 0px
• Düğmenin kenarlığının yarıçapı: 20px
• Yazı tipi ağırlığı: yarı kalın

• Marj (masaüstü): Solda 20px
• Marj (telefon): Solda 10px
• Döşeme (ofis): Üstte 0px, altta 0px
• Dolgu (telefon): Üstte 2px, altta 2px, solda 8px, sağda 8px
• Animasyon Stili: Sıçrama
• Animasyon gecikmesi: 1000 ms

Bölüm ayarları

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

• Döşeme: Üstte 0px, altta 0px
• Animasyon Stili: Sıçrama
• Animasyon yönü: Aşağı
• Animasyon süresi: 500 ms
• Animasyon gecikmesi: 250 ms
• Animasyon Başlangıç ​​opaklığı:% 100
• Z Dizini: 999

Tam genişlikte içerik yayınlama modülünü ekleme

Bu noktada, promosyonlar çubuğu hazırdır. Ancak bu bir şablon olduğundan, bu şablonu kullanarak sayfaların içeriğini görüntülemek için içerik gönderme modülünü eklediğimizden emin olmalıyız.

Divi Builder kullanılarak oluşturulan (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şlik elde etmek için normal bir bölümde standart bir içerik sonrası içerik modu kullanmak isteyeceksiniz.)

Tam genişlik bölümü ekle

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

Tam genişlikte bir içerik modülü ekleme

Ardından Fullwidth Post Content modülünü seçin.

Az ya da çok bu. Şimdi düzenleyiciden çıkmadan önce yerleşimi kaydettiğinizden emin olun.

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

Nihai sonuç

Avant

Şimdi, modeli promosyon çubuğu ile atamadan önceki sayfa.

Après

Ve burada promo bar ile yeni şablon ile aynı sayfa.

Promosyon çubuğunu yapışkanlaştırın

Promosyon çubuğunun Divi'nin varsayılan başlığı altına sığması için, promosyon çubuğunu içeren bölüme basit bir CSS pasajı ekleyebiliriz.

position: fixed;width: 100%;

Bölüm ayarlarını açın ve aşağıdaki CSS kodunu ana masaüstü öğesine ekleyin:

Ardından, ana tablet öğesine aşağıdaki CSS kodunu ekleyin:

position: relative;

Şimdi sonucu kontrol et.

Önceki dönüştürmeler için, Bağlantı URL'sini Satır ayarları bağlantı seçeneğinin altında tüm satıra da ekleyebilirsiniz.

Son düşünceler

Bu eğitimde, Divi Theme Builder'ı kullanarak bir tanıtım çubuğunu (sıfırdan) nasıl tasarlayacağınızı gösterdik. Promosyon çubuğu, gerçekten görünür kılmak için birden fazla animasyon ve tasarımla tamamlandı. ziyaretçi. Hatta daha fazla görünürlük için sayfayı aşağı kaydırırken tanıtım çubuğunu düzeltebilirsiniz. Promosyon çubuğunun sitenizde nereye yerleştirileceğini kontrol etme özelliği ile uygulama son derece kullanışlıdır.