Bir Fullwidth Divi Menü Modülü kullanarak açılır menü düğmesi nasıl yapılır
Çekme menüsü düğmesi web siteleri tasarlarken gerçekten yararlı olabilir. Ana menüye ek olarak, sitede bir açılır sub -maddelik menüsü gerektirebilecek bir alan vardır. Bunların blog yazısı kategorisi, listesi ve giriş formu gibi şeyler için kullanıldığını görüyoruz. Ancak ana oyunculuk daveti için bile kullanılabilirler. Bu öğreticide, FullWidth Divi menü modülünü kullanarak nasıl açılır menü düğmesi oluşturacağınızı göstereceğiz. Bunu yapmak için önce WordPress’te bir menü yapacağız. Ardından, Divi Builder ve biraz özel CSS kullanarak özel bir stil ile menüyü görüntülemek için Fullwidth Divi menü modülünü kullanacağız. Sonuç pratik ve zarif bir açılır menü düğmesidir.
Başlayalım. Aşağıdaki Sneak Peek, bu öğreticide yapacağımız açılır menü düğmesinde hızlı bir ekrandır. Masaüstü (yüzerken menü aşağı)
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. Takip et 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. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
YouTube kanalımıza abone olun
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin. Düzenin altındaki ayrı bir bölümde kod modülüne özel CSS eklenmiştir. Doğrudan öğreticiye mi gidiyorsunuz? Başlamaya başlamanız gerekir, yüklemediyseniz, yüklü Divi temasını yükleyin ve etkinleştirin (veya Divi temasını kullanmıyorsanız Divi Builder eklentisi). Çıkarma menüsü düğmesini tasarlamak için Divi Maker’ı ön uçta kullanacağız. İşte burada! WordPress’te bir menü oluşturma Divi Builder ile bir açılır menü oluşturmaya başlamadan önce, önce FullWidth menü modülü için kullanmak istediğimiz bir WordPress menüsü oluşturmalıyız. Bunu yapmak için WordPress kontrol panelini açın ve görünüm> menülere gidin. Ardından yeni bir menü için bağlantıya tıklayarak yeni bir menü oluşturun, menü adını girin ve “Menü Oluştur” düğmesini tıklayın.
Şimdilik, bağlantının metni ile birlikte URL yerine “#” ile bazı özel bağlantılar yapabilirsiniz. Menü öğesini, en üst düzey menü öğesinin aşağıdaki üç alt menü öğesiyle “Öğrenin” bağlantısına sahip olacak şekilde düzenleyin. Bundan sonra, menüyü kaydettiğinizden emin olun. Tam genişlikli bir divi menü modülü ile açılır menü düğmesi nasıl yapılır Menü oluşturulduktan sonra, divi ile açılır menü düğmesini tasarlamaya başlayabiliriz. Başlamak için, WordPress’te yeni bir sayfa oluşturun ve öndeki sayfayı (görsel yapımcı) düzenlemek için Divi Builder’ı kullanın. Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. İlk sahte içeriği oluşturma, normal varsayılan bölüme bir satır sütun ekleyin. Metin modülünü ekleyin, ardından metin modülünü aşağıdaki satıra ekleyin:
Bundan sonra, tasarım ayarlarını aşağıdaki gibi güncelleyin: Bir sonraki dolgu bölümü, bölümün ayarlarını aşağıdakilerle güncelleyin:
Dolgu: 0px aşağıda
Sıra boşlukları ve sınırlar Dolma bölümü güncellendikten sonra satır ayarlarını açın ve birkaç dolgu ve hafif sınırdan oluşan bir sıra verin.
Dolgu: 10vw üst, 10vw aşağıda, 5vw sol, 5vw sağ Sınır Genişliği: 1 piksel
Bir açılır menü düğmesi oluşturun Bir açılır menü düğmesi oluşturmak için FullWidth Menü modülünü kullanacağız. Bu, daha önce yaptığımız menüyü eklememizi sağlayacaktır. Tam geniş bir menü modülü yapmak için tam geniş bir menü ekleyin, geçerli normal bölümün altına yeni bir geniş parça ekleyin. Ardından satıra tam geniş bir menü modülü ekleyin.
Tam Geniş Menü Ayarları açılır penceresinde (içerik altında), görüntülemek istediğiniz menüyü seçmek için bir açılır menü kullanın. Bu, daha önce “açılır düğme menüsü” olarak adlandırdığımız menü ile aynı olmalıdır. Ardından menü için varsayılan beyaz arka plan rengini çıkarın. Tam geniş bir menü modülüne sahip bir menü ekledikten sonra ayarları kaydedin. Tasarımı tamamlamak için yakında bu modüle döneceğiz. Ama şimdilik, tam genişliğe bir arka plan ekleyeceğiz. Tasarımı Güncelleme Tam Geniş Bölüm Aşağıdaki tam ve güncellenmiş genişlik ayarlarını açın: Gradyan arka planın sol rengi: #0047d6 Doğru renk gradyan arka plan: #45B2FF
Gelişmiş sekmesinin altına, aşağıdaki CSS, taşma ve z dizin sınıflarını ekleyin.
CSS Sınıfı: Çekme-Dedone düğmesi Yatay taşma: görünür Dikey taşma: görünür
Dizin Z: 14
Dış CSS’imizi daha sonra bu bölüme hedefleyebilmemiz için CSS sınıfına ihtiyaç vardır. Açılır menüyü görebilmemiz için taşmanın görünmesini sağlamak için düzenlenmesi gerekir. Ve Z dizinleri, sayfadaki diğer içeriğin üzerindeki açılır menüde kalmaya yardımcı olacaktır. Tam menü tasarımı Şimdi Fulwidth menü modülünü tasarlamaya hazırız. Tam ve güncellenmiş geniş menü modülü ayarlarını açın:
Tam geniş bir menü bağlantısı yapın: evet
Açılır menü metin rengi: #ffffff
Hücresel menü metin rengi: #ffffff Hizalama Metni: Orta
Açılır menü arka plan rengi: #45b2ff
Açılır menü satırı rengi: #ffffff
Hücresel Menü Arka Plan Rengi: #45B2FF
Yazı Tipi Menüsü: SANS SEMI CONSENS’i kodlayın
Yazı tipi menüsü ağırlığı: yarı kalınlık
Menü metin rengi: #ffffff
Menü Metin Boyutu: 16px Menü Mektup Alanı: 2px
Animasyonlu açılır menü: Genişlet
Açılır düğmesini konumlandırın Üst sınırla örtüşen düğmeyi yapmak için, düğmenin yüksekliğinin tam yarısı kadar negatif bir üst kenar eklememiz gerekir.
Marj: -40.5px üst
Şu ana kadar neredeyse bu sonuç …
Gördüğünüz gibi, Hover Odası düğmenin tüm alanını işgal etmedi ve gerilme menüsü hala sağda. Bunu düzeltmek için bazı özel CSS ekleyebiliriz. Özel bir CSS ekleyerek özel bir CSS eklemeden önce, tam geniş bölüme (modül değil) eklenen bir “gerilme aşağı düğmesi” kimliği CSS’niz olduğundan emin olun. CSS kimliği olmadan, aşağıdaki CSS çalışmaz. Özel bir CSS eklemek için sayfa ayarlarını açın ve aşağıdaki kodu özel CSS giriş alanına yapıştırın.
Dolgu Top: 0px! Önemli; } .Dropdown-button. Fullwidth-miru li> a { Dolgu Alt: 0px;
Çizgi yüksekliği: 81px;
}
.
Çizgi yüksekliği: 1.6em;
}
.dropdown-button .et_mobile_menu li A: Hover, .nav ul li A: Hover, .dropdown-button .fullwidth-menu A: Hover {
Opaklık: 1;
}
.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
Dolgu: 0 0! Önemli;
}
.
Ekran bloğu;
}
. A: İlk çocuk: sonra {
Sağ: 20px;
}
Bu nihai sonuç
Geçerli cep telefonundaki menüyü ayarlama Menü, hücresel menüyü etkinleştiren ve kapatan bir hamburger simgesi ile hücresel sürüme geçecektir. İşte görünüm.
Masaüstü sürümüne uyacak şekilde menüyü geliştirmek için bazı özel CSS eklememiz gerekir. Sayfa ayarlarını açın ve bugün eklediğimiz CSS’nin hemen altına aşağıdaki özel CSS ekleyin. @Media (Max-Width: 981px) {
.dropdown-button .et_pb_fullwidth_menu .et_pb_row {
Genişlik:%100; } .dropdown-button. mobil_menu_bar { Yükseklik: 81px;
}
.dropdown-button. Mobile_menu_bar: Önce {
Yazı tipi ailesi: Miras! Önemli;
Yazı tipi-ağırlık: 600! Önemli;
Yazı tipi boyutu: 16px! Önemli;
Renk: #ffffff! Önemli;
Mektup Alanı: 2 piksel! Önemli;
İçerik: “Daha fazla bilgi edinin”;
Çizgi yüksekliği: 81px;
Üst: 0px;
}
.dropdown-button. Mobile_menu_bar: sonra {
Pozisyon: Mutlak;
Çizgi yüksekliği: 81px;
Yazı tipi ailesi: etmodüller;
yazı tipi boyutu: 20px;
yazı tipi-ağırlık: 800;
İçerik: “3”;
Dolgu-sol: 20px;
Renk: #ffffff;
}
.dropdown-button .et_first_mobile_item> a {
Görüntü yok;
}
}
Yukarıdaki CSS, tam ve yüksek parçaları/düğmeleri kapsayan tıklanmış alanlar yapar. Ayrıca Hamburger simgesini, masaüstü sürümüne uygun birkaç metin ve ok simgesiyle değiştirir. Bu sahte öğe kullanılarak yapılır: Önce ve sonra. Bu şekilde hücresel menünün varsayılan işlevselliğini yerinde tutabiliriz. Şu anda, Hücresel Hedef Çekimi düğmesinin metin içeriği “Daha fazla öğrenin” yazıyor. Ancak sahte öğenin altındaki aşağıdaki CSS satırını güncelleyerek değiştirebiliriz: Hücresel menü çubuğu için önce: “Daha fazla bilgi edinin”; örneğin, “menü” okumak istiyorsanız, CSS satırını aşağıdakilere değiştireceksiniz: İçerik: “Menü”;
Buradaki nihai sonuç nihai sonuçtur. Masaüstü (yüzerken menü aşağı)
Tablet ve Telefon (tıklarken menü aşağı)
Ek öğeler ve hatta alt menü öğeleri de ekleyebilirsiniz! Menü düzenleyicisi sayfasındaki menüyü güncelleyin ve hazırsınız.
Son zihin, tam geniş bir menü modülü kullanarak römorkör heeding menü düğmesini yapar Divi birkaç önemli adım içerir. İlk olarak, WordPress’te modüle çekmek istediğimiz bir menü yapıyoruz. Ardından Divi Builder’ı istediğimiz gibi tüm geniş menü modülünü kullanıyoruz ve organize ediyoruz. Daha sonra tasarımı hem masaüstünde hem de hücreselde cilalamak için bazı özel CSS ekledik. Sonuç, imleci masaüstüne yönlendirirken ve hücresel için tıklarken kullanılan güzel (ve kullanışlı) bir gerilme menüsüdür. Umarım, bunu tasarım ekipmanı kutunuza yararlı bir ek olarak bulacaksınız. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
YouTube kanalımıza abone olun
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin. Düzenin altındaki ayrı bir bölümde kod modülüne özel CSS eklenmiştir. Doğrudan öğreticiye mi gidiyorsunuz? Başlamaya başlamanız gerekir, yüklemediyseniz, yüklü Divi temasını yükleyin ve etkinleştirin (veya Divi temasını kullanmıyorsanız Divi Builder eklentisi). Çıkarma menüsü düğmesini tasarlamak için Divi Maker’ı ön uçta kullanacağız. İşte burada! WordPress’te bir menü oluşturma Divi Builder ile bir açılır menü oluşturmaya başlamadan önce, önce FullWidth menü modülü için kullanmak istediğimiz bir WordPress menüsü oluşturmalıyız. Bunu yapmak için WordPress kontrol panelini açın ve görünüm> menülere gidin. Ardından yeni bir menü için bağlantıya tıklayarak yeni bir menü oluşturun, menü adını girin ve “Menü Oluştur” düğmesini tıklayın.
Şimdilik, bağlantının metni ile birlikte URL yerine “#” ile bazı özel bağlantılar yapabilirsiniz. Menü öğesini, en üst düzey menü öğesinin aşağıdaki üç alt menü öğesiyle “Öğrenin” bağlantısına sahip olacak şekilde düzenleyin. Bundan sonra, menüyü kaydettiğinizden emin olun. Tam genişlikli bir divi menü modülü ile açılır menü düğmesi nasıl yapılır Menü oluşturulduktan sonra, divi ile açılır menü düğmesini tasarlamaya başlayabiliriz. Başlamak için, WordPress’te yeni bir sayfa oluşturun ve öndeki sayfayı (görsel yapımcı) düzenlemek için Divi Builder’ı kullanın. Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. İlk sahte içeriği oluşturma, normal varsayılan bölüme bir satır sütun ekleyin. Metin modülünü ekleyin, ardından metin modülünü aşağıdaki satıra ekleyin:
Düğme menüsünü açığa çıkarın
>
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında şekillendirebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz.Bundan sonra, tasarım ayarlarını aşağıdaki gibi güncelleyin: Bir sonraki dolgu bölümü, bölümün ayarlarını aşağıdakilerle güncelleyin:
Dolgu: 0px aşağıda
Sıra boşlukları ve sınırlar Dolma bölümü güncellendikten sonra satır ayarlarını açın ve birkaç dolgu ve hafif sınırdan oluşan bir sıra verin.
Dolgu: 10vw üst, 10vw aşağıda, 5vw sol, 5vw sağ Sınır Genişliği: 1 piksel
Bir açılır menü düğmesi oluşturun Bir açılır menü düğmesi oluşturmak için FullWidth Menü modülünü kullanacağız. Bu, daha önce yaptığımız menüyü eklememizi sağlayacaktır. Tam geniş bir menü modülü yapmak için tam geniş bir menü ekleyin, geçerli normal bölümün altına yeni bir geniş parça ekleyin. Ardından satıra tam geniş bir menü modülü ekleyin.
Tam Geniş Menü Ayarları açılır penceresinde (içerik altında), görüntülemek istediğiniz menüyü seçmek için bir açılır menü kullanın. Bu, daha önce “açılır düğme menüsü” olarak adlandırdığımız menü ile aynı olmalıdır. Ardından menü için varsayılan beyaz arka plan rengini çıkarın. Tam geniş bir menü modülüne sahip bir menü ekledikten sonra ayarları kaydedin. Tasarımı tamamlamak için yakında bu modüle döneceğiz. Ama şimdilik, tam genişliğe bir arka plan ekleyeceğiz. Tasarımı Güncelleme Tam Geniş Bölüm Aşağıdaki tam ve güncellenmiş genişlik ayarlarını açın: Gradyan arka planın sol rengi: #0047d6 Doğru renk gradyan arka plan: #45B2FF
Maksimum genişlik: 240px
Hizalama Bölümü: Orta
240 piksel parçanın maksimum genişliğini ayarlıyorum çünkü bu, Divi’deki varsayılan açılır menünün genişliğine uyacaktır. Bu aynı zamanda masaüstü ve hücreseldeki düğmeler için iyi bir boyuttur.
Gelişmiş sekmesinin altına, aşağıdaki CSS, taşma ve z dizin sınıflarını ekleyin.
CSS Sınıfı: Çekme-Dedone düğmesi Yatay taşma: görünür Dikey taşma: görünür
Dizin Z: 14
Dış CSS’imizi daha sonra bu bölüme hedefleyebilmemiz için CSS sınıfına ihtiyaç vardır. Açılır menüyü görebilmemiz için taşmanın görünmesini sağlamak için düzenlenmesi gerekir. Ve Z dizinleri, sayfadaki diğer içeriğin üzerindeki açılır menüde kalmaya yardımcı olacaktır. Tam menü tasarımı Şimdi Fulwidth menü modülünü tasarlamaya hazırız. Tam ve güncellenmiş geniş menü modülü ayarlarını açın:
Tam geniş bir menü bağlantısı yapın: evet
Açılır menü metin rengi: #ffffff
Hücresel menü metin rengi: #ffffff Hizalama Metni: Orta
Açılır menü arka plan rengi: #45b2ff
Açılır menü satırı rengi: #ffffff
Hücresel Menü Arka Plan Rengi: #45B2FF
Yazı Tipi Menüsü: SANS SEMI CONSENS’i kodlayın
Yazı tipi menüsü ağırlığı: yarı kalınlık
Menü metin rengi: #ffffff
Menü Metin Boyutu: 16px Menü Mektup Alanı: 2px
Animasyonlu açılır menü: Genişlet
Açılır düğmesini konumlandırın Üst sınırla örtüşen düğmeyi yapmak için, düğmenin yüksekliğinin tam yarısı kadar negatif bir üst kenar eklememiz gerekir.
Marj: -40.5px üst
Şu ana kadar neredeyse bu sonuç …
Gördüğünüz gibi, Hover Odası düğmenin tüm alanını işgal etmedi ve gerilme menüsü hala sağda. Bunu düzeltmek için bazı özel CSS ekleyebiliriz. Özel bir CSS ekleyerek özel bir CSS eklemeden önce, tam geniş bölüme (modül değil) eklenen bir “gerilme aşağı düğmesi” kimliği CSS’niz olduğundan emin olun. CSS kimliği olmadan, aşağıdaki CSS çalışmaz. Özel bir CSS eklemek için sayfa ayarlarını açın ve aşağıdaki kodu özel CSS giriş alanına yapıştırın.
Dolgu Top: 0px! Önemli; } .Dropdown-button. Fullwidth-miru li> a { Dolgu Alt: 0px;
Çizgi yüksekliği: 81px;
}
.
Çizgi yüksekliği: 1.6em;
}
.dropdown-button .et_mobile_menu li A: Hover, .nav ul li A: Hover, .dropdown-button .fullwidth-menu A: Hover {
Opaklık: 1;
}
.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
Dolgu: 0 0! Önemli;
}
.
Ekran bloğu;
}
. A: İlk çocuk: sonra {
Sağ: 20px;
}
Bu nihai sonuç
Geçerli cep telefonundaki menüyü ayarlama Menü, hücresel menüyü etkinleştiren ve kapatan bir hamburger simgesi ile hücresel sürüme geçecektir. İşte görünüm.
Masaüstü sürümüne uyacak şekilde menüyü geliştirmek için bazı özel CSS eklememiz gerekir. Sayfa ayarlarını açın ve bugün eklediğimiz CSS’nin hemen altına aşağıdaki özel CSS ekleyin. @Media (Max-Width: 981px) {
.dropdown-button .et_pb_fullwidth_menu .et_pb_row {
Genişlik:%100; } .dropdown-button. mobil_menu_bar { Yükseklik: 81px;
}
.dropdown-button. Mobile_menu_bar: Önce {
Yazı tipi ailesi: Miras! Önemli;
Yazı tipi-ağırlık: 600! Önemli;
Yazı tipi boyutu: 16px! Önemli;
Renk: #ffffff! Önemli;
Mektup Alanı: 2 piksel! Önemli;
İçerik: “Daha fazla bilgi edinin”;
Çizgi yüksekliği: 81px;
Üst: 0px;
}
.dropdown-button. Mobile_menu_bar: sonra {
Pozisyon: Mutlak;
Çizgi yüksekliği: 81px;
Yazı tipi ailesi: etmodüller;
yazı tipi boyutu: 20px;
yazı tipi-ağırlık: 800;
İçerik: “3”;
Dolgu-sol: 20px;
Renk: #ffffff;
}
.dropdown-button .et_first_mobile_item> a {
Görüntü yok;
}
}
Yukarıdaki CSS, tam ve yüksek parçaları/düğmeleri kapsayan tıklanmış alanlar yapar. Ayrıca Hamburger simgesini, masaüstü sürümüne uygun birkaç metin ve ok simgesiyle değiştirir. Bu sahte öğe kullanılarak yapılır: Önce ve sonra. Bu şekilde hücresel menünün varsayılan işlevselliğini yerinde tutabiliriz. Şu anda, Hücresel Hedef Çekimi düğmesinin metin içeriği “Daha fazla öğrenin” yazıyor. Ancak sahte öğenin altındaki aşağıdaki CSS satırını güncelleyerek değiştirebiliriz: Hücresel menü çubuğu için önce: “Daha fazla bilgi edinin”; örneğin, “menü” okumak istiyorsanız, CSS satırını aşağıdakilere değiştireceksiniz: İçerik: “Menü”;
Buradaki nihai sonuç nihai sonuçtur. Masaüstü (yüzerken menü aşağı)
Tablet ve Telefon (tıklarken menü aşağı)
Ek öğeler ve hatta alt menü öğeleri de ekleyebilirsiniz! Menü düzenleyicisi sayfasındaki menüyü güncelleyin ve hazırsınız.
Son zihin, tam geniş bir menü modülü kullanarak römorkör heeding menü düğmesini yapar Divi birkaç önemli adım içerir. İlk olarak, WordPress’te modüle çekmek istediğimiz bir menü yapıyoruz. Ardından Divi Builder’ı istediğimiz gibi tüm geniş menü modülünü kullanıyoruz ve organize ediyoruz. Daha sonra tasarımı hem masaüstünde hem de hücreselde cilalamak için bazı özel CSS ekledik. Sonuç, imleci masaüstüne yönlendirirken ve hücresel için tıklarken kullanılan güzel (ve kullanışlı) bir gerilme menüsüdür. Umarım, bunu tasarım ekipmanı kutunuza yararlı bir ek olarak bulacaksınız. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
