Divi'nin Kaydırma Efektleriyle Kaydırılabilir Portföy Gezinme Listesi Oluşturun

Portföy sayfaları, web tasarımınızla yaratıcı olmak için mükemmel bir bahanedir. Bu eğitimde, herhangi bir portföy sayfasını renklendirmek için göz alıcı kaydırılabilir bir portföy gezinme listesini nasıl bir araya getireceğinizi göstereceğiz. Divi'nin kaydırma efektlerini kullanarak menü öğeleri ekranın ortasına ulaştıklarında hayat buluyor. Bağlantı bağlantılarına sahip düğmeler, kullanıcının ilgili bölümlere gitmesine yardımcı olur.

Tasarımı yeniden oluşturmak için okumaya devam edin veya JSON dosyasını ücretsiz indirin.

Ön izleme

Eğitime başlamadan önce, farklı ekran boyutlarındaki tasarıma bir göz atalım.

masaüstü

Mobil

tel kafes

Bu duyarlı kaydırılabilir portföy gezinme listesi, bir dizi tekrarlanan ve değişen satırla oluşturulur. Bu nedenle, tel çerçeve görünümünün bir ekran görüntüsünü ekledik. Bu, satırların sırasını ve ilgili modüllerini takip etmenize yardımcı olacaktır. Takip etmek için her satırı buna göre etiketlemenizi öneririz. Bu talimatları eğitim adımlarına da ekledik.

Kahraman Bölümlerini ÜCRETSİZ İndirin

Ellerinizi ücretsiz kaydırılabilir portföy gezinme listesi 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.

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. Yeni Bölüm Oluştur

Bölüm Ekle

Arka plan

Yeni veya mevcut bir sayfanın içinde normal bir bölümle başlayın. Herhangi bir satır veya modül eklemeden önce bölüme bir arka plan rengi ekleyin.

• Arka Plan Rengi: #222831

aralık

Kaydırma efektlerinin de sihirlerini yapması için bölüme yeterli boşluk ekleyin.

• Üst ve Alt Dolgu: 660px

2. Kaydırılabilir Portföy Gezinme Listesi Oluşturun

1. Satır Ekle

Sütun Yapısı

İlk satırı ekleyin ve aşağıdaki sütun yapısını seçin:

boyutlandırma

Sonraki satırın genişliğini ayarlayın.

• Genişlik: %90
• Maksimum Genişlik: 2560 piksel

aralık

Ardından, boşluk ayarlarını yapın.

• Sol Dolgu
  • Masaüstü: 130 piksel
  • Tablet ve Telefon: 50px

Yönetici Etiketi

Ve satırı etiketleyin.

• Yönetici Etiketi: Satır 1

Sütuna Metin Modülü Ekle

İçerik

Başlık için bir metin modülü ekleyin. Seçtiğiniz bazı H1 içeriğini ekleyin.

Başlık Metni

Tasarım sekmesine gidin ve başlık metnini aşağıdaki gibi biçimlendirin:

• Başlık Seviyesi: H1
• Yazı Tipi: Alata
• Ağırlık: Kalın
• Renk: #a3f7bf
• Boy
  • Masaüstü: 190 piksel
  • Tablet: 120 piksel
  • Telefon: 50 piksel
• Harf boşluğu
  • Masaüstü ve Tablet: 7px
  • Telefon: 8px

Kaydırma Efektleri

Son olarak, gelişmiş sekmeye bir solma içeri ve dışarı kaydırma efekti ekleyin.

• Efekti Etkinleştir: İçeri ve Dışarı Soluklaşma
• Görünüm Alt
  • pozisyon: %100
  • Opaklığı Başlatma:%100
• Orta Opaklık
  • Pozisyon: %50
  • Orta: %100
• Görünüm Üstü
  • pozisyon: %80
  • Bitiş Opaklığı: %20

2. Satırı Ekle

Sütun Yapısı

Şimdi navigasyon öğelerini ekleme zamanı. Eşit büyüklükte iki sütun içeren yeni bir satır ekleyin.

