Divi'de Blurb Icon Arka Planınızla Nasıl Yaratıcı Olabilirsiniz?

Blurb modülleri, Divi'de bulabileceğiniz en çok yönlü öğelerden bazılarıdır. Bu gönderide, nasıl bir adım daha ileri gideceğinizi ve tanıtım yazısı simgesi arka planıyla nasıl yaratıcı olacağınızı göstereceğiz. Tanımlama modülleri, metin modülleri ve harekete geçirici mesaj modüllerinin bir kombinasyonunu kullanacağız. Bu benzersiz tasarımlar, hizmet sayfaları ve ürün kategorisi sayfaları için mükemmeldir. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki üç örneğin sonuçlarına hızlıca bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Örnek 3

masaüstü

Mobil

Blurb Simgesi Arka Plan Örneklerini ÜCRETSİZ İndirin

Ellerinizi ücretsiz tanıtım yazısı simgesi arka plan örneklerine koymak için, önce aşağıdaki düğmeyi kullanarak bunları 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!

Youtube Kanalımıza Abone Olun

Genel Adımlar

Yeni Bölüm Ekle

Arka plan

Bu yaratıcı tanıtım yazısı arka plan tasarımlarını yeniden oluşturmak için yeni bir sayfa açın veya mevcut bir sayfaya yeni bir bölüm ekleyin. Bir satır eklemeden önce, bölümünüze bir arka plan rengi ekleyin.

• Arka Plan Rengi: #f7f7f7

aralık

Bölüme de bazı özel üst ve alt dolgu ekleyin.

• Üst ve Alt Dolgu: 120px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Herhangi bir modül eklemeden önce satırın boyutunu ayarlayın.

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından, boşluk ayarlarında dolguyu ayarlayın.

• Üst Dolgu: 8vw
• Alt Dolgu: 15vw
• Sol ve Sağ Dolgu: 12vw

Sütun 1

Satır ayarlarını değiştirmeyi bitirdikten sonra, ilk sütunda bazı değişiklikler yapın.

Arka plan

İlk olarak, beyaz bir arka plan ekleyin.

• Arka Plan Rengi: Beyaz #ffffff

Sınır

Ardından, biraz sınır yarıçapı ekleyin.

• Yuvarlatılmış Köşeler: Dört köşenin tamamı 2vw

Kutu Gölge

Son olarak, bir kutu gölgesi ekleyin.

• Kutu-Gölge: İlk Seçenek
• Kutu-Gölge Bulanıklığı Gücü: 47px

Satırı İki Kez Klonla

Modül eklemeye başlamadan önce son bir adım kaldı. Satırı iki kez klonlayın.

Örnek 1'i Yeniden Oluştur

Sütun 1'e Blurb Modülü Ekle

Varsayılan İçeriği Sil

Artık satırlarımızı ve sütunlarımızı oluşturduğumuza göre, ilk satırın 1. sütununa modüller eklemeye başlayabiliriz. İlk olarak, bir tanıtım yazısı modülü ekleyin ve tüm varsayılan başlığı ve gövde metnini silin.

Simge Seç

Ardından, resim yerine bir simge seçin.

• Simge: Bağlantı

Arka plan

Tanımlama modülüne siyah bir arka plan rengi ekleyin.

• Arka Plan Rengi: Siyah #000000

Simge Ayarları

Ardından, simge ayarlarını değiştirin.

• Simge Rengi: Sarı #edf000
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutu:
  • Masaüstü: 3vw
  • Tablet: 11vw
  • Telefon: 13vw

boyutlandırma

Modülün boyutunu ayarlayarak devam edin.

• İçerik Genişliği: %100
• Genişlik:
  • Masaüstü: 11vw
  • Tablet: 19vw
  • Telefon: 22vw

aralık

Bazı boşluk değerleri de ekleyin.

• Üst Marj: -5vw
• Alt Marj: 0vw
• Sol Kenar Boşluğu: -1vw
• Üst Dolgu ve Alt Dolgu: 4vw

