Divi ile Navigasyon Ana Sayfası Nasıl Oluşturulur

Ana sayfanıza uygulayabileceğiniz tonlarca yaklaşım var, ancak web sitenize bu küçük ekstra dokunuşu eklemek istiyorsanız, ana sayfanız olarak bir gezinme sayfasını seçmek doğru yol olabilir. Bunu o kadar sık ​​görmezsiniz ve ziyaretçilerinize web sitenizden neler bekleyebilecekleri konusunda net bir fikir verir. Ayrıca, ziyaretçilerinizin sağladığınız harika içerikle dolu farklı sayfalarda görsel olarak gezinmesine de yardımcı olacaktır.

Divi ile şık ve zarif bir şekilde nasıl yapabileceğinizi göstermek için, bu gönderide nasıl yeniden oluşturacağınızı göstereceğimiz bir tasarım oluşturduk. İki versiyon olacak; masaüstü sürümü ve tablet ve telefon için uygun olanı. Öğreticiye dalmadan önce, nihai sonuca bir göz atalım.

Masaüstünde Sonuç

Yeniden oluşturacağımız sonuç masaüstünde şöyle görünüyor:

Mobilde Sonuç

Mobildeki sonuç biraz farklıdır ve şöyle görünür:

Divi ile Navigasyon Ana Sayfası Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Masaüstü Sürümünü Yeniden Oluştur

Navigasyon sayfasının iki versiyonunu oluşturacağız; bir masaüstü sürümü ve tablet ve telefon için bir sürüm. Bu şekilde, gezinme sayfasının tüm cihazlarda iyi göründüğünden emin olacağız. Her zamanki gibi, masaüstü sürümünü oluşturarak başlayacağız.

Yeni Bölüm Ekle

Yeni bir sayfa oluşturarak ve ona normal bir bölüm ekleyerek başlayın. Bu eğitim için, ihtiyaç duyacağımız içeriğe sahip tüm satırları içeren yalnızca bir bölüm kullanacağız (hem masaüstü hem de mobil sürüm için). Ancak, masaüstü ve mobil sürümü iki bölüme ayırmayı da seçebilirsiniz.

İlk Gezinme Satırını Yeniden Oluştur

Yukarıdaki sonuç önizlemesinde fark edebileceğiniz gibi, gezinme öğelerinin her biri aşağı yukarı aynı tasarıma ve bazı farklı ayrıntılara sahiptir. Oluşturmak istediğiniz gezinme öğelerinin her biri için ayarların çoğu aynıdır. Bu yüzden size ilk satırı nasıl oluşturabileceğinizi ayrıntılı olarak göstereceğiz ve ardından sayfaya eklemek istediğiniz diğer gezinme öğeleri için değişiklikleri nasıl yapabileceğinizi göstereceğiz.

Sütun Yapısı

Her şeyden önce, yeni eklediğiniz satır için tam genişlikte bir sütun seçin. Herhangi bir modül eklemeden önce, satır ayarlarının yerinde olduğundan emin olacağız, bu yüzden devam edin ve satır ayarlarını açın.

Arka plan görüntüsü

İçerik sekmesindeyken yapacağımız ilk şey satırınıza bir arka plan resmi eklemek. En iyi sonucu vereceğinden, genişliği '1400px' ve yüksekliği '934px' olan bir resim kullanmanızı öneririz. Ayrıca, resmi 'tekrar yok' durumuna getirdiğinizden emin olun.

hizalama

Ardından Tasarım sekmesine gidin ve satırınıza bir sağa hizalama ekleyin. Bunu yaparak, açıklama ve bağlantı eklemek için ekranınızın sol tarafında yeterli alan oluşturacaksınız.

boyutlandırma

Ardından, Boyutlandırma alt kategorisini açın, 'Özel Genişliği Kullan' seçeneğini etkinleştirin ve '%100' yüzde genişliğini kullanın.

