Ekip üyelerinizin bir atlıkarınca şeklinde sunulmasını ister misiniz? Divi ?

Hakkında sayfanızı oluştururken, muhtemelen ekip üyelerinizi de buraya dahil etmek isteyeceksiniz. Bunu yaparak, izin verirsiniz ziyaretçi işinizin arkasındaki insanlarla bağlantı kurmak için. 

Takım üyelerinizin bölümlerini kaydırmada canlandırmanın bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. 

Sizin gibi hareket eden güzel bir otomatik kaydırmalı ekip üyesi atlıkarıncasını yeniden yaratacağız. ziyaretçi sayfayı kaydır

Gidelim.

anket

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

Masaüstü bilgisayar

Divi ile atlıkarınca şeklinde sunulan ekip üyeleri

Mobil sürümü

Divi ile atlıkarınca şeklinde sunulan ekip üyeleri

Divi ile tasarlamaya başlayalım

Ayrıca Oku: Divi: Bölüm ayırıcının üzerine gelindiğinde içerik nasıl ortaya çıkar?

Yeni bölüm ekle

Dahili Büyücüler

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve farklı ekran boyutlarına özel dolgu ekleyin.

  • Dolgu (Üst ve Alt): 200px (Masaüstü), 100px (Tablet ve Telefon)

görünürlük

Tasarımımızda yatay kaydırma çubuklarının görünmemesini sağlamak için gelişmiş sekmesinde bölüm taşmalarını gizleyeceğiz.

  • Yatay Taşma: Gizli
  • Dikey Taşma: Gizli

1. satırı ekle

Sütunun yapısı

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

Genişlik

Henüz herhangi bir modül eklemeden hat ayarlarını açın, sekmeye geçin Dizayn ve boyutlandırma ayarlarında genişliği ve maksimum genişliği değiştirin.

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

aralık

Ayrıca özel üst ve alt dolgu ekliyoruz.

  • Dolgu (Üst ve Alt): 100 piksel

Sütuna bir Metin modülü ekleyin

H2 boyutunda içerik ekle

İlk Metin modülünden başlayarak modül ekleme zamanı geldi. Gir içindekiler H2 boyutu sizin seçiminiz.

H2 metin ayarları

Sekmeye geç Dizayn modülü seçin ve H2 metin parametrelerini aşağıdaki gibi değiştirin:

  • Yazı Tipi: Bataklık
  • Yazı Ağırlığı: Yarı Kalın
  • Metin Rengi: #000000
  • Metin Boyutu: 70px (Masaüstü), 50px (Tablet), 40px (Telefon)

Sütuna bir "Bölücü" modülü ekleyin

görünürlük

Ardından bir modül ekleyin bölen. “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Ardından hat ayarlarında bazı değişiklikler yapın.

  • Çizgi Rengi: #edf000
  • stil: Katı
  • Çizgi Konumu: Üst

Boyutlandırma

Ve boyutlandırma parametrelerini uygun şekilde değiştirerek modül parametrelerini tamamlayın:

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

2. satırı ekle

Sütunun yapısı

Sonraki sıra! Aşağıdaki sütun yapısını kullanın:

Boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın 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: %100

Boşluk (Yalnızca Tablet ve Telefon)

Ardından, yalnızca küçük ekran boyutlarına sol ve sağ dolgu ekleyin.

  • Dolgu (Sol ve Sağ): %5 (Yalnızca Tablet ve Telefon)
ekip üyesi atlıkarınca

Sütun parametreleri (5x)

Şimdi, bu öğreticinin sonraki üç adımında sütunlarda bazı değişiklikler yapacağız. Satırınızdaki sütunların her birine üç adımı uygulayın.

Arka Plan Gradyanı

İlk olarak, her sütuna bir degrade arka planı ekleyin.

  • Gradyan Durakları (%25): rgba(255,255,255,0)
  • Gradyan Durakları (%86): rgba(0,0,0,0.84)
  • Tür: Doğrusal
  • Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Arka plan görüntüsü

Ardından, seçtiğiniz bir arka plan resmini yükleyin. Bu arka plan resmi her ekip üyesini temsil ettiğinden, her sütun için farklı bir resim kullanın.

  • Arka Plan Resmi Boyutu : Kapak
  • Arka Plan Resmi Konumu: Merkez

Özel CSS Eklendi (Yalnızca Tablet)

