İstiflenebilir: bloklarınızın kilidini açan eklenti

80'leri hatırlıyor musun? Yeni dalganın gelişi, kefal saç kesimlerinin ortaya çıkışı, Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran vb. 80'lerde, aynı zamanda video oyununun patlaması ve çok sayıda parmağımızın ucuna yakın olan bir oyunun piyasaya sürülmesi: Tetris.

Basit prensibi ile bu oyun, mevcut alanı optimize ederken farklı şekillerdeki blokları istiflemekten oluşuyordu.

Konsept tek bir satırda özetlenebilir: Gazeteci Bill Kunkel'in (aka The Game Doctor) dediği gibi , "Tetris en iyi oyun tanımına mükemmel bir şekilde uyuyor: öğrenmek için bir dakika, ustalaşmak için bir ömür" .

WordPress gibi birçok programa uygulanabilecek bir ifade.

WordPress'ten bahsetmişken, Tetris'ten bahsedersem, bunun nedeni bugün inceleyeceğim eklentinin İstiflenebilir olarak adlandırılmasıdır. Ve iyi bir nedenle, bu eklenti WordPress sitenize yerleştirilecek yeni Gutenberg blokları ekler .

Bu yeni test için hazır mısınız? İşaretine göre, hazırlan, git!

İlk olarak Temmuz 2021'de yazılan bu makale, Stackable'ın ücretsiz ve premium 3.0.5 sürümleriyle Kasım 2021'de güncellendi.

En iyi WordPress projelerinizin en iyi ana bilgisayara ihtiyacı var!

WPMarmite, Bluehost'u önerir: harika performans, harika destek. Harika bir başlangıç ​​için ihtiyacınız olan her şey.

Bluehost'u deneyin

İstiflenebilir nedir?

“Gelecek nesil web tasarımına güç vermek”. Bu, eklentinin kendisini “Gutenberg için yeni bir sayfa oluşturma deneyimi” olarak tanımladığı resmi web sitesinde Stackable'ın misyonudur. Hayırsız!

WordPress dizininde, blok eklentisinin 40.000'den fazla aktif kuruluma ve 5 üzerinden 4,9'luk güzel bir derecelendirmeye sahip olduğu ve bir dizi eleştirilerin eşlik ettiği söylenmelidir.

Zaten yeni Gutenberg blokları arıyorsanız, Ultimate Addons for Gutenberg, Qubely, Getwid veya Coblocks gibi eklentilerle zaten karşılaşmış olabilirsiniz.

Gutenberg'in güçlerini artıracak eklentiler hakkındaki yazımızda bunlardan bahsetmiştik. Görevleri basittir: içerik düzenleyicide bulunan Gutenberg bloklarının yelpazesini çeşitlendirmek.

Stackable ayrıca, harika klasiklerden (başlık, galeri, harekete geçirici mesaj) daha egzotik olanlara (teklifler, fiyat tabloları, zamanlayıcı, referanslar, vb.) kadar sayısız blok getirdiği Gutenberg için tasarlanmış bir eklentidir.
Bu bloklar kullanıma hazır ve özelleştirilebilir.

Öyleyse, Stackable'ı kurmanın amacı nedir diye düşünebilirsiniz. Onlar sadece diğer bloklar arasında bloklardır. Gutenberg birçok faydalı blok sağlar, ancak İstiflenebilir ile olasılıklar çoğalır.

Ayrıca, Gutenberg ile yerel olarak sunulanlardan daha gelişmiş özelleştirme özelliklerine erişebilirsiniz, örneğin: blokların içindeki öğelerin düzenini ayarlamak, boşluk bırakmak, arka planı değiştirmek, üzerine gelme efektleri eklemek, vb.

Stackable'ın iki sürümü vardır:

• WordPress dizininde ücretsiz bir sürüm mevcuttur.

• Eklentinin resmi web sitesinde, bir sitede kullanım için 49 dolardan başlayan ücretli bir sürüm mevcuttur.

