Elementor'a Özel Kesme Noktaları Nasıl Eklenir

Bu makalede, Elementor'a özel kesme noktalarının nasıl ekleneceğini tartışacağız. Yıllar geçtikçe bu, Elementor ekibinin çok talep edilen bir özelliği oldu, ancak henüz bunu entegre etmemişler.

Neden Özel Kesme Noktaları İstiyorsunuz?

Müşteri web siteleri oluşturmak için Elementor'u kullanan bir ajans olarak, sık sık özel kesme noktaları kullanırız. Örneğin, birisi web sitesine cep telefonundan yatay modda bakmak isterse, bunu yapmak için yerleşik bir yetenek yoktur. En basit haliyle, Elementor'un bir mobil yatay mod uygulamasını isteriz. Bunu yapsalardı, düzenleyicideki duyarlı seçici sekmesi şöyle görünürdü:

Daha karmaşık bir biçimde, belirli piksel genişliklerinde özel kesme noktalarını kolayca ekleyebilmek isteriz.

• Github İsteği: Özel Kesme Noktaları Nerede? 25 Mayıs 2020'de açıldı
• Github İsteği: [Özellik İsteği] Özel kesme noktaları 19 Temmuz 2017'de Açıldı

Bir noktada, 2010'ların başında, çoğu cihaz aynı ekran boyutuna sahipti. Bu, hem dizüstü bilgisayarları hem de mobil cihazları ifade ediyor, şimdi 2020'de tonlarca farklı ekran çözünürlüğü var. Örneğin, bir MacBook 13 inç retina ekranı 2560 x 1600 çözünürlüğe sahipken Dell 13 inç XPS ekranı 3.840 x 2.400 çözünürlüğe sahiptir. Aynı sınıf, farklı boyutlar.

Özel kesme noktalarını bu ekranların genişliklerine uyacak şekilde uyarlamak yardımcı olabilir. Ziyaretçilerinizin çoğunluğunun Apple dizüstü bilgisayarlardan geldiğini biliyorsanız, bu özelliğin eklenmesi kullanıcı deneyimini daha iyi hale getirecek ve sonuç olarak daha fazla dönüşüme ve daha düşük bir hemen çıkma oranına yol açacaktır.

Neden özel bir kesme noktasına ihtiyacınız olduğuna dair başka bir örnek de şudur. Daha küçük tabletlerde, dört sütunlu bir düzen, kullanılamayacak kadar sıkışık hale gelir. Bununla birlikte, iPad pro gibi daha büyük bir tablette, dört sütunlu bir düzen ekrana tam olarak oturur ve bilgileri etkin bir şekilde görüntüler.

Şu anda, özel kesme noktaları olmadığı için tek bir düzende takılıp kaldınız ve bazı ödünler vermeniz gerekiyor. Ya 2 sütunlu bir düzen ile gidebilirsiniz – bu, daha küçük tablette çalışır, ancak daha büyük bir tablette son derece aralıklı görünür ya da büyük bir tablette iyi görünen ancak çok sıkışık hale gelen dört sütunlu bir düzen ile gidebilirsiniz. küçük bir tablet.

Sütunların çökmesine izin verecek iyi bir ara kesme noktası belirlemenin bir yolu yoktur.

TLDR; Herkes gerçekten özel kesme noktaları ve bir manzara modu istiyor. Bunun için meşru kullanım durumları var, ancak Elementor, önerilmesinden bu yana geçen üç yıl içinde bu özelliği eklemedi. (Bu, geliştirici geri bildirimlerini dinlememek için Elementor ile tekrar eden bir sorun gibi görünüyor, ancak bu başka bir gün için bir nokta.)

Yerel Elementor oluşturucuda herhangi bir uygulama olmadığından, gidip bize bunu yapma olanağı sunan bazı üçüncü taraf eklentileri bulmamız gerekecek. Araştırmamızdan, Elementor'a özel kesme noktaları eklemenize izin verecek üç ana eklenti bulduk. Tüketiciler için hangisinin en iyisi olduğunu bulmak için hepsini aldık ve size tam bir inceleme ve karşılaştırma sunacağız.

