Ana İçeriğe Geç

Divi'de animasyonlu bir promosyon çubuğu nasıl oluşturulur?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi'de sayfa şablonunuz için animasyonlu bir tanıtım çubuğu oluşturmak, bir eklentiye güvenmek zorunda kalmadan şık ürünleri ve teklifleri tanıtmanın harika bir yolu olabilir. Divi'nin güçlü tasarım özelliklerini kullanarak, Divi Tema Oluşturucu'da bir şablonu düzenlerken tanıtım çubuğunu görsel olarak oluşturabilirsiniz. Ardından, şablon hazır olduğunda, o şablona atanan herhangi bir sayfada promosyon çubuğu 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.

Yeni bir divi modeli ekle

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

Divi ana sayfası

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.

Bir vücut modeli ekleyin

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.

Divi üzerindeki bir sütuna satır ekle

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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;

CSS kodunun özelleştirilmesi

Bu CSS, yatay olarak (yan yana) yığınlanmak üzere sütundaki içeriği (veya modülleri) hizalamak için flex özelliğini kullanır. Ayrıca kolondaki modülleri dikey ve yatay olarak ortalar. Bunu yapmamızın nedeni, bir mobil cihazda üst üste yığılacak birden çok sütun satırı yapısı kullanmaktan kaçınmaktır. Bu yapılandırmayla içerik, tüm tarayıcı genişliklerinde yatay olarak hizalı kalacaktır.

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

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.

Özet modülü ikinci bölüm 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)
Divi özet modülünün yapılandırması

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.

Divi düğme modülü

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • 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
Divi düğme modülünü özelleştirin
  • 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
Divi düğme modülü aralığını özelleştirin

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
Animasyon divi modülünü özelleştirin

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 divi oluşturucu bölümü oluşturun

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

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

Tam genişlikte makale içeriği divi

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

Divi düzenini kaydet

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

Tema oluşturucu divi

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:

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Sabit bölüme girin

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

position: relative;

Divi bölümüne bir css kodu ekleyin

Şimdi sonucu kontrol et.

Divi animasyonlu sonuç

Ö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 promosyon çubuğunun (sıfırdan) nasıl tasarlanacağını size gösterdik. Tanıtım çubuğu, ziyaretçilerin gerçekten görebilmesi için birden fazla animasyon ve tasarımla tamamlandı. Daha fazla görünürlük için sayfayı aşağı kaydırırken promosyon çubuğunu bile düzeltebilirsiniz. Ve sitenizdeki tanıtım çubuğunun yerleşimini kontrol etme yeteneği ile uygulama son derece kullanışlıdır.

Bu makalede, 1 yorumunu içeren

  1. Merhaba,

    Muhteşem makale ve öğretici, gerçekten ÜST !!!

    Ben de aynı şeyi yapmak istiyorum ama ana menünün (ürün kategorilerim) üzerinde hesap, telefon ve sepet olan ikincil menüyü kullandığım için, eğitimin bir adımını kaçırmadıysam promosyon çubuğu aniden görüntülenmiyor mu? !!.

    Yapmak istediğim şey, bu promosyon çubuğunu ikincil çubuğun üzerinde göstermek, kısacası her şeyin üzerinde bir promosyon koymak, flaş satış yapmak, eklemek istediğim etkinliklere göre bilgileri değiştirmek

    Bu rota hakkında bir fikriniz var mı lütfen?

    Youssef

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse2
cıvıltı
Enregistrer