Elementor ile Web Sitenizin Düzenini Nasıl Optimize Edebilirsiniz?

ile web sitenizin düzenini nasıl optimize edeceğinizi bilmek ister misiniz? Elementor ?

Web sitesi performansını optimize etmek, web sitesinin en önemli yönlerinden biridir. kullanıcı deneyimi. Yavaş yüklenen bir web sitesi, herhangi bir kullanıcıyı hayal kırıklığına uğratabilir ve genellikle çıkma oranı işimizin başarısını olumsuz yönde etkileyebilecek yüksek.

Web sitesinin performansı birçok faktörden etkilenebilir, örneğin: diğer faktörlerin yanı sıra büyük resim boyutları, sunucu konfigürasyonları, çok fazla eklenti.

Web sitesi performansı, web yaratıcıları olarak en güçlü değerlerimizden biridir. Bu nedenle bu kursu 5 bölüm halinde oluşturduk.

Artık en uygun teknikleri kullanarak mizanpajlar ve gönderiler oluşturmayı öğrenebilirsiniz. Bu bilgi, web sitelerinizin sadece ihtiyaç duyulmayan gereksiz bölümler, sütunlar veya widget'lar içermemesini sağlayacaktır. Yükleme sürelerini iyileştirmek için bazı yerleşik widget özelliklerini de keşfedeceğiz.

Bu öğreticinin sonunda, her web sitesinin performansını optimize etmeye tamamen hazır olacaksınız. Elementor yaratır ve hemen ödülleri toplarsınız.

Ders 1: Düzen Optimizasyonu En İyi Uygulamaları

İlk dersimizde, editörde sayfalarınızı ve gönderilerinizi oluşturmanın en etkili yolunu ele alacağız Elementor. Aynı düzenin çok daha az öğe kullanılarak elde edilebileceği durumlarda, sıklıkla çok fazla bölümün, sütunun, iç bölümün ve widget'ın kullanıldığını görüyoruz.

Aşırı miktarda öğe kullanmak web sitenizin performansını yavaşlatır, o yüzden konuya dalalım ve Elementor ile web sitelerini en verimli şekilde nasıl oluşturacağınızı öğrenelim.

Aşağıdaki konuları ele alacağız:

• Doğru bir sayfanın yapısına daha yakından bir bakış
• Web sitenizin performansını görüntüleme ve test etme
• Üstbilgi, altbilgi ve sayfa içeriğinizi optimize etme
• İyi ve kötü web sitesi düzeni uygulamalarına örnekler
• Widget'ların, konumlandırmanın ve global stillerin doğru kullanımı
• Yük gecikmesini önlemek için ipuçları, iyileştirme SEO ve yükleme süresini artırın
• Erişilebilirlik optimizasyonu
• DOM öğelerinin miktarını azaltmak
• Ve daha fazlası !

Elementor'daki en uygun düzenleri daha iyi anlamak için bölümlerin, sütunların ve widget'ların yaygın olarak kötüye kullanıldığını gösteren bir Elementor şablonunu keşfedeceğiz. Bu dersin sonunda, sütun ve widget sayısını azaltarak bu sayfayı tamamen yeniden oluşturmuş olacağız. İlk sayfamız dokuz bölüm, 31 sütun, beş dahili bölüm ve 44 widget'tan oluşmaktadır.

Eğitimin sonunda optimize edilmiş sayfamız altı bölüme, yedi sütuna ve 16 widget'a indirgenecek.

Ücretsiz, hafif kullanacağız Merhaba Temave şablonun her bir bölümünü yeniden oluşturacak ve en iyi uygulamaları kullanarak web sitesinin genel performansını iyileştireceğiz.

Kötü uygulamalar için test

Web sitesi düzeni optimizasyonuna dalmadan önce, birisi web sitemizi ziyaret ettiğinde ne olduğunu tam olarak anlamak için sayfamızda bir test yapalım. Tüm optimizasyonlarımız yapıldıktan sonra testi tekrarlayacağız ve sonuçları karşılaştıracağız.

1. Adım: Web sitenizi gizli pencerede doğrulayın

