Elementor ile Infographic Web sayfası nasıl oluşturulur
Yayınlanan: 2025-02-10Hikayeler ve bilgilerle sadece birkaç tıklamadan uzakta olan insanlar, bilinçli kararlar vermek için soyut anlatılar üzerindeki istatistiklere ve sayısal verilere giderek daha fazla güveniyorlar. Infografik web sayfaları parlıyor. Sadece ziyaretçileri çekmekle kalmazlar, aynı zamanda büyüleyici ve dikkat çekerler, bu da karmaşık bilgileri hem erişilebilir hem de ilgi çekici hale getirir.
Ayrıca, infografik web sayfaları karmaşık verileri zorlayıcı ve okunması kolay yollarla sunabilir. Infographics herhangi bir vaka çalışmasına veya varsayımsal hikayelere/fikirlere eşlik ettiğinde, piyasa kitleleri için güçlü değerler yaratabilirler. Ancak, infografik web sayfaları oluşturmak zor değildir.
Elementor ve HappyAddons ile WordPress'te her türlü infografik web sayfası tasarımı oluşturabilirsiniz. Bu öğretici gönderide, Elementor ile infografik bir web sayfasının nasıl oluşturulacağı hakkında adım adım bir kılavuz göstereceğiz. Başlayalım!
İnfografik web sayfası nedir?
Bir infografik web sayfası, kavramları göstermek için grafik gösterimler kullanarak bilgileri sunmak için tasarlanmıştır. Görüntüler, grafikler, istatistiksel şekiller, simgeler vb. Gibi çeşitli görsel öğeleri, kapsamlı verileri basitleştirmek için minimal metinlerle birleştirir.
İnfografik web sayfaları, okunabilirliği artırmak için görsel içeriğe öncelik verir, böylece insanlar ilk bakışta tüm kavramı kolayca anlayabilir. Bu tür bir sayfa genellikle hikaye anlatımı, veri görselleştirme ve eğitim amaçları için oluşturulur. Kuşkusuz, infografik web sayfaları daha yüksek tutma ve katılım oranlarına sahiptir.
İnfografik web sayfalarına neden ve ne zaman ihtiyacınız var
Şimdi öğretici bölümüne dalmadan önce web sitenizde infografik sayfa tasarımlarına neden ve ne zaman ihtiyaç duyduğunuza hızlı bir şekilde bakalım. Keşfedelim.
- Karmaşık bilgileri basitleştirir
Görsel öğeler, kullanıcıların önemli bilgileri bozarak bunalmadan karmaşık veri konularını anlamalarına yardımcı olur.
- Ziyaretçileri web sitenizde daha uzun süre tutar
Etkili bir infografik sayfa, sıçrama oranlarını azaltarak ve dönüşüm potansiyelini artırarak ziyaretçileri sitenizde daha uzun süre kalmaya motive eder.
- Marka otoritesini güçlendirir
Yapılandırılmış verileri ve değerli bilgileri görsel olarak görüntüleyerek, web sitenizi güvenilir bir bilgi sağlayıcısı olarak kurabilirsiniz.
- Pazarlama ve tanıtım içeriği için
İnfografik sayfalar, kampanya vurgularının yanı sıra ürün karşılaştırmaları göstermenin etkili bir yolu olarak öne çıkıyor. Müşterilerin dikkatini çekmek için müşteri referanslarını da görüntüleyebilirsiniz.
- Sosyal medyada yayınları paylaşın
İnfografik içeriğin sosyal medya platformlarında paylaşılması kolaydır. Ayrıca, son zamanlarda, insanlar infographics ve istatistiksel bilgileri metinsel hikayelerden daha fazla görmeyi severler.
Elementor ile Infographic Web sayfası nasıl oluşturulur
WordPress'i en az birkaç haftadır kullanıyorsanız, Elementor'u duymuş olabilirsiniz. Web sayfalarını kodlamadan tasarlayabileceğiniz güçlü bir sürükle ve bırak sayfası oluşturucu eklentisidir. Yapmanız gereken tek şey tasarım widget'larını seçmek, sayfaya sürükleyip bırakmak ve bunları özelleştirmek.
HappyAddons, Elementor eklentisine iyi bilinen bir eklentidir. Birçok ek tasarım widget ve özelliği ile birlikte gelir. Elementor'un yeterli olmadığını düşünüyorsanız, HappyAddons'u onunla deneyebilirsiniz. İki eklentiyi birlikte kullanarak web tasarımı alanında sihir yapabilirsiniz.
Aşağıdaki bağlantıları tıklayarak eklentileri alın.
- Element
- Happyaddons
- HappyAddons Pro
Yalnızca Elementor ve HappyAddons'ın ücretsiz sürümlerini kullanarak infografik sayfalar oluşturabilirsiniz. Ancak premium sürüm daha heyecan verici kaynaklarla birlikte geliyor. Bu nedenle, bu öğreticide HappyAddons'ın premium versiyonunu kullanacağız.
Eklentiler web sitenizde yüklendikten ve etkinleştirildikten sonra, aşağıda gösterildiği gibi öğreticiyi izlemeye başlayın.
Adım 01: Elementor ile bir gönderi veya sayfa açın
Elementor ile bir gönderi veya sayfa açın. Solda, tüm tasarım widget'larını ve özelliklerini bulacağınız Elementor Paneli var. Sağda, infografik web sayfasını tasarlamak için widget'ları sürükleyip bırakmanız gereken Elementor Canvas var.

