Divi'nin Yapışkan Seçenekleriyle Kahramanınızın Altındaki Bir Görüntü Izgarasını Nasıl Ortaya Çıkarırsınız

Ziyaretçilerinizin dikkatini çeken bir kahraman bölümü oluşturmak, web sitesinin geri kalanı için tonu ayarlayabilir. Oraya ulaşmanıza yardımcı olması için Divi'nin yapışkan seçeneklerini kullanmanın yaratıcı bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. Bugün size Divi'nin yapışkan seçenekleriyle kahramanınızdaki temel görüntü ızgarasını nasıl ortaya çıkaracağınızı gösteriyoruz. Varsayılandan yapışkana çok yumuşak bir geçiş ekledik ve 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

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene 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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Kahraman Tasarımı Oluşturun

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #111111

aralık

Bölümün tasarım sekmesine gidin ve biraz alt dolgu ekleyin. Bu alt dolgu, kaydırma deneyimini oluşturmak için bize yeterli alan sağlayacaktır.

• Alt Dolgu: 120vh

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açı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: 2
• Genişlik: %100
• Maksimum Genişlik: 2580 piksel

aralık

Sonra biraz duyarlı üst kenar boşluğu ekleyin.

• Üst boşluk:
  • Masaüstü: 10vh
  • Tablet & Telefon: 5vh

Z İndeksi

Ve bu satırın, bu bölüme ekleyeceğimiz ikinci satırın altında kaldığından emin olmak için, daha sonra, gelişmiş sekmesinde 10'un az indeksini kullanacağız.

• Z İndeksi: 10

Tüm Sütun Ayarları

Genel satır ayarları yapıldıktan sonra, sütunların her birini ayrı ayrı açın.

Ana Eleman CSS

Sütunların her birinde, telefondaki ana öğeye aşağıdaki CSS kodu satırlarını uygulayın:

Sadece telefon:

width: 50% !important;
margin: 0 !important;

Sütun 2 Ayarları

Ardından, sütun 2 ayarlarını açın.

Z İndeksi

Ve Z İndeksini 12'ye yükseltin. Bu, bu sütunu üçüncü sütunun üstüne koyacaktır.

• Z İndeksi: 12

Sütun 1'e Görüntü Modülü Ekle

Fotoğraf yükleniyor

Sütun 1'deki Resim Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bir resmi yükleyin.

aralık

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

• Alt Kenar Boşluğu:
  • Tablet ve Telefon: 10px
• Sağ Kenar Boşluğu:
  • Tablet & Telefon: %2

Görüntü Modülünü Üç Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Modül ayarlarını tamamladıktan sonra, tüm modülü üç kez kopyalayabilir ve kopyaları satırın kalan sütunlarına yerleştirebilirsiniz.

Resimleri Değiştir

Her yinelenen modüldeki görüntüyü değiştirdiğinizden emin olun.

Görüntü Modülü #2 ve #4 Aralığını Değiştirin

Ardından, Sütun 2 ve 4'teki Görüntü Modüllerinin ayarlarını açın ve bunlara aşağıdaki boşluk değerlerini uygulayın:

• Alt Kenar Boşluğu:
  • Tablet ve Telefon: 10px
• Sol Kenar Boşluğu:
  • Tablet & Telefon: %2
• Sağ Kenar Boşluğu: /

2. Satır Ekle

Sütun Yapısı

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

Degrade Arka Plan

Satır ayarlarını açın ve aşağıdaki degrade arka planını uygulayın:

• Renk 1: #111111
• Renk 2: rgba(255,255,255,0)

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik: %100
• Maksimum Genişlik: 2580 piksel

aralık

Ardından, biraz üst ve alt dolgu uygulayın.

• Üst Dolgu: 20vh
• Alt Dolgu: 20vh

Konum

Bu satırı görüntü ızgarasının üstüne yerleştirmek için konum ayarlarını buna göre kullanacağız:

• Pozisyon: Mutlak
• Yer: Üst Merkez
• Z İndeksi: 12

Sütuna Metin Modülü Ekle

H1 İçeriği Ekle

Seçtiğiniz bazı H1 içeriğini kullanarak bu satıra ilk Metin Modülünü ekleyin.

