Elementor 3.0 İncelemesi: Bilmeniz Gereken Her Şey

Bu Ağustos 2020'de Elementor ekibi, Elementor'un en yeni sürümünü yayınladı: Elementor 3.0. Kesin çıkış tarihi, resmi blog gönderisindeki duyuruya atıfta bulunarak 25 Ağustos civarındaydı. En yeni sürümün ilk sürümü, güncellemeden sonra bazı kullanıcılar sitelerinde bazı sorunlar yaşadığından bekledikleri gibi gitmedi. Birkaç saat içinde Elementor ekibi sorunları düzeltti ve daha yeni sürümleri yayınladı (çok hızlı yanıt için Elementor ekibine şapka çıkartın). Bu yazının yazıldığı tarihte (30 Ağustos 2020), mevcut en yeni sürüm Elementor Free için sürüm 3.0.3 ve Elementor Pro için sürüm 3.0.1'dir.

Elementor 3.0, bazı yeni özelliklerle birlikte geldiği düşünüldüğünde, tartışmasız büyük bir güncellemedir. Elementor tarafından bu sürümde sunulan temel özellikler:

• Tasarım Sistemi
• Tema Stili
• site ayarları
• Yepyeni Tema Oluşturucu

Bu makalede, Elementor 3.0 tarafından sunulan yeni özellikleri ve bunların bir web sitesini yaptırırken zamandan tasarruf etmenize nasıl yardımcı olabileceğini ayrıntılı olarak ele alacağız.

Elementor 3.0'daki yeni özellikler?

Elementor 3.0, tek bir ana misyonla piyasaya sürüldü: profesyonel web tasarımcılarının (ve geliştiricilerin) projelerini profesyonel ve verimli bir şekilde daha hızlı tamamlamalarına yardımcı olmak. Görev, Elementor 3.0'da tanıtılan özelliklerden biri olan bir Tasarım Sistemi sunarak gerçekleştirilir. Bu özellik (Tasarım Sistemi) birkaç bileşenden oluşur. Tipografiyi, renkleri, site kimliğini, düzenini ve ışık kutusunu Global Ayarlar paneli adı verilen tek bir yerden kontrol etmenizi sağlar.

Bu arada, yepyeni Tema Oluşturucu özelliği, web sitenizin her bir bölümünü (başlık, altbilgi, tek gönderi düzeni, arşiv, 404 sayfa, WooCommerce sayfaları) tek bir ekranda kontrol etmenize olanak tanır.

