5 Global Ön Ayarlı Divi Menü Modülü Nasıl Optimize Edilir (ÜCRETSİZ İndirme)

Menüler herhangi bir sitenin hayati bir parçasıdır, bu nedenle düzgün görüntülendiğinden emin olmak için biraz fazladan zaman ve çaba harcamak mantıklıdır. Divi'de, ihtiyacımız olan stil seçeneklerinin çoğunu sağlayan Divi's Menu modülünü kullanarak hızlı bir şekilde özel menüler oluşturabiliriz. Ancak önceden bazı genel menü ön ayarları hazırlayarak web sitenizin başlığını tasarlama sürecini kolaylaştırmaya her zaman yardımcı olur. Bu, bir düğme tıklamasıyla özel bir menü stili çerçevesi dağıtmanızı sağlar, böylece tasarımı web sitenizin markasına uyacak şekilde değiştirmek için daha fazla zaman harcayabilirsiniz. Örneğin, logolu ortalanmış bir menü ve düğmelere benzeyen bağlantılar istiyorsanız, bu çerçeveyi tek bir tıklamayla dağıtmak için genel bir ön ayar kullanabilirsiniz. Bu size değerli zaman ve enerji tasarrufu sağlar.

Bu eğitimde, özel Divi başlıklarınızı oluştururken kullanabileceğiniz 5 menü modülü genel ön ayarını paylaşacağız. 5 ön ayarın tümünü içeren ücretsiz indirmenin yanı sıra, bu ön ayarları sıfırdan oluşturma sürecinde size yol göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Bu menü genel ön ayarlarını genel başlığınızda kullanmak için, önce düzeni (ön ayarlarıyla birlikte) Divi Kitaplığına aşağıdaki şekilde içe aktarmalısınız:

1. Divi > Divi Kitaplığı'na gidin.
2. Sayfanın üst kısmındaki içe/dışa aktar düğmesini tıklayın.
3. Taşınabilirlik açılır penceresinde İçe Aktar sekmesini seçin
4. İçe aktarılacak düzen JSON dosyasını seçin
5. Ön Ayarları İçe Aktar'ı seçin
6. İçe Aktar Düğmesine tıklayın

Ardından tema oluşturucuya gidin ve genel başlığı düzenleyin. Logonun olmasını istediğiniz yere bir menü modülü ekleyin ve menüyü uygun şekilde biçimlendirmek ve yerleştirmek için ön ayarları kullanın.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de 5 Menü Modülü Global Ön Ayarı Oluşturma

#1 – Logolu Ortalanmış Düğme Bağlantıları

İlk menü stili global ön ayarımız için, menünün simetrik görünmesi için eşit genişlikte düğme bağlantılarına sahip bir menü tasarlayacağız. Menü düğmesi bağlantılarının etkin durumuyla eşleşen vurgulu durumları bile dahil edeceğiz.

Bu ilk menü genel ön ayarını oluşturmak için normal bölüme tek sütunlu bir satır ekleyin.

Ardından satıra bir menü modülü ekleyin.

Menü ayarlarını açın ve modüle bir menü ekleyin.

Ardından site logosunu da dinamik içerik olarak modüle ekleyin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Stil: Merkezli

• Menü yazı tipi: Poppins
• Menü Yazı Tipi Ağırlığı: Kalın
• Menü Yazı Tipi Stili: TT
• Menü Metin Boyutu: 14px (masaüstü), 24px (tablet ve telefon)
• Menü Harf Aralığı: 0.15em
• Menü Satır Yüksekliği: 1,3em (masaüstü), 1,8em (tablet ve telefon)

• Logo Maksimum Yüksekliği: 60px

• Kenar boşluğu: 0 piksel alt

Gelişmiş sekmesi altında, bazı özel menü bağlantı stilleri ekleyeceğiz, böylece düğmeler olarak görünecekler.

Menü Bağlantısı CSS'si

Menü Bağlantısına aşağıdaki Özel CSS'yi ekleyin:

Masaüstünde…

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

Üzerinde gezinme…

background: #333333;
color: #ffffff;
opacity: 1;

Aktif Menü Bağlantı CSS'si

background: #333333;
color: #ffffff;
opacity: 1;

Menü Logo CSS'si

margin-bottom: 10px;

Stil 1 Sonuç

İşte nihai sonuç…

Menü Stili 1'i Global Ön Ayar olarak Ekleme

Yinelenen Bölüm

Menü stilini global bir ön ayar olarak eklemeden önce, sonraki tasarımı hızlı bir şekilde başlatmak için menünün stillerini kullanabilmemiz için menü modülünü içeren tüm bölümü çoğaltın.

Mevcut Stillerden Yeni Hazır Ayar Oluştur

Global ön ayarı eklemek için oluşturduğumuz orijinal menü modülünün ayarlarını açın ve Preset açılır bağlantısını tıklayın.

Geçerli Stillerden Yeni Hazır Ayar Oluştur'u seçin.

Yeni ön ayara bir ad verin (“Ortalanmış Düğme Bağlantıları ve Logo”), ardından ön ayarı kaydedin.

#2 – Satır İçi Ortalanmış Logo ve Düğme Bağlantıları

İkinci menü genel ön ayarını oluşturmak için önceki tasarımdan kopya menü modülünün ayarlarını açın.

Tasarım sekmesi altında stili güncelleyin:

• Stil: Satır İçi Ortalanmış Logo

Önceki modül stilinden devralınan Özel CSS nedeniyle, logo merkezde mükemmel bir şekilde dururken menü bağlantıları düğme tasarımını korur. Özel düğme bağlantı stili, menü bağlantılarının hoş bir simetrik tasarım tutmasını sağlar.

Gelişmiş sekmesi altında Menü Logo CSS'sini aşağıdaki gibi güncelleyin:

margin-bottom: 0px;

Stil 2 Sonuç

İşte nihai sonuç.

Menü Stili 2'yi Genel Ön Ayar olarak Ekleme

Yinelenen Bölüm

Menü stilini genel bir ön ayar olarak eklemeden önce, sonraki tasarımı hızlı bir şekilde başlatmak için menünün stillerini kullanabilmemiz için menü modülünü (stil 2) içeren tüm bölümü çoğaltın.

Mevcut Stillerden Yeni Hazır Ayar Oluştur

Genel ön ayarı eklemek için, oluşturduğumuz stil 2 için orijinal menü modülünün ayarlarını açın ve Ön Ayar açılır bağlantısını tıklayın.

Geçerli Stillerden Yeni Hazır Ayar Oluştur'u seçin.

Ön ayara bir ad verin (“Düğme Bağlantıları ile Satır İçi Ortalanmış Logo”) ve ön ayarı kaydedin.

#3 – Mobil Etiketli Tam Ortalanmış VW Aralıklı Menü

Bu sonraki menü stili için, tarayıcı genişliği ile ölçeklenen bir vw uzunluk birimi ile boyutlandırılmış ve aralıklı menü metnine sahip, logosuz, tam genişlikte ortalanmış bir menü tasarlayacağız. Ayrıca mobilde hamburger simgesinin üzerinde bir "menü" etiketi olacak.

Üçüncü menü global ön ayarını oluşturmak için tam genişlikte bir satıra ihtiyacımız olacak. Yinelenen menüyü tutan satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Menü modülünün ayarlarını açın ve logoyu silin.

Tasarım sekmesi altında stili güncelleyin:

• Stil: Merkezli

Ardından, metin boyutunun tarayıcı genişliğiyle ölçeklenmesi için metin boyutunu aşağıdaki VW uzunluk birimiyle güncelleyin.

• Menü Metin Boyutu: 1.5vw (masaüstü)

Mobil menü için bir "menü" etiketi oluşturmak için, Tablet ekranında Psuedo Öğesinden Önce'ye aşağıdaki gibi bazı özel CSS ekleyebiliriz:

CSS'den önce

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Font ailesinin, menü bağlantıları tarafından kullanılan fontla eşleşmesi için "poppins" olarak ayarlandığına dikkat edin. Farklı bir yazı tipi kullanıyorsanız bunu güncellemeniz gerekecektir.

NOT: Bu, görsel oluşturucuda gösterilebilir veya gösterilmeyebilir. Sonucu görmek için canlı sayfayı yüklemeniz gerekebilir.

Ardından, fareyle üzerine gelindiğinde bazı ek boşluklar ve menü bağlantı sınırları ekleyeceğiz. Aşağıdaki Özel CSS'yi eklemeye devam edin:

Menü Bağlantısı CSS (masaüstü):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Menü Bağlantısı CSS'si (fareyle üzerine gelin):

color: #333;
border: 1px solid #333;
opacity:1;

Aktif Menü Bağlantısı CSS :

color: #333;
border: 1px solid #333;
opacity:1;

Stil 3 Sonuç

Menü Stili 3'ü Global Ön Ayar olarak Ekleme

Yinelenen Bölüm

Menü stilini genel bir ön ayar olarak eklemeden önce, sonraki tasarımı hızlı bir şekilde başlatmak için menünün stillerini kullanabilmemiz için menü modülünü (stil 3) içeren tüm bölümü çoğaltın.

