Divi için ÜCRETSİZ Motion Tanık Düzeni İndirin

Referansların, oradaki birçok işletmenin ve web sitelerinin çok önemli bir parçası olduğu bir sır değil. Sağladığınız hizmetlere veya sunduğunuz ürünlere bir güvenilirlik duygusu katarlar. Referanslarınızı gösterme şeklinize özellikle dikkat etmek genellikle işe yarar. Divi ile referans bölümünüzü şekillendirmenin tonlarca yolu vardır, hatta buna adanmış bir Referans Modülü bile vardır. Ancak, referanslarınıza etkileşim eklemek için benzersiz bir yol arıyorsanız, bu gönderiyi seveceksiniz. Divi'nin yeni kaydırma efektleriyle oluşturulmuş güzel bir özel hareket referans düzenini paylaşıyoruz. Ayrıca tasarımı adım adım yeniden oluşturacağız!

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

Motion Testimonial Layout'u ÜCRETSİZ olarak indirin

Ellerinizi serbest hareketli referans 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.

Yeniden Yaratmaya Başlayalım!

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 arka plan rengini siyah olarak değiştirin.

• Arka Plan Rengi: #000000

aralık

Bölümün tasarım sekmesine geçin ve farklı ekran boyutlarına bazı özel üst ve alt dolgular ekleyin.

• Üst Dolgu: %10 (Masaüstü), %20 (Tablet), %30 (Telefon)
• Alt Dolgu: %10 (Masaüstü), %20 (Tablet), %30 (Telefon)

1. Satır Ekle

Sütun Yapısı

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

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Bu satırın sütununda ihtiyacımız olan ilk modül, bazı H2 içeriğine sahip bir Metin Modülüdür.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Görev
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Boyutu: 85px (Masaüstü), 45px (Tablet), 35px (Telefon)
• Başlık 2 Harf Aralığı: 2px
• Başlık 2 Çizgi Yüksekliği: 1.1em

Sütuna Ayırıcı Modül Ekle

görünürlük

Ardından, Metin Modülünün hemen altına bir Bölücü Modül ekleyin ve 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat Ayarları

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

• Çizgi Rengi: #161616
• Çizgi Stili: Katı
• Çizgi Konumu: Üst

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 14px
• Genişlik: %13 (Masaüstü), %20 (Tablet), %30 (Telefon)
• Modül Hizalaması: Merkez

2. Satır Ekle

Sütun Yapısı

Bir sonraki sıraya! Bu satır ilk referansımıza ayrılacaktır. Aşağıdaki sütun yapısını kullanın:

Masaüstü Arka Plan Resmi

Ardından, bu gönderinin başında indirebildiğiniz indirme klasöründe bulabileceğiniz mavi masaüstü arka plan resmini yükleyin.

• Arka Plan Resmi Boyutu: Sığdır
• Arka plan resmi Konum: Merkez

Tablet ve Telefon Arka Plan Resmi

Daha küçük ekran boyutlarında mavi arka plan görüntüsünün döndürülmüş bir sürümünü kullanıyoruz. Bu arka plan resmini indirme klasöründe de bulabilirsiniz.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Merkez

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarında maksimum genişliği değiştirin.

• Maksimum Genişlik: 2000 piksel

aralık

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

• Üst Kenar Boşluğu: 100 piksel
• Üst Dolgu: %15
• Alt Dolgu: %15

Yatay Hareket Kaydırma Etkisi