İşte Elementor 3.0 tarafından sunulan yeni özellikler. Lütfen bu yazıda görünen alanları ele almaya odaklanacağımızı unutmayın. Kanıtlanması karmaşık testler gerektireceğinden (versiyon 3.0'da da söz verilen) performans iyileştirmeleri konusunu ele almayacağız.

Tasarım Sistemi

Bu, özellikle kendiniz için web siteleri oluşturuyorsanız, sizin için garip bir terimdir. Tasarım Sistemi Nedir?

Terimi anlamayı kolaylaştırmak için size kısa bir hikaye anlatalım. Profesyonel dünyada – bazı durumlarda – web tasarımcıları tasarım konseptini yalnızca Sketch, Figma, Adobe XD veya benzer bir uygulama gibi bir tasarım uygulaması kullanarak oluşturur. Tasarım konsepti (genellikle Stil Rehberi olarak adlandırılır) tipografi, renk şeması, düğme formları ve tasarımın diğer öğelerinin kullanımını yönetir. Tasarım konseptinin uygulanması geliştirici ekibin sorumluluğundadır.

Şimdi web sitesinin onlarca sayfadan oluştuğunu hayal edin. Tasarım konseptinde bazı revizyonlar varsa sayfaların revize edilmesi ne kadar sürer. Üstbilgi veya altbilgi gibi diğer kısımlardan bahsetmiyorum bile. Tasarım Sistemi bu şekilde devreye girer. Sayfalardaki değişiklikleri (renk, tipografi vb.) tek bir yerden yapabilirsiniz. Sitedeki tüm sayfalara tek bir değişiklik uygulanacaktır.

Tasarım Sistemi kavramı ayrıca web sitenizin tutarlı bir renk şemasına ve tipografisine sahip olmasını sağlar. Konsept ayrıca bir web sitesi oluşturmak için basitlik sunar; bu, bir web ajansı veya serbest çalışan bir web tasarımcısı/geliştiricisi için çalışıyorsa harikadır.

Elementor'un Tasarım Sisteminin kendisi 2 bileşenden oluşur: Global Renkler ve Global Yazı Tipleri. Elementor düzenleyicisinin sol üst köşesindeki üç çizgili simgeye (hamburger simgesi) tıklayarak Elementor Global Ayarlar panelinden bunlara erişebilirsiniz.

Gördüğünüz gibi, Global Ayarlar paneline eriştiğinizde, YAYINLA/GÜNCELLE düğmesi maviye (yeşilden) dönecektir. Mavi GÜNCELLEME düğmesi Genel Ayarlar panelinde olduğunuzu gösterirken yeşil YAYINLA/GÜNCELLE düğmesi normal Elementor ayarları panelinde olduğunuzu gösterir.

Bu arada, Tasarım Sistemi hem Elementor Free hem de Pro için mevcuttur. Elementor Tasarım Sisteminin bileşenleri şunlardır:

Küresel Renkler

Bir web sitesi oluştururken uygun bir renk seçmek zor işlerden biridir. Web tasarımında (ve genel olarak diğer tasarımlarda) renk, marka kimliğini temsil eder. Bir markayı gerçekten temsil eden bir renk şemasına sahip olmak için tasarımcılar genellikle renk kombinasyonları ile bazı deneyler yaparlar. Web tasarımı bağlamında, çok fazla zaman harcayacağı için tüm sayfaları yalnızca yeni rengi uygulamak için düzenlemek hiç de komik değil.

Elementor'un Global Renkler özelliği, tek bir yerden aynı anda birkaç sayfaya yeni renk uygulamanıza olanak tanır. Sayfalar zaten yayınlanmış olsa bile. Veya yeni rengi bir sayfanın bazı bölümlerine de uygulayabilirsiniz.

Global Renkler nasıl kullanılır?

Elementor, 4 varsayılan global renk sunar ve ayrıca yenilerini kendiniz de oluşturabilirsiniz. Yeni bir global renk oluşturmak için Elementors ayarları panelindeki hamburger simgesine tıklayarak Global Ayarlar panelini açın. Site Ayarları'nı seçin.

Global Ayarlar paneli açıldığında, TASARIM SİSTEMİ bölümünde Global Renkler'e tıklayın.

Yeni bir genel renk ayarlamak için RENK EKLE düğmesini tıklayın. Her bir global rengi tanımlamanızı kolaylaştırmak için yeni global renginize ad verebilirsiniz. Yeni global renkler oluşturmayı bitirdikten sonra mavi GÜNCELLE düğmesini tıklayın.

Bir tasarım öğesinde global bir renk kullanmak için yeni bir widget ekleyebilir veya mevcut bir tane düzenleyebilirsiniz. Rengi, her zamanki gibi Stil sekmesinden değiştirin. Küre simgesine tıklayın ve mevcut küresel renklerden birini seçin.

Widget'lara ek olarak, bir sütunun, bölümün ve Elementor'un diğer tasarım öğelerinin arka plan rengi olarak global bir renk de kullanabilirsiniz.

Global bir rengin rengini değiştirmek için Global Ayarlar paneline gidip beğendiğiniz yeni rengi seçmeniz yeterlidir. Değişiklik (yeni renk), ilişkili global rengi kullanan tüm tasarım öğelerine uygulanacaktır. Tek bir tıklamayla!

Genel Yazı Tipleri

Renkle aynı şekilde, yazı tipi de bir web sitesinin marka kimliğini temsil edebilir. Bu nedenle, web sitesi oluşturma söz konusu olduğunda yazı tipi seçimi de çok önemli bir adımdır. Elementor'da tipografi ayarlarını içeren bazı widget'lar vardır. Başlık pencere aracından, Metin Düzenleyici pencere aracından, Düğme pencere aracından, Form pencere aracından vb.

Renk düzenine ek olarak, iyi bir web sitesi, tutarlı bir tipografi ayarına, özellikle de yazı tipi ailesine sahip olandır. Başlık metni gibi belirli bölümler için, başlık metni içeren tüm sayfalarda aynı tipografi ayarını kullanabilirsiniz. Genel bir yazı tipi kullanmak, belirli bir bölümün tipografisini, örneğin başlık metnini tüm sayfalarda aynı anda değiştirmenize olanak tanır. Tıpkı küresel bir renk gibi. Tipografi ayarını Global Ayarlar panelinden değiştirebilirsiniz.

Global Fontların kullanımı Global Colors'a oldukça benzer. Global Ayarlar panelini açıp Global Fontlar'ı seçebilirsiniz. Varsayılan olarak, seçebileceğiniz 4 genel yazı tipi vardır. Genel bir yazı tipini düzenlemek için, ilgili genel yazı tipindeki kurşun kalem simgesini tıklamanız yeterlidir.

Yazı tipi ailesi, yazı tipi boyutu, yazı tipi ağırlığı, yazı tipi stili gibi şeyleri ayarlayabilirsiniz. Her yeni değişiklik yaptığınızda mavi GÜNCELLE düğmesine tıklamayı unutmayın.

Genel bir yazı tipi kullanmak için Başlık pencere aracı, Metin Düzenleyici pencere aracı, Düğme pencere aracı vb. gibi bir tipografi ayarı seçeneğine sahip bir pencere aracını ekleyebilir veya düzenleyebilirsiniz. Tipografi seçeneğinde, küre simgesine tıklayın ve kullanmak istediğiniz genel yazı tipini seçin.

Artık sitenizdeki belirli bir sayfa bölümünün tipografi ayarını değiştirmek için Genel Ayarlar paneline gidebilirsiniz. Değişiklik, ilişkili global yazı tipini kullanan tüm sayfalara uygulanacaktır.

Tema Stili

Tema Stili, işleri daha hızlı halletmek için iş akışınızı kolaylaştıran başka bir özelliktir. Bu özelliğe Global Ayarlar panelinden de erişebilirsiniz. Bu özellik, dört tasarım öğesi için hazır ayarlar oluşturmanıza olanak tanır:

• tipografi
• Düğmeler
• Görüntüler
• Form alanları

Yukarıda daha önce bahsettiğimiz gibi, bazı web geliştiricileri bir Stil Kılavuzuna dayalı olarak çalışır. Elementor Tema Stili özelliğiyle, yukarıdaki listede yer alan dört temel öğe için ön ayarlar oluşturabilirsiniz. Örneğin, düğme öğesi için bir ön ayar oluşturabilirsiniz. Bu şekilde, herhangi bir sayfaya veya sayfanın belirli bir bölümüne bir düğme öğesi eklemek istediğinizde, stili sıfırdan ayarlamanız gerekmez. Zamandan tasarruf!

Tema Stili, Global Renkler ve Global Yazı Tiplerinden farklı bir şekilde çalışır. Birbirleriyle bağlantılı değiller. Belirli bir sayfada belirli bir pencere öğesinde bazı değişiklikler yapabilirsiniz ve değişiklikler diğer sayfalardaki pencere öğelerini etkilemez.

Bir ön ayar oluşturmak için Global Ayarlar paneline gidebilirsiniz. THEME STYLE bloğunda ön ayarını oluşturmak istediğiniz bir öğe seçin. Öğeyi şekillendirmeyi tamamladığınızda ön ayarı güncellemek için mavi GÜNCELLE düğmesini tıklayın.

site ayarları

Sürüm 3.0, Elementor'a yalnızca bir sayfa oluşturucu yerine eksiksiz bir WordPress tabanlı site oluşturucu aracı olmak için başka bir görevde ısrar ediyor. Kullandığınız WordPress teması ne olursa olsun, site kimliği (site adı, site açıklaması, site logosu ve favicon), varsayılan arka plan, varsayılan düzen ve ışık kutusu gibi bazı önemli şeyleri ayarlayabileceksiniz. Elementor Pro kullanıyorsanız, sayfalar üzerinde çalışmaya başlamadan önce özel CSS de ayarlayabilirsiniz.

Yukarıda bahsedilen tüm işlemleri, Global Ayarlar panelinden de erişebileceğiniz Site Ayarları üzerinden yapabilirsiniz.

Elementor Site Ayarları özelliği, WordPress tema özelleştiricisine oldukça benzerdir ( Görünüm -> Özelleştir ). Bu yeni özellik sayesinde, WordPress tabanlı web sitenizin temel öğelerini Elementor aracılığıyla kontrol edebilirsiniz.

Yeni Tema Oluşturucu

Elementor'un en popüler sayfa oluşturucu eklentisi haline gelmesinin nedenlerinden biri (5 etkin yükleme ve tabii ki hala sayılıyor) Tema Oluşturucu özelliğiyle birlikte gelmesidir. Bu özellik, üstbilgi, altbilgi, tek gönderi şablonu, arşiv sayfaları, WooCommerce sayfaları vb. gibi site bölümleri için özel şablonlar oluşturmanıza olanak tanır. Bunu tek bir kod satırına dokunmadan yapabilirsiniz. Elementor'un son derece sezgisel düzenleyicisi ile her şey sürükle ve bırak şeklindedir.

Tema Oluşturucu, Elementor 2.0'da (2018'de piyasaya sürüldü) tanıtıldı. 3.0 sürümünden önce, Tema Oluşturucu'ya WordPress panosu aracılığıyla Şablonlar -> Tema Oluşturucu'ya giderek erişilebilir. 3.0 sürümünde, Theme Builder'a aynı yoldan erişmeye devam edebilirsiniz, ancak aşağıdaki gibi yepyeni bir arayüz göreceksiniz:

