Divi için ÜCRETSİZ Çok Amaçlı Satış Banner Tasarımını İndirin

Çok amaçlı bir satış afişine sahip olmak, promosyonların tüm öfkeli olduğu yılın bu önemli zamanlarında kesinlikle kullanışlı olacaktır (ve size zaman kazandıracaktır). Bu nedenle Divi için bu çok amaçlı satış afişini ÜCRETSİZ indirme olarak sunuyoruz! Bu satış afişi, yalnızca birkaç metin ve arka plan görüntüsü ile ihtiyaçlarınıza uyacak şekilde kolayca özelleştirilebilir. Divi'de satış afişini tasarlamak, web'de genellikle biraz grenli görünen resim afişlerine razı olmanıza gerek kalmayacak kadar kolaydır. Bu yüzden, ücretsiz indirmeye ek olarak, size Divi'deki satış afişini sıfırdan nasıl tasarlayacağınızı göstereceğim.

Başlayalım!

Neler Dahil

İndirmeye dahil olan satış afişi tasarımına bir göz atın.

Satış Banner Tasarımını ÜCRETSİZ İndirin

Satış afişi tasarımına ücretsiz olarak sahip olmak için öncelikle 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.

İNDİRMEK

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 Divi Kitaplığına Yükleme

Dosyayı indirdikten sonra sıkıştırın. “sales-banner-design.json” adlı bir dosya içerdiğini göreceksiniz. Divi kitaplığınıza yükleyeceğiniz şey budur. Şimdi wordpress panonuza gidin ve Divi > Divi Kitaplığı'na gidin. Ardından sayfanın üst kısmındaki içe aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinden İçe Aktar sekmesini seçin ve sales-banner-design.json dosyasını seçin. Ardından Divi Builder Düzenlerini İçe Aktar düğmesini tıklayın.

Şimdi mizanpajı sayfanıza aktarmak için yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Ardından “Önceden Hazırlanmış Bir Düzen Seçin” öğesini seçin. Kitaplıktan yükle açılır penceresinden, “Kaydedilen Düzenleriniz” sekmesini seçin ve ardından listeden Satış Afiş Tasarımı düzenine tıklayın. Bu kadar!

Divi'de Sıfırdan Satış Banner'ı Nasıl Oluşturulur

Bölüm Arka Planı Ekleme

İşleri başlatmak için yeni bir sayfa oluşturun. Sayfanıza bir başlık verdikten sonra görsel oluşturucuyu dağıtın ve “Sıfırdan Oluştur” seçeneğini seçin. Ardından, bir sütun satırıyla yeni bir bölüm ekleyin.

Satıra herhangi bir modül eklemeye başlamadan önce, bölümünüze bir arka plan gradyan rengi verin (Bu noktada renk önemli değil. Satışlarımız için kullanacağımız tüm beyaz tasarım öğelerini görmek için sadece bir arka plan rengine ihtiyacımız var. afiş.)

Satış Başlığı için Satırları Özelleştirme

Modüllerimizi satıra eklemeden önce, satırımıza 700px özel bir genişlik verelim ve alt veya üst boşluk varsa çıkaralım, böylece sıramız altına ekleyeceğimiz diğer satırın üstüne güzelce otursun. Satır ayarlarına gidin ve aşağıdakileri güncelleyin:

Özel Genişlik: 700 piksel
Oluk genişliği: 1
Özel Kenar Boşluğu: 0 piksel üst, 0 piksel, alt
Özel dolgu: 0 piksel üst, 0 piksel alt

Şimdi, toplam üç özdeş satırınız olacak şekilde satırı iki kez çoğaltın. Bunlar satış afişimizi oluşturmak için kullanılacaktır.

Bitişik Metinle Üst Kenarlık Çerçevesini Ekleme

Satış afişimizi oluşturmak için, solda bir metin içeren bir üst kenarlıkla başlıyoruz. Bunu yapmak için bir bölücü modül ve bir metin modülü kullanacağız. İlk olarak, yeni bir metin modülü oluşturun ve içerik kutusuna birkaç kelime içerik ekleyin.

İçerik: “Yalnızca Çevrimiçi”

Tasarım sekmesine geçin ve aşağıdakileri güncelleyin:

Metin Yazı Tipi Ağırlığı: Kalın
Metin Yazı Tipi Stili: TT
Metin Metin Rengi: rgba(255,255,255,0.9)
Metin Metin Boyutu: 15px
Metin Harf Aralığı: 2px
Metin Satır Yüksekliği: 1em
Genişlik: %22 (masaüstü), %25 (tablet), %40 (akıllı telefon)
Modül Hizalama: sol
Özel Kenar Boşluğu: 0 piksel üst, -15 piksel alt
Özel Dolgu: 0 piksel üst, 0 piksel alt

Bu özel kenar boşluğu, ayırıcımız henüz eklenmediğinden biraz erkendir, ancak metni, yakında eklenecek ayırıcıya tam olarak bitişik olacak şekilde hizalamak gerekir.

Şimdi aynı satırdaki metin modülünün altına bir ayırıcı modül ekleyin. Ardından, ayırıcı ayarlarını aşağıdaki gibi güncelleyin:

Renk: rgba(255,255,255,0.9)
Bölücü konumu: alt
Bölücü ağırlığı: 15px
Yükseklik: 15 piksel
Genişlik: %78 (masaüstü), %75 (tablet), %60 (akıllı telefon)
Modül Hizalaması: Sağ
Özel Kenar Boşluğu: 0 piksel üst, 0 piksel alt
Özel Dolgu: 0 piksel üst, 0 piksel alt

Tabii ki, tasarımı kendi ihtiyaçlarınıza göre özelleştirirken metin modülünüzün genişliğine bağlı olarak kenarlığınızın genişliğini ayarlamanız gerekecektir.

Ardından, bölücüyü daha sonra tasarlayacağımız satırın sağ kenarına bağlamak için bir bölücü modül daha eklememiz gerekiyor.

Bunun için bölücü modülü çoğaltın ve aşağıdakileri güncelleyin:

Genişlik: 15 piksel
Özel Kenar Boşluğu: -1 piksel alt

Bitişik Metin ile alt kenarlık çerçevesini ekleme

Alt bordür çerçevesini oluşturmak için üst sıramızın üst bordür çerçevesinde oluşturduğumuz aynı elemanı kullanabiliriz. Sadece bu sefer 15px genişliğinde ayırıcı modül ile başlayacağız. Devam edin ve 15px ayırıcı modülünü kopyalayın ve üçüncü (alt) sıraya yapıştırın. Ardından modül hizalamasını sağ yerine sola güncelleyin.

Ardından, üst sıradaki daha uzun bölücü modülü kopyalayın ve alt sıradaki 15px bölücünün altına yapıştırın. Ardından aşağıdakileri ayarlayın:

Genişlik: %75 (masaüstü), %70 (tablet), %50 (akıllı telefon)
Modül Hizalama: sol

Son olarak, üst sıradaki metin modülünü kopyalayın ve alt sıradaki iki ayırıcı modülün altına yapıştırın. Ardından aşağıdakileri güncelleyin:

İçerik: "1 Kasım'da Başlıyor"
Genişlik: %25 (masaüstü), %30 (tablet), %50 (akıllı telefon)
Modül Hizalaması: Sağ
Özel kenar boşluğu: -15 piksel üst, 0 piksel alt
Özel Dolgu: 15 piksel kaldı

Metin Modüllerini Orta Satıra Ekleme

Artık ana satış banner metnimizi tutacak olan orta sıramıza metin modüllerini eklemeye başlamaya hazırız. Üç metin modülünü üst üste yığacağız. Devam edin ve ilk metin modülünü orta satıra ekleyin.

Ardından aşağıdakileri güncelleyin:

İçerik: "Her Şeyde %20 İndirim"
Arka Plan Rengi: rgba(255,255,255,0.9)

