Styling Divi'nin Tam Ekran Menüsü

Divi'nin tam ekran menüsü, özel tasarım için harika bir fırsat sunuyor. Divi's Theme Customizer'da bulunan diğer dört başlık stilinden farklı olarak, tam ekran menüsü etkin olduğunda tüm ekranı doldurur. Bu, Divi'nin menüsü ve başlık öğeleri için yaratıcı bir düzene yer açar.

Bugünkü gönderide, ziyaretçileriniz için daha özel bir his vermek için tam ekran menünüzü nasıl şekillendireceğinizi göstereceğim. Bunu başarmak için tema özelleştiricideki birkaç seçeneği değiştireceğim ve bazı özel CSS ekleyeceğim.

Başlayalım.

Öncesi ve Sonrası

Tam genişlik menüsü varsayılan olarak şöyle görünür:

İşte yeni tasarıma bir göz atın:

Styling Divi'nin Tam Ekran Menüsü

Youtube Kanalımıza Abone Olun

Başlarken

Tasarıma başlamadan önce, zaten eklenmiş menü öğeleriyle aktif bir birincil menünüz olduğundan emin olun.

Tema özelleştiricideki ayarları güncelleyin

WordPress Panonuzdan Divi > Tema Özelleştirici > Başlık ve Gezinme > Başlık Biçimi'ne gidin. Ardından Başlık Stili olarak Tam Ekran'ı seçin.

Tam Ekran Başlık stili ayarlandıktan sonra Başlık ve Gezinme'ye geri dönün. Şimdi “İçeri Kaydır ve Tam Ekran Başlık Ayarları” adlı yeni bir dizi seçenek göreceksiniz.

Slayt Girişi ve Tam Ekran Başlık Ayarlarını aşağıdaki gibi güncelleyin:

Üst Çubuğu Göster Seçeneğini Kontrol Edin
Menü Metin Boyutu: 46px
Üst Çubuk Metin Boyutu: 24px
Yazı Tipi: Playfair Ekranı
Yazı Tipi Stili: Kalın(B)
Menü Bağlantı Rengi: #ffffff
Aktif Bağlantı Rengi: #edef86
Üst Çubuk Metin Rengi: #ffffff

Şimdi Başlık ve Gezinme ayarlarına geri dönün ve Başlık Öğeleri'ne tıklayın. Başlık Öğeleri altında aşağıdakileri güncelleyin:

Sosyal Simgeleri Göster'i seçin
Arama Simgesini Göster'i seçin
Telefon Numarası: [numarayı girin]
E-posta: [e-posta girin]

Her şey ayarlandıktan sonra, varsayılan düzen şöyle görünmelidir:

Şimdi biraz özel CSS ekleyelim.

Özel CSS Ekleme

Divi'ye özel CSS eklemek birkaç yerde yapılabilir. Tema özelleştiriciyi zaten kullandığımız için Ek CSS'ye gidin. Burası CSS'imizi ekleyeceğimiz yer. Elbette, onu alt temanızdaki harici style.css dosyanıza eklemeyi tercih ediyorsanız, bunun için gidin.

Zamanı kısıtlı olanlar için, kopyalayıp Ek CSS bölümünüze yapıştırabileceğiniz CSS kodunun tamamlanmış sürümüne atlayabilirsiniz. Yine de geri dönmeniz ve arka plan görüntüsü gibi birkaç öğeyi kodunuza eklemeniz gerekeceğini bilin.

Şimdi CSS'imizi eklemeye geri dönelim.

Özel CSS'nin çoğu yalnızca tam ekran başlığının masaüstü sürümüne uygulanacağından, minimum 980 piksel genişliğinde ekran boyutlarını hedefleyen bir medya sorgusu ekleyerek başlayacağız. Ek CSS bölümüne aşağıdakileri ekleyin:

@media all and (min-width: 980px){

}

Şimdi, navigasyon menüsünün ve üst çubuk öğelerinin konumunu ayarlayarak tam ekran başlığının düzenini biraz değiştirelim, böylece gezinme ekranın solunda olacak ve üst çubuk öğeleri ekranın sağında dikey olarak yığılacaktır. ekran. Bu değişikliği yapmak için medya sorgusu parantezlerinin içine aşağıdaki css'yi ekleyin.

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

