Divi ile Duyarlı Simge Gezinme Ana Sayfası Nasıl Oluşturulur

WordPress ile bir web sitesi oluştururken, insanlar web sitenizi doğrudan ziyaret ettiğinde hangi sayfanın önce geleceğini her zaman seçebilirsiniz. Çoğu web sitesi yaratıcısı, ziyaretçileri hemen ana sayfalarına gönderir. Ancak, ana sayfanız olarak bir simge gezinme sayfası ekleyerek ziyaretçilerin web sitenizde ilk olarak hangi sayfaya gideceklerini seçmelerine olanak tanıyan başka bir yaklaşım da seçebilirsiniz. Kullanıcılar seçtikleri sayfaya tıkladığında, sayfanın üst kısmında diğer sayfalara gitmelerine olanak tanıyan bir menü çubuğu ile normal web sitesi deneyimine tekrar sahip olacaklar. Bu, ilk etkileşimden sonra onu geçtikten sonra bu simge gezinme sayfasına geri dönmek zorunda kalmayacakları anlamına gelir.

Bu eğitimde, tüm ekran boyutlarında iyi görünecek modern ve %100 duyarlı bir simge gezinme ana sayfasının nasıl oluşturulacağını göstereceğiz. Ayrıca bunu web sitenizin ana sayfası yapmanıza ve ilk etkileşimde birincil menü çubuğunu ve altbilgiyi kaldırmanıza yardımcı olacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Yeni Sayfa Oluştur

Youtube Kanalımıza Abone Olun

Yeni Sayfa Ekle

WordPress web sitenize yeni bir sayfa ekleyerek başlayın.

Sayfanıza Bir Başlık Verin ve Yayınlayın

Sayfanıza bir başlık verin ve sayfayı hemen yayınlayın.

Sayfayı Ana Sayfa Olarak Ayarla

Web Sitesi Okuma Ayarlarına Git

Ardından, web sitenizin okuma ayarlarına gidin.

Yeni Sayfayı Ana Sayfa Olarak Ayarla

Burada, web sitemizin ana sayfası olarak yeni simge gezinme sayfasını seçeceğiz.

Simge Gezinme Sayfasında Birincil Menü Çubuğunu ve Altbilgiyi Gizle

Simge Gezinme Sayfasına Geri Dönün ve Divi'nin Görsel Oluşturucusunu Etkinleştirin

Artık ana sayfayı seçtiğimize göre, simge gezinme sayfamızı oluşturmaya başlayabiliriz. Oluşturduğunuz sayfaya geri dönün ve Divi's Visual Builder'a geçin.

Bunu yaptığınızda, üç olasılık elde edeceksiniz. Sıfırdan oluşturmaya başlayabilir, önceden hazırlanmış bir düzen seçebilir veya mevcut bir sayfayı kopyalayabilirsiniz. İlk seçeneği seçin.

Yalnızca Bu Sayfada Birincil Menü Çubuğunu ve Altbilgiyi Gizlemek için Özel CSS Ekle

Bu bir gezinme sayfası olduğundan, odağın manuel olarak oluşturduğumuz menü öğelerinde olmasını istiyoruz. Bu nedenle, bu sayfadaki birincil menü çubuğunu ve altbilgiyi gizleyeceğiz. İnsanlar web sitesine devam ettiklerinde, birincil menü çubuğunu ve altbilgiyi geri alacaklar.

#main-header, #main-footer {
display: none;}

Haydi Tasarlamaya Başlayalım!

1. Bölüm Ekle

Divi ile duyarlı tasarımımızı oluşturmaya başlayalım! İlk normal bölümü ekleyin.

Satır ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarında 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

• Bu Satırı Tam Genişlikte Yap: Evet

Resim Modülü Ekle

Şirket Logosu Yükle

Bu satırda ihtiyacımız olan ilk modül bir Görüntü Modülüdür. İnsanların doğru web sitesine geldiklerini bilmeleri için şirket logonuzu yükleyin.

hizalama

Ardından, tasarım sekmesinde görüntü hizalamasını değiştirin. 'Görüntüyü Mobilde Her Zaman Ortala' seçeneğini devre dışı bıraktığınızdan emin olun.

• Görüntü Hizalama: Sol

aralık

Sonraki bazı özel alt kenar boşluğu ekleyin.

• Alt: 10vw (Masaüstü), 20vw (Tablet ve Telefon)

Metin Modülü Ekle

H1 İçeriği Ekle

İhtiyacımız olan bir sonraki modül bir Metin Modülü. Seçtiğiniz bazı H1 içeriğini ekleyin.

H1 Metin Ayarları

Tasarım sekmesindeki H1 metin ayarlarını değiştirerek devam edin.

• Başlık Yazı Tipi: Didact Gothic
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Sol
• Başlık Metni Rengi: #333333
• Başlık Metni Boyutu: 5vw (Masaüstü), 6vw (Tablet), 7vw (Telefon)
• Başlık Çizgisi Yüksekliği: 0.8em

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik: %68 (Masaüstü), %80 (Tablet), %88 (Telefon)
• Modül Hizalama: Sol

Bölücü Modülü Ekle

görünürlük

Bu satırda ihtiyacımız olan sonraki ve son modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

Ardından tasarım sekmesine gidin ve simge rengini değiştirin.

• Renk: #333333

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 10px
• Genişlik: %8 (Masaüstü), %20 (Tablet), %25 (Telefon)
• Modül Hizalama: Sol

1. Bölüm Ekle

