Divi’de benzersiz metin tasarımı için mektupları nasıl canlandırır
Animasyon, modern web siteleri için kullanıcı deneyiminin ortak bir parçası haline geldi. Serin görünümüne ek olarak, içeriği açarak kullanıcıyı içeren ince bir etkileşimli öğe de ekleyebilir. Divi’nin varsayılan animasyon efekti, farklı animasyon stillerine sahip sayfalardaki neredeyse tüm öğeleri canlandırmanızı sağlar. Bu öğreticide, Divi’deki bazı benzersiz metin tasarımları için mektupları nasıl canlandıracağınızı göstereceğim. Metin modülüne ayrı ayrı harfler ekleyerek, içeriği yaratıcı bir şekilde öne çıkaracak farklı animasyon, süre ve gecikmelerle her harfin animasyonunu hedefleyebilirsiniz. Bu teknik tasarım amacıyla saftır, çünkü içerik oluşturan harfler çok kolay olmayacaktır. Ancak, animasyonlu mektuplar, hikayeleri kullanıcılarla inanılmaz bir şekilde paylaşmanıza olanak tanır.
Başlayalım. Gizlice göz atma
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Bu öğretici için başlayarak, ihtiyacınız olan tek şey divi. Ön uçta bir divi oluşturucu kullanarak baştan bir tasarım inşa edeceğiz. Başlamak için yeni bir sayfa oluşturun, sayfa başlığınızı verin ve Divi Builder’ı kullanmak için tıklayın. Ardından “Baştan Uyan” seçeneğini seçin ve ön uçta oluşturmak için tıklayın. Şimdi tasarlamaya hazırsınız! Harfleri canlandırmak için bir düzen oluşturun Parça, satır ve sütunlar ekleyin ve bir satır bir sütunla yeni bir düzenli bölüm oluşturun.
Metin modülümüzü (beyaz harfler içerecek) eklemeye başlamadan önce, o bölüme koyu bir arka plan görüntüsü ekleyelim. Bölüm ayarlarını açın ve bir arka plan görüntüsü ekleyin. Yatırım şirketinin yön sayfasının düzeninden soyut bir arka plan görüntüsü kullanıyorum. Metin modülü ile bireysel bir harf bloğu oluşturma harflere animasyon eklemeye başlamadan önce, eklemek istediğimiz her harf için önce ayrı bir metin modülü yapmalıyız. Bu örnek için “divi tasarımı” metnini yapacağız. Bu metin ifadesi 11 karakter boşluğu içerdiğinden (harfler arasındaki boşluklar dahil, 11 farklı metin modülü eklememiz ve metin modülünü sütuna eklememiz gerekir. İçerik kutusuna, metninizden ilk harfi ekleyin, bu durum bu durumda “D” mektubu. Ardından metin tasarımı ayarlarını aşağıdaki gibi güncelleyin: Metin yazı tipi: Rubik Metin yazı tipi stili: TT
Metin Rengi Metin: #fffffff
Metin Metin Metni: 80px (masaüstü), 50px (tablet), 30px (cep telefonu)
Hat yüksekliği metni: 1.6em
Metin Oryantasyonu: Orta
Ardından, animasyonu metin modülüne aşağıdaki gibi ekleyin:
Animasyon Stili: Slayt Animasyonlu yön: üst
Animasyon Süresi: 600ms
Animasyon gecikmesi: 100ms
Animasyon Opaklık Başlar:% 100
Metin modülünü iki katına çıkarın ve içeriği “I” harfiyle güncelleyin. Ardından, animasyonun ertelenmesini 100 ms aşağıdaki gibi artırın:
Animasyon gecikmesi: 200ms Metin modülünü iki katına çıkarın ve içeriği “V” harfiyle güncelleyin. Ardından animasyonun ertelenmesini 300 ms’ye yükseltin.
Animasyon gecikmesi: 300ms Metin modülünü iki katına çıkarın ve içeriği “I” harfiyle güncelleyin. Ardından animasyonun ertelenmesini 400ms’ye çıkarın.
Animasyon gecikmesi: 400ms Bir sonraki metin modülü için boş bir alan eklemek istiyoruz. Metin modülünü iki katına çıkarın ve aşağıdaki HTML’yi içerik kutusuna ekleyin: & amp; nbsp;
Bunun için animasyonun ertelenmesini güncellemeye gerek yok. Ardından metin modülünü çoğaltın ve içeriği “D” harfiyle güncelleyin. Bu “tasarım” kelimesindeki ilk harf. Ardından animasyonun ertelenmesini 500 ms’ye artırın. Gecikme Animasyon: 500ms Metin modülünü çoğaltma ve “tasarım” kelimesini heceleyen kalan her harf için animasyonun ertelenmesini 100 ms artırma işlemine devam edin.
“E” harfi: animasyonlu 600 ms gecikme
“S” mektubu: 700ms animasyon gecikmesi “I” mektubu: 800ms animasyon gecikmesi
“G” mektubu: 900ms animasyon gecikmesi
“N” harfi: 1000ms animasyonun gecikmesi
İşte şimdiye kadar bir tasarım ekranı.
Modülü yatay olarak uyumlu hale getirmek için Flex özelliği ekleyin, aradığımız yeterli sonuç yok. Ancak mucizevi bir şekilde birleştirmemiz gereken tasarım, satır sütununa küçük bir CSS parçası eklemektir. Bunu yapmak için satır ayarlarını açın ve sütunun ana öğelerine aşağıdaki özel CSS ekleyin. Ekran: Flex;
Ekran Özelliği: Flex eksik tüm modülleri, güzel bir tarayıcının genişliğine ayarlanacak esnek tabloda yatay olarak yatay olarak. Ve modül arka arkaya bir sütun olduğu için, tasarım bir tablet veya mobil cihazda hasar görmez.
Ayrıca, harflerin altındaki alt kenar boşluğunu çıkarmak için özel bir oluk genişliği eklememiz ve harflerin animasyon için bir odaya sahip olması için sıraya birkaç üst ve alt ped eklememiz gerekir.
Sonuçlar aşağıdadır.
Bu ayardan farklı animasyon stilleri ekleyerek, gerçekten benzersiz bir etki için kolayca yeni animasyon stilleri ekleyebilirsiniz. Bunu yapmak için, tüm modülleri aynı anda güncellemek için çoklu seçici Divi özelliklerinden yararlanabilirsiniz. Ön uçta, kaymayı basılı tutun ve ilk ve son metin modülünü tıklayın. Ardından, seçilen modüllerden biri için ayarları açın. Bu, seçilen tüm modüller için ayarları güncellemenize izin veren sermaye ayarlarını açacaktır. Animasyonun ertelenmesini değiştirmek istemiyoruz çünkü her harf üzerindeki basamaklı etkiyi korumak istiyoruz. Ancak, gerçekten benzersiz sonuçlar elde etmek için diğer animasyon seçeneklerini farklı şekillerde güncelleyebiliriz. Önceki örneği kaydedebilmeniz için yeni animasyonları test etmeden önce parçaları çoğaltmanızı öneririm. İşte bazı örnekler. Tersine Zoom Metin Animasyonunu Tersine çevrilmiş bir zoom efektiyle canlandırmak için öğe ayarlarını (tüm modüller için ayarlar) aşağıdakilerle güncelleyin:
Animasyon Stili: Zoom Animasyon yönü: merkez Animasyon yoğunluğu:% 200 Sonuçlar aşağıdadır.
Döner dalga metninin döner dalga efektlerini canlandırmak için animasyonu, eleman ayarlarını (tüm modüller için ayarlar) aşağıdakilerle güncelleyin:
Animasyon Stili: Oynat
Animasyonlu yön: üst Animasyon yoğunluğu:% 100 Sonuçlar aşağıdadır.
Domino Metnin Animasyonu Domino Effects ile Metin Animasyon, Öğe Ayarlarını (Tüm Modüller için Ayarlar) Aşağıdakilerle Güncelle:
Animasyon Stili: Back
Animasyonlu Yön: Sol Animasyon yoğunluğu:% 100 Sonuçlar aşağıdadır.
Domino Effects ile Metin Animasyona Dayanan Animasyonlu Metin, Element Ayarlarını (Tüm Modüller için Ayarlar) Aşağıdakilerle Güncelle: Animasyon Stili: Katlama
Animasyonlu yön: üst
Animasyon yoğunluğu:% 100 Ardından, satır ayarlarının altındaki ana sütun öğesine aşağıdaki CSS ekleyerek bir 3D tasarım öğesi oluşturmak için bir perspektif ekleyin. CSS Elemanı Ana Sütun: Perspektif: 1000px; Sonuçlar aşağıdadır.
Harfleri animasyonlu bir yön kombinasyonu kullanarak animize etmek Daha yaratıcı olmak istiyorsanız, animasyonlu efektlerin bir kombinasyonunu kullanarak harfleri canlandırabilirsiniz. Bu örnek için, slayt stili için bir animasyon ve yoğunluk yönü kombinasyonunu kullanacağım. Bu bize gerçekten eşsiz bir sunum yapacak. İşte nasıl yapılacağı. İlk olarak, tasarım sürecini başlatabilmemiz için daha önce yaptığımız parçalardan birini kopyalayın. Ardından, yalnızca “tasarım” metninin görüntülenmesi için ilk 4 metin modülünü silin.
Bir sonraki bölümü ayarlayın, ViewPort bölümünün dışından başlayarak animasyonda birkaç harf istediğimiz için, bölüm ayarlarına aşağıdaki gibi küçük bir CSS parçası eklememiz gerekir: taşma: gizli;
Bu, harfleri bölüme girene kadar gizli tutacaktır. Geçerli satır ayarları, metin (harfler) modülümüzün ortada kalmasını sağlamak için aşağıdaki CSS’yi satır ayarlarına eklememiz gerekir: Ekran: Flex; Gerekçelendirme: Merkez; Metin Modülünün Genel Ayarları Multi -Secect kullanarak, altı metin modülünü aşağıdaki öğe ayarlarıyla güncelleyin: Özel marj:% 3 kaldı,% 3 sağ Sınır Genişliği: 1 piksel Sınır rengi: #ffffff
Animasyon Stili: Slayt Animasyon Süresi: 2000ms
Animasyon gecikmesi: 100ms
Animasyon yoğunluğu:% 300
Bu, tüm metin modülleri için yaygın olacak temel animasyon ayarlarını işler. Şimdi onlar için animasyon ayarlarını tek tek değiştirebiliriz. Metin Modülünün Bireysel Ayarları Bu noktada, her biri için animasyon yönünü değiştirmek için ayrı metin modüllerinin ayarlarını değiştirerek eğlenebiliriz. Bu, mektupları gerçekten benzersiz bir şekilde canlandırmamıza izin verecektir. Her harf için, animasyonun yönünü ve yoğunluğunu aşağıdaki gibi güncelleyin: D Mektubu Animasyon Yönü: Üst E harf animasyon yönü: aşağıda
Mektup S Animasyon Yönü: Sol Animasyon Yoğunluğu:% 80
Mektup I Animasyon Yönü: Doğru Animasyon Yoğunluğu:% 80
G harfinin animasyon yönü: aşağıda Mektup N Animasyon Yönü: Üst
İşte son tasarım.
Ve cep telefonunda göründüğü şey bu.
Bence son zihin, Divi’nin doğru ayarlara sahip olduktan sonra harfleri açmanın birçok yolu olduğunu söylemek güvenlidir. Ve bu örnekleri yaparken animasyon ayarlarıyla oynamayı bırakmanın oldukça zor olduğunu söylemeliyim. Denemek için çok fazla varyasyon var! Ancak, umarım bu size bir sonraki projeniz için biraz ilham verir. Eğer varsa, sadece eğlenmek için inşa etmek isteyebilirsiniz. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Bu öğretici için başlayarak, ihtiyacınız olan tek şey divi. Ön uçta bir divi oluşturucu kullanarak baştan bir tasarım inşa edeceğiz. Başlamak için yeni bir sayfa oluşturun, sayfa başlığınızı verin ve Divi Builder’ı kullanmak için tıklayın. Ardından “Baştan Uyan” seçeneğini seçin ve ön uçta oluşturmak için tıklayın. Şimdi tasarlamaya hazırsınız! Harfleri canlandırmak için bir düzen oluşturun Parça, satır ve sütunlar ekleyin ve bir satır bir sütunla yeni bir düzenli bölüm oluşturun.
Metin modülümüzü (beyaz harfler içerecek) eklemeye başlamadan önce, o bölüme koyu bir arka plan görüntüsü ekleyelim. Bölüm ayarlarını açın ve bir arka plan görüntüsü ekleyin. Yatırım şirketinin yön sayfasının düzeninden soyut bir arka plan görüntüsü kullanıyorum. Metin modülü ile bireysel bir harf bloğu oluşturma harflere animasyon eklemeye başlamadan önce, eklemek istediğimiz her harf için önce ayrı bir metin modülü yapmalıyız. Bu örnek için “divi tasarımı” metnini yapacağız. Bu metin ifadesi 11 karakter boşluğu içerdiğinden (harfler arasındaki boşluklar dahil, 11 farklı metin modülü eklememiz ve metin modülünü sütuna eklememiz gerekir. İçerik kutusuna, metninizden ilk harfi ekleyin, bu durum bu durumda “D” mektubu. Ardından metin tasarımı ayarlarını aşağıdaki gibi güncelleyin: Metin yazı tipi: Rubik Metin yazı tipi stili: TT
Metin Rengi Metin: #fffffff
Metin Metin Metni: 80px (masaüstü), 50px (tablet), 30px (cep telefonu)
Hat yüksekliği metni: 1.6em
Metin Oryantasyonu: Orta
Ardından, animasyonu metin modülüne aşağıdaki gibi ekleyin:
Animasyon Stili: Slayt Animasyonlu yön: üst
Animasyon Süresi: 600ms
Animasyon gecikmesi: 100ms
Animasyon Opaklık Başlar:% 100
Metin modülünü iki katına çıkarın ve içeriği “I” harfiyle güncelleyin. Ardından, animasyonun ertelenmesini 100 ms aşağıdaki gibi artırın:
Animasyon gecikmesi: 200ms Metin modülünü iki katına çıkarın ve içeriği “V” harfiyle güncelleyin. Ardından animasyonun ertelenmesini 300 ms’ye yükseltin.
Animasyon gecikmesi: 300ms Metin modülünü iki katına çıkarın ve içeriği “I” harfiyle güncelleyin. Ardından animasyonun ertelenmesini 400ms’ye çıkarın.
Animasyon gecikmesi: 400ms Bir sonraki metin modülü için boş bir alan eklemek istiyoruz. Metin modülünü iki katına çıkarın ve aşağıdaki HTML’yi içerik kutusuna ekleyin: & amp; nbsp;
Bunun için animasyonun ertelenmesini güncellemeye gerek yok. Ardından metin modülünü çoğaltın ve içeriği “D” harfiyle güncelleyin. Bu “tasarım” kelimesindeki ilk harf. Ardından animasyonun ertelenmesini 500 ms’ye artırın. Gecikme Animasyon: 500ms Metin modülünü çoğaltma ve “tasarım” kelimesini heceleyen kalan her harf için animasyonun ertelenmesini 100 ms artırma işlemine devam edin.
“E” harfi: animasyonlu 600 ms gecikme
“S” mektubu: 700ms animasyon gecikmesi “I” mektubu: 800ms animasyon gecikmesi
“G” mektubu: 900ms animasyon gecikmesi
“N” harfi: 1000ms animasyonun gecikmesi
İşte şimdiye kadar bir tasarım ekranı.
Modülü yatay olarak uyumlu hale getirmek için Flex özelliği ekleyin, aradığımız yeterli sonuç yok. Ancak mucizevi bir şekilde birleştirmemiz gereken tasarım, satır sütununa küçük bir CSS parçası eklemektir. Bunu yapmak için satır ayarlarını açın ve sütunun ana öğelerine aşağıdaki özel CSS ekleyin. Ekran: Flex;
Ekran Özelliği: Flex eksik tüm modülleri, güzel bir tarayıcının genişliğine ayarlanacak esnek tabloda yatay olarak yatay olarak. Ve modül arka arkaya bir sütun olduğu için, tasarım bir tablet veya mobil cihazda hasar görmez.
Ayrıca, harflerin altındaki alt kenar boşluğunu çıkarmak için özel bir oluk genişliği eklememiz ve harflerin animasyon için bir odaya sahip olması için sıraya birkaç üst ve alt ped eklememiz gerekir.
Talang genişliği: 1
Pilding Custom: Yukarıdaki 5VW, 5VW AşağıSonuçlar aşağıdadır.
Bu ayardan farklı animasyon stilleri ekleyerek, gerçekten benzersiz bir etki için kolayca yeni animasyon stilleri ekleyebilirsiniz. Bunu yapmak için, tüm modülleri aynı anda güncellemek için çoklu seçici Divi özelliklerinden yararlanabilirsiniz. Ön uçta, kaymayı basılı tutun ve ilk ve son metin modülünü tıklayın. Ardından, seçilen modüllerden biri için ayarları açın. Bu, seçilen tüm modüller için ayarları güncellemenize izin veren sermaye ayarlarını açacaktır. Animasyonun ertelenmesini değiştirmek istemiyoruz çünkü her harf üzerindeki basamaklı etkiyi korumak istiyoruz. Ancak, gerçekten benzersiz sonuçlar elde etmek için diğer animasyon seçeneklerini farklı şekillerde güncelleyebiliriz. Önceki örneği kaydedebilmeniz için yeni animasyonları test etmeden önce parçaları çoğaltmanızı öneririm. İşte bazı örnekler. Tersine Zoom Metin Animasyonunu Tersine çevrilmiş bir zoom efektiyle canlandırmak için öğe ayarlarını (tüm modüller için ayarlar) aşağıdakilerle güncelleyin:
Animasyon Stili: Zoom Animasyon yönü: merkez Animasyon yoğunluğu:% 200 Sonuçlar aşağıdadır.
Döner dalga metninin döner dalga efektlerini canlandırmak için animasyonu, eleman ayarlarını (tüm modüller için ayarlar) aşağıdakilerle güncelleyin:
Animasyon Stili: Oynat
Animasyonlu yön: üst Animasyon yoğunluğu:% 100 Sonuçlar aşağıdadır.
Domino Metnin Animasyonu Domino Effects ile Metin Animasyon, Öğe Ayarlarını (Tüm Modüller için Ayarlar) Aşağıdakilerle Güncelle:
Animasyon Stili: Back
Animasyonlu Yön: Sol Animasyon yoğunluğu:% 100 Sonuçlar aşağıdadır.
Domino Effects ile Metin Animasyona Dayanan Animasyonlu Metin, Element Ayarlarını (Tüm Modüller için Ayarlar) Aşağıdakilerle Güncelle: Animasyon Stili: Katlama
Animasyonlu yön: üst
Animasyon yoğunluğu:% 100 Ardından, satır ayarlarının altındaki ana sütun öğesine aşağıdaki CSS ekleyerek bir 3D tasarım öğesi oluşturmak için bir perspektif ekleyin. CSS Elemanı Ana Sütun: Perspektif: 1000px; Sonuçlar aşağıdadır.
Harfleri animasyonlu bir yön kombinasyonu kullanarak animize etmek Daha yaratıcı olmak istiyorsanız, animasyonlu efektlerin bir kombinasyonunu kullanarak harfleri canlandırabilirsiniz. Bu örnek için, slayt stili için bir animasyon ve yoğunluk yönü kombinasyonunu kullanacağım. Bu bize gerçekten eşsiz bir sunum yapacak. İşte nasıl yapılacağı. İlk olarak, tasarım sürecini başlatabilmemiz için daha önce yaptığımız parçalardan birini kopyalayın. Ardından, yalnızca “tasarım” metninin görüntülenmesi için ilk 4 metin modülünü silin.
Bir sonraki bölümü ayarlayın, ViewPort bölümünün dışından başlayarak animasyonda birkaç harf istediğimiz için, bölüm ayarlarına aşağıdaki gibi küçük bir CSS parçası eklememiz gerekir: taşma: gizli;
Bu, harfleri bölüme girene kadar gizli tutacaktır. Geçerli satır ayarları, metin (harfler) modülümüzün ortada kalmasını sağlamak için aşağıdaki CSS’yi satır ayarlarına eklememiz gerekir: Ekran: Flex; Gerekçelendirme: Merkez; Metin Modülünün Genel Ayarları Multi -Secect kullanarak, altı metin modülünü aşağıdaki öğe ayarlarıyla güncelleyin: Özel marj:% 3 kaldı,% 3 sağ Sınır Genişliği: 1 piksel Sınır rengi: #ffffff
Animasyon Stili: Slayt Animasyon Süresi: 2000ms
Animasyon gecikmesi: 100ms
Animasyon yoğunluğu:% 300
Bu, tüm metin modülleri için yaygın olacak temel animasyon ayarlarını işler. Şimdi onlar için animasyon ayarlarını tek tek değiştirebiliriz. Metin Modülünün Bireysel Ayarları Bu noktada, her biri için animasyon yönünü değiştirmek için ayrı metin modüllerinin ayarlarını değiştirerek eğlenebiliriz. Bu, mektupları gerçekten benzersiz bir şekilde canlandırmamıza izin verecektir. Her harf için, animasyonun yönünü ve yoğunluğunu aşağıdaki gibi güncelleyin: D Mektubu Animasyon Yönü: Üst E harf animasyon yönü: aşağıda
Mektup S Animasyon Yönü: Sol Animasyon Yoğunluğu:% 80
Mektup I Animasyon Yönü: Doğru Animasyon Yoğunluğu:% 80
G harfinin animasyon yönü: aşağıda Mektup N Animasyon Yönü: Üst
İşte son tasarım.
Ve cep telefonunda göründüğü şey bu.
Bence son zihin, Divi’nin doğru ayarlara sahip olduktan sonra harfleri açmanın birçok yolu olduğunu söylemek güvenlidir. Ve bu örnekleri yaparken animasyon ayarlarıyla oynamayı bırakmanın oldukça zor olduğunu söylemeliyim. Denemek için çok fazla varyasyon var! Ancak, umarım bu size bir sonraki projeniz için biraz ilham verir. Eğer varsa, sadece eğlenmek için inşa etmek isteyebilirsiniz. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