Yönetici Etiketi

Satırı etiketleyin.

• Yönetici Etiketi: 2. Satır

boyutlandırma

Boyutlandırma ayarlarını da yapın.

• Oluk Genişliği: 1
• Genişlik: %80
• Maksimum Genişlik: 1920 piksel

Sütun 1 Ayarları

Özel CSS

Modülleri eklemeden önce, oranların daha küçük ekran boyutlarında aynı kaldığından emin olmak için sütunların ana öğelerine bir satır CSS kodu ekleyin. Sütun 1 ile başlayın:

• Ana Öğe: genişlik: %20 !önemli

width: 20% !important }

Sütun 2 Ayarları

Özel CSS

İkinci sütun için de aynısını yapın.

• Ana Eleman: genişlik: %80 !önemli

width: 80% !important }

Sütun 1'e Düğme Modülü Ekle

İçerik

Şimdi, seçtiğiniz bir kopya ile sütun 1'e bir düğme modülü ekleyin.

• Düğme Metni: Görüntüle

Bağlantı

Sonraki modüle bir bağlantı bağlantısı ekleyin. Eğiticide daha sonra bu bağlantı bağlantısı için eşleşen bir CSS kimliği ekleyeceğiz.

• Düğme Bağlantı URL'si: #VB

hizalama

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

• Düğme Hizalama: Merkez

Buton

Ardından, düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller: Evet
• Yazı Boyutu
  • Masaüstü: 30 piksel
  • Tablet: 25 piksel
  • Telefon: 20 piksel
• Renk: Beyaz #ffffff
• Arka Plan: Koyu Gri #222831
• Kenar Genişliği: 0px
• Sınır Yarıçapı: 0px
• Harf Aralığı: 1px
• Yazı Tipi: Alata
• Düğme Simgesini Göster: Hayır

aralık

Aralık ayarlarında da değişiklik yapın.

• Üst Dolgu
  • Masaüstü: 25 piksel
  • tablet: 15 piksel
  • Telefon: 5px

Kaydırma Efektleri

Ve bir solma içeri ve dışarı kaydırma efekti ekleyin.

• Efekti Etkinleştir: İçeri ve Dışarı Soluklaşma
• Görünüm Alt
  • Pozisyon: %40
  • Opaklığı Başlatma:0%
• Orta Opaklık
  • Alt: %45
  • Orta: %100
  • Üst: %55
• Görünüm Üstü
  • Pozisyon: %60
  • Bitiş Opaklığı: %0

Kutu Gölge

Bir sonraki modüle geçmeden önce, düğmenin üzerine gelme ayarlarına bir kutu gölgesi ekleyin.

• Kutu Gölgesi: 4. Seçenek
• Yatay Konum: 0px
• Dikey pozisyon
  • Fareyle üzerine gelin: 5 piksel
• Bulanıklık Gücü: 0px
• Yayılma Gücü: 0px
• Gölge Rengi: Su Yeşili #a3f7bf

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

İçerik

Seçtiğiniz bazı H3 içeriğiyle 2. sütuna bir metin modülü ekleyerek devam edin.

Başlık Metni

Tasarım sekmesine gidin ve başlık metnini aşağıdaki gibi biçimlendirin:

• Başlık Seviyesi: H3
• Yazı Tipi: Alata
• Renk
  • Masaüstü: Beyaz #ffffff
  • Fareyle üzerine gelin: Su Yeşili #a3f7bf
• Yazı Boyutu
  • Masaüstü: 80 piksel
  • Tablet: 65 piksel
  • Telefon: 38 piksel

Kaydırma Efektleri

Gelişmiş sekmesinde solma ve solma kaydırma efekti ekleyerek modül ayarlarını tamamlayın.

• Efekti Etkinleştir: İçeri ve Dışarı Soluklaşma
• Görünüm Alt
  • Pozisyon: %40
  • Başlangıç ​​Opaklığı: %15
• Orta Opaklık
  • Alt: %45
  • Orta: %100
  • Üst: %55
• Görünüm Üstü
  • Pozisyon: %60
  • Bitiş Opaklığı: %15

2. Satırı Çoğalt

Gezinme listesini tamamlamak için bu satırı üç kez çoğaltın. Yeni satırlar yeniden numaralandırılacaktır; 2, 3 ve 4.

3. Satırı Ayarla

Satır Yönetici Etiketi

Satırın yönetici etiketini 2'den 3'e değiştirin.

• Yönetici Etiketi: Satır 3

Düğme Modülü

Bağlantı bağlantısını #VB'den #WEB'e değiştirin.

• Düğme Bağlantı URL'si: #WEB

Metin Modülü

Metin modülündeki H3 içeriğini de değiştirin.

• Gövde Metni: Web siteleri

4. Satırı Ayarla

Satır Yönetici Etiketi

Satırın yönetici etiketini 2'den 4'e değiştirin.

• Yönetici Etiketi: Satır 4

Düğme Modülü

Bağlantı bağlantısını #VB'den #MA'ya değiştirin.

• Düğme Bağlantı URL'si: #MA

Metin Modülü

H3 içeriğini de değiştirin.

• Gövde Metni: Mobil Uygulamalar

5. Satırı Ayarla

Satır Yönetici Etiketi

Satırın yönetici etiketini 2'den 5'e değiştirin.

• Yönetici Etiketi: Satır 5

Satır Aralığı

Biraz alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu
  • Masaüstü 230 piksel
  • tablet: 100 piksel
  • Telefon: 60 piksel

Düğme Modülü

Bağlantı bağlantısını #VB'den #UX'e değiştirin.

• Düğme Bağlantı URL'si: #UX

Metin Modülü

Ve burada da H3 içeriğini değiştirin.

• Gövde Metni: UX Tasarımı

3. Portföy Öğeleri Oluşturun

6. Satırı Ekle

Sütun Yapısı

Kaydırılabilir portföy gezinme listesi, portföy öğelerine bağlanır. Her öğe iki satırdan oluşur. Görünmez bir ayırıcıya sahip bir satır ve harekete geçirici mesaj modülüne sahip başka bir satır. CSS kimlikleri, bölücü ile satıra eklenir. Bu şekilde, bağlantı gezintisi portföy öğesinin üstünde değil, ortasında duracaktır.

Şimdi öğeleri oluşturalım. Bir sütunlu bir satır ekleyin.

Yönetici Etiketi

Yeni satırı etiketlemeyi unutmayın.

• Yönetici Etiketi: Satır 6

CSS Kimliği ve Sınıfları

Gelişmiş sekmeye eşleşen bir CSS kimliği ekleyin.

• CSS Kimliği: VB

Satır 6'ya Bölücü Modülü Ekleme

görünürlük

Satırın sütununa görünmez bir ayırıcı ekleyin.

• Bölücüyü Göster: Hayır

6. Satırı Çoğalt

Bu satırı üç kez çoğaltın. Yeni satırlar yeniden numaralandırılacaktır; 8, 10 ve 12.

8. Satırı Ayarla

Yönetici Etiketi

Yönetici etiketini 6'dan 8'e değiştirin.

• Yönetici Etiketi: Satır 8

CSS Kimliği ve Sınıfları

CSS kimliğini VB'den WEB'e değiştirin.

• CSS Kimliği: WEB

Satır 10'u Ayarla

Yönetici Etiketi

Yönetici etiketini 6'dan 10'a değiştirin.

• Yönetici Etiketi: Satır 10

CSS Kimliği ve Sınıfları

CSS kimliğini VB'den MA'ya değiştirin.

• CSS Kimliği: MA

Satır 12'yi Ayarla

Yönetici Etiketi

Yönetici etiketini 6'dan 12'ye değiştirin.

• Yönetici Etiketi: Satır 12

CSS Kimliği ve Sınıfları

Yönetici Etiketi

CSS kimliğini VB'den UX'e değiştirin.

• CSS Kimliği: UX

7. Satır Ekle

Sütun Yapısı