Adım 02: Widget'ları yerleştirmek için sütunlar oluşturun
Herhangi bir widget yerleştirmeden önce sütunlar oluşturmanız gerekir. Bunu yapmak için (+) artı simgesini tıklayın. Ardından, FlexBox Container seçeneğini seçin. Bundan sonra, tasarım için ihtiyacınız olan bir sütun yapısı seçin .

Elementor ile WordPress'e Lightbox'ın nasıl ekleneceğini kontrol edin.
Adım 03: Sütunlara uygun widget'lar eklemeye başlayın
Tasarım tercihlerinize göre, oluşturduğunuz sütunlara widget'ları yerleştirin. Bakalım bu bölümü nasıl tasarladığımızı görelim.
# Resim widget'ı ekle
Arama kutusuna ' görüntü ' yazın. Görüntü widget'ı aşağıda göründükten sonra, sütun yapısı alanındaki uygun bir bölüme sürükleyin ve bırakın.

Aşağıdaki resimde işaretlenen bölümden bir resim yükleyin veya medya kitaplığından widget alanına bir resim ekleyin.

# Başlık Widget'ı ekle
Başlık widget'ını bulun ve sağ sütuna yerleştirin.

İnfografik sayfa için bir başlık yazın. Diyabet için bu sayfayı oluşturacağım gibi, sayfa başlığı için yazdım.

Stil sekmesine gel. Hizalamayı, tipografiyi, metin rengini ve daha fazlasını değiştirmek için seçenekler alacaksınız.

# Metin Editörü Widget'ı ekleyin
Bundan sonra, metin editörü widget'ını başlığın altına ekleyin. Tuvale düz metinler ve paragraflar eklemenize izin verecektir.

Şimdi, aynı şekilde, istediğiniz metin metin editörü widget'ına ekleyin . Ardından, yazı tipini artırın, yazı tipi ailesini değiştirin ve yukarıda gösterdiğimiz gibi bir renk seçin.

İki widget arasındaki boşluğu azaltmak istiyorsanız, marj ayarlarını özelleştirebilirsiniz .

Aynı şekilde, ilgili widget'ları kullanarak tuvale ek metin ve görüntüler ekleyin.

Marj seçeneğini kullanarak, aşağıdaki resimdeki harita gibi herhangi bir widget'ı başka bir yere taşıyabilir ve yerleştirebilirsiniz. Umarım anlarsın.

WordPress'te bir etkinlik takvimi oluşturmayı öğrenin.
Adım 04: İstatistiksel grafikler eklemek için yeni bir bölüm oluşturun
Bir web sitesi sayfası birkaç bölümün bir kombinasyonudur. Bu nedenle, yeni bir bölüm oluşturmak için sayfaya yeni bir sütun yapısı alanı eklemeniz gerekir.

Metin Editörü Widget'ı kullanarak, aşağıda yaptığımız gibi yeni Infographic bölümüne bir kopya ekleyin.

# Tuval'e bir grafik widget ekleyin
HappyAddons, Infographic Web sayfasını tasarlamak için gerçekten yararlı olan altı grafik widget'ıyla birlikte geliyor. Sadece grafik widget'larını keşfedin ve Infographic Web sayfası tasarımını beğendiklerinizi seçin.

Belirli istatistiksel verileri göstermek için Beceri Çubukları Widget'ı kullanacağız.


Ön ayarlar önceden tasarlanmış şablonlarla birlikte gelir. Beceri çubukları widget'ı için herhangi bir ön ayar seçebilir veya varsayılan olanla kalabilirsiniz.

Beceri bölümünden , ilgili sekmeleri tıklayarak tüm çubuklara tek tek bilgi ekleyebilirsiniz. Bunları yeniden adlandırdığımızı ve her biri için yüzdeler ayarladığımızı görebilirsiniz.

Beceri çubukları widget'ını seçerek stil sekmesine gidin. Widget'ın metin rengini, tipografisini ve diğer çeşitli ayarlarını değiştirebilirsiniz.

Metin düzenleyicisi bloğunu kullanarak, beyaz alanı kullanmak için sol tarafa daha fazla bilgi ekleyebilirsiniz.

Adım 05: Daha fazla bilgi için yeni bir sütun yapısı oluşturun
Başka bir bölüm eklemek için tekrar yeni bir sütun yapısı oluşturun. Ardından, aşağıdaki resimde yaptığımız gibi bir görüntü ve metin açıklaması ekleyin.

Ardından, sağ tarafta, beyaz alanı uygun bilgilerle doldurun. Metin editörü widget'ı kullanarak iki metin ekledik. Aralarında, FlexBox kabını kullanarak bir bölüm tuttuk.

Bu alt bölümleri bu FlexBox kabını kullanarak oluşturabilirsiniz.

Şimdi, Icon Widget'ı konteyner bölümlerine ekleyin.

Simge Widget, kütüphanedeki kapsamlı bir simgeler koleksiyonu ile birlikte gelir. Tüm bölümler için simgeyi tek tek değiştirebilirsiniz. Yaptığımız gibi yap.

Simge rengini değiştirmek için Stil sekmesine gidin.
Konumlarını değiştirmek için Düzen sekmesi> marj olarak gidin. Umarım gerisini kendin yapabilirsiniz.

Adım 06: Infografik web sayfası tasarımı için son bölümü oluşturun
Yukarıdaki gibi, FlexBox kabını kullanarak yeni bir bölüm ve sütun yapısı oluşturun. Ayrıca bölüm için bir başlık ekleyin.

# Pasta Grafiği Ekle
Yukarıda belirtildiği gibi, HappyAddons birçok yararlı grafik widget'ıyla birlikte geliyor. Bu bölümde pasta grafiğini kullanacağız. Sürükleyin ve ilgili bölüme bırakın.

Widget'ın pasta grafik bölümünden , tüm sekmeleri tek tek kullanarak pasta grafiği için bilgileri belirtin.

Ayarlar bölümünü genişletin. Buradan çok sayıda şeyi özelleştirebilirsiniz. Ancak yapabileceğiniz en önemli olanlar bir başlık yazmak ve efsanenin konumunu değiştirmek.

Stil sekmesine gidin. Widget için tipografiyi, yazı tipi boyutunu ve çeşitli renk efektlerini özelleştirebilirsiniz.

# Bir çubuk grafiği ekle
Aynı şekilde, çubuk grafik widget'ını tuvale ekleyin.

Beceri çubukları ve çubuk grafik widget'ları gibi, çubuk grafik widget'ını özelleştirin, bilgi ve stilizasyonu istediğiniz gibi ayarlayın. Umarım kendin yapabilirsiniz. Yap.

WordPress'te 360 derece dönen ürün fotoğrafçılığının nasıl görüntüleneceğine dair bir rehber.
Adım 07: Infografik web sayfası tasarımı için bir arka plan rengi ayarlayın
Sayfa boyunca bir arka plan rengi ayarlamak, infografik web sayfası tasarımını daha göz alıcı hale getirebilir. Bunu yapmak için sol üst köşedeki üç satır simgesini tıklayın .

Yeni bir panele götürüleceksiniz. Site Ayarları seçeneğini tıklayın .

Tekrar yeni bir panele götürüleceksiniz. Arka plan seçeneğine basın .

Renk seçeneğinden bir renk seçin. Rengin sayfanın arka planından uygulandığını göreceksiniz.

Böylece, infografik web sayfası tasarımınızı oluşturabilir ve tasarlayabilirsiniz.
Adım 08: Infografik web sayfası tasarımını önizleme
Önizleme sayfasına gidin ve her şeyin yolunda olup olmadığını kontrol edin. Sonunda iyi çalışıyor.
Kapanış!
Gerçekten de, HappyAddons ile eşleştirilen Elementor, karmaşık bilgileri basitleştiren çarpıcı infografik web sayfaları oluşturmanızı sağlıyor. Bununla birlikte, en iyi sonuçları elde etmek için, bazı kilit noktalar dikkatle dikkate alınmalıdır.
Aşırı metin ve görsellerden kaçınarak tasarımınızı temiz ve düzenli tutun. Marka kimliğinizle hizalanan bir renk paleti kullanın ve tüm cihazlarda tutarlı bir görünüm sağlamak için mobil yanıt verebilirliği sağlayın. Mümkünse, içeriğinizi etkileşimli hale getirebilecekleri için animasyon ve devirme efektleri ekleyin.
Metin içeriği ve tasarım öğeleri arasında uyumlu bir denge için çabalayın. Infographic sayfaları amacıyla mükemmel bir şekilde hizalandıkları için grafiklerin ve grafiklerin kullanımına öncelik verin. Son olarak, performanstan ödün vermeden hızlı bir şekilde yüklendiğinden emin olmak için sayfanızı optimize edin.
Böylece, tüm bu en iyi uygulamaları izleyerek, değer katan ve dönüşümler getiren harika infografik web sayfaları oluşturabilirsiniz.