Divi ile 4 Köşe Sabit Navigasyon Nasıl Oluşturulur

Benzersiz bir gezinme tasarımı, herhangi bir web sitesine biraz avantaj sağlayabilir. Örneğin 4 köşeli sabit gezinme, izleyicilere web sitenizin tasarımıyla etkileşim kurmaları için daha fazla seçenek sunmanın iyi bir yoludur. Aslında, site genelinde UX tasarımınıza başka bir katman ekler.

Bu yazıda, kendi 4 köşeli sabit navigasyonunuzu nasıl oluşturacağınızı göstereceğiz. Biraz farklı iki stilin nasıl oluşturulacağını açıklayacağız, ancak bunlar buzdağının sadece görünen kısmı. Navigasyon Divi'nin yerleşik öğeleriyle oluşturulduğundan, kişiselleştirme olanakları sonsuzdur.

Bu fikrin, yaklaşan Divi projeleriniz için harika 4 köşeli sabit navigasyon tasarımları yaratmanız için size ilham vereceğini umuyoruz.

Başlayalım.

Önizlemeler

Bugün oluşturacağımız 4 köşeli navigasyona hızlıca bir göz atalım. İlk stil, düğmeleri ekranın sınırına yerleştirir ve diğerinde bir iç şamandıra bulunur.

Stil #1

Stil #2

Youtube Kanalımıza Abone Olun

Yeni Boş Sayfa Oluştur

Yeni bir sayfa açın ve Divi ile düzenleme yapmadan önce Sayfa Nitelikleri'nde 'Boş Sayfa'yı seçin. Bu yapıldıktan sonra Divi Builder'ı etkinleştirin.

Cryptocurrency Açılış Sayfası Düzeni Yükle

Divi Visual Builder'a girdikten sonra, Premade Layouts sekmesinden Cryptocurrency Layout Pack'in açılış sayfasını yükleyin.

2. 4 Sütunlu Satırlı Yeni Bir Bölüm Oluşturun

4 Sütunlu Satırlı Yeni Bir Normal Bölüm Ekle

4 gezinme öğesini oluşturmak için 4 sütunlu bir satıra sahip yeni bir bölüme ihtiyacımız var. Sayfanın sonuna kadar kaydırın ve yeni bir normal bölüm ekleyin. Ardından, eşit büyüklükte 4 sütun içeren bir satır seçin.

Bölümün Varsayılan Dolgusunu Kaldır

Modül eklemeden önce, üst ve alt kısımlara '0px' ekleyerek bölümün dolgusunu çıkardığınızdan emin olun. Ayrıca, bölümün arka plan rengi veya gradyan arka planı olmadığını iki kez kontrol edin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Z Endeksini Artırın

Kaydırırken bu bölümün diğerlerinin üzerinde olmasını istiyoruz. Bu yüzden bölümün Z İndeksi değerini arttırmamız gerekiyor. Bunu yapmak için Gelişmiş Sekmesini açın ve görünürlük ayarlarına gidin ve Z Endeksini artırın.

• Z İndeksi: 10

3. Satırın Boyutlandırmasını Ayarlayın

Ardından, satırın boyutlandırma ayarlarını yapmamız gerekiyor. Tasarım sekmesini açın ve ayarları buna göre yapın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Hayır
• Genişlik: %100
• Maksimum Genişlik: %100

Satırın Varsayılan Dolgusunu Kaldır

Sayfamızın altında boşluk kalmadığından emin olmak için satırın varsayılan dolgusunu kaldırın. Tasarım sekmesinde, hem üst hem de alt dolgu için Aralık girişlerini '0px' olarak değiştirin.

Sütunlara Modüller Ekleyin.

Şimdi her sütuna soldan sağa doğru bazı modüller ekleme zamanı.

• Sütun #1: Resim
• Sütun #2: Düğme
• Sütun #3: Sosyal Medya Takip
• Sütun #4: Düğme

4. Her Sütunu Stillendirin

Sütun #1 – Görüntü Modülü

Şirket Logosu Ekle

1. sütundaki Görüntü Modülünü açın. Logonuzu yükleyin (220 piksel genişlik ve 100 piksel yükseklik). Logonun ortalandığı yerin şeffaf bir resim olduğundan emin olun.

Modülü Hizala

Logonun sayfamızın sol üst köşesine yerleştirilmesini istiyoruz, bu yüzden modülü sola hizalamamız gerekiyor. Görüntü Modülünde Tasarım sekmesini açın ve sol Görüntü Hizalama'yı seçin.

• hizalama: sol

Modülün Konumunu Düzeltmek için Özel CSS Ekleyin

Modülün konumunun sabit kaldığından emin olmak için Gelişmiş sekmesine gidin ve Ana Öğeye Özel CSS ekleyin.

position: fixed;
top: 0;
left: 0;

Sütun #2 – Düğme

Düğme Ekle

Şimdi, Sütun #2'ye bir Düğme Modülü ekleyin.

Düğme Stili

İçerik sekmesinde, düğmeniz için metin ekleyin.

