Global Başlığınızı Divi ile Nasıl Canlandırabilirsiniz?

Başlığınız, web sitenizin en önemli bölümlerinden biridir. Sayfalarınızı, gönderilerinizi ve harekete geçirici mesajlarınızı birbirine bağlar. Aynı zamanda, ziyaretçilerinizin aradıklarını bulmak için zaman kaybetmemeleri için otomatik olarak aramaya başladıkları şeylerden biridir. Başlığınızı vurgulamanın bir yolunu arıyorsanız, bu gönderiyi beğeneceksiniz. Divi's Theme Builder'ı kullanarak özel olarak oluşturulmuş global başlığınızı nasıl canlandıracağınızı göstereceğiz. Olasılıklar sonsuzdur, ancak hemen başlayabileceğiniz iki animasyon örneği göstereceğiz. JSON dosyalarını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki iki örneğe hızlıca bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Animated Global Header'ı ÜCRETSİZ İndirin

Ellerinizi ücretsiz animasyonlu global başlığa koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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!

Youtube Kanalımıza Abone Olun

1. Divi Theme Builder'a gidin ve Global Header Oluşturmaya Başlayın

Divi Theme Builder'a gidin

WordPress arka ucunuzdaki Divi Theme Builder'a giderek başlayın.

Sıfırdan Global Başlık Oluşturun

'Global Başlık Ekle'yi tıklayın ve 'Global Başlık Oluştur'u seçerek devam edin.

2. Global Başlık Bloğu Tasarımını Oluşturun

Bölüm Ayarları

aralık

Şablon düzenleyicinin içine girdikten sonra genel başlığı oluşturmaya başlayabilirsiniz. Devam eden bir 'blok' tasarımımız olduğundan emin oluyoruz, böylece daha sonra iki farklı kapsayıcıya animasyonlar ekleyebiliriz; sütun + modül. Şablon düzenleyicide fark edebileceğiniz bölümü açın ve tüm varsayılan üst ve alt dolguları kaldırın.

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

Kutu Gölge

Ardından bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(13,60,216,0.24)

Z İndeksi

Ayrıca gelişmiş sekmesinde bölümün z dizinini de artırdığınızdan emin olun. Bu, genel başlık içeriğinin tüm sayfa/yayın içeriğinin üstünde görünmesini sağlayacaktır.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

görünürlük

Satırın taşmalarını da 'görünür' olarak ayarladığınızdan emin olun.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütun Ayarları (Üçü)

Arka plan rengi

Satır ayarlarını tamamladıktan sonra sütunları da biçimlendirmeniz gerekir. Sütunların her birini açın ve arka plan renklerini buna göre değiştirin:

• Sütun 1 Arka Plan Rengi: #efefef
• 2. Sütun Arka Plan Rengi: #ffcb0f
• Sütun 3 Arka Plan Rengi: #2848ff

aralık

Her sütuna da bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 0,5vw (Masaüstü), 1vw (Tablet ve Telefon)
• Alt Dolgu: 0,5vw (Masaüstü), 1vw (Tablet ve Telefon)

Ana Eleman

Tüm sütun içeriğinin dikey olarak ortalandığından emin olmak için her sütunun ana öğesine üç satır CSS kodu ekleyeceğiz.

display: flex;
flex-direction: column;
justify-content: center;

Sütun 1 Z İndeksi

Son olarak, sütun 1 ayarlarını açın ve görünürlük ayarlarında z dizinini artırın.

• Z İndeksi: 10

Sütun 1'e Menü Modülü Ekle

Seçim Menüsü

Sütun 1'deki Menü Modülü ile başlayarak modül ekleme zamanı. İstediğiniz bir menüyü seçin.

Logo Yükle

Ardından logonuzu yükleyin.

Arkaplanı kaldırın

Modülün arka plan rengini kaldırarak devam edin.

Düzen

Tasarım sekmesine gidin ve aşağıdaki ayarların düzen için geçerli olduğundan emin olun:

• Stil: Sola Hizalanmış
• Açılır Menü Yönü: Aşağıya

Menü Metin Ayarları

Sonraki metin ayarlarını stilize edin:

• Menü Yazı Tipi: Montserrat
• Menü Metin Rengi: #000000
• Menü Metin Boyutu: 0.7vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

Açılır Menü Ayarları

Açılır menü ayarları ile birlikte.

• Açılır Menü Satır Rengi: #ffffff

Simge Ayarları

Ve hamburger menü simgesi rengini de değiştirin.

• Hamburger Menü Simgesi Rengi: #2848ff

boyutlandırma

Farklı ekran boyutlarında maksimum logo genişliğini değiştirerek devam edin.

• Maksimum Logo Genişliği: 6vw (Masaüstü), 9vw (Tablet), 13vw (Telefon)

aralık

Ve biraz sol ve sağ kenar boşluğu ekleyerek modülün ayarlarını tamamlayın.

• Sol Kenar Boşluğu: 2vw
• Sağ Kenar Boşluğu: 2vw

Sütun 1'e Kod Modülü Ekle

VW Duyarlılığı için CSS Kodu Ekle

Şimdi, menü modülünde, metin boyutu ve boşluk değerlerimiz için görünüm genişliği birimini kullandık. Bunu, iki satıra ayrılmadan farklı masaüstü ekran boyutlarına 8 adede kadar menü öğesi yerleştirebilmenizi sağlamak için yaptık. Menü öğeleri arasındaki boşluğun da vw birimiyle oluşturulduğundan emin olmamız gerekecek. Bunu yapmak için, 1. sütuna bir Kod Modülü ekleyeceğiz ve aşağıdaki CSS kodu satırlarını ekleyeceğiz:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

2. Sütun'a Sosyal Medya Takip Modülü Ekleyin

Sosyal Ağlar Ekle

Bir sonraki sütunda, bir Sosyal Medya Takip Modülüne ihtiyacımız olacak. Seçtiğiniz sosyal ağları ekleyin.

Sosyal Ağ Stillerini Tek Tek Sıfırla

Her ağın ayarlarını sıfırlayarak devam edin.

hizalama

Modül hizalamasını değiştirerek modülün ayarlarını tamamlayın.

• Modül Hizalaması: Merkez

Sütun 3'e Düğme Modülü Ekle

Kopya Ekle

Bir sonraki ve son sütuna. Orada sadece bir Düğme Modülüne ihtiyacımız olacak. Seçtiğiniz bir kopyayı ekleyin.

hizalama

Tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğmeyi şekillendirerek modülün ayarlarını tamamlayın.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 1.2vw (Tablet), 2vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Tipi Ağırlığı: Ultra Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

3. Öğelere Eşleşen Animasyon Ekleyin

Küresel Başlık Animasyonu Kombo #1

Sütun 1 Animasyon

Global başlığı oluşturduğumuza göre, şimdi animasyonları ekleme zamanı! İlk animasyonu yeniden oluşturmak için sütun 1 ayarlarını açın ve aşağıdaki animasyonu ekleyin:

• Animasyon Stili: Yakınlaştır
• Animasyon Yönü: Yukarı
• Animasyon Opaklığı Başlatma: %100

Sütun 2 Animasyon

Sonraki sütun 2'ye aşağıdaki animasyon ayarlarını ekleyin:

• Animasyon Stili: Yakınlaştır
• Animasyon Yönü: Aşağı
• Animasyon Gecikmesi: 500ms
• Animasyon Opaklığı Başlatma: %100

Sütun 3 Animasyon

Aşağıdaki animasyonu sütun 3'e atayarak sütun ayarlarını tamamlayın:

• Animasyon Stili: Yakınlaştır
• Animasyon Yönü: Yukarı
• Animasyon Gecikmesi: 1000ms
• Animasyon Opaklığı Başlatma: %100

Modül Animasyonları (Üç Modülün Tamamı)

Sütun ayarlarını tamamladıktan sonra modüllerin her birini ayrı ayrı açın ve onlar için aşağıdaki animasyonu kullanın:

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 1500ms

Küresel Başlık Animasyonu Kombo #2

Sütun 1 Animasyon

Bunun yerine ikinci animasyon setini yeniden oluşturmak ister misiniz? Sütun 1 ayarlarını açın ve aşağıdaki animasyonu ekleyin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Opaklığı Başlatma: %100

Sütun 2 Animasyon

Sonraki sütun 2 için aşağıdaki animasyon ayarlarını kullanın:

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

Sütun 3 Animasyon

Ve aşağıdaki animasyon ayarlarını sütun 3'e uygulayarak sütun ayarlarını tamamlayın:

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

Modül Animasyonları (Üç Modülün Tamamı)

Ardından, her modülü ayrı ayrı açın ve aşağıdaki animasyonu ekleyin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Gecikmesi: 1500ms

4. Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle

Animasyon ayarlarını tamamladıktan sonra genel başlığı kaydedebilir, Tema Oluşturucu'dan çıkabilir ve sonucu web sitenizde görüntüleyebilirsiniz!

Ön izleme

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

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Son düşünceler

Bu öğreticide, Divi'nin yerleşik seçeneklerini ve Tema Oluşturucu'yu kullanarak genel başlığınızı nasıl canlandıracağınızı gösterdik. Bu, web sitenizin başlığına dikkat çekmenin harika bir yoludur. Divi'nin yerleşik animasyon seçenekleriyle olasılıklar sonsuzdur. Başlamanıza yardımcı olmak için size iki farklı örnek gösterdik. JSON dosyalarını da ücretsiz olarak indirebildiniz!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.