Elementor 2.x'te, Tema Oluşturucu özelliğine erişirken size aşağıdaki arayüz sunulacaktır.

Elementor 3.0'daki Tema Oluşturucu arayüzü, eski sürümlerden çok daha iyi. Yukarıdaki GIF'de görebileceğiniz gibi, sol paneldeki her sekmeye tıkladığınızda tema bölümleriniz görsel olarak önizlenir. Buradan ayrıca mevcut özel şablonları doğrudan düzenleyebilir, dışa aktarabilir, silebilir veya yeniden adlandırabilirsiniz.

Yeni bir şablon oluşturmak için, özel şablonu oluşturmak istediğiniz tema bölümündeki mavi artı düğmesine tıklamanız yeterlidir. Veya sağ üst köşedeki Yeni Ekle düğmesini de tıklayabilirsiniz.

Bu arada, yeni Tema Oluşturucu ayrıca, sitenizin diğer bölümlerine hızlı bir şekilde belirli bir şablon atamanıza olanak tanıyan bir anında görüntüleme koşulu düzenlemesi sunar. Konsept, WordPress'in Hızlı Düzenleme varsayılan özelliğine oldukça benzer.

İyi olan şey, Elementor'un şablonların oluşturma sürecini değiştirmemesidir. Şablonu yine de Elementor sezgisel düzenleyici aracılığıyla oluşturabilirsiniz. İşiniz bittiğinde, yine de önceki gibi görüntüleme koşulunu ayarlayabilirsiniz. Yeni Tema Oluşturucu, şablonlarınızı oluşturma şeklinizi değil, yalnızca nasıl düzenlediğinizi değiştirir.

