Öne çıkan bir başlığa sahip olmak, hedef kitlenizin dikkatini çekme şansına sahip olduğunuzdan emin olmak anlamına gelir. ziyaretçi. Başlıklar genellikle boyutları ve merkezi konumları nedeniyle dikkatlerden kaçmaz, ancak bunu bir adım daha ileri götürmek ve başlığı kelimenin tam anlamıyla öne çıkarmak istiyorsanız doğru yere geldiniz.

Bu eğitimde, animasyon ayarlarını birleştireceğiz. Divi öne çıkan ve dikkatinizi çeken bir başlık oluşturmak için ziyaretçi.

Nihai sonuç

Birinci Bölüm: Tasarım

Bölüm Yapılandırması

Arka plan rengi

Tasarlamaya başlayalım! Yeni bir sayfa oluşturun ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka plan rengi: #EEE

aralık

Ardından, bölüm aralığı ayarlarına gidin ve özel dolgu kenar boşlukları ekleyin.

• Alt doldurma: 10vw

Satır ekle 1

Sütun yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:

Arka plan rengi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın arka plan rengini değiştirin.

•  Arka plan rengi: #DDD

boyutlandırma

Ardından boyutlandırma ayarlarına gidin ve satırın ekranın tüm genişliğini doldurmasına izin verin.

• Bu satırı tam genişlik yap: Evet
• Özel bir oluk genişliği kullanın: Evet
• Oluk genişliği: 1

aralık

Ayrıca, çizgi için varsayılan üst ve alt iç dolguyu kaldırın.

• Üstte doldurma: 0px
• Dolgu Tabanı: 0px

Metin modülü ekle

Modül eklemeye başlamanın zamanı geldi! İhtiyacımız olan ilk modül bir metin modülüdür. Başlığınızın ilk kısmını kutuya girin içindekiler paragraf metin stilini kullanma.

Arka plan rengi

Ardından modülün arka plan ayarlarına gidin ve bir arka plan rengi ekleyin.

• Arka plan rengi: #ccc

Metin ayarları

Ayrıca Tasarım sekmesindeki metin ayarlarını da değiştirin.

• Yazı tipi metni: Didact Gothic
• Metnin yazı tipi ağırlığı: kalın
• Metin rengi: #000000
• Metin boyutu: 10vw
• Metin satırının yüksekliği: 0.9em
• Metin Yönü: Merkez

aralık

Ardından, üstte ve altta özel dolgu kullanarak istediğiniz şekli oluşturun.

• Üst kısımda dolgu maddesi: 10vw
• Alt doldurma: 3vw

Animasyon

Son fakat en az değil, biraz animasyon ekleyeceğiz. Animasyon süresinin ve başlangıç ​​opaklığının sıfır olduğundan emin olmak önemlidir. Bu, metin modülünün bir flaş efektiyle görüntülenmesine izin verecektir.

• Animasyon Stili: Solmaya
• Animasyonu Tekrarla: Bir Kez
• Animasyon Süresi: 0ms
• Animasyon gecikmesi: 1000 ms

X4 metin modülünü klonla

İlk metin modülünü düzenlemeyi bitirdikten sonra devam edebilir ve başlığınızın uzunluğuna bağlı olarak istediğiniz kadar çoğaltabilirsiniz. Flash efektiyle görüntülemek istediğiniz başlığın her bölümü için ayrı bir metin modülüne ihtiyacınız olacak. Bu örnek için, ek 4 modüllerine ihtiyacımız olacak.

Arka plan rengi

Arka plan rengiyle.

• Kopyala 1 = Arka plan rengi: # 5900ff, metin rengi: #FFF
• Kopyalama 2 = olduğu gibi bırakın, animasyon süresini değiştirin (Animasyon Gecikmesi): 1500 ms
• Kopyala 3 = Arka plan rengi: # ffb200, metin rengi: #FFF, animasyon süresini değiştir: 2000 ms
• Kopyala 4 = Arka plan rengi: # 000, metin rengi #FFF, animasyon süresini değiştir: 2500 ms

İlki hariç her bir metin modülüne negatif kenar boşluğu ekleyin

Tüm metin modüllerini özelleştirmeyi tamamladığınızda, devam edebilir ve bir örtüşme oluşturabilirsiniz. Bu örtüşmeyi oluşturmak için, yinelenen metin modüllerinin her birine negatif bir üst kenar boşluğu ekleyeceğiz. Diğer bir deyişle, ilk modülü takip eden tüm modüllerin ilk metin modülünün üzerinde görünmesini sağlıyoruz.