Ardından, aşağıdaki CSS ile arama çubuğumuzun boyutunu artıralım:

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

Ve menüyü sağa hizalamak için aşağıdaki CSS'yi ekleyelim:

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

Ardından sağ üst köşedeki kapat menü simgesini daha büyük ve tıklaması daha kolay hale getirelim:

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

Ayrıca üst menü öğelerinin arkasındaki arka plan kaplamasını da çıkaralım ve arka plan için opaklığı çıkaralım.

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

Alt menü öğeleriniz varsa, bu CSS, menü öğesinin sağındaki aşağı açılan oku büyütür:

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

Şimdiye kadar sahip olduklarımıza bir göz atalım:

Artık arka plan resmimizi eklemeye hazırız. Arka plan resmimin tüm cihazlarda gösterilmesini istediğim için, bu CSS'yi medya sorgusu parantezlerinin dışına ekleyeceğim, böylece arka plan 980 pikselden küçük ekran boyutlarında gizlenmez.

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

Halihazırda bir arka plan resmi URL'niz yoksa, WordPress medya galerisine bir arka plan resmi (1920×1080) yükleyin ve URL'yi kopyalayın.

Şimdi, resim URL'nizi koda yapıştırarak "RESİM URL'SİNİ GİRİN" yazan metni değiştirin.

Artık işiniz bitti!

Ek CSS'nize eklemeniz gereken CSS kodunun tamamlanmış bir sürümünü burada bulabilirsiniz (sağlamanız gereken resim URL'si hariç):

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

Kaydet ve Yayınla'yı tıklayın

Şimdi kontrol edelim:

Alternatif ızgara menü düzeni

Menünüz için bir ızgara düzeni eklemek için, mevcut kodunuzun altına ve medya sorgusu parantezlerinin içine aşağıdaki CSS'yi ekleyin:

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

Önemli Not: Menü öğelerinizin daha küçük ekran boyutlarında çakışmadığından emin olmak için menü yazı tipi boyutunu 30 piksel (veya buna yakın) olarak değiştirmeniz gerekebilir. Ayrıca, menünüzde alt menü öğeleri varsa bu düzen çalışmayacaktır.

Tam Ekran Üstbilgisinde Alt Menü Öğeleri

Alt menü öğeleriniz varsa, üst menü öğesinin yalnızca alt menü öğelerini göstermek ve gizlemek için bir geçiş bağlantısı olarak işlev göreceğini unutmayın. Kendi başına bir menü bağlantısı olarak çalışmayacaktır.

Duyarlı mı?

Bu özelleştirme duyarlıdır ve tüm ekran boyutlarında iyi çalışır.

Tam ekran başlığı, dikey olarak hizalanmış iki bitişik tablo hücresiyle oluşturulmuştur. Soldaki tablo hücresi menüyü, sağdaki hücre ise diğer başlık öğelerini içerir. İçerik dikey olarak hizalandığından ve tablo hücrelerinin her biri her zaman ekran boyutunun %50'sini (yarısı) işgal edeceğinden, içerik her zaman herhangi bir ekran boyutuna güzel bir şekilde uyum sağlayacaktır.

Ekran boyutu 980 pikselden (tabletler ve telefonlar) küçükse, varsayılan Divi düzeni devreye girecek ve menüyü mobil cihazlarda güzel bir şekilde görüntüleyecektir.

Son düşünceler

Sitenize tam ekran bir başlık eklemeyi düşünüyorsanız, umarım bu tasarım faydalı bir ilham kaynağı olur. Başlık öğelerinin ve menü öğelerinin simetrisi, işleri dengeler ve birçok müşteri için önemli olan iletişim bilgilerine daha fazla dikkat çeker.

Bu menü tam ekran olduğu için arka plan görüntüsünün anahtar olacağını unutmayın. Menünün önemli içeriğinin dikkatini dağıtacak veya boğacak bir görüntü istemezsiniz. İstediğiniz kişiliği getiren mükemmel görüntüyü bulamıyorsanız, arka plan olarak harika görünen ve tasarımınızla uyumlu bir görüntü seçin. Veya varsayılan arka plan rengi seçeneğini kullanabilirsiniz.

Elimdeki tek şey bu.

Yorumlarda sizden haber bekliyorum.