Özel kesme noktası eklentileri için iki seçenek

Bir Elementor web sitesine özel kesme noktaları eklemek için ilk tercih, Codevision tarafından geliştirilen bağımsız bir eklentidir. "Elementor için Özel Kesme Noktaları" başlıklı eklenti, 20 Euro veya 22,5 ABD Doları tutarındadır.

İkinci seçenek, Elementor'a özel kesme noktaları eklemek için özel olarak tasarlanmış başka bir bağımsız eklentidir. "Elementor için WePixel Özel Kesme Noktaları Eklentisi" olarak adlandırılır ve şu anda beta 1.0 sürümündedir. Bir süredir bu sürümde kaldı, bu yüzden terk edilmiş bir proje olabilir. Yine de, bir lisans satın almak işe yarıyor ve onu test web sitemize yükleyebildik. Tek bir alanda kullanılabilen bir lisans 35 Euro'ya mal oluyor (bence bir eklentinin beta sürümü için biraz pahalı).

Üçüncü seçenek, birçok modülünden biri olarak bu özelliği içeren Piotnet Eklentileri adlı bir eklenti paketidir. PAFE bir süredir piyasada ve biz onların sunduklarının hayranıyız. Elementor için en iyi eklenti eklentilerini karşılaştıran makalemizde bunlardan bahsettik. Bir site lisansı için 40 ABD Doları veya sınırsız bir site lisansı için 60,00 ABD Doları tutarındadır. Ayrıca ömür boyu bir anlaşma sunuyorlar.

Başka bir eklenti veya ücretsiz bir çözüm biliyorsanız, lütfen aşağıya bir yorum bırakın.

Şimdi, kurulumdan Elementor için özel kesme noktaları eklemeye kadar her bir eklentiyi inceleyelim. Umarım, bu size eklentilerin neler sunabileceğine dair iyi bir genel bakış sunacak ve bilinçli bir satın alma kararı vermenize yardımcı olacaktır.

Elementor için Codevision Özel Kesme Noktaları

Bu eklentinin tek amacı, Elementor kurulumunuza özel kesme noktaları eklemektir. Bu eklenti Paddle aracılığıyla satılmaktadır, yani satın alma süreci son derece sorunsuz ilerlemektedir. Aktif olarak korunur ve oldukça iyi tasarlanmıştır. Web sitenize yükledikten sonra, yönetici menüsü girişine tıklayarak özel kesme noktaları eklentisinin ayarlarına erişebilirsiniz.

Bu ekrandan dışa aktarmayı içe aktarabilir ve ihtiyaç duyduğunuzda yeni kesme noktaları ekleyebilirsiniz. Codevision eklentisi önceden yüklenmiş 18 kesme noktasıyla birlikte gelir ve istediğiniz kadar ekleme yapabilirsiniz. Ayrıca bunları etkinleştirebilir ve devre dışı bırakabilirsiniz, yani kesme noktasını silmeniz gerekmez, ancak bunu Elementor düzenleyici arayüzünden kaldırabilirsiniz.

Özel kesme noktalarınızı ayarladıktan sonra Elementor düzenleyicisine gidebilir ve bunlardan yararlanabilirsiniz. (Bu örnek için sekiz hariç tüm kırılma noktalarını devre dışı bıraktık.)

Kırılma noktaları arasında geçiş yaparken yatay ve portre modu arasında seçim yapabilirsiniz. İşte kırılma noktaları arasında bazı karşılaştırmalar.

Bu kesme noktası, yatay modda iPhone 11/XR içindir.

Bu eklenti aktif olarak korunur ve işini gerçekten iyi yapar. Arka uç arayüzünün anlaşılması ve kullanılması kolaydır ve Elementor düzenleyicisinde özel kesme noktaları arasında hızla geçiş yapabilirsiniz.

WePixel Özel Kesme Noktaları Eklentisi

