Proticaret Prime şablon (layout) yönetimi hakkında

Proticaret, PRIME sürümle birlikte yeni layout sistemine geçiş yaptı. Yeni sistem, web standartları adına küresel ölçekte kabul gören flex yapısı ve bootstrap framework’ü ile uyumlu çalışmaktadır. Başta web tasarımcıları olmak üzere, kullanıcıların sayfalarda doğru, kolay ve hızlı düzenleme yapmaları adına belirli yönetim standartları oluşturduk. Özellikle web tasarımcılar için yeni Layout sistemi çok hızlı, hatasız ve düzenli arayüz oluşturmalarına olanak sağlıyor.

Layout sistemine iki yöntemle ulaşabilirsiniz. 

1. İçerik yönetimi > sayfa yönetimi > sayfa tanımları alanında, her sayfanın olduğu satırda “şablon düzenle” butonu yer almaktadır. Bu aşandan istediğiniz boyuttaki bir popup penceresinde düzenleme yapabilirsiniz.
2. Anasayfa, kategori, marka, etiket ve diğer içerik sayfalarını ziyaret ettiğinizde her sayfa için otomatik olarak şablon düzenle butonunu sayfayı takip edecek şekilde en sağ kısma “çark iconu” ile yerleştirdik. Tıkladığızda modal pencere içinde o sayfaya ait şablonu görebileceksiniz.

Her iki seçenek de aynı işlemleri yapar. Hızlı işlem yapmak adına ziyaret ettiğiniz sayfayı bulunduğu konumda düzenlemenizi öneririz. 

Şablon düzenlerken sayfanızı öncelikle satırlara ve sütunlara bölmelisiniz. Bu iki ayrılmaz yerleşim biçimi sayfamızın temelini oluşturur. 

Her satır mutlaka bir sütun içerir. Satır en fazla 12 sütun içerir. Teknik olarak daha fazla sütun eklemek mümkün olsa da pratik olarak çok küçük hücrelerin hiçbir faydası olmaz. Satırların 12 sütundan oluşması şablonların matematiksel olarak en ideal ve kolay şekilde dizayn edilmesine olanak tanır. Bir örnekle;

4 + 4 + 4

Resim + Resim + Resim

Bu yerleşim düzeninde bir satırı, eşit boyutta 3 adet resim kaplar. Eğer sayıları eksiltirseniz tüm satırı doldurmayacaktır. Bu durum sayfanızın hizalı görünmemesine sebep olur. 

6 + 6

Resim + Resim

İki adet eşit boyutta resim, satırı tam olarak doldurur.

8 + 4

İki adet resim, ilki diğerinin iki katı olacak şekilde içinde bulunduğu satırı tam olarak doldurur. 

3 + 4 + 5

Satırı üçe bölerek farklı kombinasyonlarla içerik ekleyebilirsiniz. Birbirini takip eden aynı ölçüde ama farklı sütunlardaki satırlar sayfanıza zenginlik katar. 

Bu yöntemle kendi içinde farklı ölçü kombinasyonları kurarak sınırsız dizayn yapmanız mümkün olur. 

Proticaret, güncel bootstap sürümü ile Flex yapısı kullanmanıza olanak sağlıyor. Bu bağlamda satır ve sütunları hizalama konusunda özgürsünüz. Her satıra ve her sütuna ait Class adlarını değiştirebilir veya ikinci bir class ekleyebilirsiniz. Bu class’ların üstlerine veya altlarına ek divler ekleyebilir, bu divlere de ayrı class isimleri atayabilirsiniz. 

Container CLASS Etiketi:

Container sayfanızdaki içerikleri, belirlediğiniz bir ölçüde yatay eksende ortalamak için kullanılır. Eğer bir bahçenin web tarayıcınız olduğunu farz edersek, container bu bahçenin ortasındaki binadır. Binayı bahçenize göre istediğiniz ölçekte genişletebilir veya daraltabilirsiniz. 