Yeni Elementor Theme Builder gerçekten çok ileride, başka bir şey.

Karar — Elementor 3.0 İnceleme

Elementor 3.0 büyük bir sürümdür. Web sitesi oluşturmadaki geleneksel kalıpları kırmak için bazı yeni özellikler getiriyor. Her şey aynı yerde sağlandığı için sitenizi oluşturmak için herhangi bir yere gitmenize gerek yok: Genel Ayarlar paneli. Bu panelden, aşağıdakiler dahil yukarıda ele aldığımız her şeye erişebileceksiniz:

• Yeni Tema Oluşturucu
• Site Ayarları (Site kimliği, düzen, ışık kutusu, arka plan, özel CSS)
• Tasarım Sistemi (Global Renkler ve Global Fontlar)

Elementor 3.0 harika bir sürüm. WordPress ile bir web sitesi oluşturmanın yeni, yaratıcı ve daha verimli bir yolunu sunar.

Bu sürümle yerine getirilmemesini beklediğimiz bir şey var. Tek bir gönderi şablonu oluşturduğumuzda, Elementor 3.0'ın gönderi içeriğini (İçerik Gönderi widget'ı aracılığıyla) özelleştirmek için daha fazla kontrol sunacağını gerçekten umduk. Başlık öğelerinin (h2, h3, h4, h5) tipografisini kontrol edebileceğimizi umduk. Şu anda sadece ana gövde metninin tipografisini kontrol edebiliyoruz.

Ancak genel olarak, Elementor 3.0 harika bir sürüm. Bir web sitesi oluşturmanın yeni, yaratıcı, daha verimli ve eğlenceli bir yolunu sunar. Bu sürüm, Elementor'u rakiplerinin çok önüne koyuyor.

Son bir şey. Elementor 3.0 büyük bir sürüm olduğundan, güncelleme sırasında veya sonrasında yanlış bir şey olması ihtimaline karşı, güncellemeden önce sitenizi yedeklemenizi şiddetle öneririz.