Elementor 3.10 Tanıtımı – Yeni İç İçe Öğeler – Elementor pencere öğeleriyle Tasarımın Geleceği

Elementor ve Elementor Pro 3.10, web sitelerinizi Nested Elements ile tasarlama söz konusu olduğunda yepyeni bir yaratıcılık dünyasının kilidini açacak yeni tasarım yetenekleri içerir ve boyutlandırma kontrollerinde daha yüksek bir doğruluk düzeyine ulaşmanızı sağlayacak yeni bir özel birim sunar. web sitelerinizi tasarlamaya geliyor. Bu sürümler ayrıca kapsayıcı tabanlı yeni bir kitaplık ve performans iyileştirmeleri içerir.

Web Sitenizin Tasarımını Yükseltecek Yeni İç İçe Öğeler

Nested Elements, web sitenizin tasarımını kavramsallaştırmanın tamamen yeni bir yolunu açar. Nested Elements ile Flexbox Container'ların gücünden yararlanarak herhangi bir öğeyi diğerinin içine yerleştirebilirsiniz. İç İçe Öğeler ile bir Kapsayıcıyı diğerinin içine yerleştirip sonsuz şekilde iç içe yerleştirmenize benzer şekilde, herhangi bir öğeyi (widget veya kapsayıcı) diğerinin içine yerleştirebilirsiniz.

Flexbox Konteynerleri resmi olarak istikrarlı olduğundan, gelecek sürümlerde Yuvalama özelliğini Atlıkarınca, Akordeon, Sekmeler ve daha fazlası gibi mevcut bir dizi widget'a dahil edeceğiz. Ayrıca Mega Menü gibi tamamen yeni Yuvalanmış pencere öğelerini de tanıtacağız.

Yenilenmiş Sekmeler Widget'ı Tanıtımı - Tasarım esnekliğinin kilidini açan ilk Elementor iç içe widget'ı

Yeni Sekmeler widget'ı ile tasarım yaratıcılığınızı serbest bırakabilecek ve üst düzey bir karmaşıklığa ulaşabileceksiniz. Yeni Sekmeler pencere öğesi, kapsayıcı tabanlıdır ve orijinal Sekmeler pencere öğesiyle karşılaştırıldığında üç ana iyileştirme içerir:

• Sekmeler ve Başlıklar – Yeni Sekmeler widget'ını kullanarak, sekmelerin içeriğine göre nerede konumlandıklarını (üstte, altta veya kenarlarından birinde) belirlemek için sekmelerin düzenini ve konumunu ayarlayabileceksiniz. Ek olarak, sekme başlığına simgeler ekleme yeteneği de dahil olmak üzere daha fazla stil seçeneğine sahip olacaksınız.
• Yeni İçerik Alanı – Flexbox Kapsayıcılarının gücüyle, her Sekmenin içerik alanı, içine herhangi bir öğe yerleştirebileceğiniz, düzenini ayarlayabileceğiniz ve istediğiniz herhangi bir içeriği sunabileceğiniz bir ana kap haline gelecektir – tıpkı boş tuval gibi. Editör.
• Yeni Duyarlı Ayar – Cihaz boyutuna göre tasarım ve kullanıcı deneyimini geliştirmek için Sekmenin otomatik olarak bir Akordeon olarak görüntüleneceği kesme noktasını seçebilirsiniz. Bu, her cihaz için farklı içerik oluşturmanız gerekmediği anlamına gelir ve bu da performansı artırır.

Sekmeler widget'ı kapsayıcı tabanlı olduğundan web sitenizde kullanmak için Flexbox Container ve Nested Elements deneylerinin etkinleştirildiğinden emin olmanız gerekir. Etkinleştirildiğinde, yeni Sekmeler widget'ı otomatik olarak widget panelindeki mevcut sekmenin yerini alacaktır (bu, web sitenizdeki mevcut sekmelerin tasarımını etkilemeyecektir).

Yeni Özel Birimler – CSS Matematik İşlevleri Dahil İstediğiniz Birimi Seçin

Editör'deki sayısal kontroller bir yükseltme alıyor ve artık istediğiniz herhangi bir birimi seçebilir, sayısal birimleri karıştırabilir ve bunların içinde CSS işlevi hesaplamaları yapabilirsiniz. Editör'deki birçok öğe, dolgu ve kenar boşlukları, yazı tipi boyutu ve daha fazlası gibi boyutlandırma seçenekleri içerir. Bu boyutlandırma birimlerini akıllıca kullanmak, tasarım doğruluğu ve web sitesi yanıt hızı üzerinde olumlu bir etkiye sahip olabilir.

