Divi ile Web Sitenize İnce ve Hareketli Şekiller Nasıl Eklenir

İnce animasyonları kim sevmez? Web sitenize biraz karmaşıklık katmanın güzel bir yolu. İyi yapılırsa, aynı anda hem muhteşem hem de profesyonel görünebilirler.

Bu öğreticide, Divi'nin yerleşik seçeneklerini kullanarak ince, hareketli şekilleri nasıl ekleyeceğinizi göstereceğiz. Ekstra CSS'ye gerek yok. Aşağıdaki örneklerle yaklaşımı ve alıştırmayı yaptıktan sonra, gökyüzü sınır haline gelir. Her türlü şekli oluşturabilir ve bunları web sitenizde çok az çaba ile uygulayabilirsiniz.

Sonuç

Öğreticiye dalmadan önce, yeniden oluşturacağımız dört farklı animasyon şekline hızlıca bir göz atalım.

Hareketli Şekil #1

Hareketli Şekil #2

Hareketli Şekil #3

Hareketli Şekil #4

Divi ile Web Sitenize İnce ve Hareketli Şekiller Nasıl Eklenir

Youtube Kanalımıza Abone Olun

Yaklaşmak

• Şekilleri, tüm dolguyu kaldıracağımız yeni satırlara yerleştiriyoruz (oluşturulan fazladan alanı sınırlamak için)
• Animasyonlu şekillerinizin hangi tarafta görünmesini istediğinize bağlı olarak, satır hizalamasını değiştirmeniz gerekecektir.
• Sol veya sağ satır hizalaması, bu animasyonlu şekillerin ekran boyutu ne olursa olsun ekranın o tarafında kalmasını sağlar
• Şekilleri oluşturmak için boş Metin Modülleri kullanıyoruz
• Boş bir Metin Modülü kullanmak, diğer tüm Divi yerleşik seçeneklerinden yararlanmanızı sağlar.
• Özel kenar boşluğu ve dolgu , nesnelerin sığdırılmasında önemli bir rol oynar
• Satır ve modüllerin oluşturduğu alanı azaltmak ve onları iki farklı bölümle üst üste bindirmek için pozitif ve negatif kenar boşlukları kullanıyoruz.
• Dolgu ise istediğiniz şekli oluşturmak için kullanılır.
• Arka Plan , Kenarlık ve Kutu Gölgesi alt kategorileri, istediğiniz şekil türünü tasarlamanıza olanak tanır.
• Animasyonun yavaş bir hızda devam etmesini sağlayacak doğrusal animasyon döngüleri ekliyoruz
• Aynı yöntemi Image Modules içerisinde kendi şekillerinizi kullanırken de uygulayabilirsiniz.

Tasarım Konferansı Ana Sayfası ile Yeni Sayfa Oluştur

Yeni Sayfa Oluştur

Genel yaklaşımı okuduktan ve aklınızda bulundurduktan sonra devam edin ve WordPress kontrol panelinizde yeni bir sayfa oluşturun.

Visual Builder'a Geçin

Bir başlık ekledikten sonra hemen Visual Builder'a geçin.

Tasarım Konferansı Ana Sayfası Yükle

Bu eğitimde, animasyonlu nesneler oluşturmaya odaklanacağız. Ve bunu yapmak için önceden hazırlanmış bir düzen kullanmaktan daha iyi bir yol var mı? Bu eğitim için, önceden hazırlanmış mizanpajlarınızda bulabileceğiniz Design Conference Layout Pack'in ana sayfasını seçeceğiz. Ancak elbette bu hareketli şekilleri herhangi bir sayfaya veya düzene uygulayabilirsiniz.

Animasyonlu Şekil 1 Ekle

Yeni Satır Ekle

Satır Konumu

Şimdi, ilk animasyonlu şekli eklemek için kahraman bölümünüze yeni bir satır ekleyin:

Sütun Yapısı

Bu satır için iki sütun kullanıyoruz.

Satır Hizalama