Bir sonraki bölüme! Bir öncekinin altına normal bir bölüm ekleyin.

Satır ekle

Sütun Yapısı

Bölüme yeni bir satır ekleyerek devam edin.

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

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

aralık

Ardından, boşluk ayarlarına gidin ve farklı ekran boyutlarında bazı değişiklikler yapın.

• Alt Dolgu: 0.2vw
• Sol Dolgu: 4vw (Masaüstü), 2vw (Tablet), 1vw (Telefon)
• Sağ Doldurma: 25vw (Masaüstü), 2vw (Tablet), 1vw (Telefon)
• Sütun 1 Sağ Dolgu: 0.2vw
• Sütun 2 Sol Dolgu: 0.1vw
• Sütun 2 Sağ Dolgu: 0.1vw
• Sütun 3 Sol Dolgu: 0.2vw

Özel CSS

Gelişmiş sekmesindeki ana öğeye tek bir CSS kodu satırı ekleyerek, tablet ve telefonda bile tüm sütunların yan yana görünmesini sağlıyoruz.

display: flex;

Sütun 1'e Blurb Modülü Ekle

Başlık ekle

Artık modüllerimizi eklemeye başlayabiliriz! İlk sütuna yeni bir Blurb Modülü ekleyin ve bir başlık girin.

Simge Seç

Ardından, istediğiniz bir simgeyi seçin.

Bağlantı

Modüle bir bağlantı da ekleyin. Ziyaretçileri ziyaret etmek istedikleri sayfaya yönlendirecek doğru URL'yi kullandığınızdan emin olun.

• Modül Bağlantı URL'si: https://www.yourwebsite.com/homepage

Degrade Arka Plan

Ardından bir degrade arka planı ekleyin.

• Renk 1: #4b42ff
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %60
• Bitiş Konumu: %60

Arka plan görüntüsü

Bir arka plan resmi ile birlikte. Aşağıdaki resmi masaüstünüze kaydedin:

Ve aşağıdaki arka plan ayarlarıyla birlikte kullanın:

• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok

Simge Ayarları

Tasarım sekmesindeki simge ayarlarını değiştirerek devam edin.

• Simge Rengi: #ffffff
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 4vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi: Didact Gothic
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Başlık Harf Aralığı: -2px
• Başlık Satırı Yüksekliği: 0em

aralık

Ve farklı ekran boyutları için bazı özel üst ve alt dolgu değerleri ekleyin.

• Üst Dolgu: 9vw (Masaüstü ve Tablet), 12vw (Telefon)
• Alt Dolgu: 9vw (Masaüstü ve Tablet), 12vw (Telefon)

Blurb Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki Blurb Modülünü değiştirmeyi bitirdikten sonra, devam edip modülü iki kez klonlayabilirsiniz. Kopyaları satırın kalan sütunlarına yerleştirin.

Bulanık İçeriği Değiştir

Elbette, her bir kopyanın başlığını değiştirmeniz gerekecek.

Bulanıklık Simgelerini Değiştir

Simgelerle birlikte.

Bulanık Bağlantıları Değiştir

Yeni Blurb Modüllerini, doğru sayfaya yönlendiren benzersiz bir URL ile eşleştirin.

• Modül Bağlantı URL'si: https://www.yourwebsite.com/about

Bulanık Degrade Arka Planlarını Değiştir

Ardından, her iki kopyanın degrade arka planlarının ilk renklerini değiştirin.

• Renk 1: #f9f9f9

• Renk 1: #ff445d

Sütun 2'deki Blurb Modülünün Simge ve Metin Renklerini Değiştirme

Ve Blurb Module'ün simge ve metin renklerini yeni degrade arka plan rengiyle eşleştirin.

• Simge Rengi: #000000
• Başlık Metin rengi: #000000

Tüm Satırı Klonla

Satırı tamamladığınızda, tamamen klonlayabilirsiniz.

Sütun 2'deki Blurb Modülünü Klonla

2. sütundaki Blurb Modülünü klonlayın.

Açık Arka Plan Bulanıklık Modüllerini Sütun 1 ve Sütun 3'e Yerleştirin

Ve açık renkli Blurb Modüllerini sütun 1 ve 3'e yerleştirin.

Renk-Arka Plan Bulanıklığı Modülünü Sütun 2'ye Yerleştirin

Renkli arka plan Bulanıklık Modüllerinden birini ikinci sütuna taşıyın.

Kalan Bulanıklık Modülünü Kaldır

Ve kalan Blurb Modülünü silin.

Bulanık İçeriği Değiştir

Yine, her Blurb Modülünün başlıklarını değiştirmeniz gerekecektir.

Bulanıklık Simgelerini Değiştir

Simgelerle birlikte.

Bulanık Bağlantıları Değiştir

Ve bağlantılar da.

• Modül Bağlantı URL'si: https://www.yourwebsite.com/shop

Sütun 2'deki Blurb Modülünün Gradyan Arka Planını Değiştirin

Son olarak, 2. sütundaki Blurb Modülünün degrade arka planının ilk rengini değiştirin.

• Renk 1: #000000

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Son düşünceler

Bu gönderide, bir simge gezinme sayfasını nasıl oluşturacağınızı ve ana sayfanız olarak nasıl kullanacağınızı gösterdik. Bu yaklaşım, ziyaretçilerinizin web sitesinin içeriğini görmeden önce hangi sayfaya gideceklerini seçmelerine olanak tanır. Birisi bir menü öğesini tıkladığında, birincil menü çubuğunda tekrar normal gezinme deneyimini yaşar. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!