Ana İçeriğe Geç

Global Divi Başlığınıza İki Düğmeyi Yan Yana Ekleme

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Sayfalarınızda net harekete geçirici mesajlar bulundurmak çoğu web sitesi için bir gerekliliktir. Ve en önemli CTA'larınızdan bazılarına dikkat çekmenin başlığınıza yerleştirmekten daha iyi bir yolu var mı? 

Bugünün eğitiminde, Divi'nin Tema Oluşturucusunu kullanarak genel başlığınıza iki düğmeyi yan yana nasıl ekleyeceğinizi göstereceğiz. Düğmelerden biri birincil, diğeri ikincil. Ayrıca global başlık JSON dosyasını ücretsiz olarak indirebilirsiniz!

anket

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

ofis

Juxaposed düğme divi

1. Divi Theme Builder'a erişin ve global bir başlık oluşturun

Divi Tema Oluşturucu'ya git

Divi Theme Builder'a giderek "Global üstbilgi ekle" yi tıklayın.

Tema oluşturucuyu kullanma

Global bir başlık oluşturma

"Global Üstbilgi Oluştur" u tıklayarak devam edin.

Kafa konfigürasyonu

2. Genel bir 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: 0 piksel
  • Alt doldurma: 0px
Divi alanı yapılandırması

Z Endeksi

Ayrıca görünürlük ayarlarında bölümün z endeksini artırdığınızdan emin olun. Bu, genel başlık içeriğinin tüm sayfanın en üstünde görünmesini ve içeriği yayınlamasını sağlayacaktır.

  • Z Endeksi: 99999
Z endeksi yapılandırması

Yeni bir 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:

Düzen yapılandırması

boyutlandırma

Modül eklemeden, hat parametrelerini açın ve hattın kesit kabının tüm genişliğini işgal etmesine izin verin.

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Sütun yüksekliklerini eşitle: Evet
  • Genişlik:% 100
  • Maksimum genişlik:% 100
Boyut yapılandırması

aralık

Ayrıca çizginin solunda ve sağında dolgu değerlerini değiştirin.

  • Sol dolgu: 2vw (masa), 10vw (tablet ve telefon)
  • Sağ dolgu: 2vw (masa), 10vw (tablet ve telefon)
Divi hat ayarları

Ana eleman

Tüm sütun içeriğini ortalamak için, bu iki CSS kodu satırını 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;

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Divi çizgi stili yapılandırması

Sütun 1

Sınır

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

  • Sağ kenar genişliği: 1 piksel (masa), 0 piksel (tablet ve telefon)
  • Sağ kenarlık rengi: # d8d8d8
Sütun sınırı yapılandırması

Z Endeksi

Ayrıca sütunun z dizinini artırın.

  • Z Endeksi: 11
Sütun yapılandırması gelişmiş ayarları

Sütun 2

Ana eleman

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

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

Sütun stili yapılandırma 1

Sütun 1'ye menü modülü ekleme

Menüyü seçin

Modül eklemeye başlama zamanı! 1. sütuna bir menü modülü ekleyin ve istediğiniz bir menüyü seçin.

Seçim menüsü modülü

Logoyu indir

Ardından bir logo yükleyin.

Divi logo yapılandırması

hüküm

Modül tasarımı sekmesine geçin ve aşağıdaki düzen ayarlarının geçerli olduğundan emin olun:

  • Tarz: sola hizalanmış
  • Açılır menünün yönü: aşağı
Menü düzeni

Menü metni

Ardından menü metni ayarlarını değiştirin.

  • Etkin 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 (üzerine gelin)
  • Menü metni boyutu: 0.7vw (masaüstü), 1.8vw (tablet), 2.5vw (telefon)
  • Menü harf aralığı: 1 piksel
Divi menü yapılandırması

Açılır menü metni

Ayrıca açılır menüdeki metin ayarlarında değişiklik yapın.

  • Açılır menü arka plan rengi: #ffffff
  • Açılır menüdeki çizginin rengi: # ef6f49
Divi açılır menü yapılandırması

simgeler

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

  • Hamburger menü simgesi rengi: # 000000
Divi menü simgesi yapılandırması

boyutlandırma

Ayrıca boyutlandırma parametrelerine maksimum logo genişliği ekleyin.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Maksimum logo genişliği: 9vw (masa), 12vw (tablet), 15vw (telefon)
Yapılandırma boyut menüsü divi

CSS Logo Menüsü

Gelişmiş sekmedeki menü logosuna bir satır CSS kodu ekleyerek modül ayarlarını tamamlayın.

margin-right: 10vw;

Kod css menü divi ekle

1 sütununa bir kod modülü ekleyin

Modüle özel bir CSS kodu ekleme

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>

Özel css kodu divi sütunu

İlk düğme modülünü 2. sütuna ekleyin

Bir kopya ekle

Bir sonraki modüle geçelim! İlk düğme modülünü ekleyin ve seçtiğiniz bir kopyasını girin.

Divi düğme modülünü kopyalayın

Bir link ekle

Ardından düğme modülüne bir bağlantı ekleyin.

Düğme bağlantısı yapılandırması

hizalanma

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

  • Düğme hizalama: Sağ
Düğme modülü hizalama yapılandırması

Düğme ayarları

Ayrıca düğmeyi şekillendirin.

  • Düğme için özel stiller kullan: Evet
  • Düğme metni boyutu: 0.8vw (masaüstü), 1.7vw (tablet), 2.5vw (telefon)
  • Düğme metni rengi: # 000000
  • Düğme arka plan rengi: # edeef0 (varsayılan), # d6d7d8 (vurgulu)
  • Düğme kenarlığı genişliği: 0 piksel
Divi stili düğme ayarları
  • Düğme kenarlığı yarıçapı: 0 piksel
  • Düğme harf aralığı: 2 piksel
  • Düğme yazı tipi: Montserrat
  • Düğme yazı tipi ağırlığı: Yarı kalın
  • Düğme yazı tipi stili: büyük harf
Divi düğme yazı tipini özelleştirin

aralık

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

  • Üst dolgu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
  • Alt dolgu: 1vw (masa), 2vw (tablet), 3vw (telefon)
  • Sol doldurma: 2vw (masaüstü), 4vw (tablet), 6vw (telefon)
  • Sağ dolgu: 2vw (masa), 4vw (tablet), 6vw (telefon)
Divi düğme alanı ayarları

Klonlama düğmesi modülü

İlk düğme modülünü tamamladıktan sonra, klonlayın.

Divi modül yuvası

Bağlantıyı düzenle

Yinelenen düğmeler modülünü açın ve URL'yi değiştirin.

Divi düğme bağlantı yapılandırması

Hizalamayı değiştir

Ayrıca modülün hizalamasını da değiştirin.

  • Düğme hizalama: sol
Divi düğme hizalaması

Düğme ayarlarını değiştir

Ayrıca düğme ayarlarında değişiklik yapın.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

  • Düğme metni rengi: #ffffff
  • Düğme arka plan rengi: # ef6f49 (varsayılan), # e06945 (vurgulu)
Düğme rengi özelleştirme

Fareyle üzerine gelindiğinde dönüşüm ölçeği

Bir dönüşüm ölçeği vurgulu efekti ekleyerek düğme ayarlarını tamamlayın.

  • Sağ: 110%
  • Düşük:% 110
Divi düğme dönüşümü

3. Değişiklikleri tema oluşturucuya ve önizleme sonucuna kaydedin

Global başlığınız tamamlandığında, tema üreticisindeki değişiklikleri kaydedin ve sonucu web sitenize gönderin!

Değişiklikleri Kaydet
Baş yapılandırma divi

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Nihai demo sonucu

Son düşünceler

Bu eğitimde, Divi'nin tema oluşturucusunu kullanarak genel başlığınıza iki düğmeyi yan yana nasıl ekleyeceğinizi gösterdik. 

Eklediğimiz düğmelerden 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ı ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum yapmaktan çekinmeyin.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse1
cıvıltı
Enregistrer