Önceden, örneğin dolguyu veya kenar boşluklarını ayarlıyorsanız, aşağıdaki birim türlerinden birini seçmeniz gerekirdi: PX, EM, REM, % veya VW. Bu güncellemeyle, birim seçimlerinizde daha spesifik olmak için özel seçeneği de seçebileceksiniz. Örneğin, kenarlar için PX'i ve üst ve alt için %'yi seçebilirsiniz. Ek olarak, bu güncellemeyle birlikte, yeni özel seçeneğe uyum sağlamak için birim etiketleri bir açılır listeye taşındı.

Özel seçeneğinin seçilmesi, değer giriş alanındaki bir değerin ölçümü için hesaplamalar yapmanıza da izin verir, bu şekilde daha fazla tasarım doğruluğu ve duyarlı destek elde edebilirsiniz.

Örneğin, tipografi boyutu kontrollerinde özel seçeneği belirlerken, tipografi boyutunuzu farklı cihaz boyutlarına göre ayarlamak için "clamp()" CSS işlevini veya hesaplamak için "calc()" CSS işlevini kullanabileceksiniz. birimleri ve daha fazlasını karıştıran bir değer ayarlayın.

Bu sürümün bir parçası olarak, aşağıdaki boyutlandırma kontrolleri özel seçenekler alacaktır:

• Konteynerler, Bölümler ve Sütunlar – özel genişlik, kenarlık vb. dahil olmak üzere mümkün olan her yerde.
• Tipografi kontrolleri – satır yüksekliği, harf aralığı ve kelime aralığı.

Ek alanlar da gelecekte güncellenecektir.

Kapsayıcı Tabanlı Tam Web Sitesi Kitleri, Şablonları ve Blokları

Beta olarak işaretlenen ve kararlı ve kullanıma hazır hale getiren Flexbox Kapsayıcılar ile size kapsayıcı tabanlı tam web sitesi kitleri ve şablonları sağlamak önemliydi. Son birkaç hafta içinde, Kitaplık ekibi eksiksiz bir kapsayıcı tabanlı kitaplık oluşturmak için çalıştı, böylece en güncel tasarım trendlerini kullanarak Flexbox Container deneyini etkinleştirirken web sitesi oluşturma ve tasarım sürecinizi başlatabilirsiniz. .

Artık web sitenizde Flexbox Container denemesini etkinleştirdiğinizde tamamen yeni bir kit ve şablon kitaplığına sahip olacaksınız. Güncellemeler ayrıca, bölüm tabanlı düzenden Flexbox Konteynerlerine dönüştürülmüş düzinelerce en popüler tam web sitesi kitleri ve sayfa şablonlarının yanı sıra yepyeni Web Sitesi Kitleri ve sayfa Şablonlarını da içerir.

Yeni kütüphane ile birlikte dikkat çeken iki güncelleme daha var. İlki, ödeme tahsilatı için PayPal ve Stripe düğmelerini içeren e-ticaret web siteleri için tek sayfalık tam bir web sitesi kiti olan birkaç mini mağazayı tanıtmamızdır. İkincisi, önceki tüm Blokların (Contact, 404 vb.) tamamen yeni tasarımlarla değiştirilmiş olmasıdır.

[Pro] Geri Sayım Widget'ında Dinamik Bitiş Tarihi

FOMO oluşturmak ve dönüşümü hızlandırmak için harika bir araç olan Geri Sayım Widget'ı artık bitiş tarihinde dinamik bir etiket kontrolüne sahip. Bu güncellemeyle, her sayfada bitiş tarihini dinamik olarak doldurmak için yerel WordPress özel alanlarının yanı sıra ACF ve PODS'daki özel alanları kullanabileceksiniz.

Yeni dinamik etiket denetimleriyle, örneğin Tek Gönderi şablonundaki Geri Sayım widget'ını kullanabilecek ve WordPress'te her gönderiye eklemek istediğiniz teslim tarihini içeren özel bir alan ekleyebileceksiniz. Bu aynı zamanda bir müşteriye bir web sitesi teslim etmenizi sağlarken, tasarımınızı değiştirebilecekleri Düzenleyiciye göndermeden WordPress'teki bitiş tarihini güncellemelerine izin verir.

Yeni: Google Yazı Tiplerini Tamamen Devre Dışı Bırak

