WordPress İçinde Tel Kafes Nasıl Yapılır: Kadence Tel Kafes Bloklarıyla Tanışın!

Yeni bir sayfa tasarımını tel çerçeveleme söz konusu olduğunda, görevi tamamlamak istiyorsanız genellikle ayrı bir araç veya uygulama (veya hatta belki eski bir eskiz defteri!) kullanmanız gerekir. Peki ya tarayıcınızı kapatmanıza gerek kalmadan doğrudan blok düzenleyiciden WordPress ile tel kafes yapabilseydiniz?

WordPress içindeki tel çerçeveleme, size çok fazla zaman kazandırırken, pek çok olasılık açar.

• Bir tasarımın kolayca geliştirilip geliştirilemeyeceğini tahmin etmek veya bir sayfa düzeninin gerçekte nasıl uygulanabileceğini merak etmek yerine, tasarımınızın temeline gerçek bir WordPress sayfasından başlayabilirsiniz.
• Ayrı bir araç kullanmak ve ardından tel çerçeve modelini aktarmak yerine, tel çerçeveniz WordPress içinde yaşayacak ve size fazladan bir adım kazandıracaktır.
• Müşterilere, süreci ayrı bir dosya türüyle karmaşıklaştırmadan, mevcut sitelerinin içinde veya bir WordPress hazırlama sitesinde kolayca bir tel kafes önizlemesi verebilirsiniz.

Bu kılavuzda, tel çerçevelemenin ne olduğunu, web sitesi tel çerçevelemenin web tasarımı iş akışınızı nasıl hızlandırabileceğini ve yeni Kadence Blocks Tel Çerçeve Koleksiyonuna (tamamen ücretsiz!) nasıl hızlı bir şekilde başlayabileceğinizi ele alacağız. siz bir tel kafesin yapısını oluşturun ve tel kafeslerin genel web tasarım sürecine nasıl uyduğunu açıklayın. Ayrıca tel kafeslerin hangi özellikleri içermesi gerektiğini de öğreneceksiniz. Hadi dalalım!

Önce İlk Şeyler: Tel Çerçeveleme Nedir?

Kullanıcı deneyimi tasarımının karmaşık dünyasına daldıysanız, en azından "tel çerçeveleme" terimini duymuşsunuzdur. Ancak tel çerçeveler tam olarak nedir ve neden web siteleri için UX tasarım sürecinin bu kadar önemli bir parçasıdır?

Özetle, bir tel kafes, mimarların kullandığı bir plandan o kadar da farklı değildir. Tel kafes, bir tasarımcının nihai ürünü etrafında oluşturmak için kullanacağı bir web sayfasının veya uygulamanın iki boyutlu bir taslağıdır.

Bir tel kafesin amacı, tasarımcıya bir web sitesinin açık bir genel görünümünü vermektir:

• Düzen
• Yapı
• Kullanıcı akışı
• Amaçlanan davranışlar
• bilgi mimarisi
• işlevsellik

Bir tel kafes, neredeyse her zaman tasarım projesinin ilk konseptini temsil edecektir. Bu nedenle, grafik, renk ve stil gibi şeyler çıplak kemikler minimumda tutulur.

Bazı durumlarda, bir tel kafes, bir kağıt parçası üzerine elle bile çizilebilir. Diğer tel kafesler dijital alemde yaratılır. Gerçekten, belirli tel kafeste ihtiyaç duyulan ayrıntıya bağlıdır. Ayrıca, web sayfasının veya uygulamanın son tasarımına ne kadar ayrıntı gireceğine de bağlıdır. Başka bir deyişle, web sayfası ne kadar ayrıntılı olursa, tel kafesin o kadar ayrıntılı olması gerekir.

Tel çerçeveleme uygulaması en çok UX tasarım ekipleri tarafından kullanılır. Sürecin gözden geçirilmesi, ilgili tüm tarafların (paydaşlar), proje geliştirmeleri için geliştiricilere teslim edilmeden önce bilgilerin bir sayfada nerede bulunacağı konusunda bir anlaşmaya varmalarını sağlayacaktır.

Bir web tasarım projesini geliştiricilere teslim edilmeden önce tel çerçevelemek, genellikle yolda birçok baş ağrısından kurtarır. Bunun nedeni, projenin ilk planının (tel kafes) her zaman nihai sonucun nasıl görünmesi gerektiğine dair ilk referans noktası olabilmesidir (ve olmalıdır).

Tel Çerçeveleme Web Tasarımını Nasıl Hızlandırır?

Tel çerçeveleme ile ilgili en iyi şeylerden biri, tasarım sürecini hızlandırma yeteneğidir. İşte tel çerçevelemenin web tasarım sürecini nasıl hızlandırdığına hızlı bir bakış.

1. Büyük Fikirleri Sırayla Alın

