Divi'de Benzersiz Metin Tasarımları için Harfleri Canlandırma

Animasyon, modern web siteleri için kullanıcı deneyiminin ortak bir parçası haline geldi. Harika görünmesinin yanı sıra, içeriği hayata geçirerek kullanıcıyı meşgul eden incelikli bir etkileşimli öğe de ekleyebilir. Divi'nin yerleşik animasyon efektleri, farklı animasyon stilleriyle bir sayfadaki hemen hemen her öğeyi canlandırmanıza olanak tanır.

Bu derste, Divi'deki bazı benzersiz metin tasarımları için harfleri nasıl canlandıracağınızı göstereceğim. Bir metin modülüne ayrı ayrı harfler koyarak, içeriği yaratıcı bir şekilde öne çıkaracak farklı animasyon stilleri, süre ve gecikmelerle her harfin animasyonunu hedefleyebilirsiniz. İçeriği oluşturan harfler çok seo dostu olmayacağından bu teknik tamamen tasarım amaçlıdır. Ancak animasyonlu harfler, hikayenizi kullanıcılarla çarpıcı bir şekilde paylaşmanıza olanak tanır.

Başlayalım.

Gizlice Bakış

Harf Animasyon Tasarım Örnekleri Düzenini ÜCRETSİZ İndirin

Bu eğitimdeki harf animasyon tasarımlarına el atmak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Başlarken

Bu eğitim için ihtiyacınız olan tek şey Divi. Ön uçtaki Divi oluşturucuyu kullanarak tasarımları sıfırdan oluşturacağız. Başlamak için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve Divi Builder'ı kullanmak için tıklayın. Ardından “sıfırdan oluştur” seçeneğini seçin ve ön uçta oluşturmak için tıklayın.

Artık tasarlamaya hazırsınız!

Harfleri Canlandırmak için Düzeni Oluşturma

Bölüm, Satır ve Sütun Ekleme

Devam edin ve tek sütunlu bir satırla yeni bir normal bölüm oluşturun.

Metin modüllerimizi (beyaz harfler içerecek) eklemeye başlamadan önce bölüme koyu bir arka plan görüntüsü ekleyelim. Bölüm ayarlarını açın ve bir arka plan resmi ekleyin. Yatırım Şirketi Açılış Sayfasının önceden hazırlanmış düzeninden soyut bir arka plan resmi kullanıyorum.

Metin Modülleriyle Bireysel Harf Blokları Oluşturma

Harflere animasyon eklemeye başlamadan önce eklemek istediğimiz her harf için ayrı bir metin modülü oluşturmalıyız. Bu örnek için “Divi Design” metnini oluşturacağız. Bu metin cümlesi 11 karakter boşluk içerdiğinden (harfler arasındaki boşluk dahil, 11 farklı metin modülü eklememiz gerekecek.

Devam edin ve sütuna bir metin modülü ekleyin.

İçerik kutusuna, bu durumda “d” harfi olan metninizin ilk harfini ekleyin.

Ardından metin tasarımı ayarlarını aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi: Rubik
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 80px (masaüstü), 50px (tablet), 30px (telefon)
• Metin Satırı Yüksekliği: 1,6em
• Metin Yönü: orta

Ardından, metin modülüne aşağıdaki gibi bir animasyon ekleyin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Süresi: 600ms
• Animasyon Gecikmesi: 100ms
• Animasyon Opaklığı Başlatma: %100

Metin modülünü çoğaltın ve içeriği “i” harfiyle güncelleyin. Ardından, animasyon gecikmesini aşağıdaki gibi 100ms artırın:

• Animasyon Gecikmesi: 200ms

Metin modülünü çoğaltın ve içeriği “v” harfiyle güncelleyin. Ardından animasyon gecikmesini 300 ms'ye yükseltin.

• Animasyon Gecikmesi: 300ms

Metin modülünü çoğaltın ve içeriği “i” harfiyle güncelleyin. Ardından animasyon gecikmesini 400 ms'ye yükseltin.

• Animasyon Gecikmesi: 400ms

Bu sonraki metin modülü için bir boşluk eklemek istiyoruz. Metin modülünü çoğaltın ve içerik kutusuna aşağıdaki html'yi ekleyin:

 

Bunun için animasyon gecikmesini güncellemeye gerek yok.

Ardından metin modülünü çoğaltın ve içeriği “d” harfiyle güncelleyin. Bu, "tasarım" kelimesinin ilk harfidir. Ardından animasyon gecikmesini 500 ms'ye yükseltin.

• Animasyon Gecikmesi: 500ms

Metin modülünü kopyalama ve “tasarım” kelimesini heceleyen kalan harflerin her biri için animasyon gecikmesini 100 ms artırma işlemine devam edin.

• "e" harfi: animasyon gecikmesi 600ms
• "s" harfi: animasyon gecikmesi 700ms
• "i" harfi: animasyon gecikmesi 800ms
• "g" harfi: animasyon gecikmesi 900ms
• "n" harfi: animasyon gecikmesi 1000ms

İşte tasarımın şu ana kadar nasıl göründüğü.

Modülleri yatay olarak hizalamak için Flex Özelliği ekleme

Henüz tam olarak aradığımız sonuç değil. Ancak, tasarımı sihirli bir şekilde bir araya getirmemiz gereken tek şey, satır sütununa küçük bir css parçacığı eklemek. Bunu yapmak için satır ayarlarını açın ve aşağıdaki özel CSS'yi Sütun Ana Öğesine ekleyin.

display: flex;

display: flex özelliği, tüm modülleri farklı tarayıcı genişliklerine güzel bir şekilde uyum sağlayacak esnek bir tabloda yatay olarak hizalar. Ve modüller tek sütunlu bir sırada olduğundan tablet veya mobil cihazlarda tasarım bozulmayacaktır.

Ayrıca, harflerin altındaki alt kenar boşluğunu çıkarmak için özel bir oluk genişliği eklememiz ve satıra biraz üst ve alt dolgu eklememiz gerekiyor, böylece harflere animasyon için biraz yer kalıyor.

• Oluk Genişliği: 1
• Özel Dolgu: 5vw üst, 5vw alt

İşte nihai sonuç.

Farklı Animasyon Stilleri Ekleme

Bu kurulumla, tamamen benzersiz efektler için kolayca yeni animasyon stilleri ekleyebilirsiniz. Bunu yapmak için, tüm modülleri bir kerede güncellemek için Divi'nin çoklu seçim özelliğinden yararlanabilirsiniz. Ön uçta, shift tuşunu basılı tutun ve ilk ve son metin modülünü tıklayın. Ardından, seçilen modüllerden birinin ayarlarını açın.

Bu, seçili tüm modüller için ayarları güncellemenize izin verecek olan öğe ayarları modunu açacaktır. Harflerin her birinde basamaklı efekti korumak istediğimiz için animasyon gecikmesini değiştirmek istemiyoruz. Ancak, tamamen benzersiz sonuçlar oluşturmak için diğer animasyon seçeneklerini farklı şekillerde güncelleyebiliriz.

Önceki örnekleri saklayabilmeniz için yeni bir animasyonu test etmeden önce bölümü kopyalamanızı öneririm.

İşte birkaç örnek.

Ters Yakınlaştırma Metin Animasyonu

Harfleri ters yakınlaştırma efektiyle canlandırmak için, öğe ayarlarını (tüm modüllerin ayarları) aşağıdakilerle güncelleyin:

• Animasyon Stili: Yakınlaştır
• Animasyon Yönü: Merkez
• Animasyon Yoğunluğu: %200

İşte nihai sonuç.

Yuvarlanan Dalga Metin Animasyonu

Harfleri yuvarlanan dalga efektiyle canlandırmak için, öğe ayarlarını (tüm modüller için ayarlar) aşağıdakilerle güncelleyin:

• Animasyon Stili: Döndür
• Animasyon Yönü: Yukarı
• Animasyon Yoğunluğu: %100

İşte nihai sonuç.

Domino Metin Animasyonu

Metni domino efektiyle canlandırmak için öğe ayarlarını (tüm modüllerin ayarları) aşağıdakilerle güncelleyin:

• Animasyon Stili: Çevir
• Animasyon Yönü: Sol
• Animasyon Yoğunluğu: %100

İşte nihai sonuç.

Ayakta Metin Animasyonu

Metni domino efektiyle canlandırmak için öğe ayarlarını (tüm modüllerin ayarları) aşağıdakilerle güncelleyin:

• Animasyon Stili: Katlama
• Animasyon Yönü: Yukarı
• Animasyon Yoğunluğu: %100

Daha sonra satır ayarları altındaki Ana Sütun Öğesine aşağıdaki css'i ekleyerek 3d tasarım öğesi oluşturmak için perspektif ekleyin.

Ana Sütun Öğesi CSS:

perspective: 1000px;

İşte nihai sonuç.

Animasyon Yönergelerinin Bir Kombinasyonunu Kullanarak Harfleri Canlandırın

Daha yaratıcı olmak istiyorsanız, animasyon efektlerinin bir kombinasyonunu kullanarak harfleri canlandırabilirsiniz. Bu örnekte, slayt stili için animasyon yönleri ve yoğunluğunun bir kombinasyonunu kullanacağım. Bu bize tamamen benzersiz bir sunum sağlayacaktır.

İşte nasıl yapılacağı.

İlk olarak, tasarım sürecine bir adım önde başlayabilmemiz için daha önce oluşturduğumuz bölümlerden birini çoğaltın.

Ardından ilk 4 metin modülünü silin, böylece yalnızca “tasarım” metni görüntülenir.

Bölüm Ayarları

Ardından, animasyondaki bazı harflerin bölüm görünümünün dışında başlamasını istediğimizden, bölüm ayarlarına aşağıdaki gibi küçük bir css snippet'i eklememiz gerekecek:

overflow: hidden;

Bu, bölüme gelene kadar harfleri gizli tutacaktır.

Satır Ayarları

Şimdi, metin modüllerimizin (harflerin) ortalandığından emin olmak için satır ayarlarına aşağıdaki css'yi eklememiz gerekiyor:

display:flex;
justify-content: center;

Metin Modülü Ortak Ayarları

Çoklu seçimi kullanarak, metin modüllerinin altısını da aşağıdaki öğe ayarlarıyla güncelleyin:

• Özel Kenar Boşluğu: %3 sol, %3 sağ
• Kenar Genişliği: 1px
• Kenar Rengi: #ffffff

• Animasyon Stili: Slayt
• Animasyon Süresi: 2000ms
• Animasyon Gecikmesi: 100ms
• Animasyon Yoğunluğu: %300

Bu, tüm metin modüllerinde ortak olacak temel animasyon ayarlarını halleder. Şimdi, onlar için ayrı ayrı animasyon ayarlarını değiştirebiliriz.

Metin Modülü Bireysel Ayarlar

Bu noktada, her biri için animasyonun yönünü değiştirmek için ayrı metin modülü ayarlarını değiştirerek biraz eğlenebiliriz. Bu, harfleri tamamen benzersiz bir şekilde canlandırmamıza izin verecektir. Her harf için animasyon yönünü ve yoğunluğunu aşağıdaki gibi güncelleyin:

• D harfi
  Animasyon Yönü: Yukarı
• E harfi
  Animasyon Yönü: Aşağı
• Edebiyat
  Animasyon Yönü: Sol
  Animasyon Yoğunluğu: %80
• I harfi
  Animasyon Yönü: Sağ
  Animasyon Yoğunluğu: %80
• G harfi
  Animasyon Yönü: Aşağı
• N harfi
  Animasyon Yönü: Yukarı

İşte son tasarım.

Ve işte mobilde nasıl göründüğü.

Son düşünceler

Doğru kuruluma sahip olduğunuzda Divi'nin harfleri canlandırmanın birçok yolu olduğunu söylemenin güvenli olduğunu düşünüyorum. Ve bu örnekleri oluştururken animasyon ayarlarıyla oynamayı bırakmanın oldukça zor olduğunu söylemeliyim. Denemek için pek çok olası varyasyon var! Her neyse, umarım bu size bir sonraki projeniz için biraz ilham verir. Bir şey olursa, sadece eğlencesi için inşa etmek isteyebilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!