Divi: Yapışkan bir genel başlık nasıl oluşturulur

İle yapışkan bir başlık oluşturmak ister misiniz? Divi ?

Yapışkan başlıklar oluşturmak, gelişinden bu yana sorunsuz bir şekilde ilerliyor. temalar, ancak birçok kişinin ek kod kullanmadan bunları nasıl oluşturacağını bilmediğini görüyoruz. Ancak, yapışkan seçenekleri sayesinde bunu yapmak da oldukça kolaydır. Divi.

Aslında, sadece daha kolay olmakla kalmaz, aynı zamanda bu yöntem tasarımı özelleştirmek için daha fazla olanak sunar.

Bu nedenle, bu eğitimde, parametreleri kullanarak son derece kişiselleştirilmiş bir yapışkan başlığın nasıl oluşturulacağını size göstermek için zaman ayıracağız. Divi.

anket

Bu öğreticiye dalmadan önce, elde etmek istediğimiz sonuca bir göz atalım.

Başlık öğesi yapısını oluşturun

Yeni bir genel başlık şablonu oluşturun

Divi Theme Builder'a erişin ve yeni bir genel veya özel başlık oluşturmaya başlayın.

Bölüm 1 Parametreler

Gradyan arka planı

Şablon düzenleyiciye girdikten sonra, başlık elemanlarımızın yapısını oluşturarak başlayacağız. Bu öğreticinin ikinci bölümünde, yapışkan başlık tasarımını tamamlamak için çeşitli yapışkan ayarları uygulamaya odaklanacağız.

Ayrıca Oku: DIVI'da kayan ve itmeli menü nasıl oluşturulur

Şablon düzenleyicide bir bölüm göreceksiniz. Bu bölümü açın ve bir degrade arka planı uygulayın.

Renk 1: #ffba60
Renk 2: #ffd6a0
Gradyan yönü: 90 derece
Başlangıç pozisyonu: %50
Nihai konum: %50

aralık

Ardından, varsayılan olarak tüm iç kenar boşluklarını (Üst ve Alt) kaldırın.

İç Kenar Boşluğu Tepe Noktası: 0px
Alt İç Kenar Boşluğu: 0px

Yeni bir satır ekle

Sütunun yapısı

Üst başlık çubuğumuzu oluşturmak için aşağıdaki sütun yapısını kullanarak bölümümüze yeni bir satır ekleyeceğiz:

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
Sütun aralığı: 1
Maksimum genişlik: %95
Maksimum genişlik: 2 piksel

aralık

Ayrıca özel dahili (Üst ve Alt) kenar boşlukları ekleyin.

İç Kenar Boşluğu Tepe Noktası: 15px
Alt İç Kenar Boşluğu: 15px

CSS ana elemanı

Sütunların daha küçük ekran boyutlarında yan yana durduğundan emin olmak için, gelişmiş sekmesindeki ana satır öğesine bir satır CSS kodu ekleyeceğiz.

display: flex;

'Bizi sosyal medyada takip edin' modülünü 1. sütuna ekleyin

Seçtiğiniz sosyal ağları ekleyin

Sütun 1'deki 'Bizi sosyal medyada takip edin' modülü ile başlayarak modülleri eklemenin zamanı geldi. Seçtiğiniz sosyal ağları ilgili bağlantılarıyla birlikte ekleyin.

Her sosyal ağdan arka plan rengini kaldırın

Arka plan renklerinin her birini sosyal ağdan tek tek kaldırarak devam edin.

Simge ayarları

Ardından genel modül ayarlarına geri dönün ve tasarım sekmesindeki simge rengini değiştirin.

Simge rengi: #26333a

aralık

Ayrıca bir üst kenar boşluğu ekleyin.

Üst Kenar Boşluğu: 5 piksel

Düğme modülünü sütun 2'ye ekleyin

Düğmeye metin ekle

2. sütunda ihtiyacımız olan tek modül bir Düğme modülüdür. Seçtiğiniz bir metin ekleyin.

Bir link ekle

Ardından bir bağlantı ekleyin.

Düğme hizalaması

Ardından, Stil sekmesine geçin ve düğme hizalamasını değiştirin.

Düğme hizalama: sağ

Düğme ayarları

Düğmeyi de özelleştiriyoruz.

Düğme için özel stiller kullanın: Evet
Düğme Metin Boyutu: 14px
Düğme Metin Rengi: #26333a
Düğme Kenar Genişliği: 2px
Düğme Kenar Rengi: #26333a
Düğme Kenarlığı Yarıçapı: 0 piksel

Harf Aralığı Düğmeleri: 4px
Yumuşak Işık düğmesi: Kalın metin
Stili kopyala düğmesi: büyük harf
Düğmeyi göster: evet

aralık

Ve boşluk ayarlarına iç kenar boşlukları (Üst ve Alt) ekleyerek modül ayarlarını tamamlayacağız.

İç Kenar Boşluğu Tepe Noktası: 10px
Alt İç Kenar Boşluğu: 10px