Sayfaların Tasarımı
Sayfaların tasarımı hakkında bilgi edinin
Last updated
Sayfaların tasarımı hakkında bilgi edinin
Last updated
Zotlo'da sayfalar, "elementler" ve "sectionlar" kullanılarak oluşturulur ve düzenlenir.Elementler, sayfalarda görüntülenen içerikleri özelleştirmek için kullanılır. Elementler arasında metin alanları, butonlar, görseller ve anketlerde kullanılan özel soru tipleri gibi çeşitli öğeler bulunmaktadır. Her bir element, sayfanın amacına ve içeriğine göre özelleştirilebilir ve bu şekilde daha etkili ve kullanıcı dostu bir deneyim sağlanabilir. Sectionlar ise birden fazla elementi veya içeriği gruplandırmak için kullanılır.
Zotlo'da yer alan section türleri aşağıdaki gibidir.
Bu section türü genellikle sitenize ait logoyu eklemek için kullanılır ve görsel elementinden oluşur. Section'ın sol üst köşesinde bulunan düzenleme ikonuna tıklayarak açılan menü üzerinden tasarımsal değişiklikler gerçekleştirebilirsiniz. "Style" sekmesinde yüklenen resmin konumunu ayarlayabilir ve "Design" tab'ında arkaplan ile boşluk ayarlarını detaylı bir şekilde yönetebilirsiniz.
Bu section, sitenizdeki anket soruları cevaplanırken ilerlemeyi takip etmek amacıyla kullanılır ve anket ilerlemesinin gösterildiği elementten oluşur. Sol üst köşedeki düzenleme ikonuyla tasarım değişiklikleri yapabilir, "Style" sekmesiyle resim konumunu, "Design" sekmesiyle arkaplan ve boşluk ayarlarını yönetebilirsiniz.
Site body section'ı, sitenin ana içeriğini oluşturan bölümdür ve genellikle metin, buton ve görsel elementlerinden oluşan bir yapıya sahiptir. Bu bölümde, görselsiz, görselin farklı tarafta konumlandığı veya kullanıcı görüşleri tercihleri arasından seçim yapabilirsiniz.
Alt bilgi (footer) bölümü, sadece metin elementlerinden oluşan ve genellikle sitenizin ana içeriğini tamamlayan bir bölümdür.
Her bir sayfa, header ve sayfa içeriğine göre değişiklik gösterebilen body sectionlarından oluşur. Sayfaya yeni bir section eklemek istendiğinde, mevcut sectionlar arasında bulunan "Section ekle" butonuna tıklanarak açılan section listesinden ihtiyaca yönelik olanı seçilebilir. Bu şekilde, sayfa düzeni ve içeriği kolaylıkla özelleştirilebilir.
Section'lar ekledikten sonra, section'ın sol üst köşesindeki düzenleme ikonuna tıklayarak açılan menü üzerinden tasarımsal değişiklikler yapabilirsiniz. Bu menüde yer alan "Style" sekmesiyle section için desteklenen stil tercihleri arasından seçim yapabilir, "Design" sekmesiyle arkaplan ve boşluk ayarlarını detaylı bir şekilde yönetebilirsiniz. Ayrıca "Elements" sekmesiyle, section'ı oluşturan elementleri görebilir ve yönetebilirsiniz.
Metin elementinin görünümünü kişiselleştirmek için, elementin üzerinde bulunan düzenleme ikonuna tıklayarak açılan menüden font tipi, font büyüklüğü, rengi gibi tasarımsal özellikleri kolaylıkla değiştirebilirsiniz. Ayrıca, metin elementine bir link eklemek de mümkündür. Elementin üzerindeki link ikonuna tıklayarak açılan menüden istediğiniz link adresini girebilir ve kaydedebilirsiniz.
Görsel elementinin görünümünü kişiselleştirmek için, elementin üzerinde bulunan düzenleme ikonuna tıklayarak açılan menüden istediğiniz görseli yükleyerek, boyutu, opaklık ve köşe yuvarlaklığı (radius) gibi özellikleriyle oynayabilirsiniz.
Buton elementinin görünümünü kişiselleştirmek için elementin üzerinde yer alan düzenleme ikonuna tıklayarak açılan menüde yer alan "Metin" sekmesinde buton metniyle ilgili tasarımsal değişiklikleri yapabilir, "Tasarım" sekmesi ile buton rengini, buton çizgileri gibi özellikleri değiştirebilirsiniz. Ek olarak, elementin üzerindeki link ikonuna tıklayarak açılan menüden butona link ekleyebilir ya da akış içindeki bir sayfaya yönlendirme yapabilirsiniz.
Çoktan seçmeli soru elementi ile ankete eklediğiniz sorulara dair ayarları yönetebilirsiniz. Bu elementin üzerinde yer alan düzenleme ikonuna tıklayarak açılan menüde "Metin" ve "Tasarım" sekmesiyle tasarımsal değişiklikleri yapabilirsiniz. "Soru" sekmesiyle sorunun zorunlu olup olmayacağını veya çoktan seçmeli olup olmayacağını ayarlayabilirsiniz. "Seçenekler" sekmesi ile farklı seçenekler ekleyebilir, her seçeneğe ait metni ve benzersiz bir ID bilgisi girebilirsiniz.
Görsel seçenekli soru elementi ile ankete eklediğiniz sorulara dair ayarları yönetebilirsiniz. Bu elementin üzerinde yer alan düzenleme ikonuna tıklayarak açılan menüde "Metin" ve "Tasarım" sekmesiyle görünüm ve metinler için tasarımsal değişiklikleri yapabilirsiniz. "Soru" sekmesiyle sorunun zorunlu olup olmayacağını, çoktan seçmeli olup olmayacağını veya görsel boyutlarını ayarlayabilirsiniz. "Seçenekler" sekmesi ile farklı seçenekler ekleyebilir, her seçeneğe ait metni ve görseli yükleyebilirsiniz.
Bu elementin ayarlarında yer alan "Soru" sekmesiyle, sorunun zorunlu olup olmayacağını ve cevap için girilebilecek minimum-maksimum karakter ayarlarını yapabilirsiniz. "Label" sekmesi ile ise input üzerinde yer alan başlığa dair tasarımsal değişiklikleri yapabilirsiniz.
Bu elementin ayarlarında "Soru" sekmesiyle varsayılan değerleri belirleyebilir ve ondalıklı sayı kabulünü ayarlayabilirsiniz. "Label" sekmesiyle input alanının üzerinde görünen başlığın tasarımını değiştirebilirsiniz. "Info Tag" sekmesiyle kullanıcı yanıt verdiğinde gösterilecek ek bilgi alanını yapılandırabilirsiniz.
Bu elementin ayarlarında lokasyon tipini (şehir ya da sadece ülke) seçebilir ve soru başlığı için özel tasarımsal değişiklikler yapabilirsiniz.
Bu elementin ayarlarında tarih seçimi alanının görünümünü (takvim, liste veya slider şeklinde) seçebilir, belirli bir tarih aralığı belirleyebilir ve soru başlığı için özel tasarımsal değişiklikler yapabilirsiniz.
Bu elementin ayarlarında saat seçimi alanının görünümünü belirleyebilir, belirli bir zaman aralığı tanımlayabilir, 12 saat formatını kullanabilir ve soru başlığı için özel tasarımsal değişiklikler yapabilirsiniz.
Bu elementin ayarlarında kabul edeceğiniz dosya tipini (video veya fotoğraf) belirledikten sonra yüklenebilecek dosya uzantılarını, maksimum yükleme sayısını ve dosya boyutuyla ilgili ayarları yönetebilirsiniz.
Boy soru elementi ayarlarında "Soru" sekmesiyle minimum girilebilecek değer aralığını belirleyebilir ve İngiliz ölçü sistemini aktifleştirebilirsiniz. "Info Tag" sekmesiyle kullanıcı yanıt verdiğinde gösterilecek ek bilgi alanını yapılandırabilirsiniz.
Kilo soru elementi ayarlarında "Soru" sekmesiyle minimum girilebilecek değer aralığını belirleyebilir ve İngiliz ölçü sistemini aktifleştirebilirsiniz. Ayrıca, bu soruyla farklı bir boy ve kilo sorusu arasında bir ilişki kurarak, kullanıcıların VKE(Vücut kitle endeksi) oranlarını veya önerilen ağırlık hesaplamalarını yapabilirsiniz. "Info Tag" sekmesiyle kullanıcı yanıt verdiğinde gösterilecek ek bilgi alanını yapılandırabilirsiniz.
Anketin sonunda zorunlu olarak bulunan bu element ile sayfadaki adım sayısını yönetebilir ve metinleri özelleştirebilirsiniz. "Tasarım" sekmesi altında sayfada görüntülenecek bekleme süresini ayarlayabilir ve tamamlanma ikonunu değiştirebilirsiniz.
Kayıt formu elementi menüsünde "Tasarım" ve "Label" sekmesiyle form alanı ve başlık için renk, metin ve diğer tasarımsal değişiklikleri yönetebilirsiniz. "Sosyal Giriş" sekmesiyle sosyal giriş yöntemleri için butonları ekleyebilirsiniz. Sosyal giriş yöntemlerinin kullanılabilmesi için kayıt tipinin e-posta seçilmiş olması ve ilgili entegrasyonların tamamlanması gerekmektedir. Entegrasyonlar hakkında daha ayrıntılı bilgi almak için aşağıdaki kılavuzu inceleyebilirsiniz:
Sosyal Giriş SeçenekleriÖdeme elementi menüsünde "Tasarım" sekmesiyle ödeme formunun görünümünü, arka plan rengi veya input çerçeveleri gibi tasarımsal özellikleri düzenleyebilirsiniz. "Label" sekmesiyle ise formdaki alan başlıklarının görünüm ayarlarını, metinlerin ve görsellerin görünümünü yönetebilirsiniz.
Bu elementin ayar menüsünde "Tasarım" sekmesiyle Paywall (Ödeme Duvarı) sayfasında kullanılacak plan listesinin arka planı, liste alanlarının tasarımı ve fiyat kartı tercihleri gibi ayarları yönetebilirsiniz. "Metin" sekmesiyle, listede yer alan metinlerin tasarımsal değişikliklerini ayarlayabilirsiniz. "Plan" sekmesiyle listelenecek paket sayısını belirleyebilir ve her bir paket için metinler girerek ayarlamalar yapabilirsiniz.
"Ribbon" sekmesiyle listelenen planlara eklemek istediğiniz ek metin alanlarını yapılandırabilirsiniz. "Öne Çıkanlar" sekmesi ile ise bir paketi öne çıkarmak için gerekli ayarlamaları yapabilirsiniz.
Bu elementin ayar menüsünde "Tasarım" sekmesiyle arka plan rengini veya arka plan saydamlığı gibi tasarımsal özellikleri düzenleyebilirsiniz. "Erişim Linkleri" ile uygulamalarınıza ait indirme linklerini girebilirsiniz. "İkonlar" sekmesiyle başarılı ödeme ve uyarı ikonlarını yönetebilirsiniz.
