Etiket Arşivleri: elementor

WooCommerce Tema Önerisi: Shoptimizer!

Merhaba Güzel İnsan!

Bu yazımızda WooCommerce tabanlı e-ticaret sitelerinde kullanabileceğin Shoptimizer temasını ele aldık. Temanın özellikleri, temanın bizlere sunmuş olduğu avantajları yer yer dezavantajlarını, temanın hangi amaçla hazırlandığı, bizlere sağladığı kolaylıkları, bu temayı nasıl kullanabileceğimizi ve bunlarla ilgi merak ettiğin her soruya yanıt vermeye çalıştık. Konuyu anlattığımız videoyu Youtube kanalımızdan veya aşağıdaki linkten tıklayarak ulaşabilir, aklına takılanlar, öğrenmek istediklerin için bizlere ulaşabilirsin.

E-Ticaret siteleri için kullanabileceğimiz hız ve dönüşüm için optimize edilmiş gerçekten kullanışlı bir temanının detaylarını öğrenmek için sabırsızlanıyorsun değil mi?

Haydi gel başlayalım!

1. Shoptimizer Nedir?

Öncelikle shoptimizeri tanımakla başlayalım.

Temanın satışını Commerce Gurus kendi ticaret sitesi üzerinden sunmakta. Yani 3. parti bir mağazada yahut toplulukta satışını yapmıyor. Kendi WooCommere tabanlı e-ticaret sitesi üzerinden satışını yapıyor.

Commerce Gurus e-ticaret sitesinde satışa sunulan temalardan yalnızca biri Shoptimizer! Hız ve dönüşüm için optimize edilmiş olan bu temanın e-ticaret siteleri için konumu oldukça değerli. 49 dolarlık fiyatıyla karşımıza çıkan shoptimizer oldukça sık şekilde tercih edilmektedir.

2. Neden Shoptimizer’ı Tercih Etmeliyiz?

Commerce Gurus ekibi temalarını oluştururken Baymard’ın analiz ettiği incelemelere bakarak geliştirmektedir. Shoptimizer’ı, çoğu web’deki en iyi e-ticaret sitelerini analiz eden Baymard tarafından ele alınan araştırmalara ve en iyi uygulamalara dayanarak oluşturulmuştur. Hız, tasarım ve dönüşüm çok önemlidir. Burada en iyi uygulamalar ayrı ayrı değerlendirilerek hepsini tek bir temada birleştirip en optimize edilmiş dönüşüm için gerekli olan özellikler bir araya getirilerek ortaya çıkarılıyor.

WooCommerce için tercih edilebilecek dönüşüm odaklı en iyi tema.

WooCommerce için geliştirildiği için rahatlıkla özelleştirilebilir, kontrol edilebilir.

WooCommerce’ın içerisindeki 5000’den fazla temayla birlikte, mağazana ekstra özellikler ekleyebilir hale geliyorsun.

ThemeForest’teki 10.000’den fazla müşterilere, destek için mükemmel bir 5 yıldız derecelendirmesine sahip deneyimli WooCommerce yazarlarından oluşmakta. Her fırsatta hızlı yanıtları ve ayrıntılı dokümantasyonu garanti ediyor.

3. Shoptimizer Özellikleri Nelerdir?

En hızlı E-Ticaret Teması: Shoptimizer!

Shoptimizer en hızlı E-Ticaret temasıdır. Bu konuda hali hazırda yapılmış olan çalışmalar vardır. Sitenin kalitesini tekrar tercih edilebilirliğini artırabilmek için mutlaka sitenin hızının çok iyi olması gerekir. Kendinden örnek verebilirsin alışveriş yaparken görsel geç yüklenir, açıklama geç yüklenir vs gibi durumlarla karşı karşıya kalırsan sen de o sitede fazla durmaz sonradan da zaten kötüydü bu site diyerek bir daha alışveriş için gelmezsin. Bu herkes için böyledir zaman akıp giderken potansiyel müşteriyi çekebilmek amacıyla sitenin hızının iyi olmasına dikkat etmeliyiz.

  • Shoptimezer en hızlı e-ticaret temasıdır. Hızlı olması dolayısıyla en fazla dönüşüm sağlayan tema olarak da karşımıza çıkmakta.
  • Organik aramalarda da daha üst sıralarda yer alır. Bunu yine hız ile bağdaştırırız. Açılış hızı ne kadar iyi olursa organik trafiği, gösterim sıralaması da o denli iyi olacaktır.
  • WooCommerce’ın da sunduğu diğer temalarla karşılaştırıldığında daha optimize edilmiş tema olma özelliğiyle bir adım öne çıkmaktadır.

Temanın ayarları içerisinde Küçültülmüş ve Kritik CSS otomatik olarak oluşturma ayarları bulunur. Bununla birlikte, Shoptimizer, süper hızlı yükleme için ana CSS dosyasının otomatik olarak küçültülmesini içeren hız ile ilgili tema seçeneklerini içerir. Ayrıca, dinamik olarak bir “kritik CSS” stil sayfası oluşturur, böylece bir kullanıcının görüntü alanının içeriğini neredeyse anında yükler.