Ardından, Tasarım sekmesine gidin ve sol Satır Hizalama'yı seçin çünkü animasyonlu şeklin ekranın sol tarafında görünmesini istiyoruz.

aralık

Ardından, Aralık alt kategorisini açın ve seçeneklerin her birine '0px' ekleyerek bu satırın içerdiği tüm varsayılan dolguyu kaldırın.

Sütun 1'e Boş Metin Modülü Ekle

Metin Modülü Ekle & İçerik Kutusunu Boş Bırak

Şekli eklemeye başlama zamanı! Sütun 1'e bir Metin Modülü ekleyin. Bu Metin Modülü içinde herhangi bir metin veya kopya paylaşmayacağız, daha çok Divi'nin yerleşik seçenekleri için kullanacağız. Bu nedenle, içerik kutusunu boş bıraktığınızdan emin olun.

Arka plan rengi

Ardından, bu Metin Modülünün arka plan rengi olarak 'rgba(255,255,255,0.14)' ekleyin.

aralık

Aralık alt kategorisi içinde iki dört şey yapacağız; özel dolgu ile şekil yapmak, satır ve modülün oluşturduğu boşluktan kurtulmak, şekli daha sola itmek ve Metin Modülünü ikinci sıra ile örtüştürmek:

• Üst Kenar Boşluğu: -100px
• Sağ Kenar Boşluğu: 100px
• Alt Kenar Boşluğu: -500px
• Sol: -100 piksel
• Üst Dolgu: 200 piksel
• Alt Dolgu: 400 piksel

Sınır

Dikdörtgenin bir dairesini oluşturmak için Kenarlık alt kategorisini açın ve köşelerin her birine '500 piksel' uygulayın.

Animasyon

Son olarak, Animasyon alt kategorisini açıp aşağıdaki ayarları uygulayarak döngü animasyonunuzu ekleyin:

• Animasyon Tarzı: Rulo
• Animasyon Tekrarı: Döngü
• Animasyon Yönü: Merkez
• Animasyon Süresi: 20000ms
• Animasyon Yoğunluğu: %500
• Animasyon Başlatma Opaklığı: %100
• Animasyon Hız Eğrisi: Doğrusal

Klon Satırı

Satır Konumu

Kahraman bölümünün sağ alt köşesindeki şekli oluşturmak için bu satırın tamamını klonlayarak kendimize biraz zaman kazandıracağız.

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

Bu satır hakkında değiştirmemiz gereken ilk şey Satır Hizalamasıdır. Sol yerine sağı kullanın.

Boş Metin Modülünü Sütun #2'ye Yerleştirin

Açıkça, Metin Modülünü birinci sütun yerine ikinci Sütun'a da yerleştirmemiz gerekecek.

Boş Metin Modülü Aralığını Değiştir

Bu Metin Modülünün aralığını da değiştireceğiz (sol yerine sağa itin):

• Sağ Kenar Boşluğu: -50px
• Alt Kenar Boşluğu: -350px
• Sol: 50 piksel
• Üst Dolgu: 250 piksel
• Alt Dolgu: 250px

Hareketli Şekil 2 Ekle

Animasyonlu Şekil 1 Oluşturun

İkinci animasyonlu şekli oluşturmak için, önce 1 numaralı animasyonlu şekli oluşturma işlemini gerçekleştirmeniz yeterlidir. Sadece birkaç değişiklik yapmamız gerekecek.

Her İki Boş Metin Modülünü de Değiştirin

Sınır

Değiştirmeniz gereken ilk şey, Kenarlık alt kategorisinin yuvarlatılmış köşeleridir. Köşelerin her biri için '500px' yerine '20px' kullanın.

Animasyon

Şekli nedeniyle, daire şeklinden çok daha hızlı yuvarlanacaktır. Bu yüzden Animasyon Süresini '100000ms'ye çıkaracağız.

Animasyonlu Şekil 3 Ekle

Yeni Satır Ekle

Satır Konumu