Bu eklentiyi tanımlamak için en iyi terim "biraz kabataslak". Açılış sayfası çok iyi tasarlanmamıştır (Destek formu, açılış sayfasının altında bulunabilir ve yalnızca genel bir Elementor formudur) ve bir lisans anahtarı satın almak biraz titrektir. Ancak, Web sitelerindeki talimatları takip etmek işe yaradı ve bir lisans anahtarı ve işleyen bir eklenti elde edebildik.

Bir yönetici menüsü bağlantısı aracılığıyla sayfaya giderek özel kesme noktaları eklentisinin ayarlarına erişirsiniz. Özel kesme noktaları için ayarlar sayfasından, gerektiği gibi ekran boyutları kaldır ekleyebilirsiniz.

Ayrıca devam edebilir ve bu kesme noktalarını başka bir web sitesinde kullanmak üzere içe ve dışa aktarabilirsiniz.

Kesme noktalarınızı belirledikten sonra Elementor düzenleyicisine gidebilir ve duyarlı mod sekmesine tıklayabilirsiniz. yeni özel kesme noktalarının göründüğünü göreceksiniz.

Tıpkı varsayılan Elementor kesme noktalarının yaptığı gibi çalışır, tek yapmanız gereken tek tek kesme noktası girişini tıklamaktır ve ekran buna göre ayarlanacaktır.

Örneğin, Elementor'da maksimum 1024 piksel genişliğe sahip özel bir kesme noktası olan Breakpont 3 ile genel mobil kırılma noktası (360 piksel için önizleme) arasında bir karşılaştırma.

• 

• 

Gerektiğinde kolayca yeni kesme noktaları ekleyebileceğinizi unutmayın. Testlerimize göre, bu eklenti iyi çalışıyor gibi görünüyor ve tam olarak çoğu insanın ihtiyaç duyduğu şeyi yapıyor.

Bu eklentiyi kullanarak Elementor için özel kesme noktalarını kolayca belirleyebilirsiniz. Eklentiyi edinmenin kabataslak sürecine rağmen, web sitesine bir kez sahip olduğunuzda iyi çalışıyor.

Elementor için Piotnet Eklentileri

Bu, Elementor ve Elementor Pro için genel bir eklenti Eklentisidir ve temel profesyonel özellik paketinde özel kesme noktaları işlevselliğini içerir. Başka bir makalede tartışacağımız bu eklentiyle birlikte gelen birçok uzantı ve eklenti var.

Bu makalede endişelendiğimiz ana şey, bu eklentinin yapmanıza izin verdiği özel kesme noktaları eklemektir. Profesyonel sürümü satın alıp web sitenize yükledikten sonra, arka uç özelliği etkinleştiriciden özel kesme noktası işlevine erişebilirsiniz.

Bu eklentideki özel medya sorgusu kesme noktaları, diğer ikisinden biraz farklı çalışır. Duyarlı mod menüsünden özel girişlerinize erişmek yerine, bunlara tek tek öğenin gerçek ayarlarında erişebilirsiniz.

Örneğin, tek bir sütun için bir kesme noktası ayarlamak istiyorsanız, üzerine sağ tıklayın, PAFE sekmesine gidin ve ardından özel medya sorgusunu etkinleştirin. istediğiniz kadar ekleyebilirsiniz.

Öğenin genişliği, kenar boşluğu, dolgu ve tipografi ayarları gibi bir dizi ayara erişebilirsiniz.

Sütunlar ve tipografik öğeler için bu kırılma noktalarına erişebilirsiniz. Bununla ilgili daha fazla bilgiyi buradan okuyun: https://pafe.piotnet.com/docs/custom-media-query-breakpoints

Bu eklenti, özel medya sorgusu kesme noktalarını diğer ikisinden biraz farklı şekilde uygular. Diğer ikisi size her şeyi düzenleyebileceğiniz bir genel ekran boyutu verirken, bu araç stili ayrı öğelere atar. Bu, herhangi bir eklenti kullanmıyorsanız, CSS aracılığıyla manuel olarak yapmanız gerekenlere çok daha yakındır.