Bu kritik CSS, beklemeden sitenizle anında etkileşim izlenimi verir – e-ticaret işletmeleri için büyük bir dönüşüm kilometre taşı olma özelliğiyle karşımıza çıkar.

Shoptimizer Dönüşümlere Nasıl Katkı Sağlar?

Shoptimizer Dönüşümler için tasarlanmış bir temadır. Daha fazla satış daha fazla trafik alabilmeni; daha az reklam maliyetiyle daha güzel cirolar yapılabilmesi için optimize edilmiştir.

Örneğin demo sayfasından bir ürünü sepetimize ekleyip satın almaya başladığımızda, sepete ekle bölümünden sonra üstbilgi, altbilgi ve kenar çubuklarını kaldırılarak, ödemenin birincil odak noktasından – ödeme ayrıntıları formu – bırakan bir tema seçeneği sunuluyor. Bu dikkat dağıtıcı olmayan ödeme ve satın alma işlemi, daha iyi dönüşümler sağlar ve güven rozetleriyle birlikte güvence için bir referans ve sosyal kanıt sağlanmış olur. Böylece müşterinin odağı dağılmadan satın alma işlemini gerçekleştirmesine yardımcı olmuş olursunuz. Dolayısıyla da daha fazla satış ve kar elde edilmiş olur.

Geri Arama Özelliği Nasıl Katkı Sağlar?

E-Ticaret dönüşümlerini araştırırken, telefon numarasını “Beni geri ara” seçeneğiyle değiştiren ve satışlarda çarpıcı bir artış yaşayan bir siteyle ilgili ilginç bir örnek olay incelemesiyle karşılaşılmış. Dolayısıyla da bu özellik Shoptimizer’a dahil edilmiştir. Çünkü yüksek değerli ancak nispeten karmaşık ürünler satan mağazalar için özellikle önemli ve müşteriler satın almadan önce daha fazla bilgiye ihtiyaç duyabilir. Doğrudan müşterinin bilgi alabileceği bir alanın bulunması müşteriye daha fazla güven sağlıyor.

Örneğin yukarıdaki demo sayfasında bir ürüne tıkladığımız zaman karşımıza “Geri Arama İsteyin” şeklinde bir uyarı çıkıyor. Eğer müşterinin aklında ürünle ilgili bir soru varsa direkt olarak bilgisini alıp o şekilde sipariş verebiliyor. Böylece müşteri gözündeki mağaza kalitesi artıp daha güven içerisinde alışveriş gerçekleşmiş oluyor. Bu güven de karşımıza dönüşüm olarak çıkıyor.

Ek Ürün Bilgileri Satın Almayı Nasıl Etkiliyor?

Baymard’ın yapmış olduğu bir araştırma çalışması, kullanıcıların %64’ünün ürün sayfasında nakliye masraflarını düşünmeye başladığını ve kullanıcıların % 61’inin ekstra maliyetler nedeniyle son çeyrekte siparişleri terk ettiğini göstermiştir. Baymard’ın araştırması, bunun gibi önemli bilgilerin, kolayca görülebilen ürün satın alma düğmesinin altına yerleştirilmesi gerektiğini göstermiştir.

Dolayısıyla kargo tutarı gibi ekstra özellikler ürünü satın alma sekmesinin hemen altına yerleştirilerek müşterilerin bu bilgiler dahilinde satın alma gerçekleştireceklerini gösterir. Böylece müşteri kargo tutarını bilip de satın almya gider sonradan ek bir maliyetle karşılaşarak satın alma durumundan vazgeçmemiş olur.

Güven Rozetleri Dönüşümleri Nasıl Etkiler?

Bir alıcının, özellikle sizden ilk kez satın alıyorsa, bu aşamada güvende hissetmesi çok önemlidir. Araştırmalar , kullanıcıların % 18’inin, kredi kartı bilgileriyle siteye güvenmedikleri için son 3 ayda bir ödeme akışını terk ettiğini göstermiştir . Shoptimizer, alışveriş sepetindeki ve kasadaki birincil harekete geçirici mesaj düğmesinin altına entegre güven rozetlerinizi eklemenizi kolaylaştırarak müşteri gözündeki güvenilirliğini pekiştirmektedir.

Müşteri Teşviki Satın Almayı Nasıl Etkiler?

Müşteriyi satın almaya ikna etmek için her ürüne animasyonlu bir stok sayacı ile birlikte bir zamanlayıcı satış geri sayımı eklemek kolaydır. Bu, kıtlık hissini artırmak ve potansiyel bir satın alma işlemini hızlandırmak için gerçek verileri veya sanal verileri kullanabilir.

Bir ürünü satın almaya itmek için zamanlayıcı ekleyerek dönüşümleri kolaylıkla artırabilirsin. Son 5 ürün kaldı stokta, 10 kişi şu an bu ürünü inceliyor gibi sayaçlar ekleyerek müşterinin hızlı şekilde satın alma işlemi gerçekleştirmesini sağlayabilirsin.

Shoptimizer’ın SEO Sıralamalarında Etkisi Var Mıdır?