Animasyonlu şekil #3 oluşturmak için, 'Divi 100 Tasarımı Hakkında' bölümünü geçene kadar sayfanızı aşağı kaydırın. Satırınızı o bölümün son satırı olarak ekleyin:

Sütun Yapısı

Satırınız için aşağıdaki sütun yapısını seçin:

Satır Hizalama

Yine, Satır Hizalamasının, animasyonlu şekli eklediğimiz tarafla eşleştiğinden emin oluyoruz. Bu durumda, bu sol taraf.

aralık

Ayrıca, seçeneklerin her birine '0px' ekleyerek bu satırın tüm varsayılan dolgusunu kaldırıyoruz.

görünürlük

İlk iki animasyonlu şekil, tablet ve telefonda da harika çalışıyor. Ancak diğer ikisi, daha küçük ekran boyutları için fazla istilacıdır. Bu nedenle, Görünürlük alt kategorisindeki tablet ve telefondaki tüm satırı devre dışı bırakacağız.

Sütun 1'e Boş Metin Modülü Ekle

Metin Modülü Ekle & İçerik Kutusunu Boş Bırak

Yine, bu satırın ilk sütununa boş bir Metin Modülü ekleyin.

aralık

Özel kenar boşluğu ile oynayarak yeni satır ve Metin Modülü tarafından ek alan oluşturulmadığından emin olacağız. Aralık alt kategorisini açın ve aşağıdaki değerleri uygulayın:

• Üst Kenar Boşluğu: -150px
• Sağ Marj: %25
• Alt Kenar Boşluğu: -50px
• Sol Kenar Boşluğu: -%25
• Üst Dolgu: 250 piksel

Sınır

Ardından, Border alt kategorisine gidip aşağıdaki ayarları uygulayarak bu şekle bir kenarlık ekleyeceğiz:

• Kenar Genişliği: 5px
• Kenar Rengi: #4646c4

Kutu Gölge

Tercihlerinize bağlı olarak, varsayılan ayarlarda herhangi bir değişiklik yapmadan Box Shadow alt kategorisindeki ilk seçeneği seçerek bu nesneye biraz derinlik de ekleyebilirsiniz.

Animasyon

Son olarak, Animasyon alt kategorisini açıp ona aşağıdaki ayarları uygulayarak döngü animasyonunu bu nesneye uygulayacağız:

• Animasyon Tarzı: Rulo
• Animasyon Tekrarı: Döngü
• Animasyon Yönü: Merkez
• Animasyon Süresi: 25000ms
• Animasyon Yoğunluğu: %100
• Animasyon Başlatma Opaklığı: %50
• Animasyon Hız Eğrisi: Doğrusal

Boş Metin Modülünü Klonla ve Sütun 1'de Tut

Aralığı Değiştir

İlk boş Metin Modülünü klonlayın ve ilk sütunda bırakın. Aralıktan başlayarak üzerinde bazı değişiklikler yapacağız. Metin Modülü ayarlarını açın, Tasarım sekmesine gidin, Aralık alt kategorisini açın ve ona aşağıdaki özel kenar boşluğunu ve dolguyu uygulayın:

• Üst Marj: -%50
• Sağ Marj: %25
• Alt Kenar Boşluğu: -200px
• Sol Kenar Boşluğu: -%25
• Üst Dolgu: 250 piksel

Kenar Rengini Değiştir

Ayrıca kenarlık rengini '#aaaaaa' olarak değiştireceğiz.

Animasyonu Değiştir

Yapmamız gereken son değişiklik, Animasyon alt kategorisine gidip Animasyon Gecikmesi seçeneğine '1000ms' ekleyerek bu şekle bir animasyon gecikmesi eklemek.

Hareketli Şekil 4 Ekle

Yeni Satır Ekle

Satır Konumu

Sayfamızın 'Sponsorlarımız' Metin Modülünün hemen önüne yerleştireceğimiz bu eğitimin son animasyonlu şekline ulaştık:

Sütun Yapısı

Yine dört sütunlu bir satır seçiyoruz:

Satır Hizalama

Bu animasyonlu şekiller sayfamızın sağ tarafında o kadar doğal bir şekilde görünecek ki, sağ Satır Hizalamasını etkinleştireceğiz.

aralık

Boşluk alt kategorisindeki tüm özel dolgu seçeneklerine '0px' ekleyerek bu satırın kapladığı alanı azaltacağız.

görünürlük

Ve yine, bu hareketli şekillerin yalnızca tablette görünmesini istiyoruz, bu nedenle bunları Gelişmiş sekmesinin Görünürlük alt kategorisinde tablet ve telefonda devre dışı bırakacağız.

Sütun 4'e Boş Metin Modülü Ekle

Metin Modülü Ekle & İçerik Kutusunu Boş Bırak

Animasyonlu şekli oluşturmaya başlayalım. 4. sütuna boş bir Metin Modülü ekleyin.

Degrade Arka Plan

Bu Metin Modülü için aşağıdaki iki rengi ve varsayılan degrade arka plan ayarlarını içeren bir degrade arka plan kullanacağız:

• İlk Renk: #d002ba
• İkinci Renk: #166cc2

aralık

Bu Metin Modülünün aralığı bir şekil oluşturacak, şekli sağa doğru itecek ve önceki bölümle örtüşmesini sağlayacaktır. Aralık alt kategorisini açın ve aşağıdaki değerleri girin:

• Üst Marj: -%80
• Sağ Marj: -%25
• Alt Kenar Boşluğu: -120px
• Sol Kenar Boşluğu: %25
• Üst Dolgu: 250 piksel

Sınır

Ayrıca Kenarlık alt kategorisine giderek ve köşelerin her birine '20 piksel' ekleyerek bu animasyonlu şekil için bazı yuvarlatılmış köşeler kullanacağız.

Kutu Gölge

Daha fazla derinlik yaratmak için, Kutu Gölgesi alt kategorisindeki ilk kutu gölgesi seçeneğini etkinleştireceğiz. Varsayılan değerleri kullanıyoruz, ancak bunları ihtiyaçlarınıza göre değiştirmekten çekinmeyin.

Animasyon

Son olarak, aşağıdaki ayarları kullanarak Animasyon alt kategorisine döngü animasyonunu da ekleyeceğiz:

• Animasyon Tarzı: Rulo
• Animasyon Tekrarı: Döngü
• Animasyon Yönü: Merkez
• Animasyon Süresi: 25000ms
• Animasyon Yoğunluğu: %100
• Animasyon Başlatma Opaklığı: %70
• Animasyon Hız Eğrisi: Doğrusal

Boş Metin Modülünü Klonla ve Sütun 4'te Tut

Aralığı Değiştir

Kendimize biraz zaman kazandıracağız, bu boş Metin Modülünü klonlayacağız ve üzerinde iki küçük değişiklik yapacağız. Boşluk alt kategorisini açın ve üst kenar boşluğunu '-50%' olarak değiştirin.

Animasyonu Değiştir

Ve animasyonlu şekil #3'te gösterildiği gibi
ayrıca '1000ms'lik bir animasyon gecikmesi ekleyeceğiz. Ve işte, işte çarpıcı animasyonlu şekilleriniz var!

Sonuç

Şimdi tüm örneklerin üzerinden geçtik, şimdi sonuca son bir göz atalım.

Hareketli Şekil #1

Hareketli Şekil #2

Hareketli Şekil #3

Hareketli Şekil #4

Son düşünceler

Bu yayında, yalnızca Divi'nin yerleşik seçeneklerini kullanarak web sitenize nasıl ince, hareketli şekiller ekleyeceğinizi gösterdik. Bu yöntemi web sitenize eklemek istediğiniz diğer şekillere de uygulayabilirsiniz. Web sitenize biraz ekstra etkileşim ve stil eklemenize yardımcı olurlar. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!