Dönüştürülmüş Hareket Şekillerini Divi ile Arka Plan Olarak Kullanma

Divi'nin yeni kaydırma efektleri, web tasarım deneyiminizi kolayca bir sonraki seviyeye taşımanız için yapılmıştır. Elbette, bunu doğrudan bölümünüzdeki öğelere uygulayabilirsiniz, ancak alttaki öğelere de hareket eklemeyi seçebilirsiniz. Temel bir yaklaşıma gitmek, arka planda hareket devam ederken içeriği statik tutmanıza olanak tanır. Bu öğreticide, animasyonlu bir bölüm oluşturmak için temel öğelerimiz olarak dönüştürülmüş hareket şekillerini kullanacağız. İki farklı örneği ele alacağız ama olasılıklar gerçekten sonsuz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Dönüştürülen Hareket Şekilleri Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz dönüştürülmüş hareket şekilleri 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.

Genel Adımlar

Yeni Bölüm Ekle

Degrade Arka Plan

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve bir degrade arka planı uygulayın.

• Renk 1: #ffffff
• Renk 2: #97c6fc
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 306deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

aralık

Bölümün tasarım sekmesine gidin ve bazı özel kenar boşluğu ve dolgu değerleri kullanın.

• Sol Kenar Boşluğu: %4
• Sağ Marj: %4
• Üst Dolgu: %11
• Alt Dolgu: %11

Kutu Gölge

Ayrıca ince bir kutu gölgesi kullanıyoruz.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.1)
• Kutu Gölge Konumu: Dış Gölge

görünürlük

Ve taşmaları gizli olarak ayarlayarak bölüm ayarlarını tamamlayacağız. Bu, dönüştürülmüş hareket şekillerini eklediğimizde kesit kapsayıcısını aşmamalarını sağlayacaktır.

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

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

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

• Maksimum Genişlik: 1580 piksel

Sütun 1 Boşluk

İlk sütunun boşluk ayarlarına da bir miktar üst dolgu ekliyoruz.

• Üst Dolgu: %9

Metin Modülü #1'i Sütun 1'e ekleyin

H2 İçeriği Ekle

Satır ayarlarını tamamladıktan sonra, sütun 1'deki Metin Modülü ile başlayarak modülleri eklemenin zamanı geldi. Seçtiğiniz bazı H2 içeriğini ekleyin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Abril Fatface
• Başlık 2 Metin Rengi: #7206a0
• Başlık 2 Metin Boyutu: 80px (Masaüstü), 65px (Tablet), 50px (Telefon)

Metin Modülü #2'yi Sütun 1'e ekleyin

Metin Ayarları

Seçtiğiniz bazı açıklama içeriğiyle bir öncekinin hemen altına başka bir Metin Modülü ekleyin.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #7206a0
• Metin Satır Yüksekliği: 2em

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

Kopya Ekle

Sütun 1'de ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Ardından, tasarım sekmesine gidin ve düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #077bff
• Düğme Kenar Genişliği: 0px

• Düğme Yazı Tipi: Abril Fatface

aralık

Bazı özel dolgu değerleri de ekliyoruz.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sütun 2'ye Görüntü Modülü Ekle

Fotoğraf yükleniyor

Satırın ikinci sütununda ihtiyacımız olan tek modül bir Görüntü Modülü. Seçtiğiniz bir çizimi yükleyin. Bu eğitimde kullandığımızın aynısını kullanmak istiyorsanız, onu bu yazının başında indirebildiğiniz indirme klasöründe bulabilirsiniz.

hizalama

Sonraki modülün tasarım sekmesine geçin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Sağ

boyutlandırma

Farklı ekran boyutlarının genişliğini değiştirerek modül ayarlarını tamamlayın.

• Genişlik: %100 (Masaüstü), %50 (Tablet ve Telefon)

Örnek 1'i Yeniden Oluştur

1. Sütunun Üstüne Metin Modülü Ekle

Tüm normal modüller yerleştirildikten sonra, dönüştürülmüş hareket şekillerini eklemenin zamanı geldi! İlk sütunun üstüne yeni bir Metin Modülü ekleyerek ilk örneği yeniden oluşturacağız. İçerik kutusunu boş bırakın.

Degrade Arka Plan

Sonraki modüle bir degrade arka planı ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #00fff6
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 306deg
• Başlangıç ​​Konumu: %54
• Bitiş Konumu: %54

boyutlandırma

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

• Genişlik: %165
• Yükseklik: %270

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel boşluk değerleri kullanın.

• Alt Kenar Boşluğu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Üst Dolgu: %29
• Alt Dolgu: %29

Dönüştür Döndür

Sırada modülü döndürüyoruz.

• Sol: 270 derece

Eğriliği Dönüştür

Ayrıca bir transform skew değeri uygulayacağız.

• alt: 16 derece
• Sağ: 16 derece

Konum

Ardından, gelişmiş sekmeye geçin ve konum ayarlarını aşağıdaki gibi değiştirin:

• Pozisyon: Mutlak
• Konum: Sol Üst
• Dikey Ofset: -50%
• Yatay Ofset: -50%

Dikey Hareket Kaydırma Etkisi

Ardından, biraz dikey hareketle başlayarak kaydırma efektlerini ekleyeceğiz.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 4
• Orta Ofset: 0 (%50'de)
• Bitiş Ofseti: -4

Yatay Hareket Kaydırma Etkisi

Ve bir miktar yatay hareket ekleyerek modül ayarlarını tamamlayacağız!

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

Örnek 2'yi Yeniden Oluştur

1. Sütunun Üstüne Metin Modülü Ekle

Bunun yerine ikinci örneği yeniden oluşturmak ister misiniz? İlk sütunun en üstüne bir Metin Modülü ekleyin.

Arka plan rengi

Modül ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: #00fff6

boyutlandırma

Modülün tasarım sekmesine gidin ve boyutlandırma ayarlarını değiştirin.

• Genişlik: %165
• Yükseklik: %270

aralık

Bazı özel boşluk değerleri de ekliyoruz.

• Alt Kenar Boşluğu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Üst Dolgu: %29
• Alt Dolgu: %29

Eğriliği Döndür

Ve dönüştürme ayarlarında bir dönüştürme eğriliği efekti uygulayacağız.

• Sağ: -54deg

Konum

Ardından, gelişmiş sekmesine gideceğiz ve modülün konum ayarlarını değiştireceğiz.

• Pozisyon: Mutlak
• Konum: Sol Üst
• Dikey Ofset: -50%
• Yatay Ofset: -50%

Dikey Hareket Kaydırma Etkisi

Ardından kaydırma efektlerini ekleyeceğiz. Bazı dikey hareketlerle başlayarak.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 4
• Orta Ofset: 0 (%50'de)
• Bitiş Ofseti: -4

Yatay Hareket Kaydırma Etkisi

Ve bir miktar yatay hareket ekleyerek modül ayarlarını tamamlayacağız!

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

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Son düşünceler

Bu gönderide, dönüştürülmüş hareket şekillerini yaratıcı bir şekilde bölüm tasarımınıza nasıl ekleyeceğinizi gösterdik. Altta yatan dönüştürülmüş hareket şekilleri, bölüm tasarımlarınıza ince bir animasyon eklemenize yardımcı olur. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz 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.