--- title: "Kayan bir sheet ile hero ekranı oluşturma" description: "İçeriğinizi uçtan uca bir görsel veya videonun üzerine yerleştirin." --- > **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes` Bir hero ekranı, üstte uçtan uca bir görsel veya video gösterir; içeriğiniz ise alttaki bir panelde yer alır. Bunu oluşturmak için tüm içeriğinizi bir **Sliding sheet** üzerine yerleştirin ve hero'yu onun arkasına koyun. Sheet, ekranın alt kısmını kaplar ve kullanıcılar kaydırdıkça hero'nun üzerine doğru yukarı hareket eder. ## İçeriğinizi bir hero görseli veya videosu üzerine yerleştirin \{#lay-your-content-over-a-hero-image-or-video\} 1. Hero'yu ekran arka planı olarak ekleyin: [ekran ayarlarında](builder-ui#screen-settings-and-layout) **Fill** seçeneğini bir [görsel veya video](paywall-head-picture) olarak ayarlayın. Sheet arka planın alt kısmını kapattığından, konusunu üst tarafa yakın gösteren bir görsel veya video seçin. 2. **Öğe ekle** panelini açın ve **Sliding sheet** seçeneğini seçin. 3. Ekranın içeriğini sliding sheet'e yerleştirin — **Layers** panelinde sürükleyerek taşıyın. 4. Satın alma düğmesini görünür tutmak için onu bir [footer](#keep-the-purchase-button-in-view) alanına ekleyin. Düğme, içerik kaydırılırken ekranın alt kısmında sabit kalır. 5. Ekran ilk açıldığında hero görselinin mi yoksa içeriğinizin mi daha fazla görünmesini istediğinizi belirlemek için sayfanın **Start position** değerini ayarlayın. 6. Sayfanın hero görseli üzerinde nasıl hareket ettiğini görmek için [önizleme alanında](builder-ui#preview-area-center) ekranı kaydırın. 7. [Cihaz listesinden](builder-ui#view-controls-bottom-toolbar) farklı modeller seçin ve sayfanın üzerindeki alanı inceleyin. **Start position** ekran yüksekliğinin yüzdesi olarak belirlendiğinden, bu alan kısa ekranlı telefonlarda daha küçük görünür. ## Sayfa, hero üzerinde nasıl kayar \{#how-the-sheet-scrolls-over-the-hero\} **Başlangıç konumu**, ekran açıldığında sayfanın bulunduğu konumdur. Varsayılan %55 değerinde sayfa, ekranın alt %55'ini kaplar ve kullanıcılar üst %45'te hero'yu görür. Ekran açıldığında tüm içerik görünür durumdaysa sayfa başlangıç konumunda kalır. Aksi takdirde kullanıcılar sayfanın tamamını hero üzerinde yukarı kaydırır. İçerik ekrandan uzunsa sayfanın üst kısmı görünüm dışına kayar. Sayfanın uzun içeriği kaydırılabilir kalması için [ekran ayarlarında](paywall-layout-and-products#scroll) **Vertical scroll** geçişini açık bırakın. Kapatırsanız, sayfa başlangıç konumunda sabit kalır ve sığmayan içerikler kesilir. Sayfa hareket ederken kullanıcılar şunları görür: - Sayfa, ekranın üst kısmındaki logo veya başlık gibi sayfanın dışındaki öğelerin üzerine kayarak açılır. Bu öğeler de yukarı hareket eder, ancak daha yavaş; bu da ekrana derinlik hissi (parallax) kazandırır. Android'de parallax efekti, Adapty SDK v4.3.0 veya sonraki sürümlerle oluşturulmuş native Android ve React Native uygulamalarında kullanılabilir. Diğer Android uygulamalarında veya eski SDK sürümlerinde bu efekt görünmez. - iOS'ta kullanıcılar sayfayı başlangıç konumunun altına çektiğinde, sayfanın dışındaki öğeler uzar. - Ekran arka planı hareket etmez. ### Hero'ya parallax ekleme \{#add-parallax-to-the-hero\} Hero'ya parallax efekti vermek için, bunu ekran arka planı olarak değil, sheet'in dışında bir görsel veya video öğesi olarak ekleyin. Öğe varsayılan olarak ekranın kenarlarına ulaşmaz. Ekran dolgusu her taraftan öğeyi içe çeker ve **Safe area** açıkken, durum çubuğunun altından başlar. 1. **Öğe ekle** panelini açın ve sayfanın üzerindeki alana bir **Resim** veya **Video** öğesi sürükleyin. 2. Öğenin sayfaya kadar uzanması için **Genişlik** ve **Yükseklik** değerlerini **Fill** olarak ayarlayın. **İçerik modu**nu (video için **Aspect**) **Fill** olarak bırakın. 3. Öğenin ekranın sol ve sağ kenarlarına kadar uzanması için [ekran ayarlarını](builder-ui#screen-settings-and-layout) açın. **Spacing** bölümünden sol ve sağ dolguyu 0 olarak ayarlayın. Sayfanın üst köşeleri düzse, öğenin sayfaya ulaşması için alt dolguyu da 0 yapın. 4. Öğenin durum çubuğunun altındaki ekranın üst kenarına kadar uzanması için, öğeyi sayfa dışında ilk öğe olarak bırakın. Ardından öğeye tıklayın ve **Position** bölümünde **Ignore safe area** onay kutusunu işaretleyin. ## Hero üzerine eleman yerleştirme \{#place-elements-over-the-hero\} Arka plan hero'sunun üzerine logo veya başlık eklemek için elemanı sayfanın üzerindeki alana sürükleyin. Sayfanın dışındaki elemanlar ekranın üstünden itibaren sıralanır; bu alana sığmayan her şey kesilir. Bunları bir [resim veya video elemanının](#add-parallax-to-the-hero) üzerine yerleştirmek için **Position** değerini **Absolute** olarak ayarlayın. Kullanıcılar kaydırırken kapat düğmesinin görünür kalmasını sağlamak için onu doğrudan ekrana ekleyin ve **Position** değerini **Fixed** olarak ayarlayın. Sayfa içindeki bir eleman için **Fixed** seçemezsiniz. :::important Android'de, **Relative** veya **Absolute** konumlandırmalı sheet dışındaki öğeler yalnızca aşağıdaki uygulamalarda dokunuşlara yanıt verir: - Adapty SDK v4.2.1 veya sonraki sürümüne sahip native Android uygulamaları - Adapty SDK v4.2.2 veya sonraki sürümüne sahip React Native uygulamaları Diğer Android uygulamalarında, butonları ve dokunulabilir diğer öğeleri sheet içinde tutun. ::: ## Satın alma düğmesini görünür tutun \{#keep-the-purchase-button-in-view\} Satın alma düğmesini ve yasal bağlantıları kullanıcılar kaydırırken görünür tutmak için bunları bir [footer](builder-containers#footer) içine koyun. Footer, sheet'in içine yerleştirilir. Footer, ekranın alt kısmında, sheet'in üzerinde sabit kalır. Kullanıcılar sheet içeriğinin tamamını footer'ın üzerinde kaydırarak görebilir. Ekran kökündeki bir footer, sheet içindekiyle aynı görünür. ## Sayfayı Stillendirin \{#style-the-sheet\} Sayfayı diğer container'lar gibi stillendirirsiniz. Padding ve köşeler farklı çalışır: - **Ekran dolgusu**: Ekran dolgusu yalnızca sheet dışındaki öğelere uygulanır; bu nedenle sheet, ekranın bir kenarından diğerine uzanır. - **Öğe dolgusu**: Sheet'in **Padding** ayarı, içeriğin ekran kenarlarına yapışmasını engeller. - **Köşeler**: Yuvarlatılmış üst köşeler, sheet'i başlangıç konumunun üzerine köşe yarıçapı kadar kaldırır; böylece hero bu köşelerde görünür. Video dolgusu olan bir sheet kalkmaz, dolayısıyla köşeleri ekran arka planını gösterir. Yarı saydam bir sheet, yalnızca tek düz renkten oluşan bir ekran arka planının üzerine kalkar. ## Kayan sayfa ve Alt Sayfa \{#sliding-sheet-vs-bottom-sheet\} Her iki panel de ekranın alt kısmını kaplar. İhtiyacınıza uyanı seçin: - **Kayan sayfa kullanın**: Ekranın ana içeriğini bir hero üzerinde katman olarak sunmak için. Sayfa, ekran açıldığında görünür durumdadır ve yalnızca kullanıcı kaydırdığında hareket eder. - **[Alt Sayfa](builder-containers#bottom-sheet) kullanın**: **Tüm planları göster** bağlantısının arkasındaki plan listesi gibi, talep üzerine görünen içerikler için. Bunu bir **Show** eylemiyle ortaya çıkarırsınız.