Footer elementi, uygulamanızın sayfa alt bölümünde yer alan tamamlayıcı bir arayüz elementidir. Sayfa içeriğinin altında konumlanarak kullanıcılara ek bilgi, telif hakkı metni, yol gösterici bağlantılar, sosyal medya ikonları veya yardımcı açıklamalar sunmak için kullanılır. Ayrıca, ikon ve metin kombinasyonları kullanılarak mobil uygulama tarzında bir tabbar menü oluşturulmasına da olanak tanır. Uygulama genel görünümünü dengeleyen Footer, hem görsel bütünlüğü sağlar hem de ek navigasyon seçenekleri sunarak kullanıcı deneyimini iyileştirir.
Footer elementi hem web hem de mobil uygulamalarda desteklenmektedir.
Sayfa altında sabit bir navigasyon alanı oluşturmak Mobil uygulama tarzı tabbar menü yapmak için kullanılabilir.
Sosyal medya ikonları ve bağlantıları yerleştirmek (ör. Instagram, LinkedIn, YouTube linkleri)
Ek açıklamalar veya yardımcı metinler göstermek Sürüm bilgisi, destek iletişim bilgisi, uyarı metinleri gibi içerikler için uygundur.
Sayfa boyunca süreklilik sağlayan tasarımlar oluşturmak Tema bütünlüğünü sağlamak, sayfayı estetik olarak tamamlamak için kullanılır.
Çok uzun sayfalarda kullanıcıya “son bilgi alanı” sağlamak Kullanıcı içeriğin sonuna geldiğinde önemli kısa notları burada görebilir.
İşlevsel mini menüler veya kısa yol butonları eklemek (ör. Ana Sayfa, Profil, Ayarlar, Sepet butonları)
Destek / iletişim bileşenlerine hızlı erişim imkânı sunmak
2. Temel Özellikler
Sayfanın alt bölümüne sabitlenmiş yapı. Footer elementi, sayfa içeriği ne kadar uzun olursa olsun alt kısımda konumlanır ve tasarımsal bütünlük sağlar.
Esnek içerik alanı. Metin, ikon, buton, link ve diğer UI elementleri eklenerek zengin bir alt menü oluşturulabilir.
Tabbar benzeri navigasyon desteği. Özellikle mobil arayüzlerde ikonlu alt menüler oluşturarak hızlı gezinme sağlar.
Özel stil ve düzen özelleştirmeleri. Arka plan rengi, yazı rengi, hizalama, boşluklar ve tipografi gibi tüm görsel detaylar düzenlenebilir.
Sabit veya kaydırma ile hareket eden görünüm seçenekleri. İsteğe bağlı olarak sayfa kaydırıldığında yerinde kalan sabit bir footer ya da içeriğe göre hareket eden bir yapı oluşturulabilir.
Diğer elementlerle uyumlu çalışma. Footer içerisine Button, Icon, Text gibi pek çok element eklenerek fonksiyonel bir alan haline getirilebilir.
Hem web hem de mobil arayüzlerde tutarlı görünüm. Responsive yapısıyla tüm ekranlarda dengeli bir yerleşim sağlar.
Sayfa düzenini tamamlayıcı bir tasarım elementi. Kullanıcıya ek bilgi sunarak sayfa sonunun daha anlamlı hale gelmesini sağlar.
2.1. Element Ayarları (Properties)
Footer elementi, diğer UI bileşenlerinden farklı olarak özel bir Properties paneline sahip değildir. Footer alanı, bir kapsayıcı (container) gibi çalışır ve içerisine eklenen diğer UI elementleri (Text, Icon, Button vb.) üzerinden yapılandırılır.
Bu nedenle:
Footer’ın kendi başına değiştirilebilir özel bir ayarı yoktur.
Tüm görsel ve içerik düzenlemeleri, Footer içerisine eklenen elementlerin kendi Properties panelleri üzerinden yapılır.
Arka plan rengi, hizalama, margin–padding gibi düzenlemeler de yine Footer içine yerleştirilen elementlere bağlıdır.
Footer, bir yerleşim (layout) elementidir; özellikleri içerdiği elementler üzerinden şekillenir. Kendine ait bağımsız Properties ayarları bulunmaz.
2.2. Elemente Eklenebilen Aksiyonlar
Footer elementi, yapısal bir yerleşim bileşeni olduğundan kendi üzerinden aksiyon (ADD ACTION) eklemeyi desteklemez. Bu nedenle Footer seçildiğinde sağ panelde herhangi bir aksiyon tetikleyicisi görünmez.
Aksiyon davranışına ilişkin temel esaslar:
Footer’ın kendisine aksiyon atanamaz.
Footer içindeki Button, Icon gibi elementlere aksiyon eklenebilir; ancak bu aksiyonlar Footer’a değil o elemente aittir.
Footer yalnızca bir kapsayıcı (container) görevi görür; tüm işlevsellik içerisine eklenen elementler üzerinden sağlanır.
Footer kendi aksiyon tetikleyicilerine sahip değildir. İşlevsel kullanım, Footer içine yerleştirilen diğer UI elementlerinin aksiyonları ile sağlanır.
3. Footer Elementi Nasıl Kullanılır?
Bu bölümde Footer elementinin uçtan uca kullanımını örnek bir senaryo üzerinden ele alacağız.
Senaryo: Sosyal Medya Platformu
Bir sosyal medya uygulamasında kullanıcılar, platform içinde gezinebilmek için sayfanın alt bölümünde yer alan Footer alanını kullanır. Footer, uygulamanın temel navigasyonunu sağlayan dört ana sayfaya hızlı erişim sunar: Anasayfa, Yorum Ekleme, Profil ve Bilgi sayfaları.
Senaryoda:
Footer, uygulamanın temel gezinti alanıdır.
Kullanıcı; Anasayfa, Yorum Ekleme, Profil ve Bilgi sayfalarına buradan hızlıca erişir.
Her ikon, ilgili sayfaya yönlendirme aksiyonu çalıştırır.
Adım 1 - Element Ekleme ve Stil Düzenleme
Başlangıçta anasayfada:
UI Design modülünü açın.
Sol yan panelden Elements > Container > Footer elementine tıklayın.
Footer içerisine Elements > Container > Row elementini sürükleyip bırakın.
Row içerisindeki Col alanına tıklayın. Col içerisinde Col > Styling > Align içerisinden dikeyde ve yatayda ortalamayı seçin.
Her Col içerisine sol yan panelden Elements > Display > Icon elementini sürükleyip bırakın.
Adım 2 - Element Ayarlarının Yapılandırılması
Eklenen ikonların içerisinde:
İlk icon elementine tıklayın. Element içerisinde Icon > Properties > Icon alanına ‘home’ ikonunu ekleyin.
İkinci icon elementine tıklayın. Element içerisinde Icon > Properties > Icon alanına “add_comment” ikonunu ekleyin.
Benzer şekilde üçüncü icon elementine tıklayın. Element içerisinde Icon > Properties > Icon alanına “account_circle” ikonunu ekleyin.
Dördüncü icon elementine tıklayın. Element içerisinde Icon > Properties > Icon alanına “info” ikonunu ekleyin.
Anasayfada olduğumuz için ilk icon’a tıklayın Icon > Styling > Text > Color alanında “5ABFC1” rengini seçin.
Footer elementini Elements > Container > Footer kullanacağınız diğer Yorum Ekleme, Profil ve Bilgi sayfalarına ekleyin ve boş şekilde bırakın. Sol yan panel Screens > New Screen üzerinden yeni sayfalarınızı ekleyebilirsiniz.
Navigate aksiyonu içerisinde Navigate > To Screen > HomePage anasayfa ekranını ekleyin.
Benzer şekilde ikinci yorum ekleme ikonuna tıklayın Icon > Properties > Add Action > onClick >Navigation > Navigate seçin.
Navigate aksiyonu içerisinde Navigate > To Screen > Comments yorum ekleme ekranını ekleyin.
Benzer işlemleri Profil ve Bilgi sayfaları içerisinde uygulayın.
Adım 4 - Footer Elementini Diğer Sayfalara Kopyalama
Oluşturduğunuz anasayfa ekranına gidin, footer içindeki Row elementini seçin ve üçüncü seçenek olan Kopyala butonuna tıklayın.
Yorum Ekleme sayfasına gidin ve boş Footer elementi içerisine tıklayıp üçüncü seçenek Yapıştır butonuna basın.
Anasayfa ikonuna tıklayın Icon > Styling > Text > Color alanını çöp kutusu butonuna tıklayıp temizleyin.
Yorum ekle ikonuna tıklayın Icon > Styling > Text > Color alanında ‘5ABFC1’ rengini seçin.
Benzer işlemleri Profil ve Bilgi sayfaları içerisinde uygulayın.
Preview:
Uygulama test edildiğinde, footer içerisindeki ilgili ikonlara tıklandığında sayfalara yönlendirme sağlanmaktadır. Örnek senaryoda yorum ekleme sayfasına tıklanmış ve sayfaya yönlendirme yapılmıştır.
4. Ortak Özellikler (Properties)
Footer elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Footer’ı sade ve işlevsel tutun. Sayfa alt bölümü gereksiz kalabalık olduğunda kullanıcı deneyimi olumsuz etkilenir.
Mobil arayüzlerde tabbar oluştururken ikon + kısa metin kombinasyonu kullanın. Navigasyonun daha anlaşılır olmasını sağlar.
Footer içerisine yerleştirilen elementlerin hizalamasını tutarlı yapın. Sol, orta veya sağ hizalı tasarımda karar verip uyumu koruyun.
Sürüm notları, telif bilgileri veya yardım bağlantıları için kullanışlı bir alandır.
Icon kullanıyorsanız Tooltip eklemeyi değerlendirin. Özellikle tabbar senaryolarında anlaşılır navigasyon sağlar.
6. Kısıtlamalar
Footer’ın kendi Properties paneli yoktur. Tüm ayarlar içine eklenen elementler üzerinden yapılır.
Footer kendi başına aksiyon tetikleyemez. İşlevsellik sadece içerisinde yer alan elementler üzerifnden sağlanır.
Arka plan rengi, padding veya margin ayarları direkt Footer üzerinden yapılamaz. İçerideki Container veya Text elementleri ile çözülür.
Element Ayarları ve Özelleştirme
Authorization (Yetkilendirme)
Element düzeyindeki erişim kontrolünü yönetmek için, Properties panelindeki Authorization bölümünü kullanabilirsiniz.
Erişim Tipleri
Anonymous
Elementin tüm kullanıcılar tarafından, giriş yapmadan görüntülenmesine izin verir.
Restricted
Erişimin yalnızca doğrulanmış kullanıcılara veya belirli rollere göre sınırlandırılmasını sağlar.
Everyone: Aktif edildiğinde, giriş yapmış tüm kullanıcılar elemente erişebilir.
Roles: Elemente erişmesine izin verilen roller buradan seçilir. Rol listesini düzenlemek için Roles alanının yanındaki dişli (⚙️) ikonuna tıklayarak Role Management penceresini açabilirsiniz. Bu pencereden yeni rol ekleyebilir, klasör oluşturabilir veya mevcut rolleri yönetebilirsiniz.
Unauthorized Behavior (Hide / Disable)
Kullanıcı gerekli role sahip değilse, elementin nasıl davranacağını Choose alanından belirleyebilirsiniz:
Hide: Kullanıcı yetkili değilse element tamamen gizlenir ve ekranda görünmez.
Disable: Element görünür kalır ancak tıklanamaz / kullanılamaz hâle gelir.
Bu ayar, yetkisiz kullanıcıların elementle nasıl karşılaşacağını yönetmeniz için kullanılır.
Visibility (Görünürlük)
Always Visible: Element her zaman görünür. Hidden: Element gizlenir. Sometimes Visible: Element, belirli koşullara bağlı olarak görünür.
Sometimes Visible seçeneği kullanıldığında AND / OR grupları doğrudan eklenebilir ve görünürlük kuralları birlikte gruplandırılarak daha karmaşık senaryolar rahatlıkla yönetilebilir.
Ayarı yapılandırmak için:
Ekrandaki elementi seçin.
Sağ kenardaki Properties panelini açın.
Visibility alanında ihtiyacınıza göre bir seçenek belirleyin.
Editability (Düzenlenebilirlik)
Enabled: Element düzenlenebilir.
Disabled: Element düzenlenemez.
Sometimes Enabled: Element, belirli koşullara göre düzenlenebilir veya düzenlenemez.
Style Panel ile Arayüz Tasarımı
Elementlerinizi Styling Panel ile özelleştirerek, web ve mobil uygulamalarınız için etkileyici arayüzler oluşturabilirsiniz. Bu bölümde, aşağıdaki ayarları yapılandırabilirsiniz:
Layout (Düzen): Boyutlandırma, hizalama ve iç boşluk (padding) ayarları. Ayarlar arasında Size, Min Size ve Align bulunur.
Text (Metin): Yazı tipi, stil, renk, boyut ve aralık ayarları.
Fill (Dolgu): Arka planı renk veya görsellerle özelleştirme.
Border (Kenarlık): Kenarlık ekleme ve köşe yarıçapı ayarları.
Shadow (Gölge): Elementlere derinlik katmak için gölge efekti ekleme.