Sınır

Simgeye benzersiz bir şekil vermek için, sol alt köşe hariç köşelerin her birine biraz kenarlık yarıçapı ekleyin.

• Yuvarlatılmış Köşeler: 50vw, sol alt köşede 0vw.

Kutu Gölge

Son olarak, bir kutu gölgesi ekleyin.

• Kutu-Gölge: İlk Seçenek
• Kutu-Gölge Bulanıklığı Gücü: 50px

Özel CSS

Simge, varsayılan olarak, kendisine eklenmiş bir alt kenar boşluğuna sahiptir. Bundan kurtulmak için, bulanık resim özel CSS kutusuna tek bir CSS kodu satırı ekleyeceğiz.

• Bulanık Resim: kenar boşluğu-alt: 0 piksel;

margin-bottom: 0px;

Sütun 1'e Metin Modülü Ekle

H3 İçeriği Ekle

Simgenin altına, seçtiğiniz bazı H3 içeriğine sahip bir metin modülü ekleyin.

Arka plan

Arka plan ayarlarına gidin ve bir degrade arka planı ekleyin.

• Arka plan: Gradyan
• Renk Bir: Şeffaf
• İkinci Renk: Sarı #edf000
• Gradyan Yönü: 180 derece
• Başlangıç ​​ve Bitiş Konumu: %74

Başlık Metni

Ardından, H3 metnine stil verin.

• Başlık Metni Başlık Düzeyi: H3
• H3 Yazı Tipi: Josefin Sans
• H3 Hizalama: Merkez
• H3 Yazı Tipi Rengi: Siyah #oooooo
• H3 Metin Boyutu:
  • Masaüstü: 2.4vw
  • Tablet: 3.4vw
  • Telefon: 4.8vw
• H3 Harf Aralığı: 0em

boyutlandırma

Boyutlandırma ayarlarında tablet ve telefon için genişliği ayarlayın.

• Genişlik:
  • Tablet: %50
  • Telefon: %60

aralık

Aralık ayarlarına giderek ve kenar boşluğu değerlerini ayarlayarak devam edin.

• Sol ve Sağ Kenar Boşluğu: 5vw
• Üst Dolgu: 1vw

dönüştürmek

Son olarak, dönüştürme seçenekleriyle modülü döndürün.

• Dönüştür Çevirisi:
  • x ekseni: -20vw
  • y ekseni: 13vw
• Dönüştür Döndür: İlk Seçenek, 280 derece

Harekete Geçirici Mesaj Modülünü Sütun 1'e Ekleyin

Varsayılan Başlık İçeriğini Kaldır, Düğme ve Metin İçeriği Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül, bir eylem çağrısı modülüdür. İstediğiniz içeriği ekleyin ve başlık kopyasını kaldırın.

Link ekle

Düğmeye ilgili bir bağlantı ekleyin.

Arka plan

Arka planın renginin olmadığından emin olun.

Gövde metni

Ardından tasarım sekmesine gidin ve gövde metni ayarlarını değiştirin.

• Gövde Yazı Tipi: Kızıl Metin
• Gövde Metni Hizalama: Sol
• Gövde Metni Rengi: Koyu Gri #666666
• Gövde Metni Boyutu:
  • Masaüstü: 1.2vw
  • Tablet: 2.6vw
  • Telefon: 3.1vw
• Gövde Çizgisi Yüksekliği: 1.8em

Buton

Düğme stillerini de değiştirin.

• Düğme Metin Boyutu:
  • Masaüstü: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Düğme Yazı Rengi: Çok Koyu Gri #3f3f3f
• Düğme Kenar Rengi: Çok Koyu Gri #3f3f3f
• Düğme Yazı Tipi: Josefin Sans
• Düğme Marjı: 3vw
• Düğme Üst ve Alt Dolgu: 1vw
• Düğme Sol ve Sağ Dolgu: 3vw