Organik arama, çoğunlukla web sitesi trafiğinin birincil kaynağıdır. SEO için optimize edilmiş bir tema seçmek, çevrimiçi işletmeler için çok önemlidir. Çok daha iyi SEO örümceklerine izin veren WooCommerce kategorileri için ek bir alan eklenmiş. En üste öne çıkan kategori metni ve bir resim ekleyebilir ve altına anahtar kelime açısından zengin ek metin ekleyebiliriz. Böylece hem müşteri ürünle ilgili daha doygun bilgiye ulaşır hem de google sıralamasında ürün daha üst sıralarda yer edinebilir.

Ayrıca Mobil SEO için ayrıca indekslenmiş olan Shoptimizer’ın SEO sıralamalarında büyük bir etkiye sahip olduğu da biiniyor. Google, 2018’den itibaren web sitelerini dizine ekleme şeklini değiştirdi. Mobil öncelikle, web sitenizin mobil sürümünün, Google’ın dizinlerine ekledikleri şeyler için başlangıç ​​noktası ve sıralamaları nasıl belirlediklerinin temelini oluşturduğu anlamına gelir. Shoptimizer bünyesinde mobil sayfa hızı ve yükleme süresi önceliklendirilir ve görseller mobil deneyim için optimize edilir.

Shoptimizer Ek Özellikleri Nelerdir?

Shoptimizer, çevrimiçi mağazanızı oluşturmayı kolaylaştırmak için yalnızca dikkatlice düşünülmüş e-Ticaret ve WordPress özelliklerini içerir.

Otomatik tamamlama araması sayesinde ürünleri öğeleri daha da hızlı bulmamıza olanak sağlıyor. Shoptimizer’da bir ürün aramak, sayfadan ayrılmadan en iyi sonuçları anında ortaya çıkaracaktır. Aramaları güçlendirin ve kullanıcıları saniyeler içinde aradıkları ürüne yönlendirerek daha hızlı dönüştürün. Dolayısıyla sayfadan ayrılmadan arama yapabilir akıllı arama sayesinde daha etin bir arama gerçekleştirilebilir. Böylece kullanıcılar aradıklarına daha hızlı ulaşır ve site kalite algısı artırılmış olur.

Shoptimizer Elementor İle Uyumlu Mudur?

Shoptimizer, sayfa inşa edici aracı olan Elementor Page Builder ile uyumludur. Shoptimizer, içerik sayfaları için çok güçlü Elementor sayfa oluşturucuyu kullanır – bu yalın ve özelliklerle dolu düzenleyici, kodlama gerektirmeden sofistike düzenler sayfa oluşturmanıza olanak tanır.

Elementor’u ayrıntılı olarak işlemiştik yazı ve videolarımızda. Elementorun Shoptimizer ile uyumlu olması güzel bir deneyim sunuyor. Ayrıca elementorun pro’su ile yeteneklerini artırıp, gücünü çoğaltabilirsin.

Shoptimizer’ın Mega Menü Desteği Ne İşe Yarar?

Daha büyük mağazalar için mega menü, alt kategorileri ve öne çıkan ürünleri sunmanın harika bir yoludur. Sergilemek istediğiniz öğeleri doğrudan menüye ekleyin – bu, onlara dikkat çekmenin harika bir yoludur.

Ürün kategorileri görüntülenirken, menü değişirken sağ taraftada değişen banner ve görsellerin bulunduğunu söyleyebiliriz. Bu alanlara mega menü denir. E-Ticaret sitesi içerisinde ihtiyaç duyabileceğiniz her duruma Shoptimizer Mega menüyle destek vermektedir.

Shoptimizer Hazır Şablonlar Sunuyor Mu?

Shoptimizer hızlı bir şekilde çalışmaya başlamanı sağlamak için tek tıklamayla demo verilerine muhteşem bir ana sayfa, hakkında, iletişim, SSS’ler ve satış sayfaları eklenmiş olarak karşımıza çıkıyor.  Ayrıca, görselleri neredeyse tamamen kusursuz olarak içeriğe dahil oluyor!

Böylece hazır şablonları vakit kaybetmeden düzenleyebilir ve kendi siteni oluşturmak için fazla efor sarf etmeden kaliteli içeriğe ulaşabilirsin.

Shoptimizer Temasının Özelleştirme Ayarları Var Mıdır?

Pek tabii! Tipografiyi, renk ayarlarını ve çok daha fazlasını hızlı bir şekilde değiştirebilir – öğeleri doğru olacak şekilde ayarlayabilmemiz için çok sayıda kontrol eklenmiş durumda. Harekete geçirme tuşunun rengi kadar küçük görünen bir şeyin bile dönüşümlerde gerçek bir fark yaratabileceğini unutmamak gereklidir.

Yazı tiplerini, renkleri, düzenleri ve daha fazlasını değiştirebilirsin! Anında değişiklikler için özelleştiriciyi kullanarak pratik yoldan düzenleme işlemleri yapabilirsin.

Shoptimizer’in erişilebilirlik için inşa edildiğini farklı sıkça kullanılan tema özelliklerinden yararlanarak nasıl oluşturulduğundan bahsetmiştik.