Tahmin edebileceğiniz gibi, ikincisi daha fazla bloğa erişim sağlar ve onları daha ince bir şekilde özelleştirmeye izin verir.

Bu test için Premium sürüme odaklandık.

İstiflenebilir ayarlar

Stackable'ı yapılandırmaya başlamak için eklentiyi kurun ve etkinleştirin. Ardından Ayarlar > İstiflenebilir'e gidin.

Arayüzünde aşağıdaki ayarlara erişebileceksiniz:

• Font Awesome simgeleri Pro (premium): Bir Font Awesome Pro kitini Stackable'a entegre etmek için.
• Düzenleyici Ayarları: Stackable'ın düzenleyicisinin belirli özelliklerini kontrol etmenizi sağlar. Örneğin, Tasarım Kitaplığını devre dışı bırakabilir, belirli blokların genişliğini ayarlayabilir, kullanmadığınız düzenleyici bölmeleri kapatabilir ve sütunları aynı değişikliklere uğramaları için bağlayabilirsiniz.
• Rol yöneticisi (premium): bazı kullanıcı rollerine blok düzenleyiciye erişim vermek veya erişimi engellemek ve yalnızca içeriği düzenlemelerine izin vermek için. Not: Bu yönetim, yalnızca Stackable'da bulunanlarda değil, tüm bloklarda çalışır .
• Özel Alanlar (premium): Bu özellik, düzenleyiciden içeriğinize dinamik olarak ekleyebileceğiniz özel alanlar oluşturmanıza olanak tanır. Bunu yapmak için WordPress yönetiminizin Alanlar bölümüne gidin, “Yeni Ekle”ye tıklayın, bir alan türü (Metin, Sayı, Tarih, Saat veya URL) ve bir ad tanımlayın.

Ardından “Alanı Kaydet”e tıklayın, alanınız için bir değer girin ve kaydetmek için “Değişiklikleri kaydet”e tıklayın.

İçeriğinize entegre etmek için imleci alanınızın değerinin görünmesini istediğiniz yere getirin ve veritabanı simgesine tıklayın (Dinamik Alanlara karşılık gelir).

“Dinamik Kaynak” olarak “Site”yi seçin, ardından yeni oluşturduğunuz alanı (“İstiflenebilir Özel Alanlar” altında görünür) ve son olarak “Uygula”ya tıklayın. Bu kadar!

Hepsi iyi ve güzel, ama tüm bunları neden yaptık? Dinamik içeriğin büyüsü sayesinde, sitemde özel alanın entegre olduğu her yerde e-posta adresim güncellendiği anda otomatik olarak güncellenecektir.

• Duyarlı kesme noktaları: Sitenizin Tablet veya Mobil modda görüntüleneceği ekran genişliğini değiştirerek bu cihazlar için tanımladığınız ayarları görüntüleyebilmeniz mümkündür.
• Genel ayarlar: Sitenizdeki temayla olası uyumsuzlukların üstesinden gelmek için iki özellik mevcuttur. Temanızın içerik alanının seçicisine girebilir ve Stackable'ın yazı tiplerini temanızın yazı tiplerini devralmaları için kullanmaya zorlayabilirsiniz.

Elementor gibi Stackable'ın da global ayarları vardır: Elementor ile oluşturulan sayfalara uygulanan renkler ve tipografi . Ancak Stackable ile sitenizi oluşturan tüm bloklar için bu ayarları tanımlama olanağına sahipsiniz .