aralık

Devam edersek, her gezinme öğesi arasına biraz boşluk eklemek istiyoruz, bu yüzden satıra üst ve alt kenar boşluğu '5px' ekleyeceğiz.

görünürlük

Son olarak, bu yazının ilerleyen bölümlerinde tablet ve telefonla eşleşecek başka bir satır oluşturacağımız için bu satırı telefonda ve tablette devre dışı bırakmak istiyoruz.

Sayfa Açıklaması için Metin Modülü

Metin Ayarları

Satır ayarları yapıldıktan sonra, satırın sütununa bir ilk Metin Modülü ekleyebilir ve Tasarım sekmesindeki Metin alt kategorisi için aşağıdaki ayarları kullanabilirsiniz:

• Yazı Tipi: Andika
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 13px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1.1em
• Metin Yönü: Sol

boyutlandırma

Aşağı kaydırın, Boyutlandırma alt kategorisini açın ve '%18' genişlik ekleyin. Bu genişlik, ona negatif sol kenar boşluğunu eklediğimizde, Metin Modülümüzün satırımızın arka plan görüntüsünü geçmemesini sağlayacaktır.

aralık

Bir önceki adımda belirttiğimiz gibi Metin Modülünün satır arka planı ile örtüşmeden satırımızın sol tarafında gelmesini istiyoruz. Ayrıca satır görüntüsünün üst kısmı ile Metin Modülünün başlangıcı arasında biraz boşluk olmasını istiyoruz, bu yüzden üst kenar boşluğunu da kullanıyoruz.

• Üst Kenar Boşluğu: 150 piksel
• Sol Kenar Boşluğu: -20px
• Üst Dolgu: 10px
• Alt Dolgu: 10px

Bölücü Modül

görünürlük

Ardından, Metin Modülünün hemen altına bir Bölücü modülü ekleyin. Görünürlük alt kategorisinde, 'Bölücüyü Göster' seçeneğini etkinleştirin.

Renk

Ardından Tasarım sekmesine gidin ve ayırıcı renk olarak '#FFFFFF' ekleyin.

Stiller

Devam ederek, Bölücü Stili olarak 'Katı'yı ve Bölücü Konumu olarak 'Üst'ü seçin.

boyutlandırma

Son olarak, Boyutlandırma alt kategorisine aşağıdaki ayarları uygulayın:

• Bölücü Ağırlığı: 5px
• Yükseklik: 23 piksel
• Genişlik: %47
• Modül Hizalama: Sol

Menü Öğesi için Metin Modülü

İçerik Kutusundaki Bağlantı Metni

Bölücü Modülü ile işiniz bittiğinde, devam edin ve hemen altına başka bir Metin Modülü ekleyin. Bu Metin Modülü bizim gezinme öğemiz olacaktır. Ayarları açın, metni girin ve ona bir bağlantı ekleyin.

Degrade Arka Plan Rengi

Hala İçerik sekmesindeyken aşağıdaki gradyan arka plan ayarlarını kullanın:

• İlk Renk: #FFFFFF
• İkinci Renk: rgba(12,113,195,0.62)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 108deg
• Başlangıç ​​Konumu: %31
• Bitiş Konumu: %21

Bağlantı Metni Ayarları

Ardından Tasarım sekmesine gidin ve Metin Alt Kategorisinin bağlantı sekmesine aşağıdaki ayarları uygulayın:

• Bağlantı Yazı Tipi: Andika
• Bağlantı Yazı Tipi Ağırlığı: Kalın
• Bağlantı Yazı Tipi Stili: Büyük Harf ve Altı Çizili
• Bağlantı Altı Çizili Stili: Katı
• Bağlantı Metni Boyutu: 100px
• Bağlantı Metni Rengi: #000000
• Bağlantı Hattı Yüksekliği: 1em

aralık

