Ana İçeriğe Geç

Divi ile kayan bir ekip üyesi nasıl oluşturulur

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Hakkında sayfanızı oluştururken muhtemelen ekip üyelerinizi de sayfayla tanıştırmak isteyeceksiniz. Bunu yaparken, ziyaretçilerinizin işletmenizin arkasındaki kişilerle etkileşime girmesine izin verirsiniz. Parşömendeki ekip üyeleri bölümünüzü canlandırmanın bir yolunu arıyorsanız, bu eğitim sizin için olabilir. Ziyaretçileriniz sayfayı kaydırdıkça hareket eden otomatik kaydırmalı bir ekip üyesi atlıkarınca oluşturacağız. 

gösteri

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

Divi takım üyesini kaydır

Gebe kalmanın başlangıcı

Yeni bölüm ekle

aralık

Ü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.

  • Üst dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
  • Alt dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
Parametre yapılandırması

taşmaları

Tasarımımızda yatay kaydırma çubuğunun görünmediğinden emin olmak için, gelişmiş sekmede bölüm taşmalarını gizleyeceğiz.

  • Yatay taşma: gizli
  • Dikey taşma: gizli
Taşma yapılandırması

1 numaralı satır ekle

Sütun yapısı

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

Divi düzenini seçin

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarında genişliği ve maksimum genişliği değiştirin.

  • Genişlik:% 90
  • Maksimum genişlik: 1580 piksel
Divi hattı parametresi

aralık

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

  • Üst dolgu: 100 piksel
  • Alt doldurma: 100px
Satır aralığı divi yapılandırması

Sütuna metin modülü ekleme

H2 içeriği ekle

İlk metin modülünden başlayarak modüller eklemenin zamanı geldi. Seçtiğiniz H2 içeriğini girin.

Ekiple tanış

H2 metin ayarları

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

  • Yazı tipi başlığı 2: Quicksand
  • Yazı tipi başlığı 2: yarı kalın
  • 2. öğenin metin rengi: # 000000
  • Başlık 2 Metin boyutu: 70 piksel (masaüstü), 50 piksel (tablet), 40 piksel (telefon)
Divi metin aralığı

Sütuna bir ayırma modülü ekleme

görünürlük

Ardından bir ayırma modülü ekleyin. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

  • Ayırıcıyı göster: Evet
Divi ayırıcısını göster

Hat

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

  • Çizgi rengi: # edf000
  • Çizgi stili: düz
  • Çizgi Konumu: Üst
Divi aralığı stili

boyutlandırma

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

  • Bölücü ağırlık: 20px
  • Genişlik:% 11
  • Modülün hizalanması: sol
  • Yükseklik: 20px
Divi hat modülünün boyutlandırılması

Satır # 2 ekle

Sütun yapısı

Bir sonraki sıraya! Aşağıdaki sütun yapısını kullanın:

Divi sütun yapılandırması

boyutlandırma

Daha fazla modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerini aşağıdaki gibi değiştirin:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 2
  • Genişlik:% 100
  • Maksimum genişlik:% 100
Cilt payı genişliği yapılandırması

aralık

Ardından, yalnızca daha küçük ekranlara sol ve sağ dolgu ekleyin.

  • Sol dolgu:% 5 (yalnızca tablet ve telefon)
  • Sağ dolgu:% 5 (yalnızca tablet ve telefon)
Satır aralığı stili yapılandırması

Sütun parametreleri (5x)

Şimdi, bu eğitimin sonraki üç adımında, sütunlarda bazı değişiklikler yapacağız. Üç adımı sıranızdaki sütunların her birine uygulayın.

Divi parametre hattı yapılandırması

Gradyan arka planı

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

  • 1 renk: rgba (255,255,255,0)
  • 2 renk: rgba (0,0,0,0,84)
  • Gradyan türü: doğrusal
  • Başlama Konumu:% 25
  • Bitiş Pozisyonu:% 86
  • Gradyanı arka plan resminin üzerine yerleştirin: Evet
Divi arka sütun yapılandırması

