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.

Hakkında sayfanızı oluştururken, muhtemelen ekip üyelerinizi de tanıtmak isteyeceksiniz. Bunu yaparken, ziyaretçilerin işletmenizin arkasındaki insanlarla etkileşim kurmasına izin verirsiniz. Listedeki ekip üyelerinizi canlandırmanın bir yolunu arıyorsanız, bu eğitim sizin için olabilir. Ziyaretçileriniz sayfayı kaydırırken hareket eden, otomatik olarak kayan bir ekip üyesi atlı karıncası 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 oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

  • 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ı

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

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

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

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

Dans ce tutoriel, nous vous avons montré comment faire preuve de créativité avec les effets de défilement intégrés de Divi. Plus précisément, nous avons recréé un magnifique carrousel de membres d’équipe à défilement automatique. Lorsque les visiteurs font défiler la page, une autre partie du carrousel apparaît.

%d bu sayfayı beğendi blogcular: