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…

  1. Web Dayı diyor ki:

    Elinize sağlık çok güzel bir anlatım olmuş. Elementor gerçekten de çok yararlı bir eklendi. Divi’den daha çok kullanıyorum çünkü kullanımı diğer sayfa tasarım eklentilerinden daha güzel. Çok detaylı anlatım sunmuşsunuz sizde elinize emeğinize sağlık.

    • a2a diyor ki:

      Çok teşekkür ederiz! Biz de ajans olarak oldukça çok beğeniyoruz. Pro sürümüyle daha fazla seçenek sunması da ayrıca hoşumuza gidiyor. Sevgiler…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sohbet aç.
💬 Yardımcı olmamızı ister misiniz?
👋 Merhaba,
Elementor Nedir? Nasıl Kullanılır? ile ilgili bilgi almak ister misiniz?