Gerçek fiyatın yanındaki üzeri çizili fiyat, indirimi tek bakışta görünür kılar. Bu rehber, yıllık ürün kartını; aylık plandaki abonelik maliyetini üzeri çizili biçimde, yıllık planın etkin aylık fiyatının yanında ve üstünde bir indirim rozetiyle gösterecek şekilde yeniden düzenler. Üstü çizili biçimlendirme, metnin tamamına uygulanır; bir değişkeni büyük bir metin öğesinin içinde çizemezsiniz. Bu yüzden üstü çizili fiyat, indirimli fiyatla yan yana, yatay bir kapsayıcı içinde kendi metin öğesinde yer alır.

Başlamadan önce

• Ürünler içeren bir paywall ekranı oluşturun — örneğin Temel bir paywall ekranı oluşturma adımlarını takip edebilirsiniz. Bu örnekte paywall’ın yıllık ve aylık bir ürün sunduğu varsayılmaktadır.

1. Fiyat satırlarını üst üste koy

Yıllık kart, tek bir fiyat satırıyla başlar — yıllık ürünün prod_price değişkeni ve ardından gelen /year ifadesi, örneğin $29.99/year şeklinde görüntülenir. Bunun üstüne aylık fiyatlandırma için ikinci bir satır ekle.

1. Layers panelinde, yıllık ürün kartının içindeki fiyat metnini seçin. Metin zaten kartın dikey container’ında yer aldığından, kopya onun altına yerleşecek.
2. Katmandaki üç nokta menüsüne tıklayın ve Duplicate’i seçin. Kopya, orijinalin altında görünür. Bir sonraki adımda, üstteki metin aylık fiyat satırı olacak; alttaki ise yıllık fiyatı koruyacak.

2. Aylık satırını iki fiyata bölün

Aylık satırı iki metin öğesi içerir: üzeri çizili aylık plan fiyatı ve yıllık planın aylık başına fiyatı.

1. Üstteki metin öğesini seçin, üç nokta menüsüne tıklayın ve Wrap > Wrap in Horizontal Container seçeneğini belirleyin.

2. Yeni container içindeki metin katmanının üç nokta menüsüne tıklayın ve Duplicate seçeneğini belirleyin.

   

3. İlk metin öğesini seçin ve Content alanını temizleyin. Değişken simgesine tıklayın, aylık ürünü seçin, ardından prod_price_per_month özelliğini seçin. Değişkenin ardından /month yazın.

4. Design sekmesinde, Typography altında Decoration seçeneğini Strikethrough olarak ayarlayın (bkz. Öğe stili — Decoration).

5. İkinci metin öğesini seçin ve içeriğini aynı şekilde değiştirin; ancak bu sefer yıllık ürünün prod_price_per_month özelliğini seçin. Değişkenin ardından /month yazın.

3. Yıllık fiyatı daha az belirgin yapın

Kopyalanan aylık fiyatlar, orijinal fiyat stilini miras aldığından şu anda üç fiyat da aynı boyut ve kalınlığı paylaşıyor. Yıllık fiyatı daha ince bir görünüme kavuşturun; böylece aylık satır öne çıkar.

1. Tuvalde, alt metin öğesini seçin — yıllık fiyat.
2. Öğenin üzerindeki araç çubuğunda metin stili açılır menüsünü açın ve daha ince bir stil seçin — örneğin Caption. Ya da Design sekmesinde Typography altından farklı bir stil belirleyebilirsiniz.

4. İndirim rozetini ekle

Rozet, fiyatların yanında tasarrufu vurgular.

1. + > Badge seçeneğine tıkla.
2. Layers panelinde rozeti yıllık ürünün içine, fiyatların bulunduğu dikey container ile radyo düğmesi arasına sürükle.
3. Rozetin metin katmanını seç ve Content alanını düzenle — örneğin %75 Tasarruf Et.

İndirim yüzdesi için bir değişken bulunmuyor — hesaplamayı kendi fiyatlarından yapıp sabit metin olarak gir.

Artık yıllık kart, fiyatını aylık plana göre konumlandırıyor: üstü çizili aylık fiyat, yıllık planın aylık bazda efektif fiyatı ve indirim rozeti tek bir satırda yer alıyor; tam yıllık fiyat ise bunların altında gösteriliyor.

Sonraki adımlar

• Flow’unuzu kaydedin ve yayınlayın.
• Kullanıcılara göstermeye başlamak için flow’u bir placement’a ekleyin.