Lighthouse, web sayfalarının kalitesini artırmak için Google’ın sunduğu açık kaynaklı, otomatik bir araçtır. Sitenizi iyileştirmek için ayrıntılı öneriler içeren bir rapor oluşturur. Shoptimizer’ın erişilebilirlik raporu son derece iyidir ve 94/100 puan almıştır. Ki bu ciddi oranda bir başarı olarak karşımıza çıkmaktadır. Ekran okuyucularla test edilmiş olup bir ekran okuyucu, bir web sayfasının içeriğini yüksek sesle okur ve ekranı görmeden web sitelerinde gezinmenize yardımcı olur ve görme engelli ve görme engelli ziyaretçiler web’i bu kadar kullanır. Okuyucuların erişilebilirliği sağlamak için Shoptimizer test edilmiştir.

Hangi Araçlar Shoptimizer ile Uyumludur?

Shoptimizer’ın Elementor ile uyumlu olduğundan ve bunun getirdiği avantajlardan bahsetmiştik.

Beaver Builder, Site Origin, Visual Composer gibi site inşa etme araçlarıyla da uyumlu olduğu tercih edildiği belirtilmiştir.

Shoptimizer Seviye Dönüşüm Optimizasyonu Nasıldır?

Şekilde de görmüş olduğunuz gibi 19 farklı ürün detay alanı oluşturulmuştur. Görselde her birinin nerede göründüğü belirtilmiştir. Gerçekten iyi bir ürün detay çalışması çıkarılabildiğini görmekteyiz.

Shoptimizer’i Neden Kullanmalıyım?

WooCommerce odaklı

WooCommerce’in sonradan düşünüldüğü diğer WordPress temalarının aksine, Shoptimizer e-Ticaret göz önünde bulundurularak oluşturulmuştur.

Kancalar ve filtreler

Geliştiriciler Shoptimizer’ı sevecekler – şablon geçersiz kılma yok – sadece temiz ve genişletilebilir kod, bu da mükemmel performansla sonuçlanıyor.

SEO dostu işaretleme

Shoptimizer’ın kod tabanı mimarisi, en iyi SEO uygulamalarını takip eder. Hatta ihtiyacınız olan gerekli Schema.org işaretlemesiyle birlikte gelir.

Tercüme İmkanı

Shoptimizer’ı .po ve .mo dosyalarıyla kendi dilinizde çevirebilirsiniz. Çok dilli web siteleri bile oluşturabilirsiniz.

Özelleştiriciyi kullanır

Yerel özelleştirici içinde kolayca tipografi, tasarım ve mizanpaj düzenlemeleri yapın. Saniyeler içinde ince ayarlar yapabilirsiniz.

İstediğin şekilde markala

Tema seçeneklerinde marka kimliğinize uyacak şekilde renkleri hızla ayarlayın – özel koda gerek yok.

Elementor ile Ana Sayfa Düzenleme

Merhaba Güzel İnsan!

Bu yazımızda sana lcwakiki.com’un ana sayfasını Shoptimizer temasını yüklediğimiz, video ve yazılarımızın daha etkili olması için Elementor sayfa inşa edici aracı ile oluşturduğumuz beyense.com sitemize uyguladık. LCW ana sayfasındaki bannerlar ve yerleşimi Elementor Sayfa inşa edici aracını kullanarak kendi e-ticaret sitemize nasıl uyguladığımızı merak ettin değil mi? Haydi gel başlayalım!

Konuyu paylaştığımız videoyu aşağıdaki bağlantıdan izleyebilir, aklına takılan her şeyi sorabilirsin.

Sitemizin ana sayfasını LC Wakiki ana sayfasına benzer hale getirmek için öncelikle LCW anasayfasını inceleyelim;

Görmüş olduğun gibi en üst tarafta bir gif bulunmakta, tekli bannerlar üçlü ve dörtlü bannerlardan oluşuyor.

Haydi inşa etmeye başlayalım;

Ana Sayfa Nasıl Düzenlenir?

Beyense.com ana sayfamızı temizleyerek, yeni bir ana sayfa inşa etme durumuna hazırlamış oluyoruz. Sonrasında artı sekmesine basarak yeni bir section ekliyoruz;

Artıya bastıktan sonra karşımıza nasıl bir section istediğimize dair seçenekler gelecektir. Buradan biz tek sütunluk bir section tercih ediyoruz.

Ardından bu tek sütunluk sectionın içine sol taraftan bir image sürükleyip bırakıyoruz. Burada sağ tıklayarak edit section diyoruz böylece resmin boyutunu düzenliyoruz. Content Width’i full with diyerek tüm ekrana sığması komutunu veriyoruz. İşlem burada tamamlanmazsa stretch section kısmını açık duruma getiriyoruz.

Eğer yine de istenilen gibi tam ekran yapamadıysan bu sefer edit image diyerek image size’ı full duruma getirerek görsel boyutunu tüm ekrana sığacak şekilde düzenlemiş olursun. Bu şekilde ilk kısmı tamamlamış olduk.

İkinci kısmımızda 4 sütunluk bir section ekleyerek işe başlıyoruz. Bu dörtlü sectionun içinde ayrı ayrı 4 farklı yuvarlak banner mevcut olacak;