• "Gizli modda" yeni bir pencere açın ve test ettiğiniz web sayfasının URL'sini yazın.

2. Adım: Doğrudan URL yolunu kullandığınızı doğrulayın

Sayfa bağlantınızdan emin değilseniz, WP kontrol panelinize giderek onu kolayca bulabilirsiniz:

• Web sitenizdeki tüm sayfaları görmek için "Sayfalar"a tıklayın.
• İmlecinizi sayfanızın üzerine getirin ve "Görüntüle" seçeneğine tıklayın. Bu sizi doğrudan sayfanıza götürecektir.
• Bu URL'yi kopyalayıp gizli pencereye yapıştırın ve web sitesi yüklendikten sonra test etmeye hazırsınız!

Performans Sonuçlarını Test Etme ve Görüntüleme

1. Adım: Performans sonuçlarını test edin

Geçmişte Chrome Geliştirici Araçlarını kullanmış olabilirsiniz.

Değilse, sayfanızın HTML ve CSS içeriğini incelemek ve görüntülemek için:

• Sayfanızda herhangi bir yeri sağ tıklayın ve "İncele"yi seçin. HTML ve CSS'nizi okuyabileceğiniz, hataları bulabileceğiniz, SEO sonuçlarını alabileceğiniz ve çeşitli testler yapabileceğiniz birkaç sekme göreceksiniz.
• Sonuçları yüklemek için Ağ sekmesini seçin ve cmd veya ctrl + R düğmelerine basın.

Gördüğünüz gibi şu anki layoutumuz 2,88 saniye sürüyor ve 81 isteği yerine getiriyor.

2. Adım: Performans Sonuçlarını Görüntüleyin

• Sayfamızda denetim raporu çalıştırabileceğimiz Deniz Feneri sekmesine geçin.

Bu bize sayfanın mevcut performansı hakkında daha fazla bilgi verecektir.

• "Rapor Oluştur"u seçin. Birkaç dakika sonra raporunuz görünecektir.

Şu anda üzerinde kesinlikle çalışabileceğimiz 73/100 performans notu alıyoruz.

İdeal olarak, tüm bu sayıların yeşil olmasını isteriz. Şimdi sayfamızı optimize etmeye ve sayfamızı geliştirmeye geçelim. Statistiques.

Yaptığımız her optimizasyon adımından sonra, değişikliklerden bazı en iyi uygulamaları alabileceğimizi ve gelecekte oluşturacağımız web siteleri için bunları aklımızda tutabileceğimizi unutmayın.

Sayfa öğelerini optimize etme

1. Adım: Başlığı optimize edin

ile başlayalım Başlık.

Bu tasarımda da görebileceğiniz gibi, başlık üç sütundan yapılmıştır.

İlk sütunda logomuz iki widget'tan oluşuyor:

1. Un Resim Widget'ı logomuzun .png resim dosyasını gösteren
2. Bir Başlık Widget'ı.

İkinci sütunda, başlık menüsü Navigasyon Menüsü Widget'ımızdan oluşur.

Üçüncü sütun şunları içerir:

1. Dahili bir Bölüm Widget'ı (Simge Widget'ının konumunu kontrol eder).
2. Başlık için iletişim bilgilerimiz

Burada bölüm, widget ve bölüm sayısını nasıl en aza indirebileceğimizi görelim.

2. Adım: Yeni başlığı oluşturun

Sütun 1:

• Yalnızca 1 sütunlu 1 bölüm oluşturun.
• Ekle Web Sitesi Logo Widget'ı ve bölüme sürükleyin.

Görüntüler için en iyi uygulamalar:

• Web sitenizdeki her bir resim dosyasına medya kitaplığında ilgili bir başlık ve alternatif metin verin.

Bu, sayfa erişilebilirliğinizi ve arama motoru sıralamanızı iyileştirecektir. Orijinal olarak kullandığımız logoda, başlık gerçek resimle alakasız ve alt metin yok.

• Widget içindeki görüntünün boyutlarını tanımlayın.