• Üst kenar boşluğu: -31.98vw

Dönüşüm hattı

Çeviriyi Dönüştür

Dönüşüm parametrelerinden başlayarak tüm çizgiyi dönüştürerek devam edin.

• Alt: -35vw

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

Ayrıca dönüşümün dönüş değerlerini de değiştirin.

• Sol: 320deg

2 satırını ekle

Sütun yapısı

İkinci sırada! Artık başlık efekti yerinde olduğu için, kalan modülleri eklemeye başlayabiliriz. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarında satırın ekranın tüm genişliğini doldurmasına izin verin:

• Bu satırı tam genişlik yap: Evet
• Özel bir oluk genişliği kullanın: Evet
• Oluk genişliği: 1

aralık

Varsayılan üst dolguyu bir sonraki satırdan kaldırır.

• Üst dolgu: 0px

2 sütununa bir metin açıklama modülü ekleyin

H1 içeriği ekle

Modül eklemenin zamanı geldi. İlk modül bir metin modülü olacaktır. Şunu ekleyebilirsiniz: içindekiler Dilediğin

H1 metin ayarları

Ardından tasarım sekmesine gidin ve H1 ayarlarını değiştirin.

• Başlığın yazı tipi: Didact Gothic
• Başlık Ağırlığı: Kalın
• Yazı Tipi Boyutu: 1.8vw (Bilgisayar), 3.8vw (Tablet), 4vw (Telefon)

aralık

Boşluk bölümüne özel kenar boşlukları ekleyin.

• Üst kenar boşluğu: -4vw
• Alt kenar boşluğu: 2vw
• Sol kenar boşluğu: 30vw
• Sağ kenar boşluğu: 30vw (Bilgisayar), 15vw (Tabletler ve Telefon)

2 sütununa bir ayırıcı modül ekleyin

görünürlük

Bir sonraki modül, ayırıcı modüldür. "Bölücüyü Göster" seçeneğinin etkinleştirildiğinden emin olun.

• Ayırıcıyı Göster: Evet

Renk

Ardından "Tasarım" sekmesine gidin ve ayırıcının rengini değiştirin.

• Renk: #000000

Dimentionnement

Aralık seçeneklerini de değiştirin.

• Aralık Ağırlığı: 8px
• Genişlik:% 7

aralık

Her zaman boyutlandırma seçenekleriyle.

• Düşük marj: 1vw
• Sol kenar boşluğu: 30vw

2 sütununa bir metin modülü ekleyin

İçerik ekle

Bir sonraki modül başka bir metin modülü olacaktır. şunları sağlamanız gerekir: içindekiler De Chore Choix.

Metin ayarı

Ardından "Tasarım" sekmesindeki metin ayarlarını değiştirmeniz gerekir.

• Metin Boyutu: 0.8vw (Bilgisayar), 1.3vw (Tablet), 1.6vw (Telefon)
• Çizginin yüksekliği: 2.2em

aralık

Aralık bölümünde de bazı kenar boşlukları ekleyin.

• Düşük marj: 3vw
• Sol Kenar Boşluğu: 30vw
• Sağ Kenar Boşluğu: 30vw (Bilgisayar), 15vw (Tabletler ve Telefonlar)

2 sütununa bir düğme modülü ekleyin

Düğme modülü ayarları

Bir düğme modülü olacak son modül için. Seçtiğiniz içeriği ekleyecek ve ayarları aşağıdaki gibi değiştireceksiniz:

• Özel stil kullan: Evet
• Yazı Tipi Boyutu: 1vw (Bilgisayar), 1.5vw (Tablet), 2vw (Telefon)
• Düğme kenarlığının genişliği: 0px
• Düğme yazı tipi: Poppins
• Metin ağırlığı: Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Aralık ayarlarına gidin ve özel bir dış kenar boşluğunun yanı sıra bir iç kenar boşluğu ekleyin ve hepsi bu.

• Sol Dış Kenar Boşluğu: 30vw
• İç yüksek marj: 1vw
• İç düşük marj: 1vw
• Sol iç kenar boşluğu: 3vw
• sağ iç marj: 3vw

Finish

Bu eğitimde, yalnızca dahili seçenekleri kullanarak animasyonlu metin içeren bir başlığın nasıl tasarlanacağını gördük. Divi. Bu, karşınızdakinin dikkatini çekmenizi sağlayacak mükemmel bir tekniktir. ziyaretçi çok orijinal bir şekilde.