Elementor ile Infographic Web sayfası nasıl oluşturulur

Yayınlanan: 2025-02-10

Hikayeler 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.

Open a post or page with Elementor

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 .

Create Columns for Placing Widgets

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.

Add the Image Widget to the Infographic Canvas

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

Add an image to the image widget area

# Başlık Widget'ı ekle

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

Add the Heading Widget

İ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.

Write the infographic page title

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

Stylize the heading widget for the infographic page

# 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.

Add the Text Editor Widget

Ş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.

Add text to the Text Editor widget

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

Customize the margin for text editor widget

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

Add statisitcal information

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.

Use margin to move Elementor widgets

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.

Create a New Section to Add Statistical Charts

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

Add a copy for an infographic section

# 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.

HappyAddons Chart widgets

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

Add the Skill Bar widget to the canvas

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

Select a preset for the Skill Bars widget

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.

Add Skill Bars information

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

Stylize the Skill Bars

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

Add more infographic information

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.

Create a New Column Structure for Further Information

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.

Add more information for the infographic web page

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

Create numerous sub sections using the Flexbox Container

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

Add the Icon widget to the container sections

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.

Add different icons to the infographic web page design

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.

Customize the Icon color and position

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.

Create a last new section

# 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.

Add a pie chart

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

Add information to the pie chart

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.

Write the pie chart's title

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

Stylize the pie chart widget

# Bir çubuk grafiği ekle

Aynı şekilde, çubuk grafik widget'ını tuvale ekleyin.

Add a Bar Chart to the infographic web page design

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.

Customize the Bar Chart widget

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 .

Set a Background Color for the Infographic Web Page Design

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

Go to Site Settings

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

Go to the Background option

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

Select a color for the background

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.