aralık

Biraz sol ve sağ dolgu ekleyerek modülün ayarlarını tamamlayın.

• Sol ve Sağ Dolgu: 7vw

İkinci Sütun'u Sil ve Sütun 1'i Klonla

2. Sütundaki Ayarları Yapın

Şimdi, satır ayarlarına geri dönün ve ikinci sütunu silin. Hemen ardından, ilk sütunu klonlayın. Sonraki adımlarda, yinelenen sütunda birkaç ayar yapacağız.

Bulanıklık Modülü

Tanımlama modülünün simge rengini değiştirerek başlayın.

• Simge Rengi: Su #00ffd4

Metin Modülü

Sonra degrade arka planını ve metin modülünün kopyasını değiştirin.

• Arka Plan Rengi: Su #00ffd4
• İçeriği Değiştir

Örnek 2'yi Yeniden Oluştur

Sütun 1'e Blurb Modülü Ekle

Varsayılan İçeriği Sil

İkinci örneğe geçelim! Sütun 1'e bir tanıtıcı modül ekleyin ve tüm varsayılan içeriği silin.

Simge Seç

Ardından, bir simge seçin.

Arka plan

Şimdi sarı bir arka plan rengi ekleyin.

• Arka Plan Rengi: Sarı #edf000

Simge

Tasarım sekmesindeki simge ayarlarını değiştirerek devam edin.

• Simge Rengi: Beyaz #ffffff
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutu:
  • Masaüstü: 3vw
  • Tablet: 11vw
  • Telefon: 12vw

boyutlandırma

Renk ve arka plan şekillendirildikten sonra modülün boyutunu ayarlayın.

• İçerik Genişliği: %100

aralık

Boşluk ayarlarını da değiştirin.

• Alt Marj: 0vw
• Sol ve Sağ Kenar Boşluğu: 3vw
• Üst ve Alt Dolgu: 2vw

Sınır

Sonraki her köşeye biraz kenarlık yarıçapı ekleyin.

• Yuvarlatılmış Köşeler: Dört köşenin tamamı 2vw

Kutu Gölge

İnce bir kutu gölgesi ekleyerek modülün tasarımını tamamlayın.

• Kutu-Gölge: İlk Seçenek

Sütun 1'in Kutu Gölgesini ve Arka Plan Rengini Kaldır

Sonraki sütun 1 ayarlarını açın ve arka plan rengini ve kutu gölgesini kaldırın.

Özel CSS

Gelişmiş sekmeye tek bir CSS kodu satırı ekleyerek, tanıtım yazısı simgesine uygulanan varsayılan alt kenar boşluğunu kaldırın.

• Bulanık Resim: kenar boşluğu-alt: 0px;

margin-bottom: 0px;

Eylem Çağrısı Modülünü Sütun 1'e Ekle

Başlık İçeriği, Gövde İçeriği ve Düğme İçeriği Ekle

Tanıtım modülünün altına bir eylem çağrısı modülü ekleyin ve istediğiniz içeriği ekleyin.

Link ekle

Sonraki düğmeye bir bağlantı ekleyin.

Arka plan

Beyaz bir arka plan ekleyerek devam edin.

• Arka Plan Rengi: Beyaz #ffffff

Başlık Metni

Tasarım sekmesinde H3 başlık metnine stil verin.

• Başlık Başlık Düzeyi: H3
• H3 Yazı Tipi: Josefin Sans
• H3 Yazı Tipi Rengi: Çok Koyu Gri #3f3f3f
• H3 Boyutu:
  • Masaüstü: 2vw
  • tablet: 4vw
  • Telefon: 6vw
• H3 Çizgi Yüksekliği: 2.3em

Gövde metni

Ardından, gövde metnine stil verin.

• Gövde Yazı Tipi: Kızıl Metin
• Gövde Metni Hizalama: Sol
• Gövde Metni Rengi: Koyu Gri #666666
• Gövde Metni Boyutu:
  • Masaüstü: 1.1vw
  • Tablet: 2.2vw
  • Telefon: 3.1vw