• Engellemeyi Etkinleştir ve Devre Dışı Bırak: Bazı bloklara ihtiyacınız yoksa, kullanılabilir bloklar listesinde görünmemeleri için bunları devre dışı bırakabilirsiniz .
• Optimizasyon ayarları (premium): JavaScript ve CSS dosyalarını sitenin tamamı yerine yalnızca İstiflenebilir bloklar içeren gönderilere yüklemenize olanak tanır. Bu özelliğin amacı sitenizin performansını artırmaktır. Bu özellik yalnızca sürüm 2 blokları için geçerlidir çünkü zaten eklentinin en son blokları için geçerlidir (sürüm 3'ten itibaren).

İstiflenebilir nasıl kullanılır?

Kitler ve bloklar

İstiflenebilir, doğrudan WordPress düzenleyicisinden kullanılır. Bunu yapmak için bir sayfa veya gönderi oluşturun veya açın, ardından gönderinizin üst kısmındaki Tasarım Kitaplığı'nı seçin.

Tasarım Kitaplığı , UI Kitlerini ve Kategorileri içerir. Bu ne?

Aslında, bu iki bölüm aynı öğeleri içerir, ancak farklı kategorilere ayrılır. UI Kitleri , stil kılavuzu tarafından sağlanan blokları toplar ve Kategoriler bunları blok türüne göre gruplandırır: mevcut tüm stil kılavuzlarında bulunabilecek başlık, referans, harekete geçirici mesaj, vb.

Kategoriler ve UI Kitleri, sizin için doğru bloğu bulmanın iki farklı yoludur.

Her blok kullanıma hazır ve özelleştirilebilir bir tasarıma sahiptir. Bunları bir sonraki bölümde nasıl özelleştireceğimizi göreceğiz.

İhtiyacınız olan bloğu bulmak için emrinizdeki arama çubuğunu da kullanabilirsiniz. Pencerenin sağ üst köşesindeki dört simge, farklı blokların daha doğru veya daha büyük bir görünümünü elde etmek için arama sonuçlarını yenilemenize ve küçük resimlerin boyutunu değiştirmenize olanak tanır.

Bir gönderiye İstiflenebilir bir blok nasıl entegre edilir

Ayrıca herhangi bir blok eklemek için yaptığınız gibi “+” simgesine tıklayabilirsiniz ve mor-turuncu bir gradyan ile süslenmiş olduklarından İstiflenebilir eklenti bloklarını kolayca tanıyacaksınız.

“Tümüne Göz At” düğmesine tıklayarak, emrinizde olan tüm Gutenberg bloklarına erişebilirsiniz. İstiflenebilir bloklar "Metin" ve "Görünüm" bölümlerinde bulunur ve tümü, aynı zamanda Tasarım Kitaplığına erişim sağlayan "İstiflenebilir" bölümünde gruplandırılmıştır.

Tüm bu yollar , Roma'ya İstiflenebilir bloklara götürür, evet, ancak önceden oluşturulmuş tasarımlara erişim sağlayan öncelikle Tasarım Kitaplığı yoludur.

Örneğin, minimum biçimlendirmeye, dolgu metnine sahip olan ve örnek resim içermeyen bu Referans bloğunu alın:

Ve Tasarım Kitaplığından eklenen başka bir Referans bloğuna bakın ( Prime Testimonial 2 bloğu):

Mükemmel uyumu bulduktan sonra, doğrudan gönderinize yerleştirmek için istediğiniz öğeye tıklayın. Daha sonra, herhangi bir Gutenberg bloğu gibi sayfadaki öğeyi yeniden düzenleyebilir ve özelleştirebilirsiniz.

İstiflenebilir Özelleştirme

İstiflenebilir bir bloğu özelleştirmek için, gönderinizin sağ tarafındaki "blok" bölümüne gidin, burada üç kategoride sınıflandırılmış bir dizi seçenek bulacaksınız: Blok , Stil ve Gelişmiş .

İlginizi çekeni bulmak sıkıcı olabilir çünkü aralarından seçim yapabileceğiniz çok şey var, ancak değiştirmek istediğiniz blok öğesine çift tıklayarak da bulabilirsiniz. Daha sonra tek bir tıklamayla o blok için ayarlara yönlendirileceksiniz.

Farklı özelleştirme seçenekleri üç sekmede gruplandırılmıştır:

• Blok : bloğunuzu oluşturan farklı öğelerin düzenini özelleştirebileceğiniz, kenarlıklar ve gölgeler ekleyebileceğiniz ve metnin arka planına, aralığına ve hizalamasına göre hareket edebileceğiniz yerdir.

Bloklarınızdaki öğeler arasındaki boşluğu, üzerlerine gelip öğenin altındaki tutamaçları kullanarak da ayarlayabilirsiniz. Onu komşusundan ayıran piksel sayısını bile görebilirsiniz. Çok kullanışlı!

• Stil : sütunları yönetmenize ve tipografi, renkler, düğmeler ve ayırıcılar üzerinde işlem yapmanıza olanak tanır. Daha beklenmedik, ancak bloğunuza bir başlık ve açıklama da ekleyebilirsiniz.
• Gelişmiş : Burada, blokla ilişkili HTML etiketi ve yanıt verenin yönetimi gibi gelişmiş özelliklere erişebilirsiniz (bloğu bilgisayarda, tablette veya mobilde gizleme imkanı). Bloğun kenar boşluklarını ve içeriğin hizalamasını ayarlayabilir, aynı zamanda öğelerinize animasyon veya geçiş efektleri ekleyerek eğlenebilirsiniz (yine de kolay gelsin).
  CSS meraklıları için pastanın üzerindeki krema, bloğun CSS'sini doğrudan bu arayüzde, bloğun yanında ve değişikliklerin gerçek zamanlı bir önizlemesiyle değiştirme yeteneğidir.
  Son olarak, koşullu görüntüleme, yalnızca önceden tanımladığınız bir koşul karşılandığında bir öğeyi görüntülemenize izin verir.

WPMarmite abonelerine katılın

Son WPMarmite gönderilerini (ve ayrıca özel kaynakları) alın.

ŞİMDİ ABONE OL

Bir bloğun tasarımından tamamen memnun değilseniz, onu beğeninize göre ayarlamak için birçok parametreyi değiştirme olanağınız vardır.

Örneğin, öğelerin veya ana öğenin üzerine gelindiğinde kolayca efektler ekleyebilmeyi (bu son özellikten yararlanmak için üst bloğa bir arka plan uygulayabilmeyi) veya bloğun her bir öğesinin kenar boşluklarını kolayca değiştirebilmeyi sevdim. .

Daha da iyisi: mobilde ve tablette farklı marjlar seçebilirsiniz! Böylece sitenizin duyarlı yönünü kolayca değiştirebilirsiniz. Bunu yapmak için önce diğer cihazların simgelerini görüntülemek için masaüstü simgesine (bilgisayar) tıklayın.

Bir başka güzel seçenek de, Elementor'da olduğu gibi, bir öğenin üstüne veya altına ayırıcılar eklemektir. Elbette bu ayırıcıların görünümünü ayarlayabilir ve hatta Premium sürümde bir veya iki daha hafif katman ekleyebilirsiniz.

Bu iştah açıcı burgerin altında şöyle görünüyor:

Adının üzerine geldiğinizde bazı ayarlar mora döner ve imleciniz soru işaretine dönüşür. Ne olduklarını bilmiyorsanız, ne için olduklarını anlamanıza yardımcı olacak bir animasyon görmek için tıklayın. Tüm bu seçenekler arasında yolunuzu bulmak için oldukça kullanışlıdır.

Temalara ve eklentilere nasıl bir uyarlama?

Temalara Uyarlama

Resmi belgelere göre, sitenizdeki tema Gutenberg için optimize edildiği sürece “Stackable herhangi bir temayla çalışmalıdır”.

Temalardan bahsetmişken, bu yazının başında bahsettim: Gutenberg editörü ve İstiflenebilir eklenti ile çalışmak üzere tasarlanmış bir şirket içi tema var. Ücretsizdir ve resmi WordPress dizininde mevcuttur. Bununla birlikte, kısaca uyumluluk garanti edilir.

Aynı isimli eklentinin renklerinde var, umarım şeker pembesine aldırmazsınız.

İstiflenebilir temayı indirin:

Eklentilere uyarlama

İstiflenebilir belgeler, öğe veya sayfa oluşturucu (aff bağlantısı) ile uyumlu olmasını sağlar. Ancak dikkat edin, sayfa oluşturucu düzenleyicide İstiflenebilir blokları kullanamayacaksınız.

Aslında Gutenberg bloklarıyla aynı şekilde, onları Elementor editöründe kullanamazsınız, bir seçim yapmanız gerekir: Sayfanızı Elementor veya WordPress editörü ile oluşturun.

Resmi Stackable web sitesi ayrıca bloklarının herhangi bir eklentiyle uyumlu olduğunu iddia ediyor, bu nedenle bunları diğer blok kitaplıklarıyla sorunsuz bir şekilde kullanabilirsiniz.

Elementor ile web sitenizi oluşturun

Ünlü sayfa oluşturucu ile WordPress web sitenizin görünümünü ve verdiği hissi kolayca tasarlayın. Elementor'u deneyin

Elementor'u deneyin

Dokümantasyon ve destek

Stackable'ı kullanırken herhangi bir zorluk yaşamanız durumunda, istediğiniz zaman resmi belgelere başvurabilirsiniz.

Orada bulacaksın:

• Eklentiyi kullanmaya başlamak için ayrılmış bir bölüm.
• Bir sorun giderme bölümü.
• Fiyatlandırma ve lisans ayrıntıları.
• Hedeflenen kılavuzlar.
• SSS.
• Ve diğer kaynaklar.

Bu belgeleri ayrıca Ayarlar > İstiflenebilir, Belgeler sekmesinde bulabilirsiniz.

Teknik aksaklıklar olması durumunda, eklentiden sorumlu ekip, kullanıcılara sık karşılaşılan sorunların bir listesini ve bunları düzeltmek için çözümler sunar.

Hala takılırsanız, Stackable'ın desteğini arayabilir veya sorularınızın yanıtlarını almak için Facebook gruplarına katılabilirsiniz.

Destekle ilgili olarak, Stackable ekibi, isteğinizi Ayarlar > İstiflenebilir'deki Bize Ulaşın sekmesindeki iletişim formu aracılığıyla veya [email protected] e-posta adresine gönderirseniz size yardımcı olabilir.

Paranın değeri nedir?

Premium sürüm, sunulan blok çeşitliliğinde doğal olarak daha cömerttir. Özelleştirme seçenekleri de daha çoktur.

Özellik bloğu için, örneğin, Premium sürümde 13'e kıyasla ücretsiz sürümde 2 düzen seçeneği (Temel ve Düz ) vardır.

Premium sürümde, Font Awesome Pro ve Rol Yöneticisi ile entegrasyon ve CSS'deki herhangi bir bloğu değiştirme olasılığı gibi Stackable kullanımınıza bağlı olarak az çok ilginç parametreler de vardır.

Bu son özelliği kullanmak için Gelişmiş bölümüne, ardından Özel CSS'ye gidin. Kullanışlı: değişiklikleriniz gerçek zamanlı olarak görüntülenir.

Premium sürüm ayrıca bir yıllık desteğe ve güncellemelere erişim sağlar.

İstiflenebilir veya bir sayfa oluşturucu kullanmak: işte bütün mesele bu

İşte bu kadar, Stackable'ın özelliklerini ve ayarlarını birlikte inceledik. Artık blok eklentisinin deposunda ne olduğu hakkında daha net bir fikriniz var.

Sayfa oluşturucuların hayranıysanız veya bunlara yakından baktıysanız, şunu merak ediyor olabilirsiniz: Neden sayfa oluşturucu yerine Stackable kullanıyorsunuz?

Çünkü Stackable ve örneğin Elementor'un ücretsiz sürümü tarafından sunulan seçenekler karşılaştırılabilir. Ve iyi bir nedenle, Stackable, resmi web sitesinde iddia edildiği gibi bir sayfa oluşturucu ile bir tasarım deneyimine yaklaşıyor : "Gutenberg için yeni bir sayfa oluşturma deneyimi kullanarak en hızlı web sitelerini kolayca oluşturma konusunda kendinize güvenin" .

Ve site arayüzünün tüm öğeleri üzerinde (ve yalnızca gönderilerin içeriği değil) hareket etmeye izin verecek Tam Site Düzenleme'nin gelmesiyle birlikte, Stackable daha da yakınlaşabilir. Bununla birlikte, Stackable, mevcut sayfa oluşturuculara kıyasla tasarım deneyimini basitleştiren WordPress içerik düzenleyicisinde doğrudan kullanılma avantajına sahiptir .

Öte yandan, Elementor'un pro sürümü çok daha gelişmiş widget'lar ve özellikler sunar. Her iki eklentinin de tek site kullanımı için maliyeti aynı olduğundan (49 $), bunun yerine sayfa oluşturucu devlerine dönmenizi öneririz.

Stackable hakkındaki son görüşümüz

Sonuç olarak, Stackable'ın modern ve estetik tasarımlar sunan oldukça sezgisel bir eklenti olduğunu söyleyebiliriz.

İstiflenebilir, sitelerinin tasarımını özelleştirmek için daha gelişmiş bloklara sahip olmak isteyen herhangi bir site oluşturucu içindir, herhangi bir kod satırına dokunmaya gerek duymadan (ancak CSS'de ustalaşırlarsa blokları beğenilerine göre yerleştirme olanağına sahip olurlar).

Ancak, onu mu kullanmalısınız yoksa doğrudan Elementor gibi daha gelişmiş bir sayfa oluşturucuya mı gitmelisiniz?

Gerçekten de, Stackable ile doğrudan WordPress düzenleyicide bir sayfa oluşturucunun tasarım deneyimine yaklaşıyoruz. Bunun, gerçek bir “site kurucusu” olmak olan Project Gutenberg'in nihai hedefinin başlangıcı olduğu söylenebilir.

Ancak, henüz orada değiliz. Şimdilik, Stackable, herhangi bir şablon yönetimi olmadan, Elementor'un ücretsiz sürümüyle aynı şekilde gönderiler oluşturmanıza yardımcı olur (Stackable, önceden yapılmış tasarımları yüklemenize izin verir, ancak kendinizinkini kaydetmenize izin vermez).

WordPress düzenleyicisiyle çalışmayı seviyorsanız ve Stackable tarafından sağlanan bloklar projeniz için yeterliyse, devam edin! Elementor kullanmak gerekli olmayacaktır.

Ancak daha gelişmiş özelliklere ihtiyacınız varsa veya sıfırdan bir site tasarlamanız gerekiyorsa (yani tüm sayfa şablonlarını özelleştirin), Elementor (aff link) veya rakiplerinden biri vazgeçilmez olacaktır.

Ve zaten Elementor tarafından baştan çıkarılan kullanıcılardan biriyseniz, Stackable büyük bir hit olmayabilir. Sonuçta, kendi alışkanlıklarınız var, bu yüzden onları değiştirmek için gerçek bir neden yok.

Stackable'ın Pro sürümüyle ilgileniyorsanız, blokların ve seçeneklerin beğeninize uygun olduğundan emin olmak için mevcut demoyu görüntülemekten ve ücretsiz sürüme göz atmaktan çekinmeyin.

İstiflenebilir eklentiyi indirin:

Ve sen, zaten kullandın mı? Bu makale, onu kullanmak istemenizi sağladı mı? Düşüncelerinizi yorumlarda paylaşın.