Fareyle üzerine gelindiğinde genişletilebilir bir yapışkan menü oluşturarak yaratıcı olmak ister misiniz? Divi ?
Bu eğitimde, fareyle üzerine gelindiğinde nasıl genişletilebilir bir yapışkan menü oluşturulacağını göstereceğiz. Divi'nin Mekanik Düzen Paketi ile .
Sıfırdan yeniden oluşturabileceğiniz ve herhangi bir türe uygulayabileceğiniz iki farklı örnek tasarımı ele alacağız. Site Web yarattığın!
Menü, masaüstünde üzerine gelindiğinde görüntülenecek ve mobil cihazlarda tıklandığında etkinleştirilecektir.
Gidelim!
anket
Bu öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
Örnek 1
Masaüstü bilgisayar
Telefon
DIVI'yı Şimdi İndirin !!!
Örnek 2
Masaüstü bilgisayar
Telefon
DIVI'yı Şimdi İndirin !!!
Genel adımlar
Sabit gezinmeyi devre dışı bırak
Divi tema seçeneklerine erişin
Bazı genel adımlarla başlayacağız. Bu adımlar her iki örnek için de aynıdır ve istenen sonucu elde etmek için gereklidir.
Sayfanızın alt kısmında genişleyen bir yapışkan menü kullanmayı planlıyorsanız, üst kısımdaki ana menü çubuğunu dışarıda bırakmak isteyebilirsiniz.
Ayrıca Oku: Divi'de Özel Görüntü Bindirmeleri Nasıl Oluşturulur
Bunun için gitmen gerekecek Divi >> Tema Seçenekleri WordPress kontrol panelinden
Sabit gezinmeyi devre dışı bırak
Orada devre dışı bırakmanız gerekecek “Sabit Gezinme Çubuğu” sayfanızın üst kısmında boşluk kalmadığından emin olmak için.
- Sabit Gezinme Çubuğu: Devre Dışı
Sayfadaki ana menü çubuğunu gizle
Sayfa ayarlarını aç
Genişletilebilir yapışkan menüyü eklemek istediğiniz sayfaya gidin ve sayfa ayarlarını açın.
Özel CSS ekle
Aşağıdaki CSS kod satırlarını sayfanıza ekleyerek ana menüyü gizleyin.
#main-header {
display: none;
}
Sayfanın sonuna yeni bir bölüm ekleyin
Hangi örneği yeniden oluşturmak isterseniz isteyin, bazı temel adımlar aynı kalır. İlk adım, sayfanın altına normal bir bölüm eklemektir.
aralık
Bölüm ayarlarını açın ve sekmede aşağıdaki ayarları değiştirin Dizayn seçenek altında aralık.
- Dolgu (Üst ve Alt): 0 piksel
Yeni bir satır ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
boyutlandırma
Henüz herhangi bir modül eklemeden hat ayarlarını açın ve sekmede aşağıdaki ayarları değiştirin Dizayn seçenek altında Boyutlandırma
- Özel Oluk Genişliğini Kullan: EVET
- Oluk Genişliği: 1
- Genişlik: %100
- Maksimum Genişlik: %100
aralık
Ardından, seçeneğin altındaki tüm varsayılan üst ve alt dolguyu kaldırın. aralık.
- Dolgu (Üst ve Alt): 0 piksel
Ana eleman
Ana satır öğesine iki basit CSS kodu satırı ekleyerek tüm satırın sayfamızın altına yapışmasını sağlıyoruz.
bottom: 0px;
position: fixed;
Z-endeksi
Ve satırın (ve sonraki adımlarda ekleyeceğimiz Metin modülünün) her şeyin üstünde kalmasını sağlayacağız içindekiler Sayfanın Z indeksini artırarak, seçeneği genişletin Pozisyon.
- Z-endeksi: 99
Sütuna Kod modülü ekle
Stil etiketleri arasına CSS kodu ekleyin
Genel adımların son kısmı, yeni satıra bir Kod modülü eklemektir. Bu Kod modülüne eklediğimiz CSS kodu, fareyle üzerine gelindiğinde ortaya çıkan etkiyi elde etmemize yardımcı olacaktır.
Ayrıca bakınız: Divi'de Hover'da Çıkrık Menüsü Nasıl Oluşturulur
Aşağıdaki CSS kod satırlarını modüle yapıştırın:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Örnek tasarım #1
Sütuna bir Metin modülü ekleyin
İçerik ekle
Artık tüm adımları tamamladığımıza göre, ilkinden başlayarak iki farklı tasarım örneğine odaklanmaya başlayabiliriz!
Satırınızın sütununa bir Metin modülü ekleyin. Alanında içindekilermetni görüntülemek için paragraf stilini kullanırız '≡Menü'.
Daha sonra tüm menü öğelerini sırasız bir listeye yerleştiririz. Ayrıca sayfa başlıklarının her birine ayrı ayrı bir bağlantı ekleyeceğiz.
Varsayılan arka plan rengi
Modül arka plan ayarlarına gidin ve arka plan rengini değiştirin.
- Arkaplan: #ffffff
Fareyle üzerine gelindiğinde arka plan rengi
Fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.
- Arka Plan (Vurgulu): rgba(255,255,255,0.83)
Gradyan arka planı
Ayrıca varsayılan degrade arka planı ekleyin.
- Sol renk: rgba(255,255,255,0)
- Doğru renk: #ffffff
- Sağ konum: %60
Varsayılan metin ayarları
Sekmeye giderek devam edin Dizayn ve metin ayarlarını değiştirme.
- Metin Yazı Tipi: Khand
- Yazı Ağırlığı: Kalın
- Metin Rengi: #021827
- Metin Boyutu: 3vh
- Oryantasyon: Merkez
Fareyle üzerine gelindiğinde metin ayarları
Vurgulu metin ayarlarından bazılarını değiştirin.
- Metin Rengi (Vurgulu: rgba(255,255,255,0)
- Metin Boyutu (Vurgulu): 0vh
Bağlantı metni ayarları
Ardından, bağlantı metni ayarlarına gidin ve bağlantı metni rengini değiştirin.
- Bağlantı Metni Rengi: #000000
Varsayılanları Listele (Masaüstü)
Varsayılan liste metni ayarlarına geçin ve istediğiniz gibi özelleştirin. Metin boyutu için varsayılan durumunda '0px' kullandığınızdan emin olun.
- Sırasız Liste Yazı Tipi: Khand
- Liste Yazı Tipi Stili: TT
- Liste Metni Hizalama: ortalanmış
- Sırasız Metin Rengi: rgba(255,255,255,0)
- Sırasız Liste Metin Boyutu: 0px
- Liste Metni Ağırlığı: 0em
- Sırasız Liste Stili Konumu: İçeride
Fareyle üzerine gelme listesi ayarları
Ardından, menü öğelerinin görünmesine izin vermek için fareyle üzerine gelindiğinde bazı değerleri değiştirin.
- Liste Metni Rengi (Vurgulu): #000000
- Sırasız Liste Metin Boyutu (Vurgulu): 2vh
- Sırasız Liste Metni Yüksekliği (Vurgulu): 2,1 em
Varsayılan Aralık (Masaüstü)
Ardından boşluk ayarlarına gidin (seçenek aralık) ve Metin modülüne bir şekil verin.
- Kenar Boşluğu (Sol ve Sağ): 45vw (Masaüstü), 39vw (Tablet), 33vw (Telefon)
- Dolgu (Üst ve Alt): 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
Vurgulu Aralığı
Fareyle üzerine gelindiğinde bu aynı değerleri değiştirin.
- Marj (Sol ve Sağ): 14vw
- Dolgu (Üst ve Alt): 8vw
Varsayılan Kenarlık (Masaüstü)
Kenarlık ayarlarına gidin ve yuvarlatılmış köşelerin her birinin '0px' değerine sahip olduğundan emin olun.
Fareyle üzerine gelindiğinde kenarlık
Yuvarlatılmış köşelerde fareyle üzerine gelme seçeneklerini etkinleştirin ve değerleri sol üst ve sağ üst olarak değiştirin.
- Sol üst: 50vw
- Sağ üst: 50vw
Gölge kutusu
Kutu gölgesi kullanarak modüle derinlik vererek devam edin. Bu, menünün sayfada fark edilmemesini sağlayacaktır.
- Kutu Gölgeleri Bulanıklık Gücü: 1000 piksel
- Gölge Rengi: rgba(0,0,0,0.68)
CSS sınıfı
Ayrıca modüle bir CSS sınıfı ekliyoruz.
- CSS Sınıfı: dt-menüsü
Geçişler
Son olarak, geçiş ayarlarında geçiş süresini azaltın.
- Geçiş Süresi: 100ms
Örnek tasarım #2
Sütuna bir Metin modülü ekleyin
İçerik ekle
Gelelim ikinci örneğe! Burada tekrar ekleyeceğiz '≡Menü' sırasız bir liste kullanarak paragraf metin stilini ve menü öğelerini kullanma. Ayrıca menü öğelerinin her birine ayrı ayrı bir bağlantı ekleyeceğiz.
Varsayılan arka plan rengi (Masaüstü)
Arka plan ayarlarına gidin ve arka plan rengini değiştirin.
- Arkaplan: #ffffff
Fareyle üzerine gelindiğinde arka plan rengi
Fareyle üzerine gelindiğinde arka plan rengini değiştirin.
- Arka Plan (Vurgulu): #f71535
Varsayılan Metin Ayarları (Masaüstü)
Ardından sekmeye gidin Dizayn ve metnin görünümünde bazı değişiklikler yapın.
- Metin Yazı Tipi: Khand
- Yazı Ağırlığı: Kalın
- Metin Rengi: #021827
- Metin Boyutu: 3vh
Metin ayarları üzerine gelin
Fareyle üzerine gelindiğinde bu ayarları değiştirin.
- Metin Rengi (Vurgulu): rgba(255,255,255,0)
- Metin Boyutu (Vurgulu): 0vh
Bağlantı metni ayarları
Metin ayarlarına gidin ve bağlantı metni rengini değiştirin.
- Bağlantı Metni Rengi: #ffffff
Varsayılan liste metni ayarları
Ayrıca sırasız liste öğelerinin tasarım ayarlarını da değiştirin.
- Sırasız Liste Yazı Tipi: Khand
- Sırasız Liste Yazı Tipi Stili: TT
- Liste Metni Hizalama: orta
- Sırasız Liste Metin Rengi: rgba(255,255,255,0)
- Liste Metin Boyutu: 0px
- Sırasız Liste Satır Yüksekliği: 0em
- Sırasız Liste Stili Konumu: İçeride
Fareyle üzerine gelme listesi ayarları
Ve fareyle üzerine gelindiğinde bu değerlerden bazılarını değiştirin.
- Sırasız Liste Metin Rengi: #ffffff
- Liste Metin Boyutu: 2vh
- Sırasız Liste Satır Yüksekliği: 2,1 em
Varsayılan Aralık (Masaüstü)
Ardından boşluk ayarlarına gidin ve modüle biraz boşluk verin.
- Marj (Sağ): 88 vw (Masaüstü ve Tablet), 71 vw (Telefon)
- Dolgu (Üst): 6 vw (Masaüstü), 10 vw (Tablet), 18 vw (Telefon)
- Dolgu (Alt): 4 vw (Masaüstü), 10 vw (Tablet), 12 vw (Telefon)
- Sol Dolgu: 1vw
Vurgulu Aralığı
Üzerine gelindiğinde değerleri değiştirin.
- Marj (Sağ): 59vw
- Dolgu: (Üst)13vw, (Alt)8vw, (Sol)1vw, (Sağ)13vw
sınır
Ve bu çeyrek daire tasarımını oluşturmak için kenarlık ayarlarında sağ üst kenarlığı değiştireceğiz.
- Sağ üst: 50vw
Gölge kutusu
Ayrıca sayfada derinlik oluşturmak için bir kutu gölgesi ekleyeceğiz.
- Kutu Gölge Bulanıklığı Gücü: 1000px
- Gölge Rengi: rgba(0,0,0,0.68)
CSS sınıfı
Sonra sekmeye bir CSS sınıfı ekleyeceğiz gelişmiş.
- CSS Sınıfı: dt-menüsü
Geçişler
Ve sekmedeki geçişin süresini azaltın gelişmiş hızlı bir geçiş oluşturmak için.
- Geçiş Süresi: 100ms
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
Örnek # 1
ofis
Telefon
DIVI'yı Şimdi İndirin !!!
Örnek # 2
Masaüstü bilgisayar
Telefon
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu yazıda, kullanarak genişletilebilir bir yapışkan menünün nasıl oluşturulacağını gösterdik. Divi Mekanik Düzen Paketi'nin. Değiştirebileceğiniz ve herhangi bir türde kullanabileceğiniz iki farklı tasarım örneğini ele aldık. Site Web yarattığın!
Bu eğitimin sonraki projeleriniz için size ilham vereceğini umuyoruz. Divi. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