Popüler bir çevrimiçi yazı tipi kitaplığı olan Google yazı tipleri, web sitenizde çeşitli yazı tipleri kullanmanıza olanak tanır. Ancak, son olaylarda Google Yazı Tiplerinin bazı durumlarda GDPR ve gizlilik düzenlemelerini ihlal ettiği tespit edilmiştir.

Bu riski ortadan kaldırmak için Elementor, web sitenizden tüm Google yazı tiplerini kaldırmanıza izin verir. Google yazı tiplerini devre dışı bırakırken, artık Düzenleyici'de çevrimiçi Google yazı tipi kitaplığını kullanamayacaksınız, bu da Düzenleyici'de kullanabileceğiniz yazı tipi sayısını 7 yazı tipine indirecektir. Web sitenizde zaten bir Google yazı tipi kullandıysanız, ancak bu güncellemeyle Google yazı tiplerini devre dışı bırakmayı seçtiyseniz, web sitenizdeki tüm yazı tipleri varsayılan olarak web sitenizdeki mevcut yazı tiplerinden biri olacaktır. Favori yazı tiplerinizi kullanmaya devam etmek için yerel olarak barındırılan yazı tiplerini Elementor Pro kullanıcılarına sunulan Özel Yazı Tipleri özelliğini kullanarak Elementor'a yükleyebilirsiniz.

Performans ve Erişilebilirlik İyileştirmeleri

Elementor 3.10'da performans ve erişilebilirlik iyileştirmeleri sunmaya devam ediyoruz. Bu güncelleme, üç yeni performans geliştirme güncellemesi ve iki erişilebilirlik iyileştirme güncellemesi içerir.

Yavaş Yüklenen Google Haritalar

Elementor'un Google Haritalar widget'ı, web sitenizin herhangi bir yerine bir harita yerleştirmenizi sağlar; bu, web sitenizin ziyaretçileriyle belirli bir konumu paylaşmak istediğinizde kullanmak için mükemmel bir widget'tır. Bu güncellemeyle, ilk sayfa yüklemesini hızlandıran Google Harita iframe'lerini geç yükleyebileceksiniz.

Özel Boyutlu Görüntüleri Yavaş Yükleme

Kullandığınız görselin boyutu, web sitenizin performansı üzerinde önemli bir etkiye sahip olabilir. Önceki güncellemelerde, medya kitaplığına yüklenen hemen hemen her resmi yavaş yükleme özelliğini ekledik. Elementor 3.10 ile ayrıca Özel Boyutlu görüntüleri geç yükleyebilirsiniz.

Kendi Kendine Barındırılan Videoları Ön Yüklemeyi Kontrol Etme

Resimlere benzer şekilde, videoların da web sitenizin hızı ve performansı üzerinde bir etkisi vardır; Kendi Kendine Barındırılan videolar genellikle, örneğin optimizasyon teknikleri uygulayan YouTube'da barındırılan videolardan daha fazla etkiye sahiptir. Bu güncellemeyle, ilk sayfa yüklemesi sırasında kendi kendine barındırılan videoları yüklemek yerine videoyu, videonun meta verilerini önceden yüklemek isteyip istemediğinizi veya ziyaretçi oynat düğmesine basmadan önce içeriğinin hiçbirini önceden yüklememeyi seçebilirsiniz.

Sayfada Gezinme için Erişilebilirlik İyileştirmeleri

İki Elementor Pro parçacığı olan Blok Alıntı pencere öğesi ve Yorum Gönder pencere öğesi, sayfada gezinmek için yardımcı teknolojiler kullanan engelli kişiler için bunları daha da erişilebilir hale getirmek için biçimlendirme güncellemeleri aldı.

Daha Fazla Tasarım Seçeneğinin, Daha Fazla Duyarlılığın ve Daha İyi Performansın Keyfini Çıkarın

Elementor 3.10, web sitenizde kullanmanız için çeşitli yeni tasarım fırsatlarının kilidini açar. Nested Elements özelliğinden yararlanan ilk güncelleme olan yeni Sekmeler widget'ının tanıtımı, Elementor'un tüm widget'larını tanıdık bir sürükle ve bırak yöntemiyle kullanarak son derece gelişmiş ve yaratıcı düzenler oluşturmanıza olanak tanır. Flexbox Containers'ın bu yeni widget'ı kullanmasını etkinleştirirken, yaratıcı sürecinize hızlı bir başlangıç ​​yapmak için tamamen yeni bir Container tabanlı kit ve şablon kitaplığına da maruz kalacaksınız.

Elementor 3.10'u denediğinizden emin olun ve aşağıdaki yorumlarda ne düşündüğünüzü bize bildirin.