Navigasyonun Divi ile 4 açı kalması nasıl
Benzersiz navigasyon tasarımı, herhangi bir web sitesinde biraz avantaj sağlayabilir. Navigasyon, 4 açı olarak kalır, örneğin, izleyicilere web sitesi tasarımınızla etkileşim kurmaları için daha fazla seçenek sunmanın iyi bir yoludur. Aslında, Site boyunca UX tasarımınıza başka bir katman ekler. Bu yazıda, kendi navigasyonunuzun kendi 4 köşenizi nasıl yapacağınızı göstereceğiz. İki farklı stilin nasıl yapılacağını açıklayacağız, ancak bu sadece buzdağının zirvesi. Divi’nin varsayılan öğesi ile navigasyon yapıldığından, ayarlama olasılığı sınırsızdır.
Bu fikrin, navigasyon tasarımının yaklaşan Divi projeniz için 4 şaşırtıcı açı kalmasını sağlamanız için size ilham vereceğini umuyoruz. Başlayalım. Bugün yapacağımız 4 açı navigasyonuna bir göz atalım. İlk stil düğmeyi ekranın kenarına yerleştirir ve diğerlerinin bir iç şamandıra vardır. Stil #1
Aşağıda dolgu: 0px
Z endeksini artırın, kaydırdığımızda bu bölümün diğerlerinin üzerinde olmasını istiyoruz. Bu yüzden o bölümün Z ineksi değerini artırmamız gerekiyor. Bunu yapmak için Gelişmiş Seviye sekmesini açın ve görünürlük ayarlarını açın ve Z indeksini artırın. Dizin Z: 10
3. Bir sonraki satır boyutunu ayarlayın, satır boyutu ayarlarını ayarlamamız gerekir. Tasarım sekmesini açın ve ayarları ayarlayın: Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: hayır
Genişlik:% 100
Maksimum genişlik:% 100
Sayfamızın altında boşluk kalmadığından emin olmak için varsayılan dolguyu satırdan silin, varsayılan dolgu satırını silin. Tasarım sekmesinde, üst ve alt dolgu için boşluk girişini ‘0px’ olarak değiştirin. Modülü sütuna ekleyin. Şimdi soldan sağa başlayarak her sütuna birkaç modül ekleme zamanı. Sütun #1: Şekil
Sütun #2: Düğme
Sütun #3: Sosyal medyayı takip edin
Sütun #4: Düğme
4. Her sütun sütunu stil #1 – Görüntü Modülü Şirket Logosu Ekle Resim Modülünü Sütun #1’de açın. Logonuzu yükleyin (220 piksel ve 100 piksel yüksekliğinde). Logonun ortada olduğu şeffaf bir görüntü olduğundan emin olun. Modülümüzü hizalayın Logonun sayfamızın sol üst köşesine yerleştirilmesini istiyoruz, bu nedenle modülü sola hizalamamız gerekiyor. Görüntü modülündeki Tasarım sekmesini açın ve sol görüntü seviyelendirmesini seçin. Aydınlanma: Sol
Modülün konumunun kalmasını sağlamak için modül konumunu iyileştirmek için özel bir CSS ekleyin, Gelişmiş sekmesini açın ve özel CSS’yi ana öğeye ekleyin. Konum: Sabit; üst: 0; Sol: 0;
Sütun #2 – Düğme Geçerli düğmeyi ekle, 2 #2 sütununda, düğme modülünü ekleyin. İçerik sekmesindeki düğme stili, metni düğmenize ekleyin.
İçerik: Bitcoin için benim Ardından, Tasarım sekmesinde sol düğme hizalamasını seçin.
Aydınlanma: Sol
Bundan sonra, özel düğme stillerini evet olarak taşıyın ve değeri ayarlayın:
Özel Düğme Stili: Evet
Metin Renk Düğmesi: Beyaz, #ffffff
Arka plan rengi Kest: gradyan
Üst renk: #1C076D, Alt Renk: #185475
Gradyan Türü: Doğrusal
Sınır sınır yarıçapı: 7 px
Yazı tipi düğmesi: Tantillium Web (düzen ile aynı)
Düğme simgesini görüntüleyin: Evet
Kest simgesi: trafik konisi
Renk simgesi düğmesi: beyaz, #ffffff
Zorlu simgenin yerleştirilmesi: doğru
Son modül konumunu geliştirmek için özel bir CSS ekleyin, Gelişmiş sekmesini açın ve sayfanın sol alt köşesindeki modül konumunu iyileştirmek için özel CSS ekleyin. Konum: Sabit;
Alt: 0; Sol: 0;
Sütun #3 – Sosyal medyayı takip edin Sosyal medyayı üçüncü sütuna takip etmek için modüller ekleyin. Bu sefer bir sosyal medya takip modülüne ihtiyacımız var. Seçtiğiniz üç sosyal ağ ekleyin.
Ardından, Tasarım sekmesinde doğru modül hizalamasını seçin. Aydınlanma: Doğru Sosyal Medya Simgesi Stili İlk bireysel sosyal ağ ayarlarını açın, tasarım sekmesini açın ve uygun simge ayarlarını değiştirin:
Renk simgesi: beyaz #ffffff Özel simge boyutunu kullanın: evet
Yazı tipi boyutu simgesi: masaüstü; 25px, tablet: 20px, telefon: 20px
Arka plan: Hiçbir şey
Öğe stilini ana pencereye kopyalayın ve yapıştırın Sosyal medyayı takip edin, ilk öğeye doğru tıklayın ve ‘öğe stillerini kopyalayın’ seçeneğini seçin. Ardından, geri kalan iki sosyal ağda sağa tıklayın ve stili yapıştırın. Son modüle özel bir CSS ekleyin, devam eden sekmede, modülü sayfanın sağ üst köşesine yapıştırmak için aşağıdaki CSS kodunu ekleyin: konum: Sabit;
Üst: 0; Sağ: 0; Sütun #4 – Modül Modülü Modül #2’den kopyalama düğmesi ve modül #4’teki düğmenin modül #2’deki düğmeyle tam olarak aynı görünmesi için ayarlayın, ‘Modül Stilleri Kopyala’ seçeneğini kullanacağız. İlk olarak, sütun 2’deki modül düğmesini sağlayın, ‘Modül Stilleri Kopyala’ yı tıklayın, ardından Sütun 4’teki Modül düğmesine yapıştırın.
Şimdi içerik sekmesindeki ayarları değiştirme zamanı. İlk olarak, metin içeriğini değiştirin.
Metin: “Bitcoin için Mayın” dan “Blogumuzu Oku” Ardından, düğme hizalamasını değiştirin. Tesviye: soldan sağa
Son olarak, Gelişmiş sekmesindeki CSS özel kodunu değiştirin: Kodu şu şekilde değiştirin:
Konum: Sabit; Alt: 0;
Sağ: 0;
Sonuçlar
5. İkinci kuvvet örneğini elde etmek için özel CSS’yi değiştirin Birinci kuvvet örneğinde, açılar köşelere yapışır. İkinci bir stil elde etmek için, yalnızca biraz kayan bir açılı modül yapmak için CSS kodunu ayarlamanız gerekir. Dört Modül Modülleri 1’in Gelişmiş sekmesindeki Özel CSS’yi ayarlamanız yeterlidir.
Konum: Sabit; Üst: 1VW; Sol: 1VW; Modül #2 Konum: Sabit;
Alt: 2VW;
Sol: 2VW; Modül #3 Konum: Sabit;
Üst: 3VW;
Sol: 2VW; Modül #4 Konum: Sabit;
Alt: 2VW;
Doğru: 2VW; Nihai sonuç
