Birkaç yıl önce web sitesi oluşturmak için kod bilmek ya da bir developer ile beraber çalışmak gerekiyordu. Günümüzde ise web sitesi oluşturmak için nasıl kod yazılacağını bilmek gerekli değil. Elementor gibi sayfa oluşturma araçları, kod bilgisi olmayanların istedikleri gibi bir WordPress sitesi oluşturmasını kolaylaştırır. Bu yazımda Elementor kullanımı hakkında bilgi verecek ve işinizi kolaylaştıracak ipuçlarından bahsedeceğim.
Elementor Nedir?
Elementor, WordPress’te kullanılabilen bir sürükle-bırak sayfa oluşturucusudur. Bu eklenti, görsel bir düzenleyici kullanarak sayfa oluşturmanıza yardımcı olur. Ayrıca web sitesi tasarımınızın her bölümünü tek bir platformda kontrol etmenizi sağlar. Bu sayede web sitenizi markanıza uyacak şekilde özelleştirebilirsiniz.
Üstelik Elementor, herkes tarafından kolaylıkla kullanılabilir. Teknoloji konusunda bilgili değilseniz görsel düzenleyici size düğmeler, yıldız derecelendirmeleri ve ilerleme çubukları gibi içerik oluşturmak için 90’dan fazla widget’tan herhangi birini sürükleme esnekliği sunar.
Elementor Pro vs. Elementor Free
Elementor’un ücretsiz sürümü, sınırsız tasarım olanakları sunar. Ancak Elementor Pro, iş akışınızı hızlandıran ve daha fazla dönüşüm ve satış elde etmenizi sağlayan daha profesyonel araçlarla web sitenizi güçlendirir. Bu açıdan Elementor Pro aşağıdaki özellikleri sunar:
- Theme Builder, temanızın her bölümünü özelleştirmenizi sağlar: Üstbilgi, altbilgi, arşiv sayfası, tekli gönderiler ve sitenizin diğer tüm bölümlerini Elementor kullanarak görsel olarak tasarlayabilirsiniz. Bu, herhangi bir WordPress temasında çalışır ve kodlama gerektirmez.
- Formları görsel olarak tasarlayabilir ve sorunsuz bir şekilde entegre edebilirsiniz: Elementor Pro’nun Forms Widget‘ı size büyük bir kolaylık sağlar çünkü formları yönetme sürecinin tamamı görseldir. Formlarınızı front-end’de tasarlayabilir ve ardından birkaç tıklama ile bunları herhangi bir CRM’ye bağlayabilirsiniz.
- Profesyonel şablonlar ve bloklar. Elementor Pro, çarpıcı web siteleri oluşturmak için kolayca özelleştirilebilen, profesyonelce yapılmış çok daha fazla şablon ve blok sunar. Şablonlar ve bloklar Pro pencere öğelerini entegre eder, böylece slaytlar, animasyonlu başlıklar, formlar ve diğer önemli Elementor Pro özelliklerini içeren sayfalar oluşturabilirsiniz.
Elementor Nasıl Yüklenir?
Elementor eklentisini WordPress sitenize eklemek için Eklentiler > Yeni Ekle > Elementor Website Builder > Şimdi Kur > Etkinleştir adımlarından geçmeniz yeterlidir. Eğer Elementor Pro satın aldıysanız bir sonraki adımlarınız aşağıdaki gibi olmalıdır:
Elementor Pro’yu satın aldıktan sonra my.elementor.com adresine gidin.
- Hesabınıza giriş yapın.
- Giriş yaptıktan sonra profil sayfanıza ulaşacaksınız. Sağ üst köşede bulunan “İndir” düğmesine tıklayın ve .zip dosyasını masaüstünüze indirin.
- Sonrasında sitenizin WordPress panosuna gidin ve Eklentiler > Yeni Ekle seçeneğine tıklayın.
- Az önce indirdiğiniz zip dosyasını seçin. “Kur” seçeneğine tıklayın ve eklentiyi etkinleştirin.
- Bu aşamada sitenizin panosunun üstünde lisans anahtarınızı etkinleştirmenizi söyleyen bir mesaj almanız gerekmektedir. Bunun için sol listede Elementor > Lisans seçeneğine tıklayın.
- Son olarak “Bağlan” seçeneğine ve “Etkinleştir” seçeneğine tıklayın.
Not: Elementor Pro eklentisinin çalışması için ilk yüklediğimiz eklentinin de etkinleştirilmiş bir durumda olması gerekmektedir. Aksi takdirde Elementor Pro eklentisini kullanamazsınız.
Elementor Kullanımına Dair Bilgiler
Elementor ile bir sayfa oluşturmak için ilk olarak Sayfalar > Yeni Ekle seçeneğini seçmeniz ve ardından oluşturacağınız sayfanın adını girmeniz gerekmektedir. Ardından görselde gördüğünüz “Elementor ile düzenleyin” seçeneğini seçerek sayfanızı Elementor ile tasarlayabilirsiniz.
Karşınıza açılacak olan pencerede boş bir sayfa ile karşılaşacaksınız. Burada 2 seçeneğiniz mevcut. Dilerseniz “+” tuşuna tıklayarak sütununuz yapısını seçip Elementor’un elemanlarını elle yerleştirebilir, dilerseniz de “Klasör” görseline tıklayarak hazır şablonlardan yararlanabilirsiniz. Eğer hazır şablonlardan yararlanmak istiyorsanız burada 3 seçeneğiniz olacaktır.
“Bloklar” alanı sayfanızı çeşitli bloklar ile tasarlamanızı sağlar. Diğer bir ifadeyle burada yer alan hazır blokları tek tek ekleyerek kendinize bir sayfa tasarlayabilirsiniz. Örneğin; “SEO Hizmeti” için bir landing page oluşturacaksanız burada yer alan bloklardan “Our Clients”, “FAQ”, “Features”, “Contact” bloklarını seçerek tam bir sayfayı bir araya getirebilirsiniz. Blokların en güzel yanı farklı tasarımlarda olması ve tasarım açısından sizi daha özgür bırakmasıdır.
“Sayfalar” alanında ise bloklardan ziyade tam bir sayfa görürsünüz. Örneğin; “Hakkımızda” sayfası oluşturacaksanız burada yer alan sayfalardan birini seçerek kendinize göre özelleştirebilirsiniz. Seçtiğiniz şablonu ise şablonun sol altında yer alan “Ekle” butonuna tıklayarak ekleyebilirsiniz.
Son seçeneğiniz ise “Şablonlarım” seçeneğidir. Burada daha önceden oluşturmuş olduğunuz sayfaların şablonlarını görebilirsiniz. Örneğin; birden çok landing page hazırlayacaksanız ve hepsinin tasarımı aynı olacaksa hazırladığınız bir sayfayı şablon olarak kaydedip daha sonraki landing pageleriniz için kullanabilirsiniz.
Yukarıdaki adımları tamamladıysanız şimdi bir sayfa oluşturabilirsiniz. Ancak sayfa oluşturmadan önce bilmeniz gereken bazı temel özellikler var:
Herhangi bir elemanı düzenlemek istediğinizde karşınıza “İçerik”, “Biçem” ve “Gelişmiş” olarak 3 seçenek çıkar. “İçerik” alanında metin ekleyebilir, görsel seçebilir, video yükleyebilir ya da simge seçebilirsiniz. Kısacası bu alan içeriğin kendisini düzenleyeceğiniz alan olacaktır. “Biçem” alanında ise metnin rengini, tipografisini, hizasını veya görselin genişliğini, uzunluğunu vb. biçemsel özelliklerini düzenleyebilirsiniz. “Gelişmiş” alanı ise elemanlara kenar veya dolgu verebileceğiniz, arka plan ya da kenarlık ekleyebileceğiniz, masaüstü, tablet ya da mobilde gizleyebileceğiniz daha teknik özellikleri içerir.
Eğer herhangi bir elemanı düzenleme aşamasında değilseniz sol menüde “Elemanlar”, “Genel” ve “SEO” olarak 3 alan görürsünüz. “Elemanlar” alanı sayfanıza ekleyebileceğiniz başlıklar, görseller, metinler, videolar, simgeler, formlar ve diğer birçok elemanı içerir. Eğer sayfanıza bir görsel eklemek istiyorsanız bu listeden “Görsel” elemanını tutup sürükleyerek ilgili alana bırakabilirsiniz. “SEO” alanında ise içeriğinizin odaklandığı bir anahtar kelimesi varsa bunu ekleyip içeriğinizin temel SEO koşullarını karşılayıp karşılamadığını görebilir ya da snippet’ı düzenleyebilirsiniz.
Sol alanda bulunan menüdeki “Ayarlar” sekmesi sayfanızın başlığını ayarlamanıza, başlığınızı sayfada gizlemenize ya da öne çıkan bir görsel belirlemenize yardımcı olur.
Yine bu alanda bulunan “Geçmiş” sekmesi yaptığınız düzenlemeleri görmenizi sağlar.
“Duyarlı Mod” alanı ise sayfanızın mobilde, tablette ve masaüstünde nasıl göründüğünü gösterir ve responsive bir tasarım oluşturmanıza yardımcı olur.
“Yayımla” seçeneğinin yanında bulunan ok işareti ise sayfanızın taslak ya da şablon olarak kaydetmenizi sağlar.
Elementor’un Temel Elemanları
Bir sayfa oluşturmadan önce Elementor’un elemanlarına aşina olmanız önemlidir. Bu sayede Elementor kullanımı daha da kolaylaştırabilirsiniz.
İç Bölüm
İç bölüm, elemanları ekleyebileceğiniz bir bölüm sunar. Varsayılan olarak bu alan 2 sütunlu şekilde gelebilir. Ancak sütunlardan birinin üstüne gelip “Yeni Sütun Ekle” seçeneğine tıklarsanız sütun sayısını dilediğiniz gibi çoğaltabilirsiniz. Ayrıca iç bölümün biçem ayarlarında bir arka plan rengi seçebilir, arka plan için görsel ekleyebilir, şekil bölücü seçebilir ya da kenarlık ayarlayabilirsiniz.
Başlık, Görsel, Video ve Metin Düzenleyici
Başlık, sayfanız için belirlediğiniz bir metin olabilir. Örneğin; “SEO Hizmeti” için bir sayfa oluşturuyorsanız başlığınızı “SEO Hizmeti” olarak girebilirsiniz. Böyle bir sayfa için bir paragraf eklemeyi düşünüyorsanız bunu ise “Metin Düzenleyici” elemanı ile yapabilirsiniz. Ardından “Görsel” ya da “Video” elemanları ile sayfanızı tasarımsal olarak zenginleştirebilirsiniz.
Düğme ve Simge
“Düğme” elemanı herhangi bir sayfaya link vermek istediğiniz zaman kullanabileceğiniz bir eleman. Örneğin; bir landing sayfasında “Hemen Teklif Al” ya da “Şimdi Formu Doldurun” gibi CTA’ler için ziyaretçileri form sayfanıza yönlendirmek istiyorsanız bu elemandan yararlanabilirsiniz. Eğer bu elemanı görsel olarak zenginleştirmek isterseniz “Simge” elemanını kullanarak CTA’ye uygun bir simge seçebilirsiniz. Bu açıdan Elementor Pro, yüzden fazla simgeye sahiptir.
Bölücü ve Ayırıcı
Aslında “Bölücü” ve “Ayırıcı” elemanları aynı işlevi görür ancak tasarımsal olarak farklı çalışırlar. “Bölücü” arasına boşluk koymak istediğiniz iki sütun arasına eklenir ve renkli bir görünüme sahiptir. “Ayırıcı” ise yine boşluk koymak için kullanılır ancak bu boşluk görünmez. Örneğin; görselde çevresi açık mavi olan alanda bir ayırıcı vardır. Ancak bu alanının hemen üstünde bulunan lacivert çizgi bir bölücüdür.
Elementor’un Genel Elemanları
Elementor’un genel elemanları aşağıdaki gibidir:
- Görsel Kutusu: Bu eleman, bir görsel, başlık ve metin içerir.
- Simge Kutusu: Bu eleman, bir simge, başlık ve metin içerir.
- Yıldız Derecelendirmesi: Yıldız derecelendirmesi ile hizmet ya da ürünlerinizin genel beğeni oranını gösterebilirsiniz.
- Resim Döngüsü: Bu alana eklenen görseller, carousel şeklindedir ve otomatik olarak oynatılabilir.
- Temel Galeri: Bu alana eklenen görsellerin hepsi tek bir alanda görünür.
- Simge Listesi: Simge listesi ile hizmetiniz ya da ürününüzün öne çıkan özelliklerini listeleyebilirsiniz.
- Sayaç: Belirli bir sayıdan başlatarak bir sayaç ayarlayabilirsiniz. Örneğin; “100 Mutlu Müşteri”, “150 Tamamlanan Proje” gibi alanlar oluşturabilirsiniz.
- İlerleme Çubuğu: Hakkımda gibi alanlarda kullanılabilen ilerleme çubuğu, yeteneklerinizi daha estetik bir şekilde göstermenize yardımcı olur.
- Görüş: Müşteri yorumlarını görüş elemanı ile öne çıkarabilirsiniz.
- Sosyal Simgeler: Özellikle header ya da footer alanında kullanılan sosyal simgeler, sosyal medya hesaplarınıza link vermenizi sağlar.
Elementor Pro ile Site Yapımı
Elementor kullanımı ile web sitesi oluşturmak için Elementor tarafından hazırlanan eğitim videosundan yardım alabilirsiniz.
Elementor Kullanımını Kolaylaştıracak İpuçları
1. Şablon Oluşturun
Blog, ürün ya da landing sayfaları için bir şablon oluşturmak işinizi fazlasıyla kolaylaştıracaktır. Tasarımsal olarak aynı olmasını istediğiniz sayfalarda kaydettiğiniz bu şablonu sayfaya ekleyerek sadece görsel ya da metinleri değiştirebilirsiniz. Bunun yanı sıra Elementor’un şablon kitaplığı, önceden tasarlanmış şablonlar ile doludur ve sayfalarınızı tasarlamak için kolay bir çözüm sunar.
2. Kısayolları Kullanın
Klavye kısayollarını kullanarak kazandığınız süre, özellikle aynı eylemleri Elementor’da tekrar tekrar gerçekleştirdiğinizde hızla artabilir. Kopyalama, Yapıştırma ve Geri Alma gibi görevleri hızlı bir şekilde yürütmenin yanı sıra Elementor’un kısayol tuşları, özelliklere hızla erişmenizi ve eylemler gerçekleştirmenizi sağlar.
Elementor’un klavye kısayolları listesine erişmek için:
- Mac’te CMD ve ?’ne basılı tutun.
- PC’de Ctrl ve ?’ne tuşunu basılı tutun.
3. Renk Paleti Belirleyin
Bir web sitesi tasarlarken, genellikle tasarım için tekrarlanacak bazı renk kombinasyonları vardır. Bunun için her seferinde renk paletinden renk seçmek veya renk kodunu girmek çok zaman alabiliyor.
Ayarlara gidip oradaki palete renkleri ekleyerek istediğiniz zaman renk seçiciye renklerinizi ekleyebilirsiniz. Özel renginizi renk paletine eklediğinizde, renk paletinde her zaman bu renkler görünecektir.
4. Yazı Fontlarını Ayarlayın
Sitenizde yalnızca iki veya üç yazı tipi olsa bile, CTA’lar, farklı başlık düzeyleri, gezinme menüleri, altbilgi metni vb. gibi sitedeki farklı öğeler için geçerli olan ek yazı tipi stillerine sahip olabilirsiniz. Bu nedenle genel yazı tiplerinizin de biraz düzenlenmesi gerekebilir.
Yazı tiplerini şuna göre sıralayabilirsiniz:
- Kullanım sıklığı: En sık kullandığınız fontu yukarıya doğru yerleştirebilirsiniz.
- Alfabetik sıra: Çok sayıda fontunuz varsa ve adlarına göre bulmanın daha kolay olacağını düşünüyorsanız alfabetik bir sıralama tercih edebilirsiniz.
- Kullanım tipi: Örneğin başlık yazı tiplerini metin yazı tiplerinden ayrı gruplandırabilirsiniz.
5. Kendi Simgelerinizi Yükleyin
Elementor’ta kullanabileceğiniz büyük bir simge koleksiyonu vardır Ancak kalabalığın arasından sıyrılmak istiyorsanız kendi simgelerinizi de kullanabilirsiniz. Bunun için Elementor > Custom Icons alanına gelip simgelerinizi .svg formatında yükleyebilirsiniz.
6. Kılavuz Özelliğinden Yararlanın
Kılavuz, temel olarak küçük bir panelden tüm sayfanızda gezinmenizi sağlar. Kılavuzu açmak için herhangi bir elemana sağ tıklayıp Kılavuz’u seçmeniz yeterlidir. Bu sayede herhangi bir öğeye tek tıkla erişebilirsiniz. Ayrıca tüm elemanları tek bir bölümde görebilir ve doğrudan silebilirsiniz.