Divi’nin tam ekran menüsünü düzenleme
Divi’nin tam ekran menüsü özel tasarım için harika bir fırsat sunuyor. Divi tema ayarında bulunan diğer dört stilin aksine, tam ekran menüsü etkin olduğunda tüm ekranı doldurur. Bu, Divi başlık menüsü ve öğeleri için yaratıcı düzen için alan sağlar. Bugünün gönderisinde, ziyaretçileriniz için daha özel bir his vermek için tam ekran menünüzü nasıl düzenleyeceğinizi göstereceğim. Bunu başarmak için, tema ayarında çeşitli seçeneği değiştireceğim ve bazı özel CSS ekleyeceğim. Başlayalım. Bundan önce ve sonra varsayılan olarak tam genişlik menüsünün görünümü:
Aşağıdakiler yeni tasarımdan bir göz atın: Divi’nin tam ekran menüsünü düzenleyerek YouTube kanalımıza abone olmuş Tasarıma başlamadan önce başlamadan önce, eklenen menü öğesiyle etkin bir ana menü olduğundan emin olun. WordPress kontrol panelinizden tema ayarındaki ayarları güncelleyin, Divi> Tema Özelleştirici> Başlık ve Navigasyon> Başlık Biçimi. Ardından, başlık stili olarak tam ekranı seçin. Tam ekran başlık stili ayarlandıktan sonra, başlık ve navigasyona geri dönün. Artık “Slide In & FullScreen Başlık Ayarları” adlı yeni bir seçenek kümesi göreceksiniz.Ve tam ekran başlık ayarlarını aşağıdaki gibi güncelleyin: Menü metin boyutunu görüntülemek için üst seçeneği kontrol edin Metin boyutu: 46px üst bıçakların metin boyutu: 24px yazı tipi: Playfair ekran yazı tipi stili: kalın (b) Renk menüsü bağlantıları: #fffff renk etkinliği etkin Bağlantı: #Edef86 Üst Bıçakların Renk Metni: #ffffff Şimdi başlık ve navigasyon ayarlarına geri dönün ve başlık öğesini tıklayın. Üstbilgi öğesinin altında aşağıdakileri güncelleyin: Sosyal simgeyi görüntüleyin SEÇİM SEÇİMİ SEÇİMİ SEVİYORUM Telefon: [Numarayı Girin] E -posta: [E -posta Gir] Her şey ayarlandıktan sonra, bu varsayılan düzendir: Şimdi bazı özel CSS ekleyelim. Özel CSS ekleyin Divi’de özel CSS ekleyin Birkaç yerde yapılabilir. Temanın ayarlanmasını kullandık, ek CSS açtık. Burası CSS’imizi ekleyeceğiz. Tabii ki, çocuğunuzun temasındaki harici stil.css dosyanıza eklemeyi tercih ederseniz, yapın. Zaman için basılanlarınız için, CSS kodunun tüm sürümüne kopyalayıp ek CSS bölümünüze yapıştırabileceğiniz tüm sürümüne atlayabilirsiniz. Kodunuza arka plan resimleri gibi bazı öğeleri geri döndürmeniz ve eklemeniz gerektiğini bilin. Şimdi CSS’imizi tekrar ekleyin.
Çoğu özel CSS yalnızca tam ekran başlığının masaüstü sürümüne uygulanacağından, ekran boyutunu minimum 980px genişliğinde hedefleyen medya sorguları ekleyerek başlayacağız. Ek CSS bölümüne aşağıdakileri ekleyin: @Media All ve (min genişliği: 980px) {
}
Şimdi navigasyon menüsü konumunu ve üst bıçakları ayarlayarak ekran başlığının katmanını biraz değiştirelim, böylece gezinme ekranın solunda olacak ve üst bıçak elemanları ekranın sağında dikey olarak istiflenecek. ekran. Bu değişikliği yapmak için medya sorgularına aşağıdaki CSS ekleyin.
/*Gezinme menüsünün konumunu ayarlayın*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
Genişlik:%50;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {dolgu-üst: 0px! Önemli;
}
/*Üst çubuk öğelerinin konumunu ayarlayın*/
.et_header_style_fullscreen .et_slide_menu_top {
Genişlik:%50;
Metin-align: merkez;
Ekran: Tablo! Önemli;
Dikey-High: Orta;
Pozisyon: Başlangıç;
Şamandıra: Doğru! Önemli;
Yükseklik:%100;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
Ekran: Tablo hücresi! Önemli;
Pozisyon: göreceli;
Dikey-High: Orta;
Metin-align: Sol! Önemli;
Dolgu:%0 15;
Genişlik:%100;
}
.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
Genişlik:%100;
}
.et_header_style_fullscreen div#et-info {
Şamandıra: Yok! Önemli;
Genişlik:%100;
}
.et_header_style_fullscreen div#et-info span {
Ekran bloğu;
Marj-Alt: 30px;
}
Ayrıca, aşağıdaki CSS ile arama çubuğumuzun boyutunu artıralım:/*Arama çubuğu ve daha büyük simge yapın*/
.et_header_style_fullscreen .et_slide_menu_top .et-search formu { Marj-Top: 30px! Önemli;
Marj-Alt: 15px;
Genişlik:%100! Önemli;
Max-Width: 300 piksel! Önemli;
Dolgu: 25px! Önemli;
}
.et_slide_menu_top düğmesi#searchsubmit_header {
Genişlik: 50px;
Yükseklik: 41px;
}
.et_slide_menu_top düğmesi#searchsubmit_header: {
yazı tipi boyutu: 22px;
}
Ve şunlara paralel bir menü oluşturmak için aşağıdaki CSS’yi ekleyelim: /* Doğru hizalanmış menüyü yapın* /
.et_header_style_fullscreen ul#mobil_menu_slide {
Metin-align: doğru;
Dolgu:%0 15;
}
O zaman sağ üst köşedeki bir kapalı menü simgesi daha büyük ve tıklamak daha kolay yapalım:
/*Yakın daha büyük simge menüsü yapın*/
.et_pb_fullscreen_menu_animated. Mobile_menu_bar: Önce {
yazı tipi boyutu: 120px;
}
Ayrıca üst menü öğesinin arkasındaki arka plan kaplamasını ortadan kaldıralım ve arka plan için opaklığı ortadan kaldıralım. /*Arka plan kaplama*/. Et_slide_menu_top {
Arka plan: yok;
}
/*Arka plan opaklığı çıkarın*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
Opaklık: 1;
}
Bir alt menü öğeniz varsa, bu CSS menü öğesinin sağındaki açılır oku daha büyük hale getirir:
/*Alt menü öğeleri için aşağı ok boyutunu artırın*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
Opaklık: 1;
}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:
yazı tipi boyutu: 34px;
}
Şimdiye kadar sahip olduğumuzu kontrol edelim:
Şimdi arka plan görüntülerimizi eklemeye hazırız. Arka plan görüntüsünün tüm cihazlarda görüntülenmesini istediğim için, bu CSS’yi medya kuyruğu braketlerinin dışına ekleyeceğim, böylece arka plan 980 pikselden daha düşük bir genişliğe sahip ekran boyutunda gizlenmez. /*Arka plan görüntüsü ekle*/
gövde #Page-container .et_slide_in_menu_container {
Arka plan: URL (‘Görüntü URL’yi ekle’) Merkezi Merkez! Önemli;
}
Arka plan görüntüsü URL’niz yoksa, WordPress Medya Galerisi’ne arka plan resimlerini (1920 × 1080) yükleyin ve URL’yi kopyalayın.
Şimdi Kod’a görüntü URL’nizi ekleyerek “Görüntü URL’si ekle” yazan metni değiştirin. Şimdi bitmişsin! Ek CSS’nize eklemeniz gereken CSS kodunun tam sürümü (vermeniz gereken görüntü URL’si hariç): @Media All and (min-width: 980px) {
/*Gezinme menüsünün konumunu ayarlayın*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {genişlik:%50; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
Dolgu Top: 0px! Önemli;
}
/*Üst menü ve öğelerin konumunu ayarlayın*/
.et_header_style_fullscreen .et_slide_menu_top {
Genişlik:%50;
Metin-align: merkez;
Ekran: Tablo! Önemli;
Dikey-High: Orta;
Pozisyon: Başlangıç;
Sağa çık;
Yükseklik:%100;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
Ekran: Tablo hücresi! Önemli;
Pozisyon: göreceli;
Dikey-High: Orta;
Metin-align: Sol! Önemli;
Dolgu:%0 15;
Genişlik:%100;
}
.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
Genişlik:%100;
}
.et_header_style_fullscreen div#et-info {
Şamandıra: Yok! Önemli;
Genişlik:%100;
}
.et_header_style_fullscreen div#et-info span {
Ekran bloğu;
Marj-Alt: 30px;
}
/*Arama çubuğu ve daha büyük simge yapın*/
.et_header_style_fullscreen .et_slide_menu_top .et-search formu {
Marj-Top: 30px! Önemli;
Marj-Alt: 15px;
Genişlik:%100! Önemli;
Max-Width: 300 piksel! Önemli;
Dolgu: 25px! Önemli;
}
.et_slide_menu_top düğmesi#searchsubmit_header {
Genişlik: 50px;
Yükseklik: 41px;
}
.et_slide_menu_top düğmesi#searchsubmit_header: {
yazı tipi boyutu: 22px;
}
/*Hizalı doğru menü yap*/
.et_header_style_fullscreen ul#mobil_menu_slide {
Metin-align: doğru;
Dolgu:%0 15;
}
/*Yakın daha büyük simge menüsü yapın*/
.et_pb_fullscreen_menu_animated. Mobile_menu_bar: Önce {
yazı tipi boyutu: 120px;
}
/*Koyu arka plan kaplama*/
.et_slide_menu_top {
Arka plan: yok;
}
/*Arka plan opaklığı çıkarın*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
Opaklık: 1;
}
/*Alt menü öğeleri için aşağı ok boyutunu artırın*/. ET_SLIDE_IN_MENU_CONTAINER Span.et_mobile_menu_arrow {
Opaklık: 1;
}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:
yazı tipi boyutu: 34px;
}
}
/*Arka plan görüntüsü ekle*/
gövde #Page-container .et_slide_in_menu_container {
Arka plan: URL (‘http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg’) önemli;
Arka plan boyutu: Kapak! Önemli;
}
Kaydet’i tıklayın ve yayınlayın
Şimdi kontrol edelim:
Alternatif Kafes Menü Düzeni Menünüze bir kafes düzeni eklemek için, geçerli kodunuzun altına ve medya braketlerine aşağıdaki CSS ekleyin medya: /* Izgara Bağlantıları Menüsü Ekle* /
.et_header_style_fullscreen .et_mobile_menu li {
Opaklık: 1;
Genişlik:%46;
Şamandıra: Sol! Önemli; Marj-sağ:%2;
Marj-Alt:%2;
}
.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-mem-item a {
Dolgu:% 20 0;
Sınır: 1 piksel katı #fff;
Renk: #fff;
Genişlik:%100;
Metin-align: merkez;
}
Önemli Not: Menü öğenizin daha küçük bir ekran boyutunda örtüşmediğinden emin olmak için yazı tipi menüsünün boyutunu 30px (veya buna yakın) olarak değiştirmeniz gerekebilir. Ayrıca, menünüzde bir alt menü öğesi varsa bu düzen çalışmaz. Alt Menü Öğeleri Tam ekran başlıklarındaki alt menü öğeniz varsa, üst menü öğesinin yalnızca alt menü öğesini görüntülemek ve gizlemek için bir anahtar bağlantısı olarak işlev göreceğini unutmayın. Bu bir menü bağlantısı olarak işlev görmez. Duyarlı mı?