Arka plan resmi

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Arka Plan Resim Boyutu: Kapak
  • Arka plan resminin konumu: Merkez
Divi sütun arka plan resmi ekle

Ana eleman

Her bir sütunun ana tablet öğesine özel CSS ekleyerek sütun ayarlarını tamamlayın. Bu CSS kodu satırları, iki yan yana yerleştirmek yerine, sütunları tablette üst üste yerleştirmemize yardımcı olacaktır.

genişlik:% 100! önemli; kenar boşluğu: 50px 0px 50px 0px! önemli;
Kod css divi sütunu

Sütuna kişi modülü ekleme

İçerik ekle

Ekip üyeleri hakkında bilgi paylaşmak için bir Kişi modülü kullanacağız. Birinci Kişi modülünü 1. sütuna ekleyin ve istediğiniz içeriği kullanın.

Divi kişi adı

Resmi Sil

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

Divi görüntüsünü kaldır

Arka plan resmi

Daha sonra, modülün arka plan görüntüsü olarak bir görüntü bindirmesi ekleyeceğiz. Kullandığımız dosyayı, bu eğitimin başındaki klasörü indirerek bulabilirsiniz.

  • Arka Plan Resim Boyutu: Kapak
  • Arka plan resminin konumu: Merkez
Kişi modülü arka plan yapılandırması

Başlık metni ayarları

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

  • Başlık seviyesi: H3
  • Başlık yazı tipi: Quicksand
  • Başlık yazı tipi ağırlığı: kalın
  • Başlık metni rengi: #ffffff
  • Başlık metni boyutu:% 230
Divi modülü başlık özelleştirme

Gövde metni ayarları

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

  • Gövde Yazı tipi: Açık Sans
  • Gövde metni rengi: #ffffff
  • Gövde çizgisi yüksekliği: 2,2 em
Divi gövde özelleştirme

Metin ayarlarını konumlandırma

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

  • Yazı Tipi Konumu: Açık Sans
  • Metin rengini konumlandır: # edf000
Divi konumu

aralık

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

  • Üst dolgu:% 70
  • Alt dolgu:% 10
  • Sol dolgu:% 10
  • Sağ dolgu:% 10
Divi kişi modülü aralığı

Kişi modülünü 4 kez çoğaltın

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

Geri kalan sütunlara kopyalar yerleştirin

Yinelenen modülleri satırın kalan dört sütununa yerleştirin. İçeriği de düzenlediğinizden emin olun.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Satırı Otomatik Kaydırma Karuseline Dönüştür

Satır # 2'nin boyutunu değiştirme

Şimdi bu satırı otomatik kaydırılan bir ekip üyesi atlı karıncasına dönüştürmek için, satır ayarlarını yeniden açmamız ve boyutlandırma ayarlarında genişliği ve maksimum genişliği değiştirmemiz gerekiyor.

  • Genişlik:% 180
  • Maksimum genişlik:% 220 (masa),% 100 (tablet ve telefon)
Satır divi değişiklik aralığı

2 numaralı satırın yatay hareketini ekleyin

Gelişmiş sekmedeki kaydırma efekti ayarlarına yatay hareket ekleyerek çizgi ayarlarını tamamlayın ve bitirdiniz!

  • Yatay hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti:
    • Ofis: 2,5
    • Tablet ve telefon: 0
  • Ortalama ofset: 0 (% 40'de)
  • Bitiş ofseti:
    • Ofis: -25 (% 62'de)
    • Tablet ve telefon: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi kaydırma animasyonu yapılandırması

anket

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

ofis

Divi takım üyesini kaydır

Son düşünceler

Bu eğitimde, Divi'nin yerleşik kaydırma efektleriyle nasıl yaratıcı olacağınızı gösterdik. Özellikle, güzel, otomatik kayan bir ekip üyesi atlıkarıncasını yeniden oluşturduk. Ziyaretçiler sayfayı aşağı kaydırdıkça, atlı karıncanın başka bir bölümü görünür.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
0 hisseleri
hisse
cıvıltı
Enregistrer