• İçerik Metni: Bitcoin için Maden

Ardından, Tasarım sekmesinde, Sol Düğme Hizalama'yı seçin.

• hizalama: sol

Bundan sonra, Özel Düğme Stillerini evet'e kaydırın ve değerleri buna göre ayarlayın:

• Özel Düğme Stilleri: Evet
  • Düğme Metin Boyutu: Masaüstü; 25px, Tablet: 20px, Telefon:20px
  • Düğme Metin Rengi: Beyaz, #ffffff
  • Düğme Arka Plan Rengi: Gradyan
    • Üst renk: #1c076d, Alt renk: #185475
    • Gradyan Türü: Doğrusal
  • Düğme Sınır Yarıçapı: 7 piksel
  • Düğme Yazı Tipi: Tantilium Web (düzenle aynı)
  • Düğme Simgesini Göster: Evet
  • Düğme Simgesi: Trafik Konisi
  • Düğme Simge Rengi: Beyaz, #ffffff
  • Düğme Simge Yerleşimi: Sağ

Modülün Konumunu Düzeltmek için Özel CSS Ekleyin

Son olarak, Gelişmiş sekmesini açın ve modülün konumunu sayfanın sol alt köşesine sabitlemek için Özel CSS ekleyin.

position: fixed;
bottom: 0;
left: 0;

Sütun #3 – Sosyal Medya Takip

Sosyal Medya Takip Modülü Ekleyin

Üçüncü sütuna geçin. Bu sefer bir Sosyal Medya Takip Modülüne ihtiyacımız olacak. Seçtiğiniz üç sosyal ağ ekleyin.

Ardından, Tasarım sekmesinde, sağ Modül Hizalama'yı seçin.

• Hizalama: Sağ

Sosyal Medya Simgelerini Stillendirin

İlk sosyal ağın bireysel ayarlarını açın, tasarım sekmesine gidin ve simge ayarlarını buna göre değiştirin:

• Simge Rengi: Beyaz #ffffff
• Özel Simge Boyutunu Kullan: Evet
  • Simge Yazı Tipi Boyutu: Masaüstü; 25px, Tablet: 20px, Telefon:20px
• Arkaplan: Yok

Öğe Stillerini Kopyala ve Yapıştır

Ana Sosyal Medya Takip penceresine dönün, ilk öğeye sağ tıklayın ve 'Öğe Stillerini Kopyala'yı seçin. Ardından kalan iki sosyal ağa sağ tıklayın ve stilleri yapıştırın.

Modüle Özel CSS Ekleme

Son olarak, Gelişmiş Sekmesinde, modülün sayfanın sağ üst köşesine yapışmasını sağlamak için aşağıdaki CSS kodunu ekleyin:

position: fixed; 
top: 0; 
right: 0;

Sütun #4 – Düğme

Modül #2'den Modül Stillerini Kopyalayın ve Ayarlayın

Modül #4'teki düğmenin Modül #2'deki düğmeyle tamamen aynı görünmesini sağlamak için 'Modül Stillerini Kopyala' seçeneğini kullanacağız. İlk olarak, 2. sütundaki Düğme Modülüne sağ tıklayın, 'Modül Stillerini Kopyala'ya tıklayın ve ardından 4. sütundaki Düğme Modülüne yapıştırın.

Şimdi İçerik sekmesindeki ayarları değiştirme zamanı. İlk olarak, metin içeriğini değiştirin.

• Metin: “Bitcoin için Maden”den “Blogumuzu Okuyun”a

Ardından, Düğme Hizalamasını değiştirin.

• Hizalama: Soldan sağa

Son olarak, Gelişmiş sekmesindeki Özel CSS kodunu değiştirin:

• Kodu şu şekilde değiştirin:

position: fixed; 
bottom: 0; 
right: 0;

Sonuç

5. İkinci Stil Örneğine Ulaşmak için Özel CSS'yi Değiştirin

İlk stil örneğinde, köşeler köşelere yapıştırılmıştır. İkinci stili elde etmek için, köşe modüllerinin biraz içe doğru kaymasını sağlamak için CSS kodunu ayarlamanız yeterlidir.

Dört Modülün Tümünün Gelişmiş Sekmesinde Özel CSS'yi Basitçe Ayarlayın

Modül #1

position: fixed; 
top: 1vw; 
left: 1vw;

Modül #2

position: fixed; 
bottom: 2vw; 
left: 2vw;

Modül#3

position: fixed; 
top: 3vw; 
left: 2vw;

Modül#4

position: fixed; 
bottom: 2vw; 
right: 2vw;

Son sonuç

Çözüm

Bu öğretici, Divi'yi kullanarak 4 köşeli sabit gezinme ile yapabileceklerinizin yalnızca yüzeyini gözden geçirir. Sonuç olarak, sağladığımız Özel CSS'yi koruduğunuz sürece her sütun için herhangi bir modülü seçebilirsiniz. Bu yaratıcı öğreticinin, kendi 4 köşeli sabit navigasyonunuzu oluşturmanız için size ilham vereceğini umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!