İnsanlara Farklı Yapışkan Adımlarda Rehberlik Etmek İçin Divi Nasıl Kullanılır?

Ziyaretçileri web siteniz aracılığıyla ulaşmaya ikna etmeye çalışırken, onlara doğru teşvikleri vermek çok önemlidir. Teşvikler düşünüldüğünde, net ve karşı konulmaz harekete geçirici mesajlar hemen akla gelir. Ancak CTA'lar genellikle satın alma sürecinin son kısmıdır. Büyük olasılıkla şirketinizin değerini göstererek orada yolunuzu inşa edeceksiniz. Bunu yapmanın en iyi yollarından biri, yaklaşımınızı ve benzersiz değer teklifinizi paylaşmaktır. Yaklaşımınızı tasarlamanın sorunsuz bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. Bugün size, insanlar sayfayı kaydırırken ve okurken değişen farklı yapışkan adımları nasıl ekleyeceğinizi göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Yapışkan Adımlar Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz yapışkan adımlar düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

1. Bölüm Tasarımı Oluşturun

Normal Bölüm Ekle

Degrade Arka Plan

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bu bölümün ayarlarını açın ve bir degrade arka planı uygulayın:

• Renk 1: #ffffff
• Renk 2: #e5e5e5
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 150deg

Arka plan görüntüsü

Daha sonra bir arka plan resmi yükleyin. Bu eğitim boyunca kullandığımızı, bu yazının başında bulabileceğiniz indirme klasöründe bulabilirsiniz. Arka plan resmini ücretsiz ve herhangi bir kısıtlama olmaksızın kullanabilirsiniz.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Sol Üst

aralık

“0px” ​​ekleyerek bölümün varsayılan alt dolgusunu kaldırın.

• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edin:

Arka plan rengi

Henüz modül eklemeden satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(130,100,239,0,09)

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarını buna göre değiştirin:

• Sütun Yüksekliklerini Eşitle: Evet
• Satır Hizalama: Merkez

aralık

Bazı özel boşluk değerleri de uygulayın.

• Üst Marj: %5
• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sınır

Ardından, kenarlık ayarlarına gidin ve bazı yuvarlatılmış köşeler kullanın.

• Tüm Köşeler: 10px

taşmalar

Satır taşmalarını da görünür olarak değiştiriyoruz. Bu, satır kapsayıcısını aşan her şeyin gizlenmemesini sağlayacaktır.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: %5
• Alt Dolgu: 5%

Sütun 2 Ayarları

Degrade Arka Plan

Devam ederek, 2. sütuna bir gradyan arka planı ekleyeceğiz.

• Renk 1: #7b47ff
• Renk 2: #6929aa
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 158deg

aralık

Bu sütuna da bazı özel dolgular ekleyeceğiz.

• Üst Dolgu: %5
• Alt Dolgu: 5%
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sınır

Bazı yuvarlak köşelerle birlikte.

• Tüm Köşeler: 10px

Ölçeği Dönüştür

Ve aşağıdaki dönüştürme ölçeği değerlerini uygulayarak dönüştürme ayarlarında sütunun boyutunu artıracağız:

• Her ikisi de: %107

Sütun 1'e Metin Modülü Ekle

H3 İçeriği Ekle

Sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H3 içeriğini girin.

H3 Metin Ayarları

Modülün tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:

• Başlık 3 Yazı Tipi: Poppins
• Başlık 3 Metin Rengi: #6929aa
• Başlık 2 Metin Boyutu: 35px
• Başlık 3 Harf Aralığı: -1px

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Ardından, sütun 1'e bir Bölücü Modülü yerleştireceğiz. “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Modülün tasarım sekmesine gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #f5ca4e

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 6px
• Genişlik: 20%
• Yükseklik: 6 piksel

Sınır

Kenarlık ayarlarına bazı yuvarlatılmış köşeler ekleyerek modül ayarlarını tamamlayın.

• Tüm Köşeler: 20px

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

2. sütunda, ihtiyacımız olan tek modül, bazı açıklama içeriğine sahip bir Metin Modülüdür.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Playfair Ekranı
• Metin Boyutu: 16px
• Metin Satırı Yüksekliği: 2.1em

aralık

Bazı özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: %5
• Alt Dolgu: 5%
• Sol Dolgu: %5
• Sağ Dolgu: %5

Tüm Satırı Gerektiği Kadar Kez Klonlayın

İlk satırı tamamladıktan sonra, ilk adımınız hakkında ne kadar bilgi paylaşmak istediğinize bağlı olarak, istediğiniz kadar kopyalayabilirsiniz.

Tüm Kopyayı Değiştir

Yinelenen satırlardaki tüm kopyaları değiştirdiğinizden emin olun.

2. Bölümün Altına Adım Satır Çubuğu Ekle

Yeni Satır Ekle

Sütun Yapısı

Artık tüm açıklayıcı satırları yerleştirdiğimize göre, yapışkan adım satır çubuğumuzu ekleyebiliriz. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

Degrade Arka Plan