Row CLASS Etiketi: 

Satırlarınızı oluşturan bu etikettir. Bir isim olmaktan çok ölçüsü belirlenmiş sütunları yatay olarak hizalamada kullanılır. İçinde bulunduğu divin sınırlarını en soldan en sağa kadar sarar. Binanızın dış cephesini oluşturan iskelet buna en iyi örnektir. 

Col CLASS Etiketleri:

Sütunlar (Columns) bir satırı dikey olarak bölen hücrelerdir. İçeriğiniz bu etikette yer alır. Bir binanın odaları daireyi nasıl bölüyorsa Col sınıf etiketleri de aynı şekilde sayfanızda belirlediğiniz ölçülerde hücreler oluşturur. 

Sayfa temel düzeyde bu hiyerarşide yer alsa da pek çok farklı kullanım söz konusudur.. Özellikle CSS’deki flex yapısı bize hemen her etiketi bir şablona zorunlu kalmadan istediğimiz hiyerarşide kullanmamıza olanak tanır. Bu kullanım şekilleri arayüz tasarımcıları tarafından yapılmalıdır. Temel kullanım konu alındığı için bu tür detaylara diğer makalelerden ulaşabilirsiniz.

Örnekler için videomuzu izleyebilir, Bootstrap web sayfasından Grid System başlığında yer alan açıklamaları inceleyebilirsiniz. 

Satır ve Sütun Class Etiketleri

Her iki alandaki CSS sınıflarını da istediğiniz zaman, istediğiniz gibi değiştirebilirsiniz.

Satırlar veya hücreler arasındaki boşluklar, mobil uyumluluk adına “display” özellikleri gibi sık kullanılan işlemleri CSS alanlarına ekleyebilirsiniz.

Örneğin; col-md-9 adlı DIV için ek olarak mt-4 d-none d-xl-block ifadelerini eklerseniz ilgili bu div; Margin-top depeğiyle CSS’de belirtidiği ölçüde üst kısımdan boşluk bırakır. d-none özelliği ile DIV gizlenir. d-xl-block etiketi ise yalnızca XL sınıfındaki cihazlar (yüksek çözünürlük ölçeğine sahip) için DIV’i görünür kılar. Bu iki etiket sayesinde sadece XL boyutundaki ekranlarda DIV görünürken, diğer tüm çözünürlüklerde gizlenir. Benzer şekilde sadece mobil cihazlarda gösterim sağlayıp, bilgisayar, tablet ekranlarında bir içeriği gizlemek için de kullanabilirsiniz. 

Satırları kendi içinde sıralamak için “order” özelliğini kullanabilirsiniz. Örneğin 3 sütun halinde yan yana dizilmiş bir satırınız var. Bu satırdaki her sütun için sırasıyla order-2, order-1 ve order-3 etiketlerini verirseniz ikinci sıradaki sütun, birinci sıraya gelir. 

Bootstrap çalışma alanında kayıtlı hemen her sayfa biçimlendirme özelliğini CLASS tanımlarında kullanabilirsiniz. Bu durum siteniz için çok geniş ölçekte özelleştirme imkanı sağlar. 

Hazır Şablon İşlemleri

Şablon yönetiminde “Hazır şablon olarak kaydet” ve “Hazır şablon seç” alanlarını sol en alt kısımda görebilirsiniz. Birbirine benzeyen sayfaları tekrar tekrar oluşturmak yerine bir adet şablon kayıt edebilirsiniz. Yeni bir sayfa oluşturduğunuzda “hazır şablon seç” alanından hangi şablonu seçerseniz, ilgili şablonun önizlemesi ile birlikte kaynak sayfadan bir kopya oluşturabilirsiniz. Blog sayfaları, kurumsal bilgiler, resmi prosedürler, yardım sayfaları gibi alanlarda sıklıkla ihtiyaç duyabileceğiniz bu özellik zamandan kazanmak adına size büyük olanak tanır.