Diğer ikisiyle karşılaştırıldığında, tam olarak bunu yapan bir şey arıyorsanız, bu sizin için iyi bir seçenek olabilir, ancak aynı zamanda işleri karmaşık hale getirebilir.

Sizin için en iyi seçenek nedir?

Tabi bu sizin bütçenize ve ihtiyaçlarınıza göre vermeniz gereken bir karar. Ancak bizim önerimiz Codevision'un ilk Özel Kesme Noktaları eklentisi olacaktır. Eklentinin tek amacı, Elementor düzenleyicisine hem yatay hem de dikey CSS kesme noktaları eklemektir ve bunu gerçekten iyi yapar. 18 ön ayar ile birlikte gelir ve ihtiyacınız olduğu kadar fazlasını ekleyebilirsiniz. Eklentinin arkasındaki ekip Almanya merkezli, hızlı desteğe sahip ve gerçekten harika işler çıkarıyor.

İkinci eklenti için herhangi bir kullanım durumu görmüyoruz, çünkü Codevision'ın 15 avroya yaptığıyla hemen hemen aynı şeyi yapıyor (hala beta sürümünde olduğu ve oldukça resmi olmayan bir satın alma işlemine sahip olduğu gerçeğinden bahsetmiyorum bile) akış).

Ek eklentiler arıyorsanız, Piotnet size daha fazla değer sunabilir. Codevision Plugin'in maliyeti 20 ABD dolarıdır ve Elementor'a yalnızca özel kesme noktası işlevselliği ekler. Öte yandan, Piotnet bu işlevi 40 $ karşılığında düzinelerce başka eklenti ve düzenleyici iş akışı eklemesiyle birlikte ekler. Kayma değeri arıyorsanız, bu kategoride Piotnet kazanır.

Bu özelliklerin Piotnet uygulamasının diğer ikisinden biraz farklı olduğunu unutmayın. Ayrıca, pazarın gerçekte ne istediği konusunda (muhtemelen Codevision eklentisine daha yakın bir şey) söz konusu olduğunda, işaretin biraz dışında olduğuna inanıyoruz.

Bu eklenti paketini müşteri web sitelerimizin birçoğunda kişisel olarak kullandık ve ürünün kalitesinden, hızlı destekten ve eklentiye dahil edilen eklentilerin çokluğundan etkilendik.

Bununla birlikte, önerimiz hala geçerlidir – yalnızca bir Elementor web sitesinde özel medya sorgusu kesme noktaları uygulamak istiyorsanız, Codevision eklentisini kullanın (ayrıca ThePlus gibi PAFE'den daha iyi eklenti paketleri de vardır, ki bu burada tartıştığımız bir şeydir eklenti karşılaştırma makalemiz).

Ücretsiz Seçenekler Var mı?

Bunu, web sitesinde kullanılan her öğe için bir kod satırı yazmanız gerekmesi dışında özel CSS ile de yapabilirsiniz. Bu ücretsiz olsa da, gerçekten uygulanması çok zaman alacaktır , bu yüzden bu yazıda uzun uzun tartışmıyoruz.

Çözüm

Bu makalenin, Elementor için özel kesme noktalarının nasıl ekleneceğini etkili bir şekilde açıkladığını umuyoruz. Bu işlevi Elementor'a ekleyen ve tümü ücretli olan üç ana eklenti bulduk. Genel tavsiyemiz Codevision eklentisi olacaktır, çünkü grubun en ucuzu ve söylediği şeyi çok iyi yapacağını söylüyor. Ancak, paranızı daha da artırmak istiyorsanız, Piotnet eklenti paketi bununla ve çok daha fazlasıyla birlikte gelir, bu da onu üçün en değerli eklentisi yapar.

Her zaman olduğu gibi, herhangi bir sorunuz, yorumunuz veya Elementor'a özel kesme noktaları eklemek için ek yöntemleriniz varsa, bunları yorumlar bölümünde bırakmaktan çekinmeyin.

Freepik'ten Varlıklarla Oluşturulan Öne Çıkan Resim