Elementor Sayfa Oluşturucu Eklentisi Nasıl Kullanılır

Sitenizin tasarımının her pikselini kod yazmadan kontrol edebilseydiniz ne olurdu?

Elementor'un başlattığı görev bu ve biliyor musun?

Onlar yaptı!

Elementor, özel sayfalar ve hatta tüm web siteleri oluşturmanıza olanak tanıyan son derece sağlam bir sayfa oluşturma aracıdır. Ve kendi kodlarınızı yazmak şöyle dursun, bir kod satırına bile bakmanıza gerek yok.

Bu Elementor eğitiminde, tamamen özel sayfa tasarımları oluşturmak için sayfa oluşturucuyu nasıl kullanacağınızı öğreneceksiniz.

Elementor nasıl kullanılır

Bir video izlemeyi tercih ederseniz, bu adım adım öğretici her şeyi kapsar:

Youtube'da Rekabet Temalarına Abone Olun

Başlamak için ilk adım, Elementor eklentisini kurmaktır.

Elementor'ı yükleyin

Elementor ücretsiz bir eklentidir ve sitenize eklediğiniz diğer eklentiler gibi kurulabilir.

Eklentiler > Yeni Ekle menüsünü ziyaret edin ve "elementor" aramak için sağ üstteki arama çubuğunu kullanın.

Şimdi Kur düğmesini tıklayın ve ardından kurulum tamamlandıktan sonra Etkinleştir'i tıklayın.

Elementor yüklendiğinde, web sitenize eklenen iki yeni menü göreceksiniz.

Ana Elementor menüsü bazı genel ayarlara sahiptir, ancak dürüst olmak gerekirse, onları fazla kullanmayacaksınız. Bunun dışında, esas olarak kaynakları ve Elementor Pro özelliklerini desteklemek için bağlantılar.

Şablonlar menüsü çok kullanışlıdır ve buna eğitimde daha sonra bakacağız.

Elementor ile bir sayfa nasıl düzenlenir

Elementor ile yaptığınız işlerin çoğu Elementor editöründe yapılacaktır.

Editöre ulaşmak için Gönderiler veya Sayfalar menüsünü ziyaret edebilir ve ardından düzenlemek istediğiniz sayfaya tıklayabilirsiniz. Editörün içinde, sizi Elementor düzenleyicisine götürecek yeni bir "Elementor ile Düzenle" düğmesi göreceksiniz.

Hem Elementor düzenleyicisini hem de normal sayfa içeriğini birlikte kullanabilseniz de, dağınık ve kafa karıştırıcı olma eğilimindedir. Bu nedenle, kullandığınız herhangi bir sayfa için tüm içeriğinizi Elementor'a koymanızı tavsiye ederim.

Mavi düzenle düğmesine tıkladığınızda, düzenleyiciye yönlendirileceksiniz.

Gördüğünüz gibi, Canlı Özelleştirici gibi ayarlandı. Sağda bir önizleme var ve solda widget'ları görebilirsiniz.

Widget'lar, Elementor sayfalarının temel yapı taşlarıdır, bu nedenle bunların nasıl kullanılacağını öğrenmek zorunludur.

Elementor'un widget'ları nasıl kullanılır?

Widget menüsünün içinde birkaç farklı bölüm bulacaksınız.

En üstteki Temel bölümü, Metin Düzenleyici, Başlık ve Simge widget'ları gibi pratik öğeler içerir.

Kaydırmaya devam ederseniz, birkaç bölüm daha olduğunu göreceksiniz:

• Pro: gönderi ızgaraları gibi daha gelişmiş widget'lar (yalnızca Elementor Pro)
• Genel: daha sık kullanılan widget'lar (ücretsiz)
• Site: Elementor ile tüm siteler oluşturmak için (yalnızca Elementor Pro)
• WooCommerce: Elementor ile bir WC mağazası oluşturmak için (yalnızca Elementor Pro)
• WordPress: tüm normal WP widget'larınız

WordPress bölümü düzgündür çünkü WordPress'te bulunan 17 varsayılan widget'ın tümünü ve ayrıca eklentiler tarafından eklenen tüm widget'ları kullanmanıza izin verir.

Sayfaya bir pencere öğesi eklemek için, onu önizlemede belirtilen kutuya sürükleyip bırakmanız yeterlidir.

Widget'ı ekledikten sonra, kenar çubuğunda bulunan her türlü özelleştirme seçeneğini bulacaksınız.

Her widget'ın bir İçerik, Stil ve Gelişmiş bölümü vardır. Bir başlık için kullanılabilen stil seçeneklerinden bazılarına hızlı bir bakış:

Kenar çubuğundaki İçerik sekmesinden herhangi bir widget'ın içeriğini düzenleyebilirken, doğrudan önizlemede de düzenleyebilirsiniz.