Satır ayarlarını açın ve bir degrade arka planı kullanın.

• Renk 1: #ffdf51
• Renk 2: #e5ac49
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 150deg

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Satır Hizalama: Merkez

aralık

Daha sonra bazı özel boşluk değerleri uygulayın.

• Üst Marj: %5
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sınır

Ardından, kenarlık ayarlarına gidin ve bazı yuvarlatılmış köşeler ekleyin.

• Tüm Köşeler: 10px

Kutu Gölge

Aşağıdaki kutu gölgesini de uygulayın:

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.13)

taşmalar

Ardından, gelişmiş sekmeye gidin ve taşmaları görünür olarak ayarlayın.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütun 2 Aralığı

Ardından, sütun 2 ayarlarını açın ve bazı özel üst ve alt dolguları kullanın.

• Üst Dolgu: %1
• Alt Dolgu: 1%

Sütun 3 Boşluk

Sütun 3'e de bazı özel üst ve alt dolgular ekliyoruz.

• Üst Dolgu: %2
• Alt Dolgu: %2

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Yapışkan adım satır çubuğumuza modül ekleme zamanı. Sütun 1'e bir Metin Modülü ekleyin ve içerik kutusunda adımdan bahsedin.

Degrade Arka Plan

Ardından, bir degrade arka planı uygulayın.

• Renk 1: #7b47ff
• Renk 2: #6929aa
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 158deg

Metin Ayarları

Modülün tasarım sekmesine gidin ve metni buna göre biçimlendirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #ffffff
• Metin Boyutu: 27px

boyutlandırma

Boyutlandırma ayarlarında da bazı değişiklikler yapın.

• Genişlik: %60
• Modül Hizalaması: Merkez

aralık

Ardından, boşluk ayarlarına bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px

Sınır

Sonraki kenarlık ayarlarına bazı yuvarlak köşeler ekleyin.

• Tüm Köşeler: 10px

Kutu Gölge

Ayrıca ince bir kutu gölgesi kullanıyoruz.

• Gölge Rengi: rgba(0,0,0,0.3)

Dönüştür Çeviri

Ve Divi'nin transform translate ayarlarını kullanarak modülü biraz yeniden konumlandırarak modül ayarlarını tamamlayacağız.

• Sağ: -20 piksel

Sütun 2'ye Metin Modülü Ekle

H2 İçeriği Ekle

2. sütunda, içinde bulunduğumuz adımı açıklayan bazı H2 içeriğine sahip bir Metin Modülü ekliyoruz.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını aşağıdaki gibi biçimlendirin:

• Başlık 2 Yazı Tipi: Poppins
• Başlık 2 Yazı Tipi Ağırlığı: Orta
• Başlık 2 Metin Hizalama:
  • Masaüstü: Sol
  • Tablet & Telefon: Merkez
• Başlık 2 Metin Rengi: #6d40ed
• Başlık 2 Harf Aralığı: -1px

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: %5
• Alt Dolgu: 5%

Sütun 3'e Metin Modülü Ekle

İçerik Ekle

Bir sonraki ve son sütuna. Bazı açıklama içeriğine sahip bir Metin Modülü ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Playfair Ekranı
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: rgba(109,64,237.0,46)
• Metin Boyutu: 20px
• Metin hizalama:
  • Masaüstü: Sol
  • Tablet & Telefon: Merkez

3. Adım Satır Çubuğuna Yapışkan Efektler Uygulayın

Sabit Satır Ayarları

Artık yapışkan basamaklı çubuk tasarımımız tamamlandı, şimdi onu dibe yapıştırma zamanı. Satır ayarlarını açın, gelişmiş sekmesine gidin ve aşağıdaki sabit konum ayarlarını uygulayın:

• Yapışkan Konum: Aşağıya Yapış
• Yapışkan Alt Ofset: 1px
• Üst Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Yapışkan Satır Filtresi

Varsayılan durumda, satır çubuğunun görünür olmasını istemiyoruz. Ancak yapışkan hale geldiğinde görünmesini istiyoruz. Bunun gerçekleşmesi için filtre ayarlarında opaklık filtresini değiştireceğiz:

• Varsayılan: %0
• Yapışkan: %100

4. Sonraki Adımlar için Tüm Bölümü Yeniden Kullanın

Bölümü Gerektiği Kadar Kez Klonlayın

Artık 1. adıma ayrılmış olan ilk bölümümüz oluşturulduğuna göre, sahip olduğumuz adım sayısına göre tüm bölümü yeniden kullanabiliriz.

Yinelenen Bölümlerdeki Tüm Kopyayı Değiştir

Yinelenen bölümlerdeki tüm kopyaları değiştirdiğinizden emin olun. Bu kadar!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, web sitenizin yaklaşım tasarımıyla nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, ziyaretçilerinizin yaklaşımınızın farklı bölümlerinde gezinmesine yardımcı olacak farklı yapışkan adım çubukları oluşturmak için Divi'nin yapışkan seçeneklerini nasıl kullanacağınızı gösterdik. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.