Tel kafeslerle, tamamlanmış projeyle birlikte gelen tüm ayrıntılar ve yığınla değil, yalnızca ilk konseptle ilgilenirsiniz. Başka bir deyişle, tasarımın küçük detaylarında kaybolmadan hemen önce büyük ve önemli şeyleri elde edebilirsiniz. Büyük fikirlerin doğru olması, önce tel kafes öğelerine sahip olarak ve ardından baştan başlamak zorunda kalmadan gerçek içeriği ekleyerek süreci hızlandırmanızı sağlar.

2. Kolay Ayarlamalar Yapın

Tel çerçeve kullanımı, fikirlerinizi ekranda düzenlemenize yardımcı olur ve daha sonra ilerledikçe sürekli ve kolay değişiklik yapılmasına izin verir. Neye sahip olduğunuzu ve nerede olduğunu kolayca ayarlayabilirsiniz.

3. İstemci Girişi için Oda

Tel çerçeveleme, web sitesi tasarımının plan versiyonudur – tasarımınızın siyah beyaz, iki boyutlu bir temsilidir. Tasarımınızı görebilecek ve o tasarımın işlevselliğini ölçebileceksiniz. Her şey yerine oturmadan önce müşteriler fikirlerini ekleyebilir. O binayı inşa etmeden önce bir binayı taşımak çok daha kolay.

Hokkabazlık yapmak için ne kadar az elemente sahip olursanız, ördeklerinizi o kadar hızlı sıraya koyabilirsiniz.

Kadence Blokları Tel Çerçeve Koleksiyonu ile Tanışın

Ücretsiz Kadence Blocks eklentisi, önceden oluşturulmuş bloklardan veya Wireframes adı verilen öğelerden oluşan yepyeni bir koleksiyon içerir. Bu temiz bölümler, sitenizi tasarım ayrıntılarına fazla takılmadan oluşturmanıza ve planlamanıza yardımcı olmak için tasarlanmıştır, böylece yola odaklanabilirsiniz. Kadence Blocks ile yeni sayfa tasarımlarını çerçevelemek için ayrı bir araca veya uygulamaya ihtiyacınız yok; doğrudan yerel WordPress blok düzenleyicisinden WordPress içinde tel çerçeve oluşturabilirsiniz.

Web tasarım sürecinin tel çerçeveleme aşamasında yeniyseniz, yeni tasarımlar veya mevcut içeriğin revizyonları söz konusu olduğunda iş akışınızı nasıl hızlandırabileceğini çabucak göreceğinizi umuyoruz.

Tel Kafes Blokları nedir?

Peki Tel Çerçeve Blokları tam olarak nedir? Sorduğuna sevindim!

Kadence Bloklarından Tel Çerçeveleme Blokları, sitenizi oluşturmanıza yardımcı olacak önceden oluşturulmuş, temiz bölümler sağlayan yeni bir WordPress blokları setidir… doğrudan yerel WordPress blok düzenleyicisinin içinden.

Diyelim ki bir müşteri için yeni bir sayfa tasarımı tasarlamanız gerekiyor. Ayrı bir uygulama kullanmak veya tasarımı ayrı bir araçla çizmek yerine, artık doğrudan WordPress içinde bir tel kafes maketi sağlayabilirsiniz.

Veya sayfanıza bir SSS bölümü eklemek isteyebilirsiniz. Bunu en iyi şekilde nasıl kuracağınızı belirlemek için bir satır düzeni oluşturmak ve farklı bloklarla oynamak yerine, doğrudan Tel Çerçeve Blokları sekmenizden bir SSS tel çerçevesini içe aktarabilirsiniz.

Bu şekilde, yapıyı önceden oluşturulmuş tel kafes öğeleri kitaplığına bırakarak, içeriğinizi optimize edebilir ve buna odaklanabilirsiniz.

WordPress Sayfa Tasarımları Oluşturmak için 50'den Fazla Tel Kafes Bloğu

Ücretsiz Kadence Wireframe Blocks kitaplığının sağlam olduğunu söyleyelim. Kullanabileceğiniz 50'den fazla tel kafes bloğu vardır ve her hafta yenileri eklenmektedir.

Hatta tel kafes bloklarını kategoriye göre filtreleyerek aramanızı daha da kolaylaştırabilirsiniz.

Kadence Blocks tasarım kitaplığında kullanabileceğiniz tüm farklı tel kafes bloklarına göz atın:

• İçerik Tel Kafes Blokları – SSS bölümleri, stil madde işaretli liste, hatta e-posta kayıtları gibi sitenizin zengin içerikli alanlarını düzenlemek için bu tel kafes blokları setini kullanın.
• Fiyat Tablosu Tel Kafes Blokları – Fiyatlandırma seçeneklerini daha iyi kavramak için minimal stile sahip tel kafes fiyatlandırma tabloları
• Altbilgi Tel Çerçeve Blokları – Bu tel kafes blokları, web sitenizin altbilgi alanını planlamayı kolaylaştırır
• Kart Tel Kafes Blokları – Sitenizin basit "kart" bölümleri için bu tel kafes bloklarını kullanın.
• Referans Tel Kafes Blokları – Müşterilerinizin söylemesi gereken tüm harika şeyleri unutmayın! Bu yardımcı bloklar, bir sayfadaki tel kafes referans bölümlerine yardımcı olur.
• Geri Sayım Tel Kafes Blokları – Geri sayımlar aciliyeti artırmaya yardımcı olur, ancak yeni bir tasarımla ilk başladığınızda tüm stil seçenekleri asi olabilir. Bu bloklar, tel çerçeveleme geri sayım sayaçları için çeşitli seçenekler sunar.
• Portföy Tel Kafes Blokları – Bu tel kafes blokları, portföyler için bir başlangıç ​​noktası sağlar.
• Form Tel Kafes Blokları – Formlar, tonlarca tasarım seçeneğiyle gelebilecek başka bir öğedir, bu nedenle bu basit form blokları, tel kafes oluştururken size birkaç temel başlangıç ​​noktası sağlar.
• Fiyatlandırma Tablosu (Koyu) – Üç katmanlı bir ödeme planı seçeneği arıyorsanız, bu fiyatlandırma tablosu tel kafes binanızda size yardımcı olmak için mükemmeldir.
• Fiyatlandırma Tablosu (Işık) – Bu fiyatlandırma tel çerçevesi ayrıca size üç ödeme seçeneği sunar, ancak üst bölümün arka plan rengi beyazdır. Simgeler yerine, her plan için özel bir resim yükleyebileceğiniz bir yeriniz var.
• İçerik Düzeni – Bu içerik tel kafes öğesi, bir başlık ile birlikte bir görüntü için iki sütun ve bir yer sağlar. Bu blok, ürün özelliklerini, değer önerilerini, ekip bilgilerini ve daha fazlasını vurgulamaya yardımcı olabilir.
• Öne Çıkan İçerik Kutusu ile İçerik Düzeni – Bu içerik tel çerçevesi ayrıca iki sütun sağlar, ancak sol tarafta bir kutu bulunur (kenar çubuğuna benzer). Bir kutu dikkatleri üzerine çekecek ve içine yerleştirmeyi seçtiğiniz kelimelere veya tasarım öğelerine dikkat çekecektir.
• İçerik (Değişen Hizalama) – Bir başka harika içerik tel çerçevesi, bu, sunduğunuz şeye değişen hizalama ile numaralı bir yaklaşım sağlar. Ayrıca resim çerçeveleri içerir. İçeriğin parçalanması okuyucunun dikkatinin korunmasına yardımcı olur.
• Altbilgi – Altbilgiler, yasal gereksinimleri, ek sosyal düğmeleri ve diğer iletişim bilgilerini eklemenin harika bir yoludur. Bu tel kafes, bunların hepsini artı bir logo sağlar.
• Galeri – Bu galeri tel çerçevesi, birden fazla görüntüyü paylaşmanız için basit bir yol sağlar. Etkinlikleri özetlemek, yeni ürünleri paylaşmak veya yeni bir ürün grubunu öne çıkarmak için mükemmeldir.
• Izgara (Kartlar) – Bir ızgara, bilgileri kolay taranan bir biçimde bir araya getirmenize olanak tanır. Hizmetlerinizin, ürünlerinizin veya programlarınızın temellerini göstermek için bu tel çerçeveyi kullanabilirsiniz.
• Izgara (Simgelerle Yüksek Kontrast) – Bilginin daha da öne çıkmasını sağlamak için farklı renk bloklarına sahip başka bir harika ızgara seçeneği.
• Izgara (Işık) – Bu ızgara, paylaştığınız öğeler hakkında ek bilgi eklemek için alan sunar. Bu tel kafes okuyucularınız için resmi bir engel teşkil eder ve avukatlar, eğitim kurumları ve sağlık sektörü için ideal olacaktır.
• Izgara (Koyu Arka Plan) – Bu, birden fazla öğe içeren bir ürün veya hizmeti göstermek için mükemmel bir ızgaradır. Düğme ve resim içeren büyük blok, bir açılış sayfasına yönlendirmek için kullanılabilirken, daha küçük bloklar üç ana bileşen hakkında daha fazla bilgi sunar.
• Alıntılı İçerik Bölümü – Blog yazınız için içerik yazarken, belirli bilgileri ayırmak faydalı olabilir. Bu tel kafes, bir tarafında büyük, göz alıcı bir yazı tipi bulunan, eşit aralıklarla yerleştirilmiş iki sütun sunar.
• Çekilmiş Alıntılı İçerik Bölümü – İki sütunlu, ancak bilgileri çağırmak veya vurgulamak için alıntılar için gölgeli bir blok içeren başka bir içerik tel çerçevesi.
• İçerik Bölümü (Ortalanmış Alıntı) – Alıntıları vurgulamanın veya içeriği öne çıkarmanın başka bir yolu, içeriğin içinde bir blok kullanmaktır. Bu tel kafes, içeriğinizin en önemli kısımlarına dikkat çekmek istediğinizde en iyi sonucu verir.
• İçerik Notu (Koyu Arka Plan) – Bu tel çerçeve bloğu, içeriğinizin öğelerini tanımlamak veya okuyucunuz için küçük bilgi paylaşmak için mükemmeldir.
• İçerik Notu (Açık Arka Plan) – İçeriğin gövdesiyle ilgili olması gerekmeyen bilgiler mi eklemek istiyorsunuz? Bu not tel çerçevesi, okuyuculara belirtme çizgileri vermek, içeriğin ötesinde rastgele bilgi paylaşmak veya keskin bilgelik sözleri sunmak için kullanılabilir.
• İçindekiler Tablosu (Sol) – İçindekiler Tablosu, okuyucunuzun tüm belgeyi taramak zorunda kalmadan içeriğinizin önemli noktalarını görüntülemesini sağlar. Bu tel çerçeve, TOC'yi içeriğin yanına yerleştirir.
• İçindekiler Tablosu (Satır içi) – Bu tel çerçeve, İçindekiler Tablosunu içeriğinizin en üstüne yerleştirir ve içeriği ana alt başlıkların ötesine ayırır.
• Basit Kartlar – Bilgileri vurgulamanın başka bir yolu da basit kartlar kullanmaktır. Bu tel kafes, simgelerinizi ve bilgilerinizi özelleştirmeniz için size bloklar sağlar.
• Basit Kartlar (3 Sütun) – Noktaları, ürünleri veya kademeli bilgileri vurgulamanıza olanak tanıyan başka bir basit kart.
• Gelmek için daha fazla! Planımız toplam 50 yardımcı tel kafes bloğu sağlamaktır, bu yüzden daha fazlası eklendikçe bizi izlemeye devam edin!