Dört sırayı bölücülerle şimdilik oldukları yerde bırakın. Tek sütunlu yeni bir satır ekleyin.

Arka plan

Henüz bir modül eklemeden satır ayarlarını açın ve arka planı aşağıdaki gibi biçimlendirin:

• Arka Plan Resmi: Fotoğraf
  • Görüntü Karışımı: Çarpma
• Arka Plan Gradyanı
  • Renk 1: Koyu Gri #222831
  • Renk 2: Şeffaf
  • Tür: Doğrusal
  • Yön: 90 derece
  • Başlangıç ​​Konumu: %50
  • Bitiş Konumu: %100
  • Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Yönetici Etiketi

Satırı etiketleyin.

• Yönetici Etiketi: 7. satır

boyutlandırma

Sonraki satırın boyutlandırma ayarlarını yapın.

• Genişlik: %80
• Maksimum Genişlik: 2560 piksel
• Hizalama: Merkez

Sınır

Bazı yuvarlak köşeler de ekleyin.

• Yuvarlatılmış Köşeler: 25px

Kaydırma Efektleri

Ve bir solma içeri ve dışarı kaydırma efektini etkinleştirin.

• Efektleri Etkinleştir: İçeri ve Dışarı Soluklaşma
  • Opaklığı Başlatma: %0
  • Orta Opaklık: %100
    • pozisyon: %80
  • Bitiş Opaklığı: %20

Eyleme Çağrı Modülünü 7. Sıraya Ekle

İçerik

Şimdi satıra bir eylem çağrısı modülü ekleyin.

• Başlık: Görsel Markalama
• Düğme: Daha Fazla Bilgi Edinin
• Gövde: Açıklayıcı Metin

Arka plan

Varsayılan arka plan rengini kaldırın.

• Arkaplan: Yok

Bağlantı

İlgili sayfaya bir bağlantı ekleyin. Şimdilik bir # ekleyeceğiz.

• Bağlantı: #

Başlık Metni

Sonraki başlık metnine stil verin.

• Başlık Seviyesi: H2
• Yazı Tipi: Alata
• Renk: Beyaz #ffffff
• Boy
  • Masaüstü: 70 piksel
  • Tablet: 60 piksel
  • Telefon: 48 piksel
• Harf Aralığı: 1px

Gövde metni

Gövde metnine de stil verin.

• Yazı Tipi: Lato
• Renk: Beyaz #ffffff
• Boy
  • Masaüstü: 19 piksel
  • tablet: 20 piksel
  • Telefon: 18 piksel
• Çizgi Yüksekliği: 1.8em

Buton

Düğme ayarlarına gidin ve aşağıdaki değişiklikleri uygulayın:

• Özel Stiller: Evet
• Metin Boyutu: 20px
• Metin Rengi: Koyu Gri #222831
• Arka plan: Su Yeşili #a3f7bf
• Sınır Yarıçapı: 9px
• Harf Aralığı: 1px
• Düğme Yazı Tipi: Alata
• Üst Kenar Boşluğu: 35px

boyutlandırma

Modülün boyutunu da ayarlayın.

• Genişlik: %50
• Maksimum genişlik
  • Masaüstü: %50
  • Tablet ve Telefon: %100
• Hizalama: Sol

aralık

Modüle de biraz dolgu ekleyin.

• Sol Dolgu:
  • Masaüstü: 90 piksel
• Sol ve Sağ Dolgu:
  • tablet: 50 piksel
  • Telefon: 40 piksel

Özel CSS

Son olarak, gelişmiş sekmesindeki promosyon başlığına bir satır CSS kodu ekleyin.

• Promosyon Başlığı: alt dolgu: 30 piksel;

padding-bottom: 30px; }

7. Satırı Çoğalt

7. satırı üç kez çoğaltın. Yeni satırlar yeniden numaralandırılacaktır; 9, 11 ve 13.

9. Satırı Ayarla

Arka plan

Arka plan görüntüsünü değiştirin ve degradenin yönünü değiştirin.

• Arka Plan Resmi: Yeni fotoğraf
• Arka Plan Gradyanı
  • Renk 1: Şeffaf
  • Renk 2: Koyu Gri #222831
  • Başlangıç ​​Konumu: %0
  • Bitiş Konumu: %50

Yönetici Etiketi

Satırın yönetici etiketini 7'den 9'a güncelleyin.

• Yönetici Etiketi: 9. satır

9. Satırdaki Harekete Geçirici Mesaj Modülünü Ayarlayın

İçerik

Modülün içeriğini güncelleyin.

• Başlık: Web siteleri
• Gövde: Yeni açıklayıcı metin

Bağlantı

Linki de güncelleyin.

• Bağlantı: Yeni bağlantı

boyutlandırma

Modülün hizalamasını soldan sağa değiştirin.

• Modül Hizalaması: Sağ

aralık

Masaüstü dolgusunu soldan sağa değiştirin. Tablet ve mobil ayarlarının aynı kalması gerekir.

• Sağ Dolgu
  • Masaüstü: 90 piksel

11. Satırı Ayarla

Arka plan

Yeni satırdaki arka plan resmini değiştirin.

• Arka Plan Resmi: Başka Bir Fotoğraf

Yönetici Etiketi

Satırın yönetici etiketini 7'den 11'e güncelleyin.

• Yönetici Etiketi: satır 11.

11. Satırdaki Harekete Geçirici Mesaj Modülünü Ayarlayın

İçerik

Eylem çağrısı modülünün içindeki içeriği değiştirin.

Bağlantı

Linki de değiştirin.

• Bağlantı: Yeni bağlantı

13. Satırı Ayarla

Arka plan

Arka plan görüntüsünü değiştirin ve degradenin yönünü değiştirin.

• Arka Plan Resmi: Yeni fotoğraf
• Arka Plan Gradyanı
  • Renk 1: Şeffaf
  • Renk 2: Koyu Gri #222831
  • Başlangıç ​​Konumu: %0
  • Bitiş Konumu: %50

Yönetici Etiketi

Yönetici etiketi sekmesini açın ve satır numarasını 13 olarak güncelleyin.

13. Satırdaki Harekete Geçirici Mesaj Modülünü Ayarlayın

İçerik

Modülün içeriğini güncelleyin.

• Başlık: UX Tasarımı
• Gövde: Yeni açıklayıcı metin

Bağlantı

Linki de güncelleyin.

• Bağlantı: Yeni bağlantı

boyutlandırma

Modülün hizalamasını soldan sağa değiştirin.

• Modül Hizalaması: Sağ

aralık

Masaüstü dolgusunu soldan sağa değiştirin. Tablet ve mobil ayarlarının aynı kalması gerekir.

• Sağ Dolgu
  • Masaüstü: 90 piksel

Satırları Yeniden Düzenle

7, 9 ve 11. satırları taşıyın.

Yönetici etiketlerine göre satırları doğru sırada yerleştirin.

Tel Çerçevenizi Karşılaştırın

Kaydırılabilir portföy gezinme listenizin ve öğelerinizin tel çerçevesini iki kez kontrol edin. Bağlantı bağlantılarının düzgün çalışması için satırlar olmalıdır. İşte tel kafes görünümümüze başka bir bakış:

Ön izleme

Kaydırılabilir portföy gezinme listesini yeniden oluşturmak için tüm adımlardan geçtik. Tasarımın farklı ekran boyutlarında nasıl göründüğüne bir kez daha bakalım.

masaüstü

Mobil

Son düşünceler

Bu adım adım öğreticide, Divi'nin kaydırma efektleriyle kaydırılabilir bir portföy gezinme listesi oluşturduk. Ayrıca, portföy öğeleri ekledik. Gezinme, bağlantı bağlantıları ve CSS kimlikleri ile kontrol edilir. Bu, portföy öğelerini etkileşimli olarak görüntülemenin harika bir yoludur. Beğendiyseniz veya herhangi bir sorunuz varsa bize bir yorum bırakın!