Metin Yazı Tipi Ağırlığı: Yarı Kalın
Metin Yazı Tipi Stili: TT
Metin Metin Rengi: #000000
Metin Metin Boyutu: 34px (masaüstü), 20px (akıllı telefon)
Metin Harf Aralığı: 2px
Metin Satır Yüksekliği: 1em
Metin Yönü: Merkez
Özel Dolgu: 2vw üst, 2vw alt, 5vw sol, 5vw sağ

Metne beyaz bir arka plan üzerinde siyah bir renk vermek, metnin bölüm arka planıyla karışmasını sağlayacak ekran karışım modu efektini en üst düzeye çıkarmak için esastır. Ekran karışım modunu biraz sonra satıra ekleyeceğiz.

Şimdi bir sonraki metin modülünün tasarımını hızlı bir şekilde başlatmak için metin modülünü çoğaltın. Ardından içeriği aşağıdaki html ile güncelleyin:

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

Satır içi stil, başlık metninin etrafına siyah bir kenarlık ekler. Yine siyah renk, bölüm arka planını metinle ortaya çıkarmak için ekran karışım moduyla birlikte çalışacaktır.

Ardından aşağıdakileri güncelleyin:

Başlık 2 Yazı Tipi Ağırlığı: Kalın
Başlık 2 Yazı Tipi Stili: TT
Başlık 2 Metin Rengi: #000000
Başlık 2 Metin Boyutu: 100px (masaüstü), 80px (tablet), 60px (akıllı telefon)
Başlık 2 Harf Aralığı: 2px
Özel Kenar Boşluğu: 0 piksel üst
Özel Dolgu: 0 piksel üst, 0 piksel alt

Son metin modülü için, bu orta satırdaki ilk metin modülünü çoğaltın ve ikinci metin modülünün altına yapıştırın.

Ardından aşağıdakileri güncelleyin:

İçerik: "Şimdi Alışveriş Yapın"
Metin Yazı Tipi Stili: TT, U (altı çizili)
Özel Kenar Boşluğu: 0 piksel üst
Özel Dolgu: 1vw üst, 2vw alt

Orta Sırayı Şekillendirmek

Bu tasarımın son aşaması, orta sıraya bir kenarlık ve ekran karışım modu efekti eklemektir. Bunu yapmak için orta sıradaki ayarları açın ve aşağıdakileri güncelleyin:

Özel Dolgu: 15 piksel sol, 15 piksel sağ
Sağ Kenar Genişliği: 15px
Sağ Kenar Rengi: rgba(255,255,255,0.9)
Sol Kenar Genişliği: 15px
Sol Kenarlık Rengi: rgba(255,255,255,0.9)
Karışım Modu: Ekran

Ekran harmanlama modu, metnin arka plan görüntüsünü harmanlayarak, harika bir efekt için metinde görünmesini sağlar!

Nihai sonucu kontrol edin.

Satış Banner'ınıza Bağlantı Ekleme

Bu bir satış banner'ı olduğundan, dönüşümleri artırmak için banner'daki tıklanabilir alanı en üst düzeye çıkarmak isteyeceksiniz. Bunu yapmak için, orta satırın tamamına bir bağlantı ekleyebilirsiniz. Basitçe orta satır ayarlarını açın ve istediğiniz sayfaya yönlendirmek için bir satır bağlantı URL'si girin.

Benzersiz Tasarımlar için Farklı Bölüm Arka Planları Ekleme

Bu yeni satış afiş tasarımı ile benzersiz tasarımlar oluşturmak için arka plan resmini kolayca güncelleyebilirsiniz.

İşte birkaç örnek.

Son düşünceler

Umarım bu satış afişi tasarımı, yıl boyunca ihtiyaç duyulan tüm web promosyonları için kullanışlı olur. Tasarım, tamamen yeni bir görünüm için yeni metin ve bölüm arka plan görüntüleri ile kolayca güncellenebilen çok amaçlı bir satış afişi olarak hizmet verecek şekilde oluşturulmuştur. Hatta bir video arka planı da ekleyebilirsiniz!

Yorumlarda sizden haber bekliyorum.

Şerefe!