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.

• Elementor nedir?
• Elementor’un ücretli ve ücretsiz sürümleri arasındaki farklar nelerdir?
• Elementor Nasıl Yüklenir? 
• Elementorda Neler Yapabilirsiniz? 
• Elementor Widgetları Nelerdir?
• Elementor Varsayılan Şablonları Nelerdir?
• Elementor Hazır Şablon Kullanımı Nasıldır?

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!

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,

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