Ardından, gelişmiş sekmeye gidin ve kaydırma efektlerinde bazı yatay hareketleri etkinleştirin.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -4
• Orta Ofset: 0 (%50'de)
• Bitiş Ofseti: 0
• Hareket Efekti Tetikleyicisi: Elemanın Başı

Solma ve Kaydırma Efekti

Ayrıca özel bir solma içeri ve dışarı kaydırma efekti ekleyeceğiz.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0 (%19'da)
• Orta Opaklık: %100 (%25'ten %88'e)
• Bitiş Opaklığı: %0 (%93'te)
• Hareket Tetikleme Etkisi: Elemanın Başı

Sütuna Metin Modülü Ekle

İçerik Ekle

Bu satırda ihtiyacımız olan ilk modül bir Metin Modülüdür. Referans içeriğini içerik kutusuna yerleştirin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Görev
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #ffffff
• Metin Boyutu: 50px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Metin Satırı Yüksekliği: 1.5em
• Metin Hizalama: Merkez

boyutlandırma

Ardından, tasarım sekmesinde farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: %63 (Masaüstü), %100 (Tablet ve Telefon)
• Modül Hizalaması: Merkez

Sütuna Kişi Modülü Ekle

İçerik Ekle

Bir Kişi Modülü olan bir sonraki modüle geçin. Adı, konumu ve sosyal medya bağlantılarını ekleyin.

Fotoğraf yükleniyor

Ardından, seçtiğiniz bir kare resmi yükleyin.

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarından simge rengini değiştirin.

• Simge Rengi: #2b302e

resim

Bazı yuvarlatılmış köşeler ekleyerek görüntüyü bir daireye dönüştürün.

• Tüm Köşeler: 100 piksel

Başlık Metni Ayarları

Ardından, başlık metni ayarlarını aşağıdaki gibi değiştirin:

• Başlık Yazı Tipi: Görev
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 24px

Gövde Metni Ayarları

Gövde metni ayarlarında da bazı değişiklikler yapın.

• Gövde Yazı Tipi: Görev
• Gövde Metni Rengi: #ffffff
• Gövde Metin Boyutu: 15px

Konum Metni Ayarları

Ayrıca konum metni ayarlarını da değiştiriyoruz.

• Pozisyon Yazı Tipi: Görev
• Konum Metin Rengi: #1b66ff
• Konum Metin Boyutu: 17px

boyutlandırma

Farklı ekran boyutlarındaki genişlikle birlikte.

• Genişlik: %25 (Masaüstü), %100 (Tablet ve Telefon)
• Modül Hizalaması: Merkez

aralık

Sonraki boşluk ayarlarına gidin ve biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 100 piksel

Ana Eleman

Kişi Modülümüzde tüm içeriğin hizalandığından emin olmak için gelişmiş sekmeye gideceğiz ve modülün ana öğesine iki satır CSS kodu ekleyeceğiz.

display: flex;
align-items: center;

Üye Resmi

Daha küçük ekran boyutlarında da üye resim öğesi için bazı özel genişlikler kullanacağız.

Tablet:

width: 20% !important;

Telefon:

width: 30% !important;
margin-right: 5%;

Klon Satır #2

Referansı içeren satırı tamamladığınızda, satırın tamamını bir kez klonlayabilirsiniz.

Satır Arka Plan Resimlerini Değiştir

Masaüstündeki arka plan resimleri ve daha küçük ekran boyutlarıyla başlayarak bu yinelenen satırda bazı değişiklikler yapmamız gerekecek. Arka plan resimlerinin kırmızı versiyonlarını indirme klasöründe bulabilirsiniz.

Satır Aralığını Değiştir

Sonraki satıra bir miktar negatif üst kenar boşluğu ekleyin.

• Üst Marj: -%15

Kişi Modül Konumunu Değiştir Metin Rengi

Ve Kişi Modülü ayarlarında konum metin rengini değiştirerek yinelenen satır ayarlarını tamamlayın.

• Konum Metni Rengi: #ff233e

Son Satırı Klonla

Yinelenen referans satırını tamamladıktan sonra, onu klonlayabilirsiniz.

Satır Arka Plan Resimlerini Değiştir

İndirme klasöründe bulabileceğiniz sarı sürümleri kullanarak satırın arka plan resimlerini değiştirin.

Kişi Modül Pozisyonu Metin Renklerini Değiştir

Kişi Modülü ayarlarında konum metni rengini de değiştirin ve işiniz bitti!

• Konum Metni Rengi: #ffbc1b

Ö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, ücretsiz olarak indirebileceğiniz güzel bir hareketli referans düzeni paylaştık! Özel arka planlar kullandık ve Divi'nin kaydırma efektleriyle her bir referansı vurgulayabildik. Tasarımı da adım adım yeniden yarattık! 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.