Dörtlü sectionu seçtikten sonra içlerine sol taraftaki elementor sütunundan image sürükleyip bırakıyoruz.

Üçüncü kısım için 3 farklı tek sütunluk banner kullanacağız.

Yine aynı şekilde artı işaretine basıp tek sütunluk bir section ekledikten sonra sol taraftaki elementor aramasına image yazıp bu görseli sectionun içine sürükleyip bırakıyoruz. Yine tam ekran olmasını istediğimiz için boyutunu full duruma getirip hemen altındaki stretch section’ı açarak tüm ekrana görselimizi yerleştirdik.

Sonraki iki bölüm de yine tek sütunluk sectionlar olduğu için aynı şekilde işlem yapmak yerine bu sefer sectionın ortasındaki 6 noktalı sekmeye tıklayarak duplicate ediyoruz yani bölümü olduğu gibi kopyalıyoruz. Bu işlerimi hızlı ve pratik şekilde yapmamızda büyük rol oynayacaktır.

Daha sonra yalnızca görsellerini değiştirerek diğer 2 bannerımızı da hazır hale getiriyoruz.

Dördüncü işlemimiz için üçlü section ekliyoruz. Artık senin için de pratik oldu değil mi? Artı işaretine bastıktan sonra üç sütunlu bir section sectikten sonra içlerine birer image sürükleyip bırakıyoruz. Böylece bu adımı da tamamlamış hale geliyoruz.

Beşinci adımımızda yine dört sütünlü bir section içinde bannerlar olduğunu görüyoruz. Bu sefer biraz önceki adımıza oluşturduğumuz sectionu duplicate ederek daha pratik yoldan işlemimizi tamamlayacağız.

Sonda bulunan bannerın hemen üst kısmında bir pencere gibi düzenleme işareti göreceksin buraya basıp duplicate ettiğin vakit artık dörtlü bir bannera ulaşmış olacaksın;

Daha sonra bu oluşturduğumuz dörtlü bannerın içerisindeki görselleri değiştirerek hazır hale getirmiş oluyoruz.

Son olarak üçlü sütun ekleyip içlerinde birer görsel ekleyeceğiz. Bura da da pratik yollar mevcut dilersen üçlü bölümü duplicate edip buraya taşıyabilirsin ya da bir önceki dörtlü bölümü duplicate edip sondaki bir bannerı silerek de üçlü bölüm oluşturabilirsin hangisi senin için daha pratikse onu tercih edebilirsin.

Böylece LC Wakiki’nin ana sayfasını kendi e-ticaret proje sayfamıza eklemiş olduk. Burada en önemli nokta görsellerin ve içeriklerin hazır bulunması! Biz daha hızlı ilerleyebilmek için görselleri indirmiştik. O yüzden direkt olarak ortamdan mevcut görselleri seçerek hızlı bir şekilde ilerledik.

Sen de ilham aldığın sitelere kendi sitene benzeterek pratik şekilde artık ana sayfa oluşturabilirsin. Anlattıklarımız umarız faydalı olmuştur. Daha fazla içeriğe ulaşmak için Youtube hesabımızı takip edebilir, aklınıza takılan her şeyi sorabilirsin. Yeni yazı ve videolarımızda görüşmek üzere sevgiyle kalın…

Elementor Nedir? Nasıl Kullanılır?

Merhaba güzel insan!

Bu yazımızda seninle dünyanın en popüler sayfa inşa etme aracı olan Elementor‘u inceleyeceğiz.

gibi başlıklara değineceğiz. Daha rahat ve pratik şekilde nasıl site inşa edebileceğini adım adım görsellerle destekleyerek açıkladık. Dilersen Youtube kanalımızda konuyu anlattığımız videoyu  bağlantıdan izleyebilirsin.

Sana çok sıkı bir Elementor rehberi hazırladık.  Derinliklerine inmek için hazırsan haydi başlayalım!

3, 2, 1! 

1.Elementor Nedir?

Dünyanın en kolay ve pratik internet sitesi oluşturma aracı olan WordPress‘in sayfa inşa etme aracı olan Elementor, 5 milyondan fazla tercih edilmiş olmasıyla karşımıza çıkıyor. Elementor ücretsiz bir araçtır. Sol taraftaki sütundan sağ tarafta inşa ettiğimiz sayfaya sürükle bırak yöntemiyle çalışmaktadır. Çok fazla seçenek skalası sunmasıyla eşsiz tasarımlara ulaşma imkanı sunmakta!

2) Elementor’un ücretli ve ücretsiz sürümleri arasındaki farklar nelerdir?

Elementor ücretsiz araç olmasına rağmen iyileştirmelerle daha gelişmiş sürümleri bulunmaktadır. 

  1. Ücretsiz Sürümü
  2. Kişite Özel Sürümü
  3. Artı Sürümü
  4. Uzman Sürümü olarak seçenekler sunmaktadır.

a) Ücretsiz Sürümünde

  •  Sürükle ve Bırak Düzenleyici
  •  Duyarlı Düzenleme
  •  40+ Temel Widget
  •  30+ Temel Şablon 

sunmaktadır. 

b) Kişiye Özel Sürümünde

Ücretsiz sürümünde sunulan özelliklerin yanında;
  •  50+ Pro Widget
  •  300+ Pro Şablon
  •  10+ Tam Web Sitesi Şablon Seti
  •  Tema Oluşturucu
  •  Form Oluşturucu
  •  WooCommerce Oluşturucu
  •  Popup Oluşturucu
  •  1 Yıllık Destek
  •  1 Yıllık Güncellemeler

sunmaktadır. Ücreti de bir yıl ve bir site inşası için 49 dolardır. 

c) Plus ( Artı) Sürümünde
Ücretsiz sürümü için geçerli olan özelliklerin yaında;
  •  50+ Pro Widget
  •  300+ Pro Şablon
  •  10+ Tam Web Sitesi
    Şablon Seti
  •  Tema Oluşturucu
  •  Form Oluşturucu
  •  WooCommerce Oluşturucu
  •  Popup Oluşturucu
  •  1 Yıllık Destek
  •  1 Yıllık Güncellemeler

sunmaktadır ve bunlar için biçilen fiyat yıllık 3 site için 99 dolardır.

d) Expert (Uzman) Sürümünde

Ücretsiz sürüm için geçerli olan özelliklerin yanında;
  •  50+ Pro Widget
  •  300+ Pro Şablon
  •  10+ Tam Web Sitesi
    Şablon Seti
  •  Tema Oluşturucu
  •  Form Oluşturucu
  •  WooCommerce Oluşturucu
  •  Popup Oluşturucu
  •  1 Yıllık Destek
  •  1 Yıllık Güncellemeler

1000 site için yıllık 199 dolar olarak sunmaktadır. 

3) Elementor Nasıl Yüklenir?

Daha etkili olabimek adına daha önce oluşturmuş olduğumuz wordpress.a2a.com internet sitemizi kullanacağız. 

Eklentilerden yeni ekle diyerek, arama çubuğuna elementor yazıp aratıyoruz karşımıza çıkan “Elementor Website Builder”ı yükleyip etkinleştiriyoruz. 

Elementor’u kurduğumuz anda soldaki çubuğa yerleşir, içerisinde de mevcut olan  araçlar, yardım, custom fonts, custom icons gibi sekmeleri görüyoruz. 

Elementorun ilk sayfasını oluştur dediğin anda oluşturabileceğin ilk alan seni karşılayacaktır. Daha önce videomuzda bu alanı oluşturduğumuz için şimdi aynı alana edit with elementor diyerek giriyoruz. 

4. Elementor Widgetleri Nelerdir?

Elementorun hemen sol tarafta görebilirsin. Buradan siteni nasıl inşa etmek istiyorsan, sürükle bırak yöntemiyle ilgili widgeti sol kolondan sağa doğru sürükleyip bırakacağın yeri seçmen gerekir. Buradaki araçlara göz atmak gerekirse;

Sol sütun aşağı doğru kaydırılırsa basic, pro ve general widgetleri görebilirsin. Basic widgetlar ücretsiz olarak kullanabildiğimiz widgetler, prodaki widgetler ücretli sürümün sağladığı avantaj ve özellikleri sunar, general kısmındaki genel widgetlar da yine ücretsiz olarak kullanabileceğimiz araçlar olarakk karşımıza çıkar. 

Basic, pro ve general widgetlardan sonra site, WooCommerce ve Premium addons ayarları karşımıza çıkar.

Siteyle ilgi araçları daha çok sitenin header (üst) ve footer (dip) kısmını inşa ederken kullanırız. Ücretli sürümde kullanıma elverişli olmasıyla karşımıza çıkıyor. 

Yine WooCommerce ile ilgi araçları, ayarları hem ürün sayfası inşa ederken kullanabileceğimiz hem de normal şekilde kullanabileceğimiz yine ücretli olarak sunulan widgetler olarak karşımıza çıkıyor. 

Ek olarak da WordPressin bileşenleri içerisinden seçebileceğimiz etiketler, bileşenler mevcuttur. 

Elementorun derinliklerine dalmadan önce yine genel olarak ayarlarına göz atalım, Çünkü eminiz ki burada görebileceğin birbirinden farklı seçenek ve araçlar, bu araçların düzenlenme yerleri sana çok zaman kazandıracaktır.  

İlk olarak soldaki sütunun en üstünde en soldaki üçlü yatay çizgili sekmeye tıkladığın zaman karşına bu şekilde alan açılacaktır. Burası Elementorun ayarlar sayfası olmakla birlikte bir çok kolaylık sağlar. 

 

Site ayarlarına baktığımızda; burada siteyle ilgili ayarları yapılandırabiliyoruz. Renkleri, yazı fontlarını, butonları, resimleri, yazı tipini form alanlarını burada düzenleyebiliyoruz.

Yine siteyle ilgili genel ayarları en sondaki başlıkta görüyorsun burada backrounda tıklayarak sitenin arka planını düzenleyebiliriz, arka fonun rengini backround coloura tıklayarak değiştirebilirsin.  

Yine soldaki elementor sütununda sağdaki 9 noktalı alana tıklayarak ulaşmak istediğin widgetlara ulaşabilirsin. Az önce bahsettiğimiz tüm widgetları bir arada görebileceğin alanı sunuyor, sürükleyip inşa edeceğin alana bırakabilirsin.

Elementor sütununun alt kısmında göz atalım.

Burada da ayarlar sekmesi bizi karşılar zaten çark şeklinde görebiliyorsun. Burada sitenin ismini, öne çıkan görselini, site isminin görülüp görülmemesi gibi ayarları yapabiliyoruz. Sayfanın durumunu taslak, yayınlanmış, yayınlanmamış olarak değiştirebiliriz. Ve genel ayarların atında page layout kısmı var ki burası gerçekten hayati bir alan! Sayfanın nasıl görüleceği alanların tüm sayfayı en olarak kaplaması gibi seçenekler sunuluyor.

Navigator kısmında site içi harita çizer ve doğru olarak tıklanılan alana götürür bizi. 3. sıradaki history kısmıyla son yapılan işlemleri değişiklikleri anbean görebileceğimiz, hata yapmışsak geri alabileceğimiz alandır. 4. sıradaki ekran ikonuna tıklayarak sayfanın bilgisayarda, mobilde, ve tablette nasıl göründüğünü görebiliyoruz. Son olarak da göz ikonuna tıklayarak son yapılan değişiklikleri görebiliriz.

Artık Elementor’u kurcalamaya hazırız. Yazımızın başında ücretsiz ve pro sürümlerin farkından bahsettiğimiz alanı aslında burada kullanıyoruz. Template sayımız ne kadar fazla olursa o kadar, fazla seçim imkanımız oluyor. Artı işaretine basarak seçenekleri görebiliyoruz. 

Artı işaretine bastıktan sonra, blocklar, sayfalar, ve şablonlar templateleri seçebiliyoruz. Beğendiğin şablonları beğenilenlerine ekleyebilir oradan rahatlıkla kullanabilirsin. Arama çubuğuna ne tür site yapmak istiyorsan yazarak konuya uygun şablonları sana sunar ve rahatlıkla seçim yapabilirsin.

My templates kısmında sayfanın bir kısmını veya tamamını kaydettiğin alanlara ulaşabileceğin kısımdır. Örnek veriyorum bizi neden tercih etmelisiniz tarzında bir içerik oluşturdunuz ve bunun her sayfada yer almasını istiyorsanız bu kısmı kaydedebilir, diğer sayfalarda yine artı işaretini tıklayarak kaydettiğiniz alanı olduğu gibi aktarabilirsiniz. 

Blocks kısmını da yine dilediğin gibi düzenlemeler yapabilirsin. Sol üst tarafta arama çubuğuna ihtiyacın olan aracı yazarak örneğin contact yazarak iletişim blocklarını görebilir bunları düzenleyebilirsin. 

Yine bu alanların hepsinde pro sürümleri göreceksin. Bu pro sürümlerinin hemen üzerinde bir kilit işareti vardır. Buraya dikkat ederek ücretsiz sürümleri kulanabilirsin

5. Elementor Varsayılan Şablonları Nelerdir?

Hazır şablonları kısaca inceledik. Şimdi Elementorun kendi varsayılan şablonuyla işlemlerimizi nasıl yapıyoruz gelin şimdi bakalım;

Öncelikle hazır bir taslak oluşturmanın  zaman yönetimi açısından kıymetli olduğunu söyleyebiliriz. Burada kullanabileceğimiz birbirinden farklı şablonları görüyoruz. İhtiyacımıza en uygun cevap verebilecek yapıyı buradan seçiyoruz. Buradaki şablonlar satır ve sütundan oluşuyor içlerinden birini seçtiğimiz anda örnek veriyorum ikili yapıy seçtiğim anda iki sütun bir satırdan oluşan bir section bir bölüm oluşturmuş oluyorum.

Eklediğimiz section bölüm için hemen üzerinde bulunan ortadaki 6 noktaya sağ tıklayarak edit section diyebiliriz böylece bölüm ayarlarını yapabiliriz. Varsayılan her bir element için -ki bu elementler, elementor sutünun altındaki her bir widgettir-  3 ayrı düzenleme ekranı vardır. Layout, style ve advanced olmak üzere gördüğümüz ayarlara bakacak olursak,

Style ayarında, arkaplan tipinin nasıl olacağını, background overlay kısmında arka planın rengini, duracağı lokasyondaki boyutu, yazı tipini, erecesini düzenleyebiliriz. Border kısmında bölümün, alttan üstten sağ ve soldan yüksekliği boşluk ayarı ayarlanabilir. Shape divider kısmında görünebilecek şekli dalga, dağ, kitap gibi birçok farklı şekli seçip yükseklik ve en ayarı yapılabilir ve son olarak Typography kısmında,
başık rengini, text metin rengini, link rengini ve yazıların nereyeyaslanacağı ortalı, sağa veya sola hizalı şekilde bulunmasını seçebileceğimiz alanlar mevcuttur. Bu kısım aktif olarak kullanıldıkça pratik kazanacaktır. Çok fazla güzel özelliği gün geçtikçe daha iyi tanıyacaksın 🙂 

