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, Button Builder'ı kullanarak global başlığınıza nasıl yan yana iki düğme ekleyeceğinizi göstereceğiz. temalar Divi'den. Düğmelerden biri birincil, diğeri ikincildir. Ayrıca global başlık JSON dosyasını ücretsiz olarak indirebileceksiniz!
anket
Eğiticiye geçmeden önce, farklı ekran boyutlarındaki sonuca hızlıca göz atalım.
ofis
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.
Global bir başlık oluşturma
"Global Üstbilgi Oluştur" u tıklayarak devam edin.
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
Z Endeksi
Ayrıca görünürlük ayarlarında bölümün z indeksini arttırdığınızdan emin olun. Bu, içindekiler global başlık tüm sayfanın en üstünde görünecek ve içindekiler.
- Z Endeksi: 99999
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:
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
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)
Ana eleman
Hepsini ortalamak için içindekiler sütunlarında, CSS kodunun bu iki 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;
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
Z Endeksi
Ayrıca sütunun z dizinini artırın.
- Z Endeksi: 11
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 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.
Logoyu indir
Ardından bir logo yükleyin.
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ü 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
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
simgeler
Ardından, hamburger menü simgesinin rengini değiştirin.
- Hamburger menü simgesi rengi: # 000000
boyutlandırma
Ayrıca boyutlandırma parametrelerine maksimum logo genişliği ekleyin.
- Maksimum logo genişliği: 9vw (masa), 12vw (tablet), 15vw (telefon)
CSS Logo Menüsü
Gelişmiş sekmedeki menü logosuna bir satır CSS kodu ekleyerek modül ayarlarını tamamlayın.
margin-right: 10vw;
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>
İ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.
Bir link ekle
Ardından düğme modülüne bir bağlantı ekleyin.
hizalanma
Modül tasarımı sekmesine geçin ve düğme hizalamasını değiştirin.
- Düğme hizalama: Sağ
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
- 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
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)
Klonlama düğmesi modülü
İlk düğme modülünü tamamladıktan sonra, klonlayın.
Bağlantıyı düzenle
Yinelenen düğmeler modülünü açın ve URL'yi değiştirin.
Hizalamayı değiştir
Ayrıca modülün hizalamasını da değiştirin.
- Düğme hizalama: sol
Düğme ayarlarını değiştir
Ayrıca düğme ayarlarında değişiklik yapın.
- Düğme metni rengi: #ffffff
- Düğme arka plan rengi: # ef6f49 (varsayılan), # e06945 (vurgulu)
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
3. Değişiklikleri tema oluşturucuya ve önizleme sonucuna kaydedin
Genel başlığınız tamamlandığında, tema oluşturucuda yapılan tüm değişiklikleri kaydedin ve sonucu sayfanızda görüntüleyin. Site Web!
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
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 butonlardan biri birincil, diğeri ikincil. Genel başlığınıza düğmeler eklemek, sayfanızdaki en önemli CTA'lardan bazılarını vurgulamanıza yardımcı olur. Site Web. Ayrıca JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.