Daha fazla ilhama mı ihtiyacınız var? Ana sayfalardan portföylere, SSS'lere ve daha fazlasına kadar tel kafes bloklarını kullanmanın 10 yolu.

WordPress'te Tel Çerçevelemeye Nasıl Başlanır?

Ücretsiz Kadence Blocks eklentisini kurup etkinleştirdikten sonra, WordPress yönetici panosundan yeni bir gönderi (veya sayfa) ekleyin.

WordPress'te yeni bir gönderi veya sayfa oluştururken, içerik alanınızın hemen sol üst kısmındaki Tasarım Kitaplığı sekmesine tıklayın .

Ardından, Tel Çerçeve sekmesini açmak için tıklayın . Burada, sayfanıza kolayca aktarabileceğiniz tüm mevcut tel çerçevelerin bir listesini göreceksiniz.

Bu kadar! Sayfanıza veya gönderinize tel kafes bloklarından herhangi birini eklemek için tıklamanız yeterlidir.

Derin Bir Dalış Yapmak İster misiniz? Bu Derinlemesine Eğitim Videosu ile Daha Fazla Bilgi Edinin

Hepsini Bir Araya Getirmek: Kadence Tel Kafes Bloklarıyla Oluşturulmuş Örnek Bir Tel Kafes

Tam bir tel çerçevenin bir sayfayı nasıl arayacağını merak ediyorsanız, bu örneği bir ürün sayfası için oluşturduk. Bu örnekte, yeni bir tasarım için ne kadar çabuk sağlam bir başlangıç ​​noktası elde edebileceğinizi görebilirsiniz. Bu sayfa başlık, düğmeler, özellikler, referanslar, fiyat tablosu ve SSS'ler için tel kafes blokları içerir.

Kadence Bloklarını Bugün Alın!

Yeni Wireframe blokları, ücretsiz Kadence Blocks eklentisinde (v2.1+) mevcuttur. Başlamak için Kadence Blocks'u ücretsiz indirin!

Kristen Wright

Kristen, 2011'den beri WordPress kullanıcılarına yardımcı olmak için eğitimler yazıyor. Onu genellikle iThemes blogu için yeni makaleler üzerinde çalışırken veya #WPprosper için kaynaklar geliştirirken bulabilirsiniz. Kristen iş dışında günlük tutmaktan (iki kitap yazdı!), doğa yürüyüşü yapmaktan ve kamp yapmaktan, yemek pişirmekten ve daha güncel bir hayat yaşamayı umarak ailesiyle günlük maceralardan hoşlanıyor.