Mevcut Stillerden Yeni Hazır Ayar Oluştur

Stil 3'ü global ön ayar olarak eklemek için, oluşturduğumuz stil 3 için orijinal menü modülünün ayarlarını açın ve Ön Ayar açılır bağlantısını tıklayın.

Geçerli Stillerden Yeni Hazır Ayar Oluştur'u seçin.

Ön ayara bir ad verin (“Mobil Etiketli Tam Ortalanmış VW Aralıklı Menü”) ve ön ayarı kaydedin.

#4 – Mobil Etiketli Sağ Aralıklı Menü

Dördüncü menü genel ön ayarını oluşturmak için, satırın sütun düzenini bir 0-dördüncü üç-dördüncü düzeniyle güncellememiz gerekecek. Bu, sağda bir menü modülü ve sol sütunda bir logo görüntüsü için ayrı bir nokta içeren özel bir başlık düzenini taklit edecektir.

Menünün sağ sütunda olduğundan emin olun. Ardından menü ayarlarını açın ve Öğeler seçeneklerini alışveriş sepeti simgesini ve arama simgesini gösterecek şekilde güncelleyin.

Tasarım sekmesi altında stili güncelleyin:

• Stil: Sola Hizalanmış

Ardından aşağıdaki bağlantı stillerini ve metin hizalamasını güncelleyin:

• Aktif Bağlantı Rengi: #ac3cf7
• Menü Metin Boyutu (masaüstü): 14 piksel
• Metin Hizalama: Sağ

Artık mobilde hamburger ikonumuz sağ tarafta olacağına göre, mobilde menü etiketinin yerleşimini ayarlamamız gerekecek. Ardından, bağlantıların aralıklı olduğundan ve sütunun/satırın sağ tarafında aynı hizada oturduğundan emin olmak için bir menü bağlantısı CSS ekleyeceğiz.

Aşağıdaki Özel CSS'yi ekleyin:

CSS'den önce (tablet)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

Menü Bağlantısı CSS'si:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Stil 4 Sonuç

İşte sağa hizalanmış menümüzün nihai sonucu. Hizalamayı daha iyi görebilmeniz için satıra açık gri bir arka plan ekledim.

Menü Stili 4'ü Global Ön Ayar olarak Ekleme

Yinelenen Bölüm

Menü stilini global bir ön ayar olarak eklemeden önce, sonraki tasarımı hızlı bir şekilde başlatmak için menünün stillerini kullanabilmemiz için menü modülünü (stil 4) içeren tüm bölümü çoğaltın.

Mevcut Stillerden Yeni Hazır Ayar Oluştur

Stil 4'ü genel ön ayar olarak eklemek için, oluşturduğumuz stil 4 için orijinal menü modülünün ayarlarını açın ve Ön Ayar açılır bağlantısını tıklayın.

Geçerli Stillerden Yeni Hazır Ayar Oluştur'u seçin.

Ön ayara bir ad verin (“Mobil Etiketli Sağ Aralıklı Menü”) ve ön ayarı kaydedin.

#4 – Mobil Etiketli Sol Aralıklı Menü

Bu dördüncü menü genel ön ayarını oluşturmak için, satırın sütun düzenini bir 0-dördüncü üç-dördüncü düzeniyle güncellememiz gerekecek. Bu, solda bir menü modülü ve sağ sütunda bir logo görüntüsü (veya CTA) için ayrı bir nokta içerecek özel bir başlık düzenini taklit edecektir.

Menü ayarlarını açın ve menü bağlantılarının metin hizalamasını güncelleyin:

• Metin Hizalama: Sol

Daha sonra mobil menü etiketini sol taraftaki hamburger nav'unun üstüne oturacak şekilde ayarlamamız gerekiyor. Ve tablete “direction:rtl” ekleyerek, mobil simgelerin mobilde de sola hizalanmasını sağlayacağız.

Gelişmiş sekmesi altında aşağıdaki Özel CSS'yi güncelleyin:

CSS'den önce (tablet):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Ana Öğe (tablet):

direction:rtl;

Menü Bağlantısı CSS'si:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

İşte nihai sonuç.

Nihai sonuçlar

Son düşünceler

Bu menü modüllerinin dışa dönük stili temel olmasına rağmen, menü düzeninin iç çerçeve tasarımı, yaratıcı süreci hızlı bir şekilde başlatmak için son derece yararlıdır. Ayrıca, bu çerçevelerle küresel bir ön ayara sahip olmak, süreci daha da hızlandıracaktır. Menü modülünü özelleştirmenin ve sonraki projeleriniz için benzersiz ön ayarlar eklemenin daha fazla yolunu keşfetmekten çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!