Divi ile Geçiş Simgelerini Kullanarak Başlığınızda Yerden Nasıl Tasarruf Edilir

Başlığınızı tasarlama şekliniz, web sitenizin geri kalanının tonunu belirler. Bu nedenle, öğeleri ve etkileşimleri ekleme şeklinizi düşünmek önemlidir. Tabii ki, bir logo ve menü öğeleri gibi temel bilgileri eklemek isteyeceksiniz, ancak büyük olasılıkla başka harekete geçirici mesajlar da eklemek isteyeceksiniz. Ancak, başlığınıza ne kadar çok öğe eklerseniz, başlık o kadar bunaltıcı hale gelebilir. Başlığınızda farklı harekete geçirici mesajlar sergilemenin temiz ve etkileşimli bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. Bugün, geçiş simgelerini kullanarak başlığınızda nasıl yerden tasarruf edeceğinizi gösteriyoruz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

masaüstü

Mobil

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ücretsiz genel başlık şablonuna el 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!

1. Başlık Yapısı Oluşturun

Yeni Genel Başlık Şablonu Oluşturun

Divi Tema Oluşturucu'ya giderek başlayın ve yeni bir genel veya özel başlık oluşturmaya başlayın.

1. Bölüm Ekle

Degrade Arka Plan

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümün ayarlarını açın ve bir degrade arka planı uygulayın.

• Renk 1: #ffffff
• Renk 2: #eaeaea
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Kutu Gölge

Bir kutu gölgesi de ekleyin.

• Gölge Rengi: rgba(0,0,0,0.06)

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Ö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
• Satır Hizalama: Merkez

aralık

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

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

Ana Eleman CSS

Ardından, gelişmiş sekmeye gidin ve bazı ana öğe özel CSS kod satırlarını farklı ekran boyutlarına uygulayın. Bu kod, öğeleri masaüstünde dikey olarak ortalamamıza yardımcı olacaktır.

Masaüstü:

display: flex;
place-items: center;

Tablet ve Telefon:

display: block;

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve biraz sol ve sağ dolgu uygulayın.

• Sol Dolgu: %5
• Sağ Dolgu: %5

Ana Eleman

Sütunun ana öğesine bazı özel CSS uygulayarak masaüstünde sütunumuzun boyutunu değiştiriyor ve tablet ve telefonda "%100"e geri getiriyoruz.

Masaüstü:

width: 88% !important

Tablet ve Telefon:

width: 100% !important;

Sütun 2 Ayarları

Arka plan rengi

Ardından, sütun 2 ayarlarını açacağız ve arka plan rengini beyaz olarak değiştireceğiz.

• Arka Plan Rengi: #FFFFFF

aralık

Bu sütunun boşluk ayarlarına da bazı duyarlı dolgu değerleri ekleyeceğiz.

• Üst Dolgu:
  • Masaüstü: 50 piksel
  • Tablet ve Telefon: 20px
• Alt Dolgu
  • Masaüstü: 50 piksel
  • Tablet ve Telefon: 20px
• Sol Dolgu: %1
• Sağ Dolgu: %1

Ana Eleman CSS

İkinci sütunun boyutunu masaüstünde de değiştireceğiz. Bunu daha küçük ekran boyutlarında "%100"e getiriyoruz.

Masaüstü:

display: flex;
place-items: center;
width: 12% !important;

Tablet ve Telefon:

width: 100% !important;

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 bir logo yükleyin.

Arka Plan Rengini Kaldır

Ardından, varsayılan arka plan rengini kaldırın.

Menü Metin Ayarları

Modülün tasarım sekmesine gidin ve menü metin ayarlarını buna göre değiştirin:

• Menü Yazı Tipi: Playfair Ekranı
• Menü Metni Yazı Tipi: Playfair Ekranı
• Menü Metin Rengi: #000000
• Menü Metin Boyutu: 19px
• Menü Satır Yüksekliği: 1.4em
• Metin Hizalama: Sağ

Açılır Menü Ayarları

Ardından, açılır menü satırı rengini değiştirin.

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

Simge Ayarları

Simge ayarlarından simge renklerini de değiştirin.

• Alışveriş Sepeti Simge Rengi: #000000
• Arama Simgesi Rengi: #000000
• Hamburger Menü Simgesi Rengi: #000000

boyutlandırma

Ve boyutlandırma ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını tamamlayın:

• Logo Maksimum Genişliği: 200 piksel
• Genişlik: %100
• Modül Hizalaması: Merkez

Blurb Modülü #1'i Sütun 2'ye ekleyin

İçerik Kutusunu Boş Bırak

İkinci sütuna geçin. Geçiş simgelerini oluşturmak için başlık ve içerik olmadan Bulanıklık Modüllerini kullanacağız. İlk geçiş simgesini oluşturarak başlayacağız ve ardından diğer iki geçiş simgesini eklemek için modülü yeniden kullanacağız. Blurb Modülünü ekledikten sonra başlık ve içerik kutusunun boş olduğundan emin olun.

Simge Seç

Ardından, istediğiniz bir simgeyi seçin.

Simge Ayarları

Modülün tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi
  • Varsayılan: #dbdbdb
  • Fareyle üzerine gelin: #000000
• Simge Yerleşimi: Üst
• Simge Hizalama: Merkez
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: %200

boyutlandırma

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

• İçerik Genişliği: %100
• Genişlik: %32

Ana Öğe ve Bulanık Resim CSS'si

Ve Blurb Module'ün gelişmiş sekmesindeki özel CSS seçeneklerine iki CSS kod satırı ekleyerek modül ayarlarını tamamlayın.

Ana Eleman:

display: inline-block;

Bulanık Görüntü:

margin-bottom: 0px !important

Blurb Modülünü İki Kez Klonla

İlk geçiş simgesi Blurb Module'ü tamamladıktan sonra, onu iki kez klonlayabilirsiniz.

Simgeyi Değiştir

Her kopyadaki simgeyi değiştirdiğinizden emin olun.

2. Geçiş Öğeleri Ekle

2. Bölüm Ekle

boyutlandırma

Artık başlığımızın temelini oluşturduğumuza göre, hala geçiş öğelerini eklememiz gerekiyor. Bunu yapmak için, öncekinin hemen altına yeni bir bölüm ekleyeceğiz. Bölüm ayarlarını açın ve bu bölümün yüksekliğinin “0px” ​​olduğundan emin olun. Bu, bölümün başlık tasarımımızda herhangi bir yer kaplamasını önlememize yardımcı olacaktır. Bu bölüme ihtiyaç duymamızın tek nedeni, geçiş öğelerimizi göstermektir.

• Yükseklik: 0 piksel

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle
• 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

Konum

Ve tüm satırı yeniden konumlandırın. Bu satırı mutlak hale getirmek, satırın tasarımda herhangi bir yer kaplamasını önlememize yardımcı olacaktır.

• Pozisyon: Mutlak
• Konum: Sağ Üst Köşe

Metin Modülü #1'i Sütun 2'ye ekleyin

İçerik Kutusuna Telefon Numarası Ekle

Geçiş öğelerini ekleme zamanı! İlk olarak, telefon numarasını ekleyeceğiz. 2. sütuna yeni bir Metin Modülü ekleyin ve içerik kutusuna telefon numarasını girin.

Arka plan rengi

Ardından siyah bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Playfair Ekranı
• Metin Rengi: #ffffff
• Metin Boyutu: 27px
• Metin Hizalama: Merkez

boyutlandırma

Genişliğin de %100 olduğundan emin olun.

• Genişlik: %100

aralık

Ardından, boşluk ayarlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: %10
• Alt Dolgu: %10
• Sol Dolgu: %2
• Sağ Dolgu: %2

Klon Metin Modülü

İlk geçiş öğesi Metin Modülünü tamamladıktan sonra, onu bir kez klonlayın.

İçeriği E-posta Adresiyle Değiştir

İçerik kutusundaki içeriği değiştirin.

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

Seçtiğiniz Sosyal Ağları Ekleyin

Ardından, 2. sütuna bir Sosyal Medya Takip Modülü ekleyin. İstediğiniz kadar sosyal ağ ekleyin.

Her Sosyal Ağın Arka Plan Rengini Beyaz Olarak Değiştirin

Ardından, her sosyal ağ için ayrı ayrı arka plan rengini beyaz olarak değiştirin.

• Arka Plan Rengi: #FFFFFF

Arka plan rengi

Ardından, genel modül ayarlarına geri dönün ve siyah bir arka plan rengi kullanın.

• Arka Plan Rengi: #000000

hizalama

Modülün tasarım sekmesine gidin ve modül hizalamasını değiştirin.

• Modül Hizalaması: Merkez

Simge Ayarları

Simge ayarlarından simge rengini de değiştirin.

• Simge Rengi: #000000

boyutlandırma

Ardından, boyutlandırma ayarlarına "%100" genişlik uygulayın.

• Genişlik: %100

aralık

Bazı özel üst ve alt dolguları da uygulayın.

• Üst Dolgu: %10
• Alt Dolgu: %10

Sınır

Ve kenarlık ayarlarına bazı yuvarlak köşeler ekleyerek modül ayarlarını tamamlayın.

• Tüm Köşeler: 100 piksel

3. İşlevsellik Ekleyin

Blurb Modüllerinin İlk Bölümüne Ardışık CSS Kimlikleri Ekleme

Artık tüm öğeler yerinde olduğuna göre, geçiş efektini eklemeye başlayabiliriz. Yapmanız gereken ilk şey, her Blurb Modülünü ayrı ayrı açmak ve ardışık bir CSS kimliği eklemek.

• Bulanıklık 1: başlık-cta-1
• Blurb 2: header-cta-2
• Blurb 3: header-cta-3

Öğeleri Değiştirmek için Ardışık CSS Kimlikleri Ekleme

Aynı şeyi geçiş öğesi modülleri için de yapın. CSS kimliğinin sonundaki sayı, önceki adımda simgeler için kullandığınız CSS kimliğiyle eşleşmelidir.

• Metin Modülü 1: başlık-öğe-1
• Metin Modülü 2: başlık-öğe-2
• Sosyal Medya Takip Modülü: header-item-3

Tüm Geçiş Öğelerine Mutlak Konum Ekle

Ve geçiş öğelerinin her birini tek tek mutlak çevirin. Bunu yapmak için tel kafes moduna geçmenizi öneririz.

• Pozisyon: Mutlak
• Konum: Sağ Üst

Bölüm #1'in İlk Sütununa Kod Modülü Ekleme

Artık tüm CSS kimlikleri yerinde olduğuna göre, tıklama işlevinin çalışması için kodu ekleyebiliriz. Sütun 1'deki Menü Modülünün hemen altına yeni bir Kod Modülü ekleyin.

CSS Kodu Ekle

Aşağıdaki yazdırma ekranında görebileceğiniz gibi, stil etiketleri arasına aşağıdaki CSS kodu satırlarını ekleyin:

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

JQuery Kodu Ekle

Bazı özel JQuery kodları da ekliyoruz. Aşağıdaki yazdırma ekranında görebileceğiniz gibi kodu script etiketleri arasına ekleyin.

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. Başlık + Öğeleri Yapışkan Yap

1. Bölümü Yapışkan Yap

Son fakat en az değil, ayrıca başlığı ve geçiş öğelerini yapışkan hale getirebilirsiniz. İstenilen sonucu elde etmek için, her iki bölümün de yapışkan olduğundan ve “Çevredeki Yapışkan Öğelerden Ofset” seçeneğinin etkinleştirildiğinden emin olmanız gerekir. İlk bölümü yapışkan yapın.

• Yapışkan Konum: En Üstte Yapış
• Alt Yapışkan Limit: Yok
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

2. Bölümü Yapışkan Yap

Aynısını 2. bölüm için de yapın. İşte bu kadar!

• Yapışkan Konum: En Üstte Yapış
• Alt Yapışkan Limit: Yok
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Ö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, başlığınızın içindeki geçiş simgelerini nasıl kullanacağınızı gösterdik. Birisi bir simgeye tıkladığında, başlık tasarımınızda çok fazla alan kazanmanıza yardımcı olan bir geçiş öğesi görünür. Bu yaklaşım, kullanıcı davranışına odaklanır ve bunaltıcı bir başlık tasarımı tasarlama zorunluluğunu ortadan kaldırmanıza yardımcı olur. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

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.