İnce şekil eklenir & amp;Divi ile web sitenize animasyon
Kim ince animasyonu sevmez? Web sitenize biraz karmaşıklık eklemenin iyi bir yoludur. İyi yapılırsa aynı anda güzel ve profesyonel görünebilirler. Bu öğreticide, Divi’nin varsayılan seçeneklerini kullanarak nasıl ince bir animasyon formu ekleyeceğinizi göstereceğiz. Ek CSS gerekmez. Aşağıdaki örnekle bir yaklaşım ve pratik yaptıktan sonra, gökyüzü sınırı haline gelir. Her tür şekil yapabilir ve bunları küçük bir işle web sitenize uygulayabilirsiniz. Sonuçlar Eğiticiye girmeden önce, yeniden yapacağımız dört farklı animasyon biçimine bakalım.
Animasyon #1 şekli
Şekli tüm dolguları sileceğimiz yeni satıra koyduk (yapılan ekstra alanı sınırlamak için)
Animasyon formunuzun hangi tarafa görünmesini istediğinize bağlı olarak, satır seviyesini değiştirmelisiniz
Sol veya sağ çizgi, ekran boyutu ne olursa olsun, bu animasyon formunun ekranın yanında kalmasını sağlayın
Şekil yapmak için boş bir metin modülü kullanıyoruz
Boş bir metin modülü kullanmak, diğer tüm varsayılan Divi seçeneklerini kullanmanıza olanak tanır
Özel marj ve dolgu uygun bir nesne yapmada önemli bir rol oynar
Satırlar ve modüller tarafından yapılan alanı azaltmak ve iki farklı parça ile örtüşmesini sağlamak için pozitif ve negatif kenar boşlukları kullanıyoruz
Öte yandan dolgu, istediğiniz şekil türünü yapmak için kullanılır
Alt kategori arka planı, sınır ve kutu gölgesi, animasyonun yavaş çalışmasını sağlayacak doğrusal bir animasyon döngüsü eklemek istediğiniz şekil türünü tasarlamanızı sağlar
Görüntü modülünde kendi şeklinizi kullanırken aynı yöntemi uygulayabilirsiniz
Yeni bir sayfa için tasarım konferansının ana sayfalarıyla yeni bir sayfa oluşturun, halka açık bir yaklaşım okuduktan ve hatırlayın, devam edin ve WordPress kontrol panelinizde yeni bir sayfa oluşturun.
Başlığı ekledikten sonra görsel yapıcıya dönerek hemen görsel oluşturucuya geçti. Tasarım Konferansı’nın ana sayfasını yükleyin Bu öğreticide, animasyonlu nesneler yapmaya odaklanacağız. Ve bunu yapmanın hazır düzeni kullanmaktan daha iyi bir yolu nedir? Bu öğretici için, daha önce yapılan düzende bulabileceğiniz tasarım konferansının ev paketini seçeceğiz. Ancak elbette, bu animasyon formunu herhangi bir sayfaya veya düzene uygulayabilirsiniz. Animasyon Formunu Ekleyin #1 Şimdi yeni bir satır ekleyin, ilk animasyon formunu eklemek için mevcut satırın konumunu ekleyin, kahramanlarınıza yeni bir satır ekleyin: Sütun yapımız bu satır için iki sütun kullanır. Sıra hizalaması daha sonra tasarım sekmesini açın ve animasyonun ekranın sol tarafında görünmesini istediğimiz için sol satır hizalamasını seçin. Bir sonraki mesafe, boşluk alanını açın ve her seçeneğe ‘0px’ ekleyerek bu satırı içeren tüm varsayılan dolguları silin. Boş metin modülünü Sütun 1’e ekleyin Metin modülünü ekleyin ve boş içerik kutusunun şekil eklemeye başlamasına izin verin! Metin modülünü Sütun 1’e ekleyin. Bu metin modülünde herhangi bir metin veya kopya paylaşmayacağız, daha fazla Varsayılan Divi seçeneği için kullanıyoruz. Bu nedenle, içerik kutusunun boşaltılmasına izin verdiğinizden emin olun. Arka plan rengi daha sonra, bu metin modülünün arka plan rengi olarak ‘RGBA (255.255.255.0.14)’ ekleyin. Uzay alt kategorisinde iki dört şey yapacağımız mesafe; Özel pedlerle şekiller yapın, satırlar ve modüller tarafından yapılan alanı çıkarın, şekli daha sola iterek ve metin modülünün ikinci sıra ile örtüşmesini sağlamak: Üst Marj: -100 piksel Sağ kenar boşluğu: 100 piksel
Alt kenar boşluğu: -500 piksel
Sol: -100 piksel
Üst dolgu: 200px
Dolgu Alt: 400 piksel
Dikdörtgen bir daire yapmak için sınır alt kategorisini açın ve her köşeye ‘500 piksel’ uygulayın.
Son animasyon, animasyon alt kategorisini açarak ve aşağıdaki ayarları uygulayarak döngü animasyonunuzu ekleyin: Animasyon Stili: Rulo Animasyon tekrarlama: döngü
Animasyon yönü: merkez
Animasyon Süresi: 20000ms
Animasyon yoğunluğu:% 500
Animasyon Opaklık Başlar:% 100
Animasyon Hız Eğrisi: Doğrusal
Sıra klon satırımız, kahramanın sağ alt köşesinde şekiller yapmak için tüm bu çizgileri klonlayarak zamandan tasarruf edecektir.
Satır seviyesini değiştirin Bu çizgi hakkında değiştirmemiz gereken ilk şey satırların hizalanmasıdır. Sol yerine doğru kullanın. Boş metin modülünü #2 sütununa yerleştirin, metin modülünü ilk değil, ikinci sütuna da yerleştirmemiz gerekir. Boş metin modülünün boşluğunu değiştirin Alan modülü alanını da değiştireceğiz (sağa doğru itin, sola değil): Sağ kenar boşluğu: -50px Alt kenar boşluğu: -350px Sol: 50 piksel
Üst dolgu: 250 piksel
Dolgu Alt: 250 piksel
Animasyon formunu ekleyin #2 İkinci bir animasyon formu oluşturmak için Animasyonlu Bir Form #1 oluşturun, önce animasyonlu bir form #1 yapma işlemini yapın. Sadece küçük bir değişiklik yapmamız gerekiyor. Değiştirmeniz gereken ilk şeyi sınırlayan boş bir metnin ikinci modülünü değiştirin, sınır alt kategorisinin yuvarlak açısıdır. Her köşe için ‘500 piksel’ yerine ’20px’ kullanın.
Animasyon şekli nedeniyle, dairenin şeklinden çok daha hızlı yuvarlanacaktır. Bu yüzden animasyon süresini ‘100000ms’ olarak artıracağız.
Animasyon formunu ekleyin #3 Animasyonlu bir form #3 oluşturmak için yeni bir satır satırı ekleyin, ‘Divi 100 Tasarım’ bölümünü geçene kadar sayfanızı aşağı kaydırın. Hattı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 hizalaması bir kez daha, hattın hizalanmasının hayvan formunu eklediğimiz tarafa uymasını sağlıyoruz. Bu durumda, sol taraftır. Mesafemiz, her seçeneğe ‘0px’ ekleyerek bu satırın tüm varsayılan dolgusunu da kaldırır. İlk iki animasyon formunun görünürlüğü de tabletler ve cep telefonları üzerinde iyi işlev görür. Bununla birlikte, diğer ikisi daha küçük ekran boyutları için çok invazivdir. Bu yüzden görünürlük alt kategorisinde tablet ve cep telefonlarındaki tüm hatları devre dışı bırakacağız.
Boş metin modülünü Sütun 1’e ekleyin Metin modülünü ekleyin ve içerik kutusunu bir kez daha bırakın, boş metin modülünü bu satırın ilk sütununa ekleyin. Mesafemiz, yeni bir çizgi tarafından yapılan ek alan olmamasını sağlayacaktır. Özel marjla oynayarak metin modülü. Aralık alt kategorisini açın ve aşağıdaki değerleri uygulayın:
Üst kenar boşluğu: -150px Doğru marj:% 25 Alt kenar boşluğu: -50px Sol kenar boşluğu:% -25Üst dolgu: 250 piksel
Bir sonraki sınır, sınır alt kategorisine girerek ve aşağıdaki düzenlemeleri uygulayarak bu forma sınır ekleyeceğiz:
Sınır Genişliği: 5 piksel
Sınır rengi: #4646C4
Kutunun gölgesi tercihlerinize bağlıdır, varsayılan ayarlarda herhangi bir değişiklik yapmadan Gölge Alt Kategorisindeki ilk seçeneği seçerek bu nesneye biraz derinlik de ekleyebilirsiniz. Son animasyon, animasyon alt kategorisini açarak ve aşağıdaki ayarları uygulayarak bu nesneye döngü animasyonunu uygulayacağız:
Animasyon Stili: Rulo
Animasyon tekrarlama: döngü Animasyon yönü: merkez Animasyon Süresi: 25000ms
Animasyon yoğunluğu:% 100
Opaklık Başlangıç Animasyonu:% 50
Animasyon Hız Eğrisi: Doğrusal
Klonlama Modülü Boş Metin ve Sütun 1’de Kaydetme İlk boş metin klonlama alanını değiştirin ve ilk sütunda bırakın. Mekanlardan başlayarak bazı değişiklikler yapacağız. Metin modülü ayarlarını açın, tasarım sekmesini açın, boşluk alt kategorisini açın ve aşağıdaki özel kenar boşluklarını ve yataklarını uygulayın:
Üst kenar boşluğu: -50
Doğru marj:% 25
Alt kenar boşluğu: -200 piksel Sol kenar boşluğu:% -25
Üst dolgu: 250 piksel
Sınır rengimizi değiştirme sınır rengini ‘#aaaaaa’ olarak değiştirecektir.
Değişikim Animasyonunu Yapmamız gereken son değişiklik, animasyon alt kategorisine girerek ve animasyon gecikmesi seçeneğine ‘1000ms’ ekleyerek animasyonun bu forma gecikmesine katkıda bulunuyor. Animasyon formunu ekle #4 Satır konumumuzun yeni bir satırı ekleyin Bu öğreticinin son animasyon formuna ulaştı, sayfamızda ‘Sponsor’ metin modülümüzden hemen önce yerleştireceğiz:
Sütunumuzun yapısı bir kez daha, dört sütunla satır etmeyi seçer:
Bu animasyonlu formun satırının hizalanması, sayfamızın sağ tarafında bu kadar doğal olarak görünecektir, doğru satır hizalamasını etkinleştireceğiz. Mesafemiz, uzay alt kategorisindeki tüm özel dolgu seçeneklerine ‘0px’ ekleyerek bu çizgi tarafından kullanılan alanı azaltacaktır. Görünürlük ve bir kez daha, bu animasyonun yalnızca tablette görünmesini istiyoruz, böylece gelişmiş sekmedeki görünürlük alt kategorisindeki tabletlerde ve cep telefonlarında devre dışı bırakacağız. Boş metin modülünü Sütun 4’e ekleyin Metin modülünü ekleyin ve boş içerik kutusunu bırakın Animasyonlu bir form yapmaya başlayalım. Sütun 4’e boş bir metin modülü ekleyin. Gradyan Arka Plan, aşağıdaki iki rengi ve varsayılan gradyanın arka plan ayarını içeren bu metin modülü için gradyanın arka planını kullanacağız: İlk renk: #D002BA Renk İkinci: #166cc2 Bu metin modülünün aralığı şekli yapacak, şekli sağa doğru itecek ve önceki kısımla örtüşmesini sağlayacaktır. Aralık alt kategorisini açın ve aşağıdaki değerleri girin: Üst kenar boşluğu: -80% Sağ kenar boşluğu:% -25
Alt kenar boşluğu: -120px
Sol kenar boşluğu:% 25 Üst dolgu: 250 piksel
Sınırımız ayrıca sınır alt kategorisine girerek ve her köşeye ’20px’ ekleyerek bu animasyonlu form için birkaç yuvarlak açı kullanacaktır. Kutu özellikleri daha derin hale getirmek için kutunun gölgesindeki ilk kutu gölge seçeneğini etkinleştireceğiz. Varsayılan değeri kullanıyoruz, ancak ihtiyaçlarınıza göre değiştirmekten çekinmeyin.
Animasyon ve daha az önemli değil, aşağıdaki ayarları kullanarak animasyon alt kategorisine döngü animasyonu da ekleyeceğiz:
Animasyon Stili: Rulo
Animasyon tekrarlama: döngü
Animasyon yönü: merkez Animasyon Süresi: 25000ms Animasyon yoğunluğu:% 100 Opaklık Başlangıç Animasyonu:% 70
Animasyon Hız Eğrisi: Doğrusal
Boş Metin Modülünü Klonlama ve Sütun 4’te Kaydet Alanımız zaman kazandırır, bu boş metin modülünü klonlar ve iki küçük değişiklik yapar. Aralık alt kategorisini açın ve üst kenar boşluğunu ‘%-50’ olarak değiştirin.
Animasyonu değiştirin ve Animasyon #3 şeklinde gösterildiği gibi, ‘1000ms’ animasyonunun ertelenmesi ekleyeceğiz. Ve voila, orada inanılmaz bir animasyon formu var!
Sonuçlar şimdi tüm örneklerden geçtik, sonuçlara bakalım. Animasyon #1 şekli
Animasyon biçimi #2
Animasyon Formu #3
Animasyon #4 şekli Bu yazıdaki son zihin, yalnızca Divi varsayılan seçeneğini kullanarak web sitenize nasıl düzgün bir animasyon formu ekleyeceğinizi gösterdik. Bu yöntemi web sitenize eklemek istediğiniz diğer formlara uygulayabilirsiniz. Web sitenize biraz etkileşim ve ekstra stil eklemenize yardımcı olurlar. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