Bu size widget'ların temelleri hakkında iyi bir fikir verecektir. Gördüğünüz gibi, çok çeşitli widget'lar var. Ayrıca, Elementor'da normalde bulunmayan widget'ları içeren eklentiler bile mevcuttur.

Şimdiye kadar, muhtemelen Elementor ile yapabilecekleriniz konusunda heyecanlanıyorsunuz, ama inanın bana, çok daha fazlası var.

Özel sayfa düzenleri oluşturun

Şimdiye kadar, yalnızca basit, tek sütunlu bir tasarımla sonuçlanan sayfaya widget'ların nasıl sürüklenip bırakılacağını gördünüz.

Yeni bir sayfa yapısı oluşturmak için önizlemedeki artı düğmesini de tıklayabilirsiniz.

Bir kez tıkladığınızda, aralarından seçim yapabileceğiniz 12 farklı yapı göreceksiniz.

Birini seçtiğinizde, sayfa bölümü oluşturulur ve widget'ları herhangi bir sütuna sürükleyip bırakabilirsiniz. Bu, widget'ları mantıksal bölümler halinde gruplandırmanıza olanak tanır ve hatta bölümün stilini de oluşturabilirsiniz.

Sayfa bölümünün üst kısmındaki tutamacı tıklarsanız, yeni seçeneklerle kenar çubuğu güncellemelerini görürsünüz.

Stil sekmesinde, özellikle pratik olan arka plan seçeneği de dahil olmak üzere birçok harika seçenek bulacaksınız.

Herhangi bir sayfa bölümünün arka planı olarak bir renk, gradyan, resim, video veya slayt gösterisi kullanabilirsiniz.

Ve bu yeterli değilmiş gibi, sayfa bölümündeki tek tek sütunların arka planını ve stilini bile değiştirebilirsiniz.

Widget'ları, sütunları ve bölümleri ayrı ayrı stillendirme yeteneği, muazzam miktarda kontrol sağlar.

Sadece bir sorun var.

Sayfa bölümlerindeki arka planların, sayfanın merkeziyle sınırlı oldukları için tuhaf göründüğünü (henüz yapmadıysanız) hemen fark edeceksiniz. Bunu nasıl düzelteceğiniz aşağıda açıklanmıştır.

Yerleşim alanını sabitleme

Örneğimde Seçilmiş temayı kullanıyorum ve gördüğünüz gibi yaptığım sayfa bölümünün arka planı sayfanın ortasında aniden duruyor.

Bunun nedeni, Elementor içeriğinin temada gönderi içeriğiyle aynı alanı kaplamasıdır. Seçilmiş temadaki normal bir sayfa şöyle görünür:

Standart gönderiler ve sayfalar için harika görünüyor, ancak Elementor ile tasarımı garip hale getirebilir. Çözüm, bir sayfa şablonu kullanmaktır.

Sayfa şablonunu değiştirmek için düzenleyiciyi ziyaret edebilir, Sayfa Nitelikleri bölümünü açabilir ve ardından bu Şablon açılır menüsünü kullanabilirsiniz:

Seçilmiş gibi birçok tema kendi sayfa şablonlarını içerirken, Elementor sitenize her zaman iki şablon ekler:

• Elementor Canvas: üstbilgi veya altbilgi olmadan tam genişlik
• Elementor Tam Genişlik: üstbilgi ve altbilgi ile tam genişlik

Alt kısımdaki Sayfa Ayarları simgesine tıklayarak ve ardından bu Sayfa Düzeni seçeneğini kullanarak, Elementor düzenleyicisinden sayfa şablonunu da değiştirebilirsiniz:

Bu arada, Elementor ile muhteşem sayfalar oluşturmaya geri dönelim.

Önceden hazırlanmış bloklar ekleyin

Şimdiye kadar Elementor'dan gördükleriniz etkileyici. Gördüğünüz araçları kullanarak hayal edebileceğiniz her şeyi yaratabilirsiniz.

Bununla birlikte, zorluk göz korkutucu. Gerçekten tüm bir web sayfasını sıfırdan oluşturmak istiyor musunuz? Web tasarımı konusunda deneyiminiz yoksa amatörce görünen bir sayfa oluşturmanız olasıdır.

Güzel sayfalar oluşturmak zor iştir!

Neyse ki Elementor bu duruma da hazırlık yaptı.

Daha önce, sayfa yapısı eklemek için artı düğmesine tıklayabileceğinizi, ancak klasör simgesini tıklarsanız yeni bir blok ekleyebileceğinizi öğrenmiştiniz.

Yüzlerce önceden tasarlanmış sayfa bölümü içeren bu pencere açılır penceresini göreceksiniz:

Bunları sayfanıza eklemek için bu bloklardan herhangi birine tıklamanız yeterlidir. Elementor'un gerçekten parlamaya başladığı yer burasıdır.