• Gövde Çizgisi Yüksekliği: 1.8em

Buton

Düğme ayarlarına gidin ve düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme Metin Boyutu:
  • Masaüstü: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Düğme Yazı Rengi: Çok Koyu Gri #3f3f3f
• Düğme Yazı Tipi: Josefin Sans
• Düğme Kenar Genişliği: 2-x
• Düğme Kenar Rengi: Çok Koyu Gri #3f3f3f
• Düğme Üst ve Alt Kenar Boşluğu: 3vw
• Düğme Üst ve Alt Dolgu: 1vw
• Düğme Sol ve Sağ Dolgu: 3vw

aralık

Şimdi, aralığı ayarlayın.

• Alt Marj: -1vw
• Üst Dolgu: 6vw
• Sol ve Sağ Dolgu: 7vw

Sınır

Ardından, kenarlık ayarlarında köşeleri yuvarlayın.

• Yuvarlatılmış Köşeler: 2vw

Kutu Gölge

Son olarak, bir kutu gölgesi ekleyin.

• Kutu-Gölge: İlk Seçenek
• Kutu-Gölge Bulanıklığı Gücü: 50px

İkinci Sütun'u Sil ve Sütun 1'i Klonla

2. Sütundaki Ayarları Yapın

Önceki örneğe benzer şekilde, satır ayarlarına gidin ve ikinci sütunu silin. İlk sütunu çoğaltın ve birkaç ayarı yapın.

Bulanıklık Modülü

Tanıtım modülünün arka planını sarıdan su rengine değiştirin.

• Arka Plan Simge Rengi: Aqua #00ffd4

Harekete Geçirici Mesaj Modülü

Eylem çağrısı modülünün içeriğini ve bağlantısını da değiştirin.

• Başlık İçeriğini Değiştir
• Bağlantıyı Değiştir

Örnek 3'ü Yeniden Oluştur

Sütun 1'e Blurb Modülü Ekle

Varsayılan İçeriği Sil

Bir sonraki ve son örneğe geçelim! Sütun 1'e bir tanıtıcı modül ekleyin ve varsayılan içeriği silin.

Simge Seç

Bir simge seçin.

Arka plan

Modüle parlak sarı bir arka plan ekleyin.

• Arka Plan Rengi: Sarı #f7f426

Simge

Simgeyi siyah yapın ve yerleşimini ayarlayın

• Simge Rengi: Siyah #000000
• Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutu:
  • Masaüstü: 3vw
  • Tablet + Telefon: 8vw

boyutlandırma

Modülün genişliğini ve yüksekliğini değiştirerek devam edin.

• İçerik Genişliği: %100
• Yükseklik: 23vw

aralık

Ayrıca, boşluk ayarlarını yapın.

• Sol Kenar Boşluğu: 3vw
• Sağ Marj: 25vw
• Üst Dolgu: 2vw
• Sol Dolgu: 1vw

Sınır

Biraz sınır yarıçapı da ekleyin.

• Yuvarlatılmış Köşeler: Tüm köşelerde 2vw

Kutu Gölge

Ardından, bir kutu gölgesi ekleyin.

• Kutu-Gölge: İlk Seçenek

dönüştürmek

Son olarak, özel dönüştürme çevirme değerlerini kullanarak modülü yeniden konumlandırın.

• x ekseni: -6vw
• y ekseni: 1vw

Sütun 1'den arka plan rengini ve kutu gölgesini kaldırın

Sütun 1 ayarlarına gidin ve arka plan rengini ve kutu gölgesini kaldırın.

Harekete Geçirici Mesaj Modülünü Sütun 1'e Ekleyin

Başlık, Gövde ve Düğme İçeriği Ekle

Tanımlama modülünün altına bir eylem çağrısı modülü ekleyin. Seçtiğiniz bazı içeriği ekleyin.

Link ekle

Ardından, düğmeye bir bağlantı ekleyin.

Arka plan

Harekete geçirici mesaj modülünün stilini belirlemek için siyah bir arka plan rengi ekleyerek başlayın.

• Arka Plan Rengi: Siyah #oooooo

Başlık Metni

Sonraki H3 metin ayarlarını yapın.

• Başlık Başlık Düzeyi: H3
• H3 Yazı Tipi: Josefin Sans
• H3 Yazı Tipi Rengi: Parlak Sarı #f7f426
• H3 Yazı Tipi Boyutu:
  • Masaüstü: 2vw
  • tablet: 4vw
  • Telefon: 6vw
• H3 Çizgi Yüksekliği: 2.3em

Gövde metni

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Kızıl Metin
• Gövde Metni Hizalama: Sol
• Gövde Metni Rengi: Beyaz #000000
• Gövde Metni Boyutu:
  • Masaüstü: 1.2vw
  • Tablet: 2.2vw
  • Telefon: 3.1vw
• Gövde Çizgisi Yüksekliği: 1.8em

Buton

Ardından, düğmeyi aşağıdaki gibi şekillendirin.

• Düğme Metin Boyutu:
  • Masaüstü: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Düğme Metin Rengi: Aqua #00ffd4
• Düğme Kenar Rengi: Aqua #00ffd4
• Düğme Yazı Tipi: Josefin Sans
• Düğme Üst ve Alt Kenar Boşluğu: 3vw
• Düğme Üst ve Alt Dolgu: 1vw
• Düğme Sol ve Sağ Dolgu: 3vw

boyutlandırma

Boyutlandırma ayarlarına gidin ve bazı değişiklikler yapın.

• Genişlik: %90
• Modül Hizalaması: Merkez

aralık

Boşluk ayarlarını da değiştirin.

• Üst Marj: -9vw
• Üst Dolgu: 5vw
• Sol ve Sağ Dolgu: 7vw

Sınır

Ardından kenarlık ayarlarını açın ve köşelerin her birine biraz kenarlık yarıçapı ekleyin.

• Yuvarlatılmış Köşeler: 2vw

Kutu Gölge

Biz de ince bir kutu gölgesi kullanıyoruz.

• Kutu Gölgesi: İlk Seçenek

Dönüştür Çeviri

Son olarak, dönüştürme çevirme ayarlarını değiştirerek eylem çağrısı modülünü yeniden konumlandırın.

• y ekseni: -18vw

İkinci Sütun'u Sil ve Sütun 1'i Klonla

2. Sütundaki Ayarları Yapın

Artık ilk sütun hazır olduğuna göre, ikincisini silip ilkini çoğaltacağız. Daha sonra bazı içerik ve renk ayrıntılarını ayarlayacağız.

Bulanıklık Modülü

Tanıtım modülü ayarlarında, arka planı sarıdan aqua'ya değiştirin.

• Arka Plan Simge Rengi: Aqua #00ffd4

Harekete Geçirici Mesaj Modülü

Harekete geçirici mesaj modülü ayarlarında başlık içeriğini, başlık rengini ve düğme rengini değiştirin. Düğme bağlantısını da değiştirmeyi unutmayın ve işiniz bitti!

• Başlık Metin Rengi: Aqua #00ffd4
• İçerik
• Düğme Rengi: #00ffd4

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Örnek 3

masaüstü

Mobil

Çözüm

Bu gönderide gördüğünüz gibi, tanıtım yazısı simgesi arka planları, tanıtım yazısı tasarımlarınızı çok daha ilginç hale getirebilir. Harekete geçirici mesaj ve metin modülleriyle eşleştirilmiş tanıtım modüllerini kullanarak, birçok yaratıcı olasılık vardır. Bu tarz tasarımlar, hizmet vitrinleri veya ürün bölümleri için mükemmeldir. Ne düşünüyorsun? Yorumlarda bize bildirin.