H1 Metin Ayarları

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

• Başlık Yazı Tipi: Kumbh Sans
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #ffdbaa
• Başlık Metni Boyutu:
  • Masaüstü: 120 piksel
  • Tablet: 60 piksel
  • Telefon: 40 piksel
• Başlık Harf Aralığı
  • Masaüstü: -3px
  • Tablet ve Telefon: 0px
• Başlık Metni Gölgesi:
  • Seçin: Üçüncü Seçenek
  • Başlık Metni Gölge Rengi: rgba(0,0,0,0.4)

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Maksimum Genişlik: 900 piksel
• Modül Hizalaması: Merkez

Sütuna Düğme Modülü Ekle

Kopya Ekle

Bu satırda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Hizalama

Tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Ardından, düğmeye stil verin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu:
  • Masaüstü: 20 piksel
  • Tablet: 16 piksel
  • Telefon: 14 piksel
• Düğme Metin Boyutu: #111111
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel

• Düğme Yazı Tipi: Kumbh Sans
• Düğme Yazı Ağırlığı: Kalın

aralık

Ve boşluk ayarlarında bazı duyarlı dolgu değerleri kullanın.

• Üst Dolgu:
  • Masaüstü ve Tablet: 20 piksel
  • Telefon: 15 piksel
• Alt Dolgu:
  • Masaüstü ve Tablet: 20 piksel
  • Telefon: 15 piksel
• Sol Dolgu:
  • Masaüstü ve Tablet: 50 piksel
  • Telefon: 40 piksel
• Sağ Dolgu:
  • Masaüstü ve Tablet: 50 piksel
  • Telefon: 40 piksel

2. Yapışkan Ayarları Uygulayın

1. Sıra Yapışkanı Çevir

Artık tüm unsurları yerine getirdiğimize göre, yapışkan ayarlara odaklanabiliriz. İlk satırın ayarlarını açın ve aşağıdaki yapışkan ayarları uygulayın:

• Yapışkan Konum: En Üstte Yapış
• Alt Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Yapışkan Opaklık

Ardından, filtre ayarlarında opaklığı değiştirin.

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

Görüntü Modülü #1 Sabit Ayarlar

aralık

Ardından, 1. sütundaki Görüntü Modülü ayarlarını açın. Tasarım sekmesine gidin ve biraz üst ve sağ kenar boşluğu ekleyin.

• Yapışkan Üst Marj: -%20
• Sabit Sağ Kenar Boşluğu: -%20

Geçiş

Geçiş süresini de artırın.

• Geçiş Süresi: 700ms

Görüntü Modülü #2 Yapışkan Aralık

aralık

2. sütundaki Görüntü Modülüne geçin ve aşağıdaki yapışkan boşluk ayarlarını kullanın:

• Yapışkan Üst Marj: %20
• Yapışkan Sol Kenar Boşluğu: -%30

Geçiş

Burada da geçiş süresini artırın.

• Geçiş Süresi: 1000ms

Görüntü Modülü #3 Yapışkan Aralık

aralık

Sırada, 3. sütunda Görüntü Modülü var. Aşağıdaki yapışkan boşluk değerlerini kullanın:

• Yapışkan Üst Marj: -%10
• Yapışkan Sol Kenar Boşluğu: -%25
• Sabit Sağ Kenar Boşluğu: -%25

Geçiş

Geçiş süresini buna göre değiştirin:

• Geçiş Süresi: 700ms

Görüntü Modülü #4 Yapışkan Aralık

aralık

Son olarak, 4. sütundaki Görüntü Modülünü açın. Aşağıdaki yapışkan boşluk değerlerini uygulayın:

• Yapışkan Üst Marj: -%20
• Yapışkan Sol Kenar Boşluğu: -%30

Geçiş

Geçiş süresini artırarak modül ayarlarını ve bu öğreticiyi tamamlayın. Bu kadar! Sonucu görmek için sayfayı kaydedin ve çıkın.

• Geçiş Süresi: 1000ms

Ö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, Divi'deki kahraman bölümünüzde nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, Divi'nin yapışkan bölümlerini kullanarak kaydırmada bir görüntü ızgarasını nasıl ortaya çıkaracağı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.