Layout, yerleşim bölümünde metnin ekranı nasıl kaplayacağı, full ekran veya bir dörtgen içerisinde mi olacağı, yüksekliği gibi yerleşim düzeniyle ilgili geniş ayarları buradan yönetebilirsin.

Advenced ayarlarına baktığımızda da, metnin sağdan, soldan, alttan ve üstten verilebilecek boşluk miktarı ayarı yapılmakla birlikle, Z indeksi ayarı, mobilde masa üstünde görünsün şeklinde ayarı, hareket efektleri yahut kendi kodlamalarını girebileceğin custom CSS ayarı da bu ekrandan yapılabilmektedir. 

Şimdi oluşturduğumuz sectionda düzenlemeler yapalım. 

Style bölümüne gelip, arka plan tipin nasıl ayarlayacağımızı öğrendik. Biz buraya bir görsel eklemek istiyoruz. Klasik butonundan image kısmını seçtiğimiz anda, bilgisayar veya telefonundaki görseli seçip, insert media diyerek buraya yükleyebilirsin.

Yüklediğin anda da görselin nasıl görüneceği ile ilgili seçenekleri görebilmek için layout kısmna dönüp tıpkı yazıda olduğu gibi yüksekliğini boyutunu ayarlayabiliyoruz. Ekrana sığdır butonunu seçerek tüm ekrana sığmasını sağlamış oluruz. 

Görseli tüm ekrana sığdırdıktan sonra içerisine başlık ve açıklama eklemek istiyoruz. Sol taraftaki headingi sürükleyip resmin içerisine bıraktığımızda artık başlık yazabilecek duruma gelebiliriz. Biz A2A Blog yazmayı tercih ettik. Hemen altına da bir text editor sürükleyip bırakarak açıklama yapacak alan oluşturmuş olduk. Bunlara tıkladığınızda içerisinde latince ifadeler yer alır. Bunların renk ayarını da yine sola tıklayarak genel ayarlarda site ayarları kısmına baktığımızda global colors alanından ayarlayacağım rengi tüm sayfalar iin kullanabilirim. Arka planımız mavi olduğu için yazı rengini beyaz tercih ettik. Primary Coloru beyaz olarak seçtik. Bununla birlikte oluşturacağım tüm başlıklarda beyaz kullanmak istediğimizi belirtmiş olduk.

Hatta hemen altına da buton atalım diye düşündük ve yine button widgetini sürükleyip bıraktık içine bir telefon numarası yazarak icon ekledik. Butonu düzenleme kısmında iconların nereden alındığını da rahatlıkla görebilirsiniz. 

Sol taraftaki elementor sutünunu nasıl kullanacağını öğrendin. Buradan video ekleyebilir, galeriler oluşturabilir, image boxlar oluşturabilir, akordion açıklamalar sürükleyip bırakabilirsin. Görmüş olduğun gibi eşsiz içerikleri elementor sayesinde kolaylıkla inşaa edebiliyoruz. Burada hayat kurtarıcı birkaç bilgi vermek istiyoruz;

  • Sectionun üzerinde sağa tıklayarak duplicate diyerek bölümü kopyalamış olursun. Tekrar aynı şablonu kullanacaksan senin için inanılmaz pratik bir hamle olur.
  • Sectionun üzerinde sola tıklayarak bölümün yerini değiştirip başka yerlere taşıyabilirsin. 
  • Burada yaptığın sayfayı veya bir bölümü kaydederek diğer sayfalarda kullanabilirsin. 

6. Elementor Hazır Şablon Kullanımı Nasıldır?

Elementorun kendi section oluşturma olayını anlattık, şimdi bir de hazır şablon ekleyip üzerinde nasıl ayarlar yapabileceğimize bakalım.

Artık biliyoruz ki section eklediğimiz artının hemen yanında dosya işareti var. Buraya tıklayarak uygun bir şablonu yüklüyoruz. 

Şablon A’dan Z’ye kadar her şeyiyle birlikte yüklendi. Yükledikten sonra yine dilediğin gibi elementor sütunundan sürükle bırak yaparak sayfanı inşa edebilirsin. 

Logo kısmını kendi logonu ekleyerek inşa edebilir, az önce bahsettiğimiz tüm elementleri hangisi nasıl uygun olacaksa, gönlünce kurabilir yerleştirebilirsin.

  • Gördüğün gibi Elementor oldukça kullanışlı ve kolay bir  site düzenleme aracı. Ücretsiz olmasının da etkisi olacak ki dünyanın en popüler araçlarından biri. Sen de kendi siteni kurabilir, geliştirebilirsin. Anlattıklarımız umarım faydalı olmuştur. Daha fazla içeriğe ulaşmak için Youtube hesabımı takip edebilir, aklınıza takılan her şeyi sorabilirsin. Yeni yazı ve videolarımızda görüşmek üzere sevgiyle kal…
Sohbet aç.
💬 Yardımcı olmamızı ister misiniz?
👋 Merhaba,
elementor arşivleri - A2A Dijital ile ilgili bilgi almak ister misiniz?