Bu Metin Modülünün ekranın sol tarafında da görünmesi gerekecek, bu yüzden sol kenar boşluğunu ekliyoruz. Ayrıca Bölücü Modül ile bu Metin Modülü arasındaki boşluğun daha küçük olmasını istiyoruz, negatif üst kenar boşluğunun girdiği yer burası. Bu merkezi yatay hizalamayı oluşturmak için ayrıca bir alt kenar boşluğu ekleyeceğiz. Ve son olarak, degrade arka planının daha büyük olmasını istiyoruz, bu yüzden üst ve alt dolguyu kullanıyoruz.

• Üst Kenar Boşluğu: -33px
• Alt Kenar Boşluğu: 250 piksel
• Sol Kenar Boşluğu: -20px
• Üst Dolgu: 80px
• Alt Dolgu: 80px

İlk Gezinme Satırını Gerektiği Kadar Kez Klonlayın

Gezinme sayfanızdaki farklı gezinme öğeleri, aşağı yukarı aynı ayarlara sahip olacaktır. Bu nedenle, satırı istediğiniz kadar klonlamanızı ve daha sonra detay değişiklikleri yapmanızı öneririz. Değiştirmeniz gereken üç şey var, hadi bir göz atalım.

Satır Arka Planını Değiştir

Yapmanız gereken ilk şey, satırınızın kopyalarının arka plan resimlerini değiştirmek. Yine, en iyi sonucu elde etmek için '1400px' genişliğinde ve '943px' yüksekliğinde bir görüntü kullandığınızdan emin olun.

Menü Öğesi için Metin Modülünü Değiştir

Bağlantıyı Değiştir

Ardından, Metin Modülü gezinme öğesini açın ve metni bağlantıyla birlikte değiştirin.

Degrade Arka Planını Metin Uzunluğuna Göre Değiştir

Son olarak, bu Metin Modülünün degrade arka planını da değiştirmeniz gerekecektir. İkinci degrade rengini 'rgba(224,43,32,0.62)' olarak değiştirin ve Başlangıç ​​Konumu değerini yeni gezinme öğenizin uzunluğuna göre değiştirin. Oldukça uzun bir gezinme öğeniz varsa, yerine oturduğunu görene kadar Başlangıç ​​Konumu yüzdesini daha yüksek bir değere değiştirmek isteyeceksiniz.

Mobil Sürümü Yeniden Oluştur

Artık Desktop versiyonunu oluşturduğumuza göre, tablet ve mobil versiyonunu da oluşturacağız. Farklı Modüllerin tarzı masaüstü versiyonuyla hemen hemen aynı, ancak sahne arkasında sıralarımızın yapısı tamamen farklı. Eğer onları klonlayacaksanız, her bir modülde yapmanız gereken birçok değişiklik nedeniyle, size Masaüstü versiyonundan herhangi bir modülü klonlamadan onu nasıl sıfırdan oluşturacağınızı göstereceğim.

İlk Gezinme Satırını Yeniden Oluştur

Bu gönderinin başında oluşturduğumuz bölüme başka bir satır ekleyerek başlayın.

Sütun Yapısı

Bu sütun, masaüstü sürümü gibi, ayrıca yalnızca bir sütuna ihtiyaç duyacaktır.

boyutlandırma

Bu satırın boyutlandırması aşağıdaki gibidir:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Bu ayarlar, satırımızın ekranın tüm genişliğini kaplamasını sağlayacaktır.

görünürlük

Ve son olarak, bu satırı masaüstünde devre dışı bırakın çünkü bunun yerine masaüstünde görüntülenecek başka satırlarımız var.

Sayfa Açıklaması için Metin Modülü

Metin Ayarları

Devam edin ve ilk Metin Modülünü satıra ekleyin. Aşağıdaki ayarları Metin alt kategorisine uygulayın:

• Yazı Tipi: Andika
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 13px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1.1em
• Metin Yönü: Merkez

boyutlandırma