Tüm bir sayfayı sıfırdan oluşturmak yerine, doğru tasarım ve düzene sahip olana kadar önceden yapılmış blokları kolayca ekleyebilirsiniz. Bu, sıralama seçenekleriyle daha da kolaylaştı.

Kategori açılır menüsünü kullanarak blokları özel kullanımlarına göre filtreleyebilirsiniz.

Sayfama eklendikten sonra bloklardan biri şöyle görünür:

Gördüğünüz gibi, sütun yapısından metne bloğun her yönünü düzenleyebilmeniz için widget'lardan oluşuyor.

Bloklar harikadır ve web sayfaları oluşturmayı çok daha kolay hale getirir, ancak bir sonraki özellik onları uçurur.

Önceden hazırlanmış sayfalar ekleyin

Açılır pencerenin içinde ayrıca bir Sayfalar sekmesi vardır. Üzerine tıklayın ve bu ekranı bulacaksınız:

Baktığınız şey, Elementor ile oluşturulmuş, önceden tasarlanmış yüzlerce sayfa. Sayfanıza hemen eklemek için bunlardan herhangi birine tıklayabilirsiniz.

Bu ne kadar şaşırtıcı?

Elbette, kendi tasarımlarınızı sıfırdan yaratabilirsiniz, ama dürüst olmak gerekirse, neden yapasınız? En hızlı ve en kolay yaklaşım, beğendiğiniz mevcut bir şablonu bulmak ve ardından onu sayfanıza eklemektir.

Bu süreç, Elementor ile web sayfaları oluşturmayı inanılmaz derecede hızlı, kolay ve eğlenceli hale getirir.

Elementor'un ücretsiz sürümü yalnızca birkaç şablon içerirken, Elementor Pro ile 200'den fazla şablonun kilidini açabilirsiniz.

Themeforest kısa süre önce kendi sitesinde Elementor Şablon Kitlerini başlattı ve orada çok daha fazla önceden tasarlanmış şablon ve blok bulabilirsiniz.

Ayrıca beğenebileceğiniz en iyi Elementor Şablon Kitlerinden oluşan bir koleksiyon hazırladım.

Bloklarınızı ve sayfalarınızı yeniden kullanın

Artık Elementor'un yapabileceklerinin çoğunu gördünüz, ancak ele alınması gereken bir özellik daha var.

Şimdiye kadar öğrendiklerinizi kullanarak özel sayfalar oluşturabilirsiniz. Ancak, Elementor ile bir sitenin tamamını oluşturmak veya müşteri web siteleri için kullanmak istiyorsanız, daha iyi bir iş akışına ihtiyacınız olacaktır. Şablonlar menüsü burada devreye girer.

Düzenleyicinin altında, değişikliklerinizi kaydetmek için kullanabileceğiniz yeşil Güncelle düğmesini göreceksiniz.

Yanındaki oka tıklarsanız, sayfayı yeni bir şablon olarak kaydetme seçeneğini göreceksiniz.

Tek yapmanız gereken ona bir isim vermek ve “Kaydet”e basmak.

Ardından, WordPress panosuna geri döndüğünüzde, şablonunuzu burada Şablonlar menüsünde listelenmiş olarak bulacaksınız:

Şablonları, eklendikleri sayfaları düzenlemeden burada oluşturabilir ve düzenleyebilirsiniz. Hatta Bölümler sekmesini ziyaret edebilir ve kendi sayfa bölümlerinizi oluşturabilirsiniz.

Ardından, bir sayfa üzerinde çalışırken, açılır penceredeki Şablonlarım sekmesinden önceden tasarlanmış sayfalarınızdan veya bloklarınızdan herhangi birini ekleyebilirsiniz.

Yalnızca bir veya iki açılış sayfası yapıyorsanız bu işlevselliğe ihtiyacınız olmayacak olsa da, müşteriler için siteler oluştururken vazgeçilmez hale gelir.

Elementor'u kullanmaya başlayın

Vay!

Bu uzun bir eğitimdi ve bir sürü yeni bilgi içeriyordu, ama umarım beğenmişsinizdir.

Elementor ile şunları yapabilirsiniz:

• Satış sayfaları yapın
• Normal sayfalar için güzel şablonlar oluşturun
• Tamamen özel web siteleri oluşturun

Karmaşık bir araç olmasına rağmen, geliştiriciler bunu sezgisel hale getirdiler ve "kodsuz web tasarımı" hedefine daha önce yapılmış diğer tüm ürünlerden daha etkili bir şekilde ulaştıklarını düşünüyorum.

İşleri daha ileri götürmek istiyorsanız Elementor Pro'ya ve içerdiği ek özelliklerden bazılarına göz atın:

Elementor Pro'ya göz atın →

Açılır pencereler, daha fazla widget ve hatta burada bahsetmediğim bir “tema oluşturucu” özelliği var.

Çok şey öğrendiysen, gitmeden önce lütfen bu makaleyi başka biriyle paylaş, okuduğunuz için çok teşekkürler!