Ana öğeye özel CSS ekleyerek sütun ayarlarını tamamlayın (Görünüm için Tablet yalnızca) her sütunun. 

Bu CSS kod satırları, sütunları yan yana koymak yerine tablette alt alta yerleştirmemize yardımcı olacaktır.

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

Sütuna bir 'Kişi' modülü ekleyin

İçerik ekle

Ekip üyesi bilgilerini paylaşmak için bir modül kullanacağız Kişi

Birinci Kişi modülünü 1. sütuna ekleyin ve içindekiler De Chore Choix.

Resmi Sil

Ardından görüntüyü silin. Bunun yerine, sütunun arka plan resmini kullanırız.

Arka plan görüntüsü

Ardından, modülün arka plan görüntüsü olarak bir görüntü yerleşimi ekleyeceğiz.

  • Arka Plan Resmi Boyutu: Kapak
  • Arka plan resmi konumu: merkez

Başlık metni ayarları

Sekmeye geç Dizayn modülünü seçin ve başlık metni ayarlarını aşağıdaki gibi değiştirin:

  • Başlık Başlık Düzeyi: H3
  • Başlık Yazı Tipi: Bataklık
  • Yazı Ağırlığı: Kalın
  • Başlık Metin Rengi: #ffffff
  • Başlık Metin Boyutu: %230

Gövde metni ayarları

Ayrıca gövde metni ayarlarını da değiştirin.

  • Gövde Yazı Tipi: Açık Sans
  • Metin Rengi: #ffffff
  • Satır Yüksekliği: 2,2 em

Ekip üyesi konumu metin ayarları

Ardından, ekip üyesi tarafından tutulan pozisyonun metin ayarlarında bazı değişiklikler yapın.

  • Pozisyon Yazı Tipi: Açık Yok
  • Konum Metni Rengi: #edf000

aralık

Ve aralık ayarlarına özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

  • Dolgu: %70 (Üst), %10 (Alt, Sol ve Sağ)

“Kişi” modülünü dört kez klonlayın

Kişi modülünü tamamladıktan sonra, tüm modülü dört kez klonlayabilirsiniz.

Kopyaları kalan sütunlara yerleştirin

Satırın kalan dört sütununa kopya modülleri yerleştirin. 

Ayrıca değiştirdiğinizden emin olun. içindekiler.

Bir satırı otomatik kaydırmalı atlıkarınca haline getirin

Ayrıca bakınız: Divi: Fareyle üzerine gelindiğinde bir akışkan sütun ızgarası nasıl oluşturulur

2. satır boyutunu değiştir

Şimdi, bu çizgiyi otomatik kaydırmalı bir atlıkarıncaya dönüştürmek için, çizgi ayarlarını yeniden açmamız ve boyutlandırma ayarlarında genişlik ve maksimum genişliği değiştirmemiz gerekecek.

  • Genişlik: %180
  • Maksimum Genişlik: %220 (Masaüstü), %100 (Tablet ve Telefon)
Divi ile atlıkarınca

2. satıra yatay hareket ekle

Sekmede efekt ayarlarını kaydırmak için yatay hareket ekleyerek çizgi ayarlarını tamamlayın gelişmiş seçenek altında Kaydırma Efektleri ve işin bitti!

  • Yatay Hareketi Etkinleştir: Evet
  • Başlangıç ​​Ofseti:
    • Masaüstü: 2,5
    • Tablet & Telefon: 0
  • Orta Ofset: 0 (ila %40)
  • Bitiş Ofseti:
    • Masaüstü: -25 (%62'ye kadar)
    • Tablet & Telefon: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi ile atlıkarınca şeklinde sunulan ekip üyeleri

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Masaüstü bilgisayar

Divi ile atlıkarınca şeklinde sunulan ekip üyeleri

DIVI'yı Şimdi İndirin !!!

Mobil görünüm

Divi ile atlıkarınca şeklinde sunulan ekip üyeleri

DIVI'yı Şimdi İndirin !!!

Sonuç

Bu makalede, yerleşik kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Divi

Özellikle, otomatik kaydırma yapan ekip üyelerini içeren güzel bir atlıkarıncayı yeniden yarattık. Ne zaman ziyaretçi sayfayı kaydırdığınızda atlıkarıncanın başka bir kısmı görünür.

Bu eğitimin sonraki projeleriniz için size ilham vereceğini umuyoruz. Divi. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...