Divi Global Başlığınıza İki Yan Yana Düğme Nasıl Eklenir

Sayfalarınızda net harekete geçirici mesajlar olması çoğu web sitesi için bir zorunluluktur. Ve en önemli CTA'larınızdan bazılarına dikkat çekmenin, onları başlığınıza yerleştirmekten daha iyi bir yolu var mı? Bugünün eğitiminde, Divi's Theme Builder'ı kullanarak global başlığınıza iki yan yana düğmeyi nasıl ekleyeceğinizi göstereceğiz. Düğmelerden biri birincil, diğeri ikincildir. Global başlığın 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. Divi Tema Oluşturucu'ya gidin ve Genel Başlık Oluşturun

Divi Theme Builder'a gidin

Divi Tema Oluşturucu'ya giderek başlayın ve 'Global Başlık Ekle'yi tıklayın.

Genel Başlık Oluştur

'Global Başlık Oluştur' seçeneğine tıklayarak devam edin.

2. Global Başlık Tasarımı Oluşturun

Yeni Bölüm Ekle

aralık

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bölüm ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Z İndeksi

Görünürlük ayarlarında bölümün z indeksini de artırdığınızdan emin olun. Bu, genel başlık içeriğinin tüm sayfaların ve gönderi içeriğinin üstünde görünmesini sağlayacaktır.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarını tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyin:

boyutlandırma

Herhangi bir modül eklemeden, satır ayarlarını açın ve satırın, bölüm kabını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

Satırın sol ve sağ dolgu değerlerini de değiştirin.

• Sol Dolgu: 2vw (Masaüstü), 10vw (Tablet ve Telefon)
• Sağ Dolgu: 2vw (Masaüstü), 10vw (Tablet ve Telefon)

Ana Eleman

Tüm sütun içeriğini ortalamak için, bu iki satırlık CSS kodunu satırın ana öğesine ekleyeceğiz.

display: flex;
align-items: center;

Tablet ve mobil cihazlarda masaüstü görüntüleme özelliğini kaldırın.

display: block;

Sütun 1

Sınır

Sütun 1 ayarlarını açarak devam edin ve yalnızca masaüstünde sağ kenarlık ekleyin.

• Sağ Kenar Genişliği: 1px (Masaüstü), 0px (Tablet & Telefon)
• Sağ Kenar Rengi: #d8d8d8

Z İndeksi

Sütunun z dizinini de artırın.

• Z İndeksi: 11

2. sütun

Ana Eleman

Ardından, sütun 2 ayarlarını açın ve aşağıdaki CSS kod satırlarını iki sütuna dönüştürmek için sütunun ana öğesine ekleyin.

display: grid;
grid-template-columns: 50% 50%;

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

Seçim Menüsü

Modül eklemeye başlama zamanı! Sütun 1'e bir Menü Modülü ekleyin ve istediğiniz bir menüyü seçin.

Logo Yükle

Ardından bir logo yükleyin.

Düzen

Modülün tasarım sekmesine gidin ve aşağıdaki yerleşim ayarlarının geçerli olduğundan emin olun:

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

Menü Metni

Sonraki menü metin ayarlarını değiştirin.

• Aktif Bağlantı Rengi: #ef6f49
• Menü Yazı Tipi: Montserrat
• Menü Yazı Tipi Ağırlığı: Yarı Kalın
• Menü Yazı Tipi Stili: Büyük Harf
• Menü Metni Rengi: #333333 (Varsayılan), #ef6f49 (Vurgulu)
• Menü Metin Boyutu: 0.7vw (Masaüstü), 1.8vw (Tablet), 2.5vw (Telefon)
• Menü Harf Aralığı: 1px

Açılır Menü Metni

Açılır menü metin ayarlarında da bazı değişiklikler yapın.

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

Simgeler

Ardından hamburger menü simgesi rengini değiştirin.

• Hamburger Menü Simgesi Rengi: #000000

boyutlandırma

Boyutlandırma ayarlarına da maksimum logo genişliği ekleyin.

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

Menü Logo CSS'si

Ve gelişmiş sekmesindeki menü logosuna bir satır CSS kodu ekleyerek modülün ayarlarını tamamlayın.

margin-right: 10vw;

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

Modüle Özel CSS Kodu Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Kod Modülüdür. Menü öğeleri arasındaki boşluğu özelleştirmek için aşağıdaki CSS kodu satırlarını ekleyin:

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

Düğme Modülü #1'i Sütun 2'ye ekleyin

Kopya Ekle

Bir sonraki modüle! İlk Düğme Modülünü ekleyin ve seçtiğiniz bir kopyayı girin.

Link ekle

Daha sonra Düğme Modülüne bir bağlantı ekleyin.

hizalama

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

• Düğme Hizalama: Sağ

Düğme Ayarları

Düğmeye de stil verin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 1.7vw (Tablet), 2.5vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #edeef0 (Varsayılan), #d6d7d8 (Vurgulu)
• Düğme Kenar Genişliği: 0px

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

aralık

Farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek modülün ayarlarını tamamlayın.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Sağ Doldurma: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

Klon Düğmesi Modülü

İlk Düğme Modülünü tamamladıktan sonra klonlayın.

Bağlantıyı Değiştir

Yinelenen Düğme Modülünü açın ve URL'yi değiştirin.

Hizalamayı Değiştir

Modülün hizalamasını da değiştirin.

• Düğme Hizalama: Sol

Düğme Ayarlarını Değiştir

Düğme ayarlarında da bazı değişiklikler yapın.

• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #ef6f49 (Varsayılan), #e06945 (Vurgulu)

Hover Dönüşüm Ölçeği

Dönüştürme ölçeği vurgulu efekti ekleyerek düğme ayarlarını tamamlayın.

• Sağ: %110
• Alt: %110

3. Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Önizleme

Genel başlığınız tamamlandığında, tüm tema oluşturucu değişikliklerini kaydedin ve sonucu web sitenizde görüntüleyin!

Ö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 öğreticide, Divi'nin tema oluşturucusunu kullanarak global başlığınıza iki yan yana düğmeyi nasıl ekleyeceğinizi gösterdik. Eklediğimiz butonlardan biri birincil, diğeri ikincil. Genel başlığınıza düğmeler eklemek, web sitenizin en önemli CTA'larından bazılarını vurgulamanı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.