Divi'nin Animasyon Ayarlarıyla Başlığınızı Nasıl Pop Yapabilirsiniz?

Başlığınız genellikle insanların web sitenizi ziyaret ettiklerinde okudukları ilk şeydir. Gerçekten iyi bir başlığa sahip olmanın yanı sıra, insanların onlara gösterdiğiniz her şeyi fark etmesini ve gerçekten okumasını sağlamak da önemlidir. Başlıklar genellikle büyüklükleri ve kahraman bölümündeki merkezi konumları nedeniyle fark edilmezler, ancak bir adım daha ileri götürmek ve kelimenin tam anlamıyla manşeti öne çıkarmak istiyorsanız, bu eğitim tam size göre.

Dikkat çeken ve ziyaretçilerinizin dikkatini çeken bir başlık oluşturmak için Divi'nin animasyon ayarlarını birleştireceğiz. Başlığı 5 parçaya böleceğiz ve ziyaretçilerinizin hareketi takip etmek ve paylaşılanları okumak istemesini sağlayacak bir flaş efekti oluşturacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Arka plan rengi

Haydi yaratmaya 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: #eded

aralık

Ardından, bölümün boşluk ayarlarına gidin ve bazı özel alt dolgu ekleyin.

• Alt Dolgu: 10vw

1. Satır Ekle

Sütun Yapısı

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

Arka plan rengi

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

• Arka Plan Rengi: #c9c9c9

boyutlandırma

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

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Satırın varsayılan üst ve alt dolgusunu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Metin Modülü #1 Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül bir Metin Modülü. Paragraf metin stilini kullanarak başlığınızın ilk bölümünü içerik kutusuna girin.

Arka plan rengi

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

• Arka Plan Rengi: #c9c9c9

Metin Ayarları

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

• Metin Yazı Tipi: Didact Gothic
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 10vw
• Metin Satırı Yüksekliği: 0.9em
• Metin Yönü: Merkez

aralık

Ve özel üst ve alt dolguyu kullanarak istediğiniz şekli oluşturun.

• Üst Dolgu: 10vw
• Alt Dolgu: 3vw

Animasyon

Son olarak, bir 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ünmesini sağlar.

• Animasyon Stili: Soluk
• Animasyon Tekrarı: Bir kez
• Animasyon Süresi: 0ms
• Animasyon Gecikmesi: 1000ms

Klon Metin Modülü x4

İlk Metin Modülünü değiştirmeyi bitirdikten sonra, devam edebilir ve başlığınızın uzunluğuna bağlı olarak modülü istediğiniz kadar çoğaltabilirsiniz. Başlığın flaş efektiyle görünmesini istediğiniz her bölümü için ayrı bir Metin Modülüne ihtiyacınız olacak. Bu örnek için 4 ekstra modüle ihtiyacımız olacak.

Kopyalama #1'i Değiştir

İçerik

İlk kopyanın kopyasını değiştirin.

Arka plan rengi

Arka plan rengiyle birlikte.

• Arka Plan Rengi: #5900ff

Metin Rengi

Metin rengini beyaz olarak değiştirin.

• Metin Rengi: #ffffff

Animasyon

Ve animasyon ayarlarında animasyon gecikmesini artırın. Bu, ziyaretçilerinizin önceki Metin Modülü ortaya çıkmadan önce onu okumak için yeterli zamana sahip olmalarını sağlayacaktır.

• Animasyon Gecikmesi: 1500ms

2. Kopyaları Değiştir

İçerik

Sonraki ikinci kopyanın içeriğini değiştirin.

Arka plan rengi

Arka plan rengiyle birlikte.

• Arka Plan Rengi: #ffb200

Metin Rengi

Ve metin rengi de.

• Metin Rengi: #ffffff

Animasyon

Yine, animasyon gecikmesinin önceki iki modül için kullanılan animasyon gecikmesinden daha yüksek olduğundan emin olacağız. İnsanlara okumaları için yeterli zaman vermek için her birinin arasına 500 ms bırakıyoruz.

• Animasyon Gecikmesi: 2000ms

Kopyaları Değiştir #3

İçerik

Üçüncü kopyanın içeriğini değiştirerek devam edin.

Animasyon

Animasyon gecikmesi ile birlikte.

• Animasyon Gecikmesi: 2500ms

Kopyalama #4'ü Değiştir

İçerik

Bir sonraki ve son kopyaya. İçeriği değiştirin.

Arka plan rengi

Arka plan rengiyle birlikte.

• Arka Plan Rengi: #000000

Metin Rengi

Metin rengini de değiştirin.

• Metin Rengi: #3a3a3a

Animasyon

Ve animasyon ayarlarında animasyon gecikmesini artırın.

• Animasyon Gecikmesi: 3000ms

İlki Hariç Her 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 bir miktar negatif üst kenar boşluğu ekleyeceğiz. Başka bir deyişle, ilk modülden sonra gelen tüm modüllerin o ilk Metin Modülünün üstünde görünmesini sağlıyoruz.

• Üst Marj: -21.98vw

Satırı Dönüştür

Dönüştür Çeviri

Dönüştürme çeviri ayarlarından başlayarak tüm satırı dönüştürerek devam edin.

• Alt: -35vw

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

Dönüştürme döndürme değerlerini de değiştirin.

• Sol: 320 derece

2. Satır Ekle

Sütun Yapısı

İkinci sıraya! Artık başlık efektini yerleştirdiğimize göre, 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 kaplamasına izin verin:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Sonraki satırın varsayılan üst dolgusunu kaldırın.

• Üst Dolgu: 0px

Sütun 2'ye Başlık Metin Modülü Ekle

H1 İçeriği Ekle

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül, bir Metin Modülü başlığıdır. Seçtiğiniz bazı H1 içeriğini ekleyin.

H1 Metin Ayarları

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

• Başlık Yazı Tipi: Didact Gothic
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Boyutu: 1.8vw (Masaüstü), 3.8vw (Tablet), 4vw (Telefon)

aralık

Aralık ayarlarına bazı özel kenar boşluğu değerleri ekleyin.

• Üst Marj: -4vw
• Alt Marj: 2vw
• Sol Kenar Boşluğu: 30vw
• Sağ Kenar Boşluğu: 30vw (Masaüstü), 15vw (Tablet ve Telefon)

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

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

• Renk: #000000

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 8px
• Genişlik: %7

aralık

Boşluk ayarları ile birlikte.

• Alt Marj: 1vw
• Sol Kenar Boşluğu: 30vw

Sütun 2'ye Açıklama Metni Modülü Ekle

İçerik Ekle

İhtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz bazı içeriği girin.

Metin Ayarları

Ardından, tasarım sekmesindeki metin ayarlarını değiştirin.

• Metin Boyutu: 0.8vw (Masaüstü), 1.3vw (Tablet), 1.6vw (Telefon)
• Metin Satırı Yüksekliği: 2.2em

aralık

Boşluk ayarlarına da bazı özel kenar boşlukları değerleri ekleyin.

• Alt Marj: 3vw
• Sol Kenar Boşluğu: 30vw
• Sağ Kenar Boşluğu: 30vw (Masaüstü), 15vw (Tablet ve Telefon)

Sütun 2'ye Düğme Modülü Ekle

Düğme Ayarları

Bir Düğme Modülü olan bir sonraki ve son modüle geçin. Seçtiğiniz bir kopyayı ekleyin ve düğme ayarlarını buna göre değiştirin:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 1.5vw (Tablet), 2vw (Telefon)
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Tipi: Poppins
• Yazı Ağırlığı: Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Boşluk ayarlarına gidin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin ve işiniz bitti!

• Sol Kenar Boşluğu: 30vw
• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak başlığınızı nasıl öne çıkaracağınızı gösterdik. Bu, ziyaretçilerinizin dikkatini çekmek ve mesajınızı özgün bir şekilde iletmek için harika bir tekniktir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!