Ardından, Boyutlandırma alt kategorisini açın ve '%71' genişlik ve bir orta Modül Hizalama kullanın.

aralık

Son olarak, bu Metin Modülünün üst ve alt dolgusu '10px' olacaktır. Fark edebileceğiniz gibi, bunun yerine merkez hizalamayı tercih ettiğimiz için tablet ve mobil sürümde kenar boşluğu değerlerine gerek yoktur.

Menü Öğesi için Metin Modülü

İçerik Kutusundaki Bağlantı Metni

Mobil sürüm için, bir Bölücü Modüle ihtiyacımız yok, bu yüzden bu adımı atlayacağız. Bunun yerine, oluşturduğumuz önceki Metin Modülünün hemen altına Metin Modülü gezinme öğesini hemen ekleyeceğiz. Bunu yaptıktan sonra, İçerik sekmesindeki İçerik Kutusu bağlantısını içeren metni ekleyin.

Degrade Arka Plan Rengi

Bu Metin Modülü için kullanacağımız degrade arka planı, Masaüstü sürümüyle aynıdır:

• İlk Renk: #FFFFFF
• İkinci Renk: rgba(12,113,195,0.62)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 108deg
• Başlangıç ​​Konumu: %31
• Bitiş Konumu: %21

Bağlantı Metni Ayarları

Metin Alt Kategorisi için aşağıdaki ayarları kullanın:

• Bağlantı Yazı Tipi: Andika
• Bağlantı Yazı Tipi Ağırlığı: Kalın
• Metin Boyutu: 65px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sol

aralık

Masaüstü sürümü gibi, bu gezinme öğesi Metin Modülü, degrade arka planını büyütmek için '80 piksel'lik bir üst ve alt dolguya ihtiyaç duyacaktır.

Görüntü Modülü

Fotoğraf yükleniyor

Son olarak, satırınızdaki son modül olarak bir Görüntü Modülü ekleyin ve istediğiniz bir görüntüyü yükleyin.

İlk Gezinme Satırını Gerektiği Kadar Kez Klonlayın

Aynı şey mobil sürüm için de geçerlidir; az önce oluşturduğunuz satırı, diğer gezinme öğelerini de eklemek için gerektiği kadar kopyalayabilirsiniz. Her yeni gezinme öğesi eklediğinizde değiştirmeniz gereken üç şey vardır, bir göz atalım.

Menü Öğesi için Metin Modülünü Değiştir

Bağlantıyı Değiştir

Değiştirmeniz gereken ilk şey, gezinme öğeniz Metin Modülü'nün İçerik sekmesinin İçerik Kutusu içindeki metin ve bağlantıdır.

Degrade Arka Planını Metin Uzunluğuna Göre Değiştir

Ardından, ikinci degrade rengini de 'rgba(224,43,32,0.62)' olarak değiştirebilir ve başlangıç ​​konumu değerini metninizin uzunluğuna göre değiştirebilirsiniz.

Görüntü Modülünü Değiştir

Son olarak, o satırdaki Görüntü Modülünün görüntüsünü de değiştirebilirsiniz.

Sonuç

Hem masaüstü hem de mobil sürümü oluşturduktan sonra masaüstünde, tablette ve telefonda iyi görünen çarpıcı bir gezinme sayfanız olacak. Sonuca bir göz atalım.

Masaüstünde Sonuç

Mobilde Sonuç

Son düşünceler

Ana sayfanız olarak bir navigasyon sayfası oluşturmak, ziyaretçileriniz üzerinde kesinlikle bir iz bırakacaktır. Ziyaretçilerinizin daha görsel olarak gezinmesine yardımcı olmakla kalmaz, aynı zamanda web sitenizin sunduğu şeyler hakkında daha ayrıntılı bir gizli bakış görmelerini sağlar. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

LanKogal / Shutterstock.com tarafından Öne Çıkan Görsel