Bu, sayfanın resimler yüklenmeden önce uygun boşlukla düzenlenmesini sağlar ve yerleşim gecikmesinden (tarayıcılar tarafından ölçülen bir faktör) kaçınır.

Üzerinde birlikte çalıştığımız örnekte, Stil sekmesine gidip görüntü genişliğini 200 piksele ayarlayarak bu sorunu çözün.

Sütun 2

Widget paneline dönün:

• Gezinme menüsü widget'ını logonun altına sürükleyip bırakın
• İşaretçiyi "Yok" olarak ayarlayın
• "Stil" sekmesine gidin ve tercih ettiğiniz yazı tipini ekleyin (önceki tasarımımızla eşleşmesi için)

Genel stil için en iyi uygulamalar:

• Birden fazla ağırlık içeren 2'den fazla farklı yazı tipi kullanmaktan kaçının (Genel yazı tipleri).
• Renk seçiciyle her öğe için farklı renkler seçmekten kaçının (Küresel renkler).
• Daha az sorgu (genel yazı tipi) oluşturarak web sitenizin yükleme hızını artırın.
• Gereksiz kodu iki kez tekrarlayın (genel renkler).
• Modelinizin tutarlılığını ve kontrolünü koruyun (genel stil).

Genel yazı tipleri:

Bu, Genel Yazı Tipleri işlevi kullanılarak yapılabilir:

• "Stil" sekmesine gidin ve tercih ettiğiniz yazı tipini (önceki tasarımımızla eşleşmesi için) seçerek ekleyin, küçük bir değişiklik yapın ve artı simgesinin üzerine gelin.
• Artı simgesine tıklayın ve ihtiyacınız olan yazı tipi ailesini seçin
• Şablonda kullanacağınız stilleri global fontlar olarak kaydedin

Daha sonra bu stili oluşturduğunuz her widget'ta kullanabilirsiniz.

Küresel renkler:

Aynı yöntem genel renkleriniz için de kullanılabilir:

• "Küresel" üzerine tıklayın
• Renk seçicinin üzerine gelin ve tıklayın
• Bir renk seçin ve artı simgesinin üzerine gelin
• "Küresel"e tıklayın >> "Müdür"ü seçin

Bunu yaptığınızda, renk şablonunuzun renk paletine kaydedilir, böylece bir öğe veya widget için ihtiyaç duyduğunuzda Global Renkler listenizden seçebilirsiniz.

Başlığımıza devam etmeden önce dikey dolguyu sıfıra ayarlayalım.

3. Adım: Başlığı düzenleyin

Sütun 3

• "Widget'lar" paneline gidin
• Simge Listesi Widget'ını menünün altına sürükleyin.
• Ek liste öğelerini kaldırın
• Metninizi ekleyin
• İstediğiniz simgeyi seçin
• "Stil" sekmesine gidin
• Seçtiğiniz genel renkleri ve yazı tiplerini tanımlayın

Şimdi bir şeyi daha düzeltmemiz gerekiyor - üç başlık öğesi şu anda yığılmış ve birbiriyle uyumlu değil. Bu sorunu, sütundaki tüm alanı kaplamaması için her bir elemanın genişliğini gerçek boyutuna değiştirerek çözebiliriz.

Bu sorunu çözmek için:

• Site logosu widget'ı >> 'Gelişmiş' sekmesini seçin
• "Konumlandırma"yı seçin ve genişliğini "Satır İçi" olarak ayarlayın

Bu adımı tam olarak Gezinti Menüsü pencere aracı ve Simge Listesi pencere aracı için tekrarlayın.

Artık tüm başlık öğeleri aynı hizada olduğuna göre, geriye kalan tek şey onları doğru şekilde konumlandırmaktır.

Satır içi öğelerle sütunun konumunu tanımlama

• Sütununuzu seçin >> "Düzen" sekmesine gidin
• "Dikey hizalama"da "Alt"ı seçin
• "Yatay hizalamada" "Aradaki boşluk" u seçin

"Aradaki Boşluk" hizalamasını seçin, ilk ve son widget'ı her iki uçta konumlandırın ve diğer tüm widget'lar arasında eşit boşluk bırakın.

Ancak, ilk ve son widget'lar farklı genişliklere sahiptir, bu nedenle eşit alan her zaman dahili widget'ımızı merkezlemeyebilir.

Kenar boşluklarını ayarlayarak bu sorunu çözebiliriz:

• Gezinme Menüsü widget'ı >> "Gelişmiş" sekmesini seçin
• Kenar boşluğunun grubunu çözün ve negatif bir değerle boşluğu kaldırın

4. Adım: Başlığı duyarlı hale getirin

Şimdi web sitemizin mevcut sürümünün mobil cihazlarda nasıl göründüğüne bakalım.

Mobil yanıt verme için en iyi uygulamalar:

• Sayfa hızınızı etkileyecek iki kat fazla kod kullanmaktan kaçınmak için tasarımınızı basitleştirin ve aynı bölümleri duyarlı hale getirmenin yollarını düşünün.

Bu başlıkta gördüğünüz gibi - Aynı bölümün özellikle tabletler ve mobil cihazlar için yeniden tasarlandığını görmek yaygındır. Burada gördüğümüz şey şu: tasarımın iki versiyonu oluşturuldu: biri masaüstü için diğeri mobil için.

Bunun yerine, tasarımınız ve kodunuz duyarlı olduğunda, daha az kod kullanacağından sayfa hızınız artar.

Widget'larımız ve öğelerimiz için “Özel Genişlik” ayarını kullanarak bunu nasıl başarabileceğimize bakalım.

Tablet için özel bir genişlik ayarlama

• 'Gezinme Menüsü' >> 'Gelişmiş' sekmesine tıklayın
• "Konumlandırma"yı seçin >> genişliği "Özel" olarak ayarlayın.
• "%" öğesini seçin >> widget'a etrafındaki boş alanın aynı genişliğini (yüzde olarak) verin.
• “İçerik” sekmesine tıklayın >> “Hizalamayı Değiştir” >> “Sağ”ı seçin.

Bu, geçiş menüsünü widget'ın genişliği içinde herhangi bir yere hizalamanıza olanak tanır.

Şimdi geçiş menüsünü özelleştirmeyi bitirelim.

• "İçerik" >> "Tam Genişlik" seçeneğine tıklayın ve "Evet" olarak ayarlayın.
• "Stil" >> "Renk Seçici" çubuğunu tamamen sola sürükleyerek arka planı kaldırın.

Şimdi bir mobil ekranda işlerin nasıl göründüğünü görelim.

Mobil için özel bir genişlik tanımlama

Bu senaryoda, üç başlık widget'ını görünüm alanının içinde tutacağız. Ancak, bazı web siteleri için mobil cihazlarda veya tablette görüntülendiğinde belirli öğeleri başlıktan çıkarmanın daha mantıklı olabileceğini unutmayın.

Bu durumda, mobilde görüntülendiğinde başlığımıza olan şey, Navigasyon Menüsü ve Logo widget'larının tek bir satıra sığamamasıdır.

Bu sorunu çözmek için:

Gezinme Menüsünün Konumlandırılması

• "Gezinme Menüsü" >> sekmesine tıklayın "Gelişmiş"
• "Konumlandırma"yı seçin >> genişliği "Özel" olarak ayarlayın
• "%" öğesini seçin >> Widget'a logomuzun yanına sığması için %30 genişlik verin

Simge listesinin konumlandırılması

• "Simge Listesi" >> '' Gelişmiş ' sekmesine tıklayın
• "Doldur"u seçin >> Değerlerin grubunu çöz
• "TOP" bölümüne 12 piksel dolgu ekleyin

Buna inanabiliyor musun?

Başlığımız orijinal olarak kullanıldı 2 bölüm, 12 widget ve 10 sütun. Şimdi başlığımız kullanıyor 1 bölüm, 3 widget ve 1 sütun.

Ve sonuç aynı!

Adım 5: Kahraman bölümünü optimize edin

Web sitemizin bir sonraki bölümüne geçelim: kahraman bölümü

Kahraman Bölümleri için En İyi Uygulamalar:

• Kahraman bölümü metninizin, özellikle arka plan resmi varsa, kolayca görünür olduğundan emin olun.

Widget'ın bir sütundaki konumunu kontrol etme

Elementor düzenleyicisinde gördüğümüz yaygın bir hata, bir parçacığın konumunu kontrol etmek için fazladan sütunlar ve boşluklar kullanmaktır.

Örnek modelimizde, kahraman resmi arka plan resmi olan bir bölümden oluşur. Başlık ve metin, iki sütun kullanılarak yatay olarak konumlandırılmıştır. Elemanları dikey olarak yerleştirmek için bölümün içinde bir ara parçası da vardır.

Aynı tasarımı sadece bir bölümle nasıl oluşturabileceğimizi görelim:

• Metnin sağındaki fazladan sütunu silin.
• Ara parçayı çıkarın.

Bunun yerine, ana metnimizi istediğimiz yere konumlandırmak için sütun hizalama seçeneklerini kullanacağız:

• Sütunu seçin.
• “Dikey Hizalama”yı “Orta” olarak ayarlayın.
• "Gelişmiş" sekmesine gidin.
• "Doldur"u seçin >> Değerlerin grubunu çöz
• Sağ Doldurma'yı %50'ye ayarlayın.

• Bölümü seçin.
• "Minimum yükseklik"i seçin >> 80 olarak ayarlayın.

Metinler ve arka planlar arasındaki sabit kontrast

Her web sitesinin metin ve arka plan arasında iyi bir kontrasta sahip olması önemlidir. Okunamayan bilgiler, web sitenizin puanlarını etkiler ve ziyaretçileri de uzaklaştırabilir. Her iki durumda da, metin her zaman açıkça okunaklı olmalıdır.

Arka planı renkli bir resim olan bir bölümün netliğini artırmanın birkaç yolu vardır (bu şablonda gördüğümüz gibi):

• Başlığınıza tıklayın.
• "Stil" sekmesine gidin >> "Metin gölgesi"ni seçin.

Bu, metnin arka plan görüntüsünden farklı olmasını sağlayarak okunabilirliğini artıracaktır.

Metninizi daha net hale getirmenin başka bir yolu da bindirmeleri kullanmaktır.

• >> 'Stil' sekmesini >> 'Arka Plan Yerleşimi' bölümünü seçin
• Genel renklerinizden birini seçin ve istediğiniz sonucu elde edene kadar opaklıkla oynayın

Adım 6: Simge kutuları ile bölümü optimize edin

Şimdi, şu anda dört sütunlu bir iç bölümümüz olan bir sonraki bölüme geçelim. Şu anda her sütun üç pencere öğesi içerir: Görüntü Widget'ı, Başlık Widget'ı ve Metin Düzenleyici Widget'ı.

Performansını artırmak için bu bölümü nasıl basitleştirebileceğimizi görelim.

Simge alanının içeriği

• Widget menüsünde »Widget Simge Kutusu« düğmesini seçin ve sütuna sürükleyin
• "Simge kutusu" nu seçin
• Simge görüntüsünün üzerine gelin
• "SVG'yi İndir" i seçin **
• Özel simgenizi ekleyin

** Not: Rozetler SVG dosyalarıdır. Henüz yapmadıysanız, WordPress panosuna gidin, ardından Elementor >> Ayarlar'a gidin. Filtrelenmemiş dosya indirmelerini etkinleştir'i etkinleştirmeniz gerekir.

• "Başlığınızı" yazın
• "Açıklamanızı" yazın
• "Stil"i seçin >> Genel bir renk seçin
• "Boyut"u seçin ve çubuğu istediğiniz boyuta sürükleyin
• "Dolgu" seçeneğini seçin ve çubuğu istediğiniz sayıya sürükleyin

8. Adım: "Hizmetler" bölümünü optimize edin

Şimdi, şu anda iki sütun, iki resim, başlık widget'ı ve metin düzenleyici widget'ı kullanan “Hizmetler” bölümünü yeniden oluşturacağız.

Aynı tasarımı yeni bir bölümde oluşturalım, ancak sadece bir sütun ile.

• Sütunlu yeni bir bölüm oluşturun
• "Düzen" >> bölümünde "İçerik Genişliği"ni "Tam Genişlik" olarak ayarlayın
• Widget panelinde "Widget Görüntü Kutusu"nu seçin ve sütuna sürükleyin

(Bölümün tüm varlıklarını bu widget'a entegre edebileceğiz)

• Başlığı yazın
• Açıklamayı yazın

Görsel için, görsellerimiz için kullandığımız mevcut tasarımı koruyacağız.

• Medya kitaplığından aynı görüntüyü ekle
• “İçerik” sekmesine gidin >> “Görüntü Konumunu” “Sağ” olarak ayarlayın

• "Stil" sekmesine gidin
• Öğeler arasındaki boşluğu artırın
• Resmin "Genişliğini" artırın
• "İçerik" bölümünü genişletin
• "Orta" hizalamayı seçin
• "Dikey Hizalama"yı "Orta" olarak ayarlayın
• Seçtiğiniz genel renkleri ve yazı tiplerini tanımlayın
• "Gelişmiş" sekmesine gidin
• Widget'a %10 dolgu ekleyin

Artık Hizmetler bölümü aynı tasarıma sahip ancak daha az varlığa sahip.

9. Adım: Harekete geçirici mesaj bölümünü optimize edin

CTA bağlantıları için en iyi uygulamalar:

• Tüm sosyal medya bağlantılarınızın düzgün çalıştığından ve düğmenin bağlantıyı içerdiğinden emin olun.
• Başka bir web sitesine bağlantı eklediğinizde, şu özelliği ekleyin: "rel | noopener"

(Bunu, dişli simgesine tıklayarak ve "Özel Nitelikler"e niteliği yazarak yapabilirsiniz). Bu, bağlantıyı yeni bir tarayıcı sekmesinde açacak ve performans puanınızı artıracaktır.

Aşağıdaki bölüm, hizmetlerimiz için bir eylem çağrısı sunar.

Bölüm şu anda aşağıdakileri içeren iki sütuna sahiptir:

1. Aralayıcı içeren bir arka plan resmi
2. İki başlık, bir dahili bölüm, bir metin düzenleyici ve bir düğme

Aynı tasarımı yeni bir bölümde oluşturalım, ancak sadece bir sütun ile.

• "Düzen" sekmesine gidin >> "İçerik Genişliğini" "Tam Genişlik" olarak ayarlayın
• "Gelişmiş" sekmesine gidin >> Ek dolguları kaldırın

• Widget panelinde "Call To Action Widget"ı seçin ve sütuna sürükleyin
• "Görüntü Konumunu" "Sol" olarak ayarlayın
• Medya kitaplığından resminizi seçin
• "İçerik" bölümünü genişletin
• Başlığı yazın
• Açıklamayı yazın
• Düğme metnini yazın

• "Stil" sekmesine gidin
• Öğeler arasına "Dolgu" ekleyin
• Görüntü Genişliğini Ayarla
• "İçerik" bölümünü genişletin
• Başlığınız için genel yazı tipini seçin
• Açıklama ve düğme arasındaki boşluğu artırın
• Her kaynak için uygun global renkleri seçin
• "Düğme" bölümünü genişletin
• Boyutunu "Büyük" olarak ayarlayın
• Arka plan rengi ve kenarlık yarıçapı gibi ihtiyaçlarınıza göre özelleştirin

Şimdiye kadar 2 widget'lı 6 sütunlu bir bölüm oldu. Şimdi sadece 1 widget'lı 1 sütunlu bir bölüm!

Adım 10: Görüntü Döngüsü'nü Optimize Edin

Image Carousel bölümümüzün şu anki tasarımında, birden çok görüntüyü gösterme biçiminde yaygın bir hata var.

Bu tasarım, birçok kullanıcının resimlerinin boyutunu kontrol etmek için yapma eğiliminde olduğu bir uygulama olan 5 sütundan oluşur.

Web sitenizin performansını da optimize edecek daha basit bir yol keşfedelim.

• 1 sütunlu yeni bir bölüm oluşturun
• "Düzen" sekmesine gidin >> "İçerik Genişliğini" "Tam Genişlik" olarak ayarlayın
• Widget panelinden »Image Carousel Widget« düğmesini seçin ve sütuna sürükleyin
• Medya kitaplığından istediğiniz görüntüleri ekleyin

• "İçerik" sekmesine gidin
• "Görüntü Boyutu"nu "Orta - 300 x 300" olarak ayarlayın
• "Görüntülenecek slaytlar", "Kaydırılacak slaytlar" ve "Gezinme" seçeneklerini tercihlerinize göre ayarlayın

• "Stil" sekmesine gidin
• "Dikey Hizalama"yı "Merkez" olarak ayarlayın
• "Boşluğu" özelleştirin

• "Gelişmiş" sekmesine gidin
• Gerekli dolguyu ekleyin

Bir zamanlar 5 sütun olan bölüm artık yalnızca 1 sütundur.

Web sitemizdeki videoları optimize edebileceğimiz bir sonraki bölüme geçelim.

11. Adım: Video bölümünü optimize edin

Video içeriği için en iyi uygulamalar:

• Web sitelerinizin yükleme sürelerini iyileştirmek için mümkün olduğunda Lazy Load kullanın.

“Lazy Load” seçeneğini uyguladığımızda ne olur?

Teknik olarak, video yerleştirme kodunun yerini statik bir görüntü alır. Bu şekilde video yalnızca kullanıcı resmi tıkladığında yüklenir - bu da sayfa yükleme sürelerimize gerçekten yardımcı olur.

Şimdi yapacağımız şey, Video Widget'ı kullanma şeklimizi değiştirmek, böylece sayfa hızımızı veya web sitesi performansımızı geciktirmez.

• "Video Widget'ını" seçin
• "Stil" sekmesine gidin
• "Tembel Yük" ü seçin

Adım 12: Altbilgiyi optimize edin ve güncel tutun

Birçok web sitesinde görülen yaygın bir hata, alt bilgilerinin tarih ve açıklama için birden çok üstbilgi ve telif hakkı simgesi için bir simge kullanmasıdır.

Altbilgiyi nasıl optimize edeceğimizi ve her zaman güncel kalmasını nasıl sağlayacağımızı görelim.

Bu sürekli güncelleme işlemini kullanarak yapılandıracağız. Dinamik etiketler. Bu şekilde, dinamik etiketler otomatik olarak mevcut yıla güncelleneceğinden, başlık içeriğini her yıl değiştirmemiz gerekmeyecek.

Bunu yapmak için aşağıdaki gibi ilerleyeceğiz:

• Yalnızca Başlık widget'ını bırakarak fazladan widget'ları kaldırın
• Başlık widget'ını seçin
• "Başlık" alanının ("Üst düğme" olarak da bilinir) sağındaki "Dinamik Etiketler" sembolüne tıklayın

• Açılır menüden "Geçerli tarih ve saat" menü öğesini seçin
• Anahtarın üst simgesine tıklayın
• "Tarih Formatı" sekmesine tıklayın ve "Özel" menü öğesini seçin
• "Y" hariç, şu anda "Özel Format" alanında olanı silin
• "Gelişmiş" sekmesini seçin
• "İleri" alanını vurgulayın ve "©" sembolünü yazmak için "seçenek" ve "G" tuşlarını aynı anda (veya "kontrol", alt "ve" C "aynı anda) basılı tutun.
• "©" işaretinden sonra bir boşluk ekleyin

• "Sonra" alanını seçin
• Bir boşluk girin ve yıl sonunda görünmesini istediğiniz metni yazın, örneğin "Tüm hakları saklıdır"

Bu eğitimdeki örnek web sitesinde, her bir widget'ın kendi bölümü olduğunu fark edebilirsiniz. Bunu, öğreticiyi daha net ve takip edilmesi daha kolay hale getirmek için yaptık.

İdeal olarak, ne kadar az bölümünüz varsa, o kadar az ek HTML KODUna sahip olursunuz.

Aynı bölümdeki bazı widget'ları yukarıdaki bölüme sürükleyip bırakarak ve ardından boş bölümü silerek birleştirebilirsiniz.

İşte bu kadar, düzeniniz optimize edildi!

Yeni web sitesi performans değerlendirmesi

Sonuçları DevTools (Inspector) penceresinde kontrol edeceğiz:

• "Ağ" sekmesini seçin:

Burada bazı güzel ve olumlu değişiklikler var:

• Web sitesinin yüklenmesi artık 568 milisaniye sürüyor
• 81 istekten 46'ya çıktık
• Performans puanımızın 73'ten 98'e yükseldiğini göreceğiniz “Deniz Feneri” sekmesini seçin.

Herhangi bir üçüncü taraf eklenti kullanmadan performansımızı optimize ettiğimizi unutmayın. Tek gereken basit ince ayarlar ve en iyi uygulamalardı.

Adım 13: Sonuçları hareket efektleriyle test edin

Sitemizi daha etkileşimli ve eğlenceli hale getirmek istiyoruz, ancak bu performans puanlarımızı nasıl etkileyecek? Bakalım neler yapabiliriz.

Başlığı "sabit" bir öğe yapın:

• Başlığı seçin
• "Gelişmiş" sekmesine gidin
• "Hareket Efektleri" sekmesini genişletin
• "Yapışkan" seçeneğini "Üst" olarak ayarlayın

Kahraman bölümünü "sabit" bir öğe yapın:

• Kahraman bölümünü seçin
• "Stil" sekmesine gidin
• "Ek" açılır listesini seçin ve "Sabit"i seçin

kullanın giriş animasyonu kahramanın metni için (başlık):

• Başlık widget'ını seçin
• "Gelişmiş" sekmesine gidin
• "Hareket Efektleri" sekmesini genişletin
• Giriş Animasyonunu seçin ve “Fade In” olarak ayarlayın

Kahramanın metin açıklaması için bir giriş animasyonu kullanın (Metin Düzenleyici widget'ı):

• Metin Düzenleyici widget'ını seçin
• "Gelişmiş" sekmesine gidin
• "Hareket Efektleri" sekmesini genişletin
• "Giriş animasyonu"nu seçin ve "Fade In" olarak ayarlayın

Sayfa yüklendiğinde ince efektler için daha sonra gelen widget'lar için de aynısını yapın.

Şimdi hareket efektlerinin puanımızı nasıl etkilediğini görmek için performans testini tekrar çalıştıralım:

• "Müfettiş" penceresine dön
• "Deniz Feneri" sekmesini seçin
• "Rapor oluştur" u tıklayın

Şimdi performans puanımızın 97'ye düştüğünü görüyoruz - bu kesinlikle büyük bir fark değil ve web sitesini daha ilginç ve eğlenceli hale getiriyor.

Yeni performans puanımıza inanabiliyor musunuz?

Oluşturduğunuz her Elementor web sitesinden performans puanınızı artırmak için artık tam donanımlı olmanızdan mutluluk duyuyoruz. Web sitenizin oluşturma hedefleri ve işletmenizin başarısı için büyük bir fark yaratacaktır.

Web sitenizin sayfalarının performansını inceleyebilmeniz ve düzeninizi optimize etmek için en iyi uygulamaları uygulayabilmeniz için gelecekte başvurmak üzere bu eğiticiye yer işareti koymanızı öneririz.

Ve bu sadece başlangıç ​​- bu kursun sonraki bölümü şunları kapsar:görüntü optimizasyonu.

Eğitimde, örnek web sitesindeki her bir resmi inceleyeceğiz ve daha verimli yükleme süreleri için bunları nasıl geliştireceğimizi öğreneceğiz.

Elementor Pro'yu Hemen Alın!

Sonuç

Yani ! Elementor ile web sitenizin düzenini nasıl optimize edeceğinizi gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize içinde bildirin. Yorumlar.

Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...