Logonuzu Divi’deki yapışkan bir başlığa yönlendirin
Web sitenizde yapışkan bir başlık tasarlarken, logoyu değiştirmek yeni tasarım fırsatları açabilir. Örneğin, yapışkan bir başlık için farklı bir arka plan rengi kullanmak isteyebilirsiniz, ancak tasarım işlevini yapmak için farklı bir logo gerekir. Veya, çok belirgin olmayan ve kullanıcının dikkatini dağıtan farklı bir logo sürümüne ihtiyacınız olabilir. Bu öğreticide, Logonuzu Divi’deki yapışkan bir başlıkta nasıl değiştireceğinizi göstereceğiz. Divi tema üreticisini kullanarak, kullanıcı yapışkan bir başlık durumu kullandığında geçiş yapan iki logo içeren yeni bir başlık oluşturacağız.
Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış. Bu öğreticiden bir tasarım almak için düzeni ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Başlık şablonlarını içe aktarmak için Divi Tema Oluşturucusuna İçe Aktarma Şablonlarına İçe Aktarın, Divi> Tema Oluşturucu’ya gitmelisiniz.
Ardından JSON dosyasını içe aktarmak için sayfanın sağ üst kısmındaki taşınabilirlik simgesini kullanın.
Doğrudan öğreticiye mi gidiyorsunuz? Logonuzu Divi Bölüm 1’de yapışkan bir başlığa yönlendirmek: Bu öğretici için Divi Tema Oluşturucu’da yeni bir başlık oluşturmak, tema oluşturucuyu kullanarak yeni bir başlık oluşturacağız. Bunu yapmak için tema üreticisine gidin. Yeni bir şablon ekleyin ve tüm sayfaları (veya test sayfasına) ayarlayın. Ardından yeni bir şablonda yeni bir başlık oluşturmak için tıklayın. Bu, başlık şablonu düzenleyicisini sıfırdan bir başlık yapmaya başlayabilmemiz için açacaktır. Bölüm 2: Yapışkan bir bölüm yapın ve başlatmak için satır ekleme satırları ekleyin, devam edin ve üç çeyrek sütun satırının dörtte birini normal varsayılan bölüme ekleyin. Bölümü ayarlamak bunu yapışkan bir başlık haline getirmek için yapışkan konumu o bölüme ekleyeceğiz. Bölüm ayarlarını açın ve Gelişmiş sekmesi altında yapışkan konumu aşağıdaki gibi güncelleyin: Yapışkan pozisyon: tepeye sadık kalın
İçerik sekmesinin altında, arka plan rengini masaüstüne ve aşağıdaki çubuk durumuna ekleyin: Arka plan rengi (masaüstü): #f6f0e7
Arka plan rengi (yapışkan): #000000
Tasarım sekmesinin altında, dolgu güncellemesi: Dolgu: 0px üst, 0px aşağıda
Satır ayarları artık tamamlandı, satır ayarlarını güncellemeye hazırız. Satır için ayarları açın ve aşağıdaki tasarım ayarlarını güncelleyin: Talang genişliği: 1
Genişlik:% 96
Dolgu: 10 piksel üst, 10px Alt 3: Anahtarlama logosunu ekleyin Bir anahtarlama logosu efekti oluşturmak için başlık her yapışkan olduğunda, ekrana girip çıkan iki resim yapacağız. Ana logo önce görüntülenecek ve daha sonra yeni yapışkan durum logosu, kullanıcı sayfayı kaydırdıktan sonra ana logoyu oluşturduktan sonra ana logoyu oluşturduktan sonra, sol sütuna yeni bir görüntü modülü ekledikten sonra görülecektir.
Modüle bir logo resmi yükleyin (yaklaşık 200px kat 67px). Verandaya dinamik bağlantılar da ekleyebilirsiniz.
Dönüşüm Y -ekseni (yapışkan) tercüme et:% -100 Bu, logoyu yapışkan bir durumda ekrandan gizlemek için sütunun dışına çıkarır.
Yapışkan bir durum logosu oluşturmak için bir çubuk durumu logosu oluşturma, az önce yaptığımız logo ile yinelenen görüntü modülü.
Yinelenen görüntü modülü ayarlarını açın ve yeni logo görüntüleri (yapıştırma durumunda görüntülemek istediğiniz yeni logo görüntüleri yükleyin. En iyi sonuçlar için logo aynı boyutta olmalıdır. Devam sekmesinin altında, mutlak bir konum görüntüsü verin. Pozisyon: Mutlak Logo şimdi ana logonun hemen üstünde olmalıdır.
Tasarım sekmesi altında, Dönüşüm seçeneğini aşağıdaki gibi güncelleyin:
Dönüşüm Y -eksenini (masaüstü) çevirin:% 100 Dönüşüm Y -ekseni (yapışkan) tercüme et:% 0
Bu, ilk önce ana logo görüntüsünün altındaki logoyu yapacak ve daha sonra başlık yapışkan olduktan sonra yerinde kayacaktır. Bölüm 4: Sütun taşmasını değiştirin şu anda gizlenecek, Stick Durum logosu yine de sütunun dışında görülecektir. Değiştirmek için, taşma sütununun görünürlüğünü aşağıdaki gibi güncellememiz gerekir: Yatay taşma: Gizli
Dikey taşma: gizli Bu noktada sonuçlar, anahtarlama logosunun işlevi zaten mevcuttur. Aşağıda anahtarlama logosunun bir önizlemesi verilmiştir. Bölüm 5: Tasarımı tamamlamak için bir menü oluşturun, başlığa bir menü eklememiz gerekir. Bunu yapmak için sağ satır sütununa yeni bir menü modülü ekleyin.
Menü ayarlarının altında, kullanmak istediğiniz menüyü seçin ve şeffaf bir arka plan menüsü verin.
Tasarım sekmesinin altında aşağıdakileri güncelleyin: Yazı Tipi Menüsü: Roboto Yazı tipi menü ağırlığı: kalınlık Menü Metin Rengi: #000 (masaüstü), #fff (yapışkan)
Menü Metin Boyutu: 18px
Menü hattının yüksekliği: 1.3em
Hizalama Metni: Doğru
Açılır menü arka plan rengi: #fff
Açılır menü satırı rengi: #000
Açılır menü metin rengi: #000 (masaüstü), #000 (yapışkan)
Hücresel menü arka plan rengi: #fff
Hücresel Menü Metin Rengi: #000 (masaüstü), #000 (yapışkan)
Hamburger menü simgesi rengi: #000 (masaüstü), #fff (yapışkan)
Marj (Masaüstü): 14px Top
Marj (Tablet ve Cep Telefonu): 5 piksel üst
Dolgu (tablet ve cep telefonu) 5 piksel aşağıda
Yuvarlak açı: 3px
Sınır genişliği (tablet ve cep telefonu): 1px
Sınır rengi: #ddd (masaüstü), #333 (yapışkan)
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Başlık şablonlarını içe aktarmak için Divi Tema Oluşturucusuna İçe Aktarma Şablonlarına İçe Aktarın, Divi> Tema Oluşturucu’ya gitmelisiniz.
Ardından JSON dosyasını içe aktarmak için sayfanın sağ üst kısmındaki taşınabilirlik simgesini kullanın.
Doğrudan öğreticiye mi gidiyorsunuz? Logonuzu Divi Bölüm 1’de yapışkan bir başlığa yönlendirmek: Bu öğretici için Divi Tema Oluşturucu’da yeni bir başlık oluşturmak, tema oluşturucuyu kullanarak yeni bir başlık oluşturacağız. Bunu yapmak için tema üreticisine gidin. Yeni bir şablon ekleyin ve tüm sayfaları (veya test sayfasına) ayarlayın. Ardından yeni bir şablonda yeni bir başlık oluşturmak için tıklayın. Bu, başlık şablonu düzenleyicisini sıfırdan bir başlık yapmaya başlayabilmemiz için açacaktır. Bölüm 2: Yapışkan bir bölüm yapın ve başlatmak için satır ekleme satırları ekleyin, devam edin ve üç çeyrek sütun satırının dörtte birini normal varsayılan bölüme ekleyin. Bölümü ayarlamak bunu yapışkan bir başlık haline getirmek için yapışkan konumu o bölüme ekleyeceğiz. Bölüm ayarlarını açın ve Gelişmiş sekmesi altında yapışkan konumu aşağıdaki gibi güncelleyin: Yapışkan pozisyon: tepeye sadık kalın
İçerik sekmesinin altında, arka plan rengini masaüstüne ve aşağıdaki çubuk durumuna ekleyin: Arka plan rengi (masaüstü): #f6f0e7
Arka plan rengi (yapışkan): #000000
Tasarım sekmesinin altında, dolgu güncellemesi: Dolgu: 0px üst, 0px aşağıda
Satır ayarları artık tamamlandı, satır ayarlarını güncellemeye hazırız. Satır için ayarları açın ve aşağıdaki tasarım ayarlarını güncelleyin: Talang genişliği: 1
Genişlik:% 96
Dolgu: 10 piksel üst, 10px Alt 3: Anahtarlama logosunu ekleyin Bir anahtarlama logosu efekti oluşturmak için başlık her yapışkan olduğunda, ekrana girip çıkan iki resim yapacağız. Ana logo önce görüntülenecek ve daha sonra yeni yapışkan durum logosu, kullanıcı sayfayı kaydırdıktan sonra ana logoyu oluşturduktan sonra ana logoyu oluşturduktan sonra, sol sütuna yeni bir görüntü modülü ekledikten sonra görülecektir.
Modüle bir logo resmi yükleyin (yaklaşık 200px kat 67px). Verandaya dinamik bağlantılar da ekleyebilirsiniz.
Tasarım sekmesinin altında, maksimum yükseklik görüntüsünü aşağıdaki gibi verin:
Maksimum yükseklik: 67px (masaüstü), 45px (tablet ve cep telefonu) Ardından, aşağıdaki Dönüşüm Çeviri Seçeneklerini Yapışkan Durumda Güncelleyin:Dönüşüm Y -ekseni (yapışkan) tercüme et:% -100 Bu, logoyu yapışkan bir durumda ekrandan gizlemek için sütunun dışına çıkarır.
Yapışkan bir durum logosu oluşturmak için bir çubuk durumu logosu oluşturma, az önce yaptığımız logo ile yinelenen görüntü modülü.
Yinelenen görüntü modülü ayarlarını açın ve yeni logo görüntüleri (yapıştırma durumunda görüntülemek istediğiniz yeni logo görüntüleri yükleyin. En iyi sonuçlar için logo aynı boyutta olmalıdır. Devam sekmesinin altında, mutlak bir konum görüntüsü verin. Pozisyon: Mutlak Logo şimdi ana logonun hemen üstünde olmalıdır.
Tasarım sekmesi altında, Dönüşüm seçeneğini aşağıdaki gibi güncelleyin:
Dönüşüm Y -eksenini (masaüstü) çevirin:% 100 Dönüşüm Y -ekseni (yapışkan) tercüme et:% 0
Bu, ilk önce ana logo görüntüsünün altındaki logoyu yapacak ve daha sonra başlık yapışkan olduktan sonra yerinde kayacaktır. Bölüm 4: Sütun taşmasını değiştirin şu anda gizlenecek, Stick Durum logosu yine de sütunun dışında görülecektir. Değiştirmek için, taşma sütununun görünürlüğünü aşağıdaki gibi güncellememiz gerekir: Yatay taşma: Gizli
Dikey taşma: gizli Bu noktada sonuçlar, anahtarlama logosunun işlevi zaten mevcuttur. Aşağıda anahtarlama logosunun bir önizlemesi verilmiştir. Bölüm 5: Tasarımı tamamlamak için bir menü oluşturun, başlığa bir menü eklememiz gerekir. Bunu yapmak için sağ satır sütununa yeni bir menü modülü ekleyin.
Menü ayarlarının altında, kullanmak istediğiniz menüyü seçin ve şeffaf bir arka plan menüsü verin.
Tasarım sekmesinin altında aşağıdakileri güncelleyin: Yazı Tipi Menüsü: Roboto Yazı tipi menü ağırlığı: kalınlık Menü Metin Rengi: #000 (masaüstü), #fff (yapışkan)
Menü Metin Boyutu: 18px
Menü hattının yüksekliği: 1.3em
Hizalama Metni: Doğru
Açılır menü arka plan rengi: #fff
Açılır menü satırı rengi: #000
Açılır menü metin rengi: #000 (masaüstü), #000 (yapışkan)
Hücresel menü arka plan rengi: #fff
Hücresel Menü Metin Rengi: #000 (masaüstü), #000 (yapışkan)
Hamburger menü simgesi rengi: #000 (masaüstü), #fff (yapışkan)
Marj (Masaüstü): 14px Top
Marj (Tablet ve Cep Telefonu): 5 piksel üst
Dolgu (tablet ve cep telefonu) 5 piksel aşağıda
Yuvarlak açı: 3px
Sınır genişliği (tablet ve cep telefonu): 1px
Sınır rengi: #ddd (masaüstü), #333 (yapışkan)
