Divi ile Blurb Infographic Nasıl Oluşturulur

Ziyaretçilerinizle paylaşacak bir sürü bilginiz olduğunda ve onların daha büyük resmi görmelerini istiyorsanız, infografikleri kullanmanız şiddetle tavsiye edilir. Yapıları ve etkileşimleri nedeniyle bilgiyi özümsemeyi biraz daha kolaylaştırırlar. Bir bilgi grafiğine ihtiyaç duyulduğunda akla gelen ilk şey, Photoshop kullanarak bir bilgi grafiği oluşturmak ve daha sonra bunu bir Görüntü Modülüne eklemektir. Ancak bu bizi sınırlıyor. Örneğin, ziyaretçilerin bilgi grafiğinizin belirli bir bölümünü kopyalayıp yapıştırma olasılığını ortadan kaldırır.

Neyse ki Divi Builder ile her türlü şeyi yapabilirsiniz ve bir Blurb infografiği oluşturmak bunlardan biridir. Bu yazıda, böyle bir infografik nasıl kolay ve hızlı bir şekilde oluşturulacağını göstereceğiz.

Sonuç

Öğreticiye dalmadan önce, nasıl yeniden oluşturacağınızı adım adım göstereceğimiz Blurb bilgi grafiğine daha yakından bakalım.

Masaüstünde

Tablette

Mobilde

Divi ile Blurb Infographic Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Bu Eğitimin Ücretsiz İllüstrasyonunu İndirin

Bu öğreticiyi iyi bir şekilde tamamlamanıza yardımcı olmak için, bu eğitimde kullanılan illüstrasyonu size ücretsiz olarak sağlayacağız. Size sağladığımız illüstrasyon aslında Tasarım Ajansı Düzen Paketimizden. Aşağıdaki resim kaynaklarını indirdiğinizde, klasörü açabilir ve takip etmek için write-illustration_content-strategy.png adlı resmi bulabilirsiniz.

Ücretsiz İllüstrasyonu İndirin

Yeni Bir Standart Bölüm Ekle

Degrade Arka Plan

Mevcut bir sayfaya veya yeni bir sayfaya yeni bir standart bölüm ekleyerek başlayın. Ardından, bölüm ayarlarını açın ve aşağıdaki degrade arka planını ekleyin:

• İlk Renk: rgba(45,45,45,0.3)
• İkinci Renk: rgba(45,0,11,0.81)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %24
• Bitiş Konumu: %23

Arka plan görüntüsü

Arka plan resmi sekmesine geçin, bu gönderinin başında indirdiğiniz resmi ekleyin ve aşağıdaki ayarları kullanın:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Ton

görünürlük

Son olarak, telefon ve tabletteki bölümü devre dışı bırakın. Bu gönderide daha sonra tabletler ve cep telefonlarıyla da eşleşen bir bölüm oluşturacağız.

Farklı Sütun Yapılarına Sahip 5 Standart Satır Ekleme

Standart bölümde 5 farklı standart satıra ihtiyacımız olacak. Her birini ayrı ayrı ele alacağız.

1. sıra

Sütun Yapısı

Eklediğiniz ilk satırın yalnızca bir sütuna ihtiyacı var.

aralık

Yeni oluşturduğunuz satırın Aralık alt kategorisinde, tüm özel dolgu seçeneklerinin '0px' olarak ayarlandığından emin olun. Bu, satırlarımız arasında boşluk kalmamasını sağlayacaktır.

2. sıra

Sütun Yapısı

İkinci satırın üç eşit sütuna ihtiyacı var. Bu yazının devamında yalnızca iki sütun kullanacağız.

aralık

Yine, tüm özel dolgu seçeneklerine '0px' eklediğinizden emin olun.

3. sıra

Sütun Yapısı

Ekleyeceğimiz üçüncü satır da üç eşit sütuna ihtiyaç duyar.

boyutlandırma

İkinci satırın aksine, Boyutlandırma alt kategorisinde 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştireceğiz.

aralık

Bu satırın tüm özel dolgu seçenekleri için de '0px' olması gerekir.

4. sıra

Sütun Yapısı

Dördüncü satır, ikinci satırla aynıdır ve üç eşit sütuna ihtiyaç duyar.

aralık

Bir kez daha, üst, sağ, alt ve sol dolgunun '0px' olarak ayarlandığından emin olun.

5. sıra

Sütun Yapısı

Son olarak, ilk satır için yaptığımızla aynı sütun yapısına ihtiyacımız olacak; bir sütun.

aralık

Ve tüm seçenekler için özel bir '0px' dolgusu.

Bulanıklık Modülü Ekle

Bir Simge Seçin

Tanımlama modülünü bir kez yeniden oluşturacağız ve daha sonra klonlayacağız. Bu size bir sürü zaman kazandırır ve hızlı değişiklikler yapmanızı sağlar. İlk satıra bir Blurb Modülü ekleyerek başlayın, İçerik sekmesinde 'Simge Kullan' seçeneğini etkinleştirin ve istediğiniz bir simgeyi seçin.

Simge Ayarları

Ardından Tasarım sekmesine gidin, bir Simge Rengi seçin ve onunla birlikte aşağıdaki ayarları kullanın:

• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 27px

Metin Ayarları

Ardından, Metin alt kategorisini açın, bir 'Açık' Metin Rengi kullanın ve ortadaki Metin Yönlendirmesini etkinleştirin.

Başlık Metni

Başlık Metni alt kategorisine geçin ve daha sonra aşağıdaki ayarlardan yararlanın:

• Başlık Yazı Tipi: Varsayılan
• Başlık Yazı Tipi Ağırlığı: Normal
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 18px
• Başlık Metin Rengi: #FFFFFF
• Başlık Satırı Yüksekliği: 1em

Aynı alt kategoriyi aşağı kaydırın ve biraz metin gölgesi de ekleyin:

• Başlık Metin Gölge Yatay Uzunluk: 0em
• Başlık Metni Gölge Dikey Uzunluk: 0em
• Başlık Metin Gölge Bulanıklığı Gücü: 0.6em
• Başlık Metin Gölge Bulanıklığı Gücü: rgba(255,255,255,0.94)

Gövde metni

Ardından, Gövde Metni alt kategorisini açın ve bunun için aşağıdaki ayarları kullanın:

• Gövde Yazı Tipi: Varsayılan
• Gövde Yazı Tipi Ağırlığı: Normal
• Gövde Metin Boyutu: 14px
• Gövde Metni Rengi: #cccccc
• Gövde Çizgisi Yüksekliği: 1.7em

boyutlandırma

Son olarak, Boyutlandırma alt kategorisini açın ve '282px' İçerik Genişliği uygulayın.

Blurb Modülünü 7 Kez Klonla

Aşağıdaki Sütunlara Yerleştirin

Bulanıklık Modülünü değiştirmeyi bitirdikten sonra devam edebilir, 7 kez kopyalayabilir ve aşağıdaki yazdırma ekranında işaretli sütunlara yerleştirebilirsiniz.

Simgeyi Değiştir

Açıkçası, Blurb Modüllerinin her birini benzersiz yapmak isteyeceksiniz. Devam edin, içeriği değiştirin ve İçerik sekmesinde başka bir simge seçin.

Simge Rengini Değiştir

Blurb Modüllerinin her biri için de ihtiyaçlarınıza göre Tasarım sekmesindeki Simge Rengini değiştirin.

Mobil ve Tablet için Klonlama Bölümü

Degrade Arka Planını ve Arka Plan Resmini Kaldır

Masaüstü sürümünüz bitti. Şimdi tablet ve telefon sürümünü oluşturmaya başlama zamanı. Oluşturduğunuz bölümü klonlayarak başlayın, bölüm ayarlarını açın ve arka plan görüntüsüyle birlikte degrade arka planını kaldırın.

Arka Plan Rengi Ekle

Arka Plan alt kategorisindeyken, arka plan renginiz olarak 'rgba(45,0,11,0.81)' ekleyin.

Resim Modülü Ekle

Ardından, bu yazının başında indirdiğiniz resmi bir Görüntü Modülüne eklemeniz gerekecek.

Görünürlüğü Değiştir

Son olarak, telefon ve tablet yerine masaüstündeki bölümü devre dışı bırakın.

Sonuç

Yapılmıştı! Bu blog gönderisinde nasıl yeniden oluşturacağınızı gösterdiğimiz tanıtım yazısı infografisine bir göz atalım!

Masaüstünde

Tablette

Mobilde

Son düşünceler

Bu gönderide, Divi'nin yerleşik seçeneklerini ve bu gönderinin başında indirebileceğiniz ücretsiz bir bilgi grafiğini kullanarak nasıl tanıtıcı bir bilgi grafiği oluşturacağınızı gösterdik. Belirli bir konu hakkında çok fazla içerik paylaşmanız gerekiyorsa ve yine de etkileşimli ve eğlenceli kalmasını istiyorsanız, bir tanıtım yazısı oluşturmak kullanışlı olabilir. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!