Divi ile nasıl bulanık infografik yapılır

Ziyaretçilerinizle paylaşmak için çok fazla bilginiz olduğunda ve daha büyük bir resim görmelerini sağlamak istediğinizde, Infographics kullanmanız tavsiye edilir. Yapısı ve etkileşimi nedeniyle bilgi emilimini biraz daha kolay hale getirirler. Infographic’e ihtiyaç duyduğunuzda zihninde görünen ilk şey, daha sonra görüntü modülüne eklemek için Photoshop’u kullanmaktır. Ancak, bu bizi sınırlar. Bu, örneğin, ziyaretçilerin infografiklerinizin belirli bölümlerini kopyalayıp ekleme olasılığını ortadan kaldırır. Neyse ki, Divi Builder ile her türlü şeyi yapabilir ve bulanık infographics’i bunlardan biri yapabilirsiniz. Bu yazıda, bu tür Infographics’i nasıl kolay ve hızlı bir şekilde yapacağınızı göstereceğiz.
Sonuçlar Eğiticiye girmeden önce, size adım adım nasıl yeniden yapacağınızı göstereceğimiz bulanık infografiklere daha yakından bakalım. Masaüstünde

Tablette

Hücresel olarak

Divi ile Blurb Infografik Nasıl Yapılır YouTube kanalına abone oluruz Bu eğitimi iyi tamamlamanıza yardımcı olmak için bu öğreticinin ücretsiz illüstrasyonunu indiriyoruz, size bu öğreticide kullanılan illüstrasyonu ücretsiz olarak vereceğiz. Size verdiğimiz illüstrasyon aslında tasarım ajansı düzeni paketimizden. Aşağıdaki resmin kaynağını indirdiğinizde, ZIP klasörünü açabilir ve izlenecek Writer-illustration_concent-strategy.png adlı bir resim bulabilirsiniz.
Ücretsiz illüstrasyon indirme, mevcut sayfaya veya yeni bir sayfaya yeni bir standart parça ekleyerek gradyan arka plan başlatma yeni bir standart kısmı ekleyin. Ardından, bölüm ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:
Birinci 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ıç ​​Pozisyonu:% 24
Son pozisyon:% 23

Arka Plan görüntüleri Arka Plan Resim sekmesine dönerek, bu yayının başında indirdiğiniz illüstrasyonu ekleyin ve aşağıdaki ayarları kullanın:
Arka Plan Görüntü Boyutu: Gerçek Boyut
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Hue

Son görünürlük, cep telefonlarında ve tabletlerde parçaları devre dışı bırakın. Bu yazı daha sonra, tablet ve cep telefonu ile eşleşen parçayı da yapacağız.

Farklı sütun yapılarıyla 5 standart satır ekleyin Standart bölümde 5 farklı standart satıra ihtiyacımız olacak. Her birini ayrı ayrı tartışacağız. Satır #1 Eklediğiniz ilk satır sütun yapısı yalnızca bir sütun gerektirir.

Az önce yaptığınız çizgiden alan içindeki mesafe, tüm özel dolgu seçeneklerinin ‘0px’ olarak ayarlandığından emin olun. Bu, çizgilerimiz arasında boşluk olmamasını sağlayacaktır.

Satır #2 Sütun Yapısı İkinci sıra aynı sütunlardan üçünü gerektirir. Bu yazı altında yalnızca iki sütun kullanacağız.

Mesafe Bir kez daha, tüm özel dolgu seçeneklerine ‘0px’ eklediğinizden emin olun.

Sıra #3 Ekleyeceğimiz üçüncü sıra sütun yapısı da aynı üç sütunu gerektirir.

Yapıştırıcı ikinci sıra gibi değildir, Boyut Alt Kategorisindeki ‘Tam Genişlik Satır’ seçeneğini etkinleştireceğiz.

Bu satırın mesafesi, tüm özel dolgu seçenekleri için ‘0px’ gerektirir.

Satır #4 Dördüncü sıra sütun yapısı ikinci sıra ile aynıdır ve aynı üç sütunu gerektirir.

Bir mesafe daha, üst, sağ ve sol dolgunun ‘0px’ olarak ayarlandığından emin olun. BARIS #5 Son fakat en az değil sütun yapısının yapısı, ilk sıra için yaptığımızla aynı sütun yapısına ihtiyacımız olacak; Bir sütun.

Tüm seçenekler için özel mesafe ve dolgu ‘0px’.

Blurb Modülünü Ekle Bir simge seçin Bir zamanlı açıklama modülünü yeniden oluşturacağız ve bundan sonra klonlayacağız. Bu çok zaman kazandırır ve hızlı değişiklikler yapmanıza izin verir. İlk satıra bir bulanıklık modülü ekleyerek başlayın, içerik sekmesindeki ‘Icon Kullan’ seçeneğini etkinleştirin ve seçilen simgeyi seçin.

Simge ayarları daha sonra tasarım sekmesine geçin, seçilen simgenin rengini seçin ve aşağıdaki ayarları kullanın:

Resim Yerleştirme/Simge: Üst
Simge yazı tipi boyutu kullanın: evet
Simge yazı tipi boyutu: 27px
Sonraki metin ayarları, metin alt kategorileri açın, ‘parlak’ metnin rengini kullanın ve orta metin yönünü etkinleştirin.

Başlık Metni Alt Kategori Metni Başlıkına Taşıma ve ardından aşağıdaki ayarları kullanın:

Yazı Tip Başlığı: Varsayılan
Ağır yazı tipi başlığı: Normal
Hizalama Metin Başlığı: Orta
Başlık Metin Boyutu: 18px
Başlık metin rengi: #ffffff
Hat yüksekliği başlığı: 1em
Aynı alt kategoriyi aşağı kaydırın ve bazı metin gölgeleri de ekleyin:

Yatay Uzun Gölge Metin Başlığı: 0EM
Dikey Uzun Gölge Metin Başlığı: 0EM
Başlık Metni Gölge Bulanıklık Gücü: 0.6EM
Başlık Metni Gölge Bulanıklık Gücü: RGBA (255,255,255.0.94)
Vücut metni daha sonra, gövde metni alt kategorisini açın ve bunun için aşağıdaki ayarları kullanın:

Gövde yazı tipi: varsayılan
Vücut ağırlığı: normal
Vücut Metin Boyutu: 14 piksel
Vücut metni rengi: #ccccccc
Vücut Hattı Yüksekliği: 1.7EM
Son yapıştırıcı, boyut alt kategorisini açın ve ‘282px’ içerik genişliğini uygulayın. Modül bulanık Klon 7 Zaman Yeri Aşağıdaki sütunda bulanık modül değiştirmeyi bitirdikten sonra, devam edebilir, 7 kez klonlayabilir ve yerleştirebilirsiniz. Sütun aşağıdaki basılı ekranda işaretlenmiştir.

Simgeyi net bir şekilde değiştirin, her benzersiz bulanıklık modülünü yapmak istersiniz. Lütfen içeriği değiştirin ve içerik sekmesinde başka bir simge seçin.

Simgenin rengini değiştirin Tasarım sekmesindeki simgenin rengini her bir bulanıklık modülü için de ihtiyaçlarınıza göre değiştirin.

Cep telefonu ve tablet için klon bölümü, masaüstü sürümünüzün gradyan ve arka plan görüntüsünün arka planını silin. Şimdi bir tablet ve cep telefonu sürümü yapmaya başlama zamanı. Oluşturduğunuz parçayı klonlayarak başlayın, parçanın ayarlarını açın ve degradenin arka planını arka plan görüntüsü ile silin.

Arka Plan Alt Kategorisindeyken arka plan rengini ekleyin, arka plan renginiz olarak ‘RGBA (45,0,11,0.81)’ ekleyin.

Bir sonraki resim modülünü ekleyin, bu yazının başında indirdiğiniz resimler eklemeniz gerekir.

Son fakat en az görünürlüğü değiştirin, cep telefonları ve tabletler yerine masaüstündeki parçaları devre dışı bırakın.

Sonuçlar yapıldı! Bu blog gönderisinde nasıl yeniden oluşturulacağınızı size gösterdiğimiz infografik açıklamaya bakalım! Masaüstünde

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir