Elementor hero görsellerini 2 dakikada hızlandırın!

Daha hızlı Elementor hero görselleri

Elementor, popüler bir WordPress sayfa düzenleyicisi olup sayfa tasarımını basitleştirir. Ne yazık ki siteleri sıklıkla yavaşlatır. Bazen kullanıcı hatalarından, bazen de Elementor'un tasarım tercihlerinden dolayı. Neredeyse her gün gördüğüm bir örnek, Elementor'un hero görsellerini nasıl işlediğidir. Elementor varsayılan olarak bunlar için arka plan görselleri kullanır ve bu da her seferinde sayfa yüklemesini yavaşlatır.

Elementor Arka Plan Görsellerinin Cazibesi

Elementor, hero görselleri varsayılan olarak arka plan görseli şeklinde ekler. Elementor ile sayfayı düzenlerken ilk konteynere tıklayın, stil sekmesine gidin ve görselinizi ekleyin. Kolay, kullanışlı ve hata yapmaya karşı dayanıklı. Bu sizin için yeterliyse burada okumayı bırakın, ancak ziyaretçilerinizi önemsiyorsanız okumaya devam edin ve Elementor hero görsellerini doğru şekilde nasıl oluşturacağınızı öğrenin.

Elementor Arka Plan Görsellerinin Sorunu

Arka plan görsellerinin nesi yanlış diye sorabilirsiniz. Arka plan görselleri şu davranışlarıyla bilinir: bir öğenin tüm arka planını kaplarlar. Yapması gerekeni yapar. Ancak bir performans maliyetiyle:

• Geç keşfedilme: Teknik açıdan arka plan görselleri idealden çok uzaktır. Elementor arka plan görselleri HTML içinde hemen keşfedilmez. Bu arka plan görselleri stil dosyalarında bağlantılıdır. Stil dosyalarının ayrı olarak indirilip ayrıştırılması gerektiğinden, render sürecinde çok daha geç keşfedilirler.
• Hız için optimize edilmemiş:  Arka plan görselleri, yerel lazy loading, fetchpriority ve async decoding gibi daha yeni özellikleri desteklemedikleri için hız açısından optimize edilmemiştir.
• Duyarlı değil: Son olarak Elementor arka plan görselleri duyarlı (responsive) değildir ve küçük mobil cihazlar için bile her zaman tam masaüstü boyutunda bir görsel yükler.

Daha fazla ayrıntıya girmeyeceğim (ilgileniyorsanız arka plan görsellerinin neden kötü olduğunu okuyun) ancak bu kuruluma sahip bir sayfanın muhtemelen Core Web Vitals testini geçemeyeceğini söylemek yeterli.

Yavaş Arka Plan Görselleri İçin 2 Dakikalık Çözüm

Yavaş arka plan görselleri bir sorun olmak zorunda değil. Basit bir CSS düzenlemesiyle hızlı, duyarlı görsellere dönüştürülebilirler.  Sır ne mi? Görseli ölçeklendirmek için object-fit: cover kullanmak ve bunu konteyner üzerinde position: relative ile görsel üzerinde position: absolute ile birleştirmek. 

İlginç bilgi: Bugün Elementor arka plan görsellerini son derece hızlı duyarlı görsellere dönüştürürken kendimi süreyle ölçtüm. 2 dakikadan az sürdü! 

Bu karmaşık geliyorsa endişelenmeyin! Adım adım rehberlik edeceğim. Üstelik sonunda sizi bekleyen bir nasıl yapılır videosu da var!

Adım 1: Gerekli stilleri ekleyin

Yavaş arka plan görsellerini düzeltmek için birkaç temel CSS stili uygulayarak başlayın. Bu stiller, görselin düzgün bir arka plan kapak görseli gibi davranmasını sağlar ve Elementor yardımcı div'leriyle çakışmamasını garantiler.

/* The relative parent container */
  .relative{
      position: relative;
  }
  
  /* Ensure Elementor helper divs are not relative */
  .relative .elementor-container, 
  .relative .elementor-column, 
  .relative .elementor-widget-wrap {
      position: initial;
  }
  
  /* The new and improved hero image */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Bu Ne İşe Yarar:

• .relative: Üst konteyneri, alt öğeleri kendi içinde konumlandırmak için relative yapar.
• .relative .elementor-*: Düzen çakışmalarını önlemek için Elementor yardımcı div'lerini sıfırlar.
• .heroimg: Görselin konteyneri kaplayacak şekilde ölçeklenmesini ve arkasında durmasını sağlar.

Stiller Nasıl Eklenir:

• WordPress Yönetim Paneline gidin.
• Görünüm > Özelleştir yolunu izleyin.
• Ek CSS'e tıklayın.
• Yukarıdaki CSS kodunu yapıştırın ve değişikliklerinizi kaydedin.

Bu, yavaş arka plan görsellerini duyarlı, optimize edilmiş hero görsellerine dönüştürmenin temelini oluşturur. Sonraki adımda, sihri görmek için .relative ve .heroimg sınıflarını hero bölümünüze uygulayın! 

Adım 2: Konteyneri hazırlayın

Stiller yerleştirildikten sonra, konteyneri yeni hero görseli için hazırlamanın zamanı geldi. Bu, mevcut arka plan görselini kaldırmayı ve konteynere .relative sınıfını uygulamayı içerir.

Adımlar:

• Konteyneri Düzenleyin:
• Elementor düzenleyicinize gidin ve hero görselin uygulandığı konteyneri seçin.
• Arka Plan Görselini Kaldırın:
• Stil sekmesine gidin.
• Görselin uygulandığı Arka Plan bölümünü bulun.
• Arka plan görselini kaldırmak için çöp kutusu simgesine tıklayın.
• .relative Sınıfını Uygulayın:
• Gelişmiş sekmesine geçin.
• CSS Sınıfları altına relative yazın.

Adım 3: Yeni bir görsel ekleyin ve yeni sınıfları uygulayın

Konteyner hazır olduğuna göre, Elementor kullanarak duyarlı ve optimize edilmiş hero görselini eklemenin zamanı geldi. İşte nasıl yapılır:

Ne Beklenmeli: Son adımda, sınıfları uygulamadan önce hero görseli hizasız veya garip görünebilir! Bu normaldir! .heroimg sınıfı, görseli arka plan kapağı gibi davranan duyarlı, tam genişlikte bir hero görseline dönüştürecektir. Tamamlandığında, optimize edilmiş hero görseliniz konteynerin arkasında duracak ve önemli ölçüde iyileştirilmiş performansla aynı görsel etkiyi sunacaktır.

Adımlar:

• Bir Görsel Öğesi Ekleyin:
• Elementor düzenleyicisinde, yeni bir öğe eklemek için sol üst köşedeki artı simgesine tıklayın.
• Görsel widget'ını üst konteynere (.relative sınıfına sahip olan) sürükleyip bırakın.
• Görselinizi Yükleyin ve Seçin:
• Sol paneldeki görsel ayarlarında, görsel yer tutucusuna tıklayın.
• Kullanmak istediğiniz tam ekran görseli yükleyin veya WordPress medya galerinizden mevcut bir tanesini seçin.
• .heroimg Sınıfını Uygulayın:
• Görsel hâlâ seçiliyken, Elementor menüsünde Gelişmiş sekmesine gidin.
• CSS Sınıfları alanına heroimg yazın.

Tamamlandı, daha hızlı bir sayfanın keyfini çıkarın!

Başardınız! Bu noktada hero görseliniz tamamen optimize edilmiş ve daha hızlı bir sayfa deneyimi sunmaya hazır. 

Sayfayı yayınladığınızda öğeyi inceleyin; harika bir şey fark edeceksiniz: yavaş arka plan görseli, duyarlı ve hızlı bir ön plan görseli ile değiştirilmiş. Bu görsel artık muhtemelen yüksek fetchpriority ile yükleniyor ve daha hızlı yüklenmesini sağlayarak hem Core Web Vitals hem de user experience iyileştiriyor.

Daha hızlı ve daha verimli bir sayfa oluşturduğunuz için tebrikler. Ziyaretçileriniz farkı hissedecek!

Önce: 2.6 sn

Sonra: 0.6 sn

Bonus: hero görselini önceden yükleyin

YouTube'da tam anlatımı izleyin.