Divi ile Navigasyon Ana Sayfası Nasıl Yapılır
Ana sayfanızda uygulayabileceğiniz birçok yaklaşım vardır, ancak web sitenize biraz ekstra dokunuş eklemek istiyorsanız, ana sayfanız doğru yol olabileceğinden bir navigasyon sayfası seçmek. Sık sık görmeyeceksiniz ve ziyaretçilerinize web sitenizden neler bekleyebileceklerine dair net bir manzara sunuyor. Buna ek olarak, bu aynı zamanda ziyaretçilerinizin sağladığınız olağanüstü içeriklerle dolu farklı sayfalarda görsel olarak gezinmesine yardımcı olacaktır. Divi ile nasıl bitirebileceğinizi, stil ve zarafetle nasıl bitirebileceğinizi göstermek için, bu yazıda nasıl geri getireceğinizi göstereceğimiz tasarımı yaptık. İki versiyon olacak; Masaüstü sürümü ve tabletler ve cep telefonları için uygun. Öğreticiye girmeden önce, sonuç sonucuna bakalım.
Masaüstündeki sonuçlar masaüstünde böyle görüneceğimiz sonuçlar:
Sıraları yeniden düzenleyin, yukarıdaki sonuçların önizlemesinde dikkat edebileceğiniz gibi, her navigasyon öğesinin birkaç farklı detayla az çok aynı tasarımı vardır. Yapmak istediğiniz her gezinme öğesi için ayarların çoğu aynıdır. Bu nedenle size ilk satırı nasıl ayrıntılı olarak yapabileceğinizi göstereceğiz ve ardından sayfaya eklemek istediğiniz diğer gezinme öğelerinde nasıl değişiklik yapabileceğinizi göstereceğiz. İlk sütun yapısı, yeni eklediğiniz satır için tam geniş bir sütun seçin. Herhangi bir modül eklemeden önce, satır ayarlarının zaten var olduğundan emin olacağız, bu yüzden devam edin ve satır ayarlarını açın. Arka plan görüntüleri İçerik sekmesinde, yapacağımız ilk şey satırınıza bir arka plan görüntüsü eklemektir. En iyi sonuçları vereceği için ‘1400px’ ve yükseklik ‘934px’ genişliğine sahip görüntüleri kullanmanızı öneririz. Ayrıca, görüntüyü ‘tekrarlama’ üzerine koyduğunuzdan emin olun. Daha sonra hizalama, tasarım sekmesine devam edin ve satırınıza doğru seviyeyi ekleyin. Bunu yaparak, açıklamalar ve bağlantılar eklemek için ekranınızın sol tarafında yeterli alan yaratacaksınız. Bir sonraki yapıştırıcı, boyutlandırma alt kategorisini açın, ‘Özel Genişlik Kullan’ seçeneğini etkinleştirin ve ‘%100’ genişlik yüzdesini kullanın. Bir sonraki mesafe, her navigasyon öğesi arasında biraz beyaz boşluk eklemek istiyoruz, bu yüzden satıra üst ve alt marj ‘5 piksel’ ekleyeceğiz. Son fakat en az görünürlük, bu çizgiyi cep telefonları ve tabletlerde devre dışı bırakmak istiyoruz, çünkü bu yazıda tablet ve cep telefonlarıyla eşleşecek başka satırlar yapacağız. , Metin modülünü önce satır sütununa ekleyebilir ve tasarım sekmesinde alt kategori metni için aşağıdaki ayarları kullanabilirsiniz: Metin yazı tipi: andika Metin yazı tipi ağırlığı: normal
Metin Boyutu: 13px
Metin rengi: #000000
Yüksek çizgi metin: 1.1em
Metin Oryantasyonu: Sol
Yapıştırıcı aşağı kaydırın, boyut alt kategorisini açın ve ‘%18’ genişliğini ekleyin. Bu genişlik, negatif bir sol kenar boşluğu ekledikten sonra metin modülümüzün arka plan görüntüsümüzden geçmemesini sağlayacaktır.
Önceki adımda belirtildiği gibi, metin modülünün satırın arka planıyla örtüşmeden satırımızın sol tarafında olmasını istiyoruz. Ayrıca, satırın üstü ve metin modülünün başlangıcı arasında biraz boşluk olmak istiyoruz, bu yüzden üst kenar boşluklarından bazılarını da kullanıyoruz. Üst kenar boşluğu: 150 piksel Sol kenar boşluğu: -20px
Üst dolgu: 10 piksel
Dolgu Alt: 10 piksel
Daha fazla görünürlük bölücü modülü, metin modülünün hemen altına bölücü modülünü devam ettirin ve ekleyin. Görünürlük alt kategorisinde, ‘Display bölücü’ seçeneğini etkinleştirin.
O zaman renk tasarım sekmesine geçin ve bir bölücü rengi olarak ‘#ffffff’ ekleyin. Bir sonraki stil, bölücü stili olarak ‘katı’ ve bölücü konumu olarak ‘üst’ seçin. Son yapıştırıcı, alt kategori boyutu için aşağıdaki ayarların uygulanmasını sağlayın: Bölücü ağırlığı: 5px Yükseklik: 23px
Genişlik:% 47
Modül hizalaması: sol
Bölücü modülüyle bitirdikten sonra içerik kutusundaki metin menüsü öğesinin metin modülü, devam edin ve hemen altına başka bir metin modülü ekleyin. Bu metin modülü navigasyon öğemiz olacak. Ayarları açın, metni girin ve bağlantıyı oraya ekleyin. Gradyan Arka Plan rengi İç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ü: 108 derece
Başlangıç Pozisyonu:% 31
Son pozisyon:% 21
Bağlantının metnini ayarlayın Ardından, Tasarım sekmesini açın ve metin alt kategorisi metninin metnine aşağıdaki ayarların uygulanmasını sağlayın:
Yazı tipi bağlantısı: andika
Bağlantıların yazı tipi ağırlığı: kalın Bağlantı yazı tipi stili: büyük harf ve alt hat
Hat Çizgisi Stili: Katı
Bağlantı Metin Boyutu: 100 piksel
Bağlantı metninin rengi: #000000
Satır hattı: 1em
Bu metin modülünün mesafesinin ekranın sol tarafında da görünmesi gerekiyor, bu yüzden sol kenar boşluğunu ekliyoruz. Ayrıca, bölücü modülü ile bu metin modülü arasındaki mesafenin daha küçük olmasını istiyoruz, negatif kenar boşluğunun girdiği yer burası. Orta yatay hizalamayı yapmak için daha düşük bir marj da ekleyeceğiz. Ve son olarak, gradyanın arka planının daha büyük olmasını istiyoruz, bu yüzden üst ve alt dolgu kullanıyoruz.
Üst Marj: -33px
Alt kenar boşluğu: 250 piksel Sol kenar boşluğu: -20px
Üst dolgu: 80px
Dolgu Alt: 80 piksel
Navigasyon sayfanızdaki farklı navigasyon öğelerinin ihtiyaç duyduğu sıklıkta ilk navigasyon satırı klonlanması, az çok aynı ayar olacaktır. Bu yüzden ihtiyacınız kadar çok satır klonlanmanızı ve daha sonra ayrıntılı değişiklikler yapmanızı öneririz. Değiştirmeniz gereken üç şey var, bakalım. Yapmanız gereken ilk satır satırının arka planını değiştirin, yinelenen arka plan görüntüsünüzü değiştirmek. Bir kez daha, en iyi sonuçları elde etmek için ‘1400px’ genişliği ve ‘943px’ yüksekliğine sahip resimler kullandığınızdan emin olun. Menü öğesi için metin modülünü değiştirin bağlantıyı değiştirin, ardından metin modülünün navigasyon öğesini açın ve metnin ve metnin navigasyon öğesini değiştirin ve Bağlantı.
Gradyanın arka planını metnin son uzunluğuna göre değiştirin, bu metin modülünün gradyanının arka planını da değiştirmeniz gerekir. İkinci gradyan rengini ‘RGBA (224,43,32.0.62)’ olarak değiştirin ve yeni navigasyon öğenizin uzunluğuna göre başlangıç konum değerini değiştirin. Yeterince uzun bir navigasyon öğeniz varsa, başlangıç konumunun yüzdesini, yerine girdiğini görene kadar daha yüksek bir değere dönüştürmek istersiniz.
Bir masaüstü sürümü yaptıktan sonra hücresel sürümü yeniden yapın, ayrıca bir tablet ve hücresel versiyon oluşturacağız. Farklı modül stili masaüstü sürümüyle neredeyse aynıdır, ancak perde arkasında sıra yapımız tamamen farklıdır. Klonlamak istiyorsanız, her modül için yapmanız gereken birçok değişiklik nedeniyle, sadece masaüstü sürümünden herhangi bir modülü klonlamadan baştan nasıl yapacağınızı göstereceğim.
Metin Modülü Metin Ayarları sayfasının açıklaması için lütfen ve ilk metin modülünü satıra ekleyin. Metin alt kategorileri için aşağıdaki ayarları oluşturun:
Metin yazı tipi: andika
Metin yazı tipi ağırlığı: normal
Metin Boyutu: 13px Metin rengi: #000000 Yüksek çizgi metin: 1.1em
Metin Oryantasyonu: Orta
Ardından, boyutlandırma alt kategorisini açın ve ‘%71′ genişliğini ve orta modül hizalamasını kullanın.
Son mesafe, bu metin modülü üst ve alt dolgu ’10px’ gerektirir. Gördüğünüz gibi, orta seviyeyi seçtiğimiz için tablette ve hücresel versiyonlarda marj değerlerine gerek yoktur.
Metin Modülü Metin Menüsü Öğesi İçerik kutusundaki Cellular sürümü için bir bölücü modülüne ihtiyacımız yok, böylece bu adımı geçeceğiz. Bunun yerine, derhal yaptığımız önceki metin modülünün hemen altına metin modülü gezinme öğesini ekleyeceğiz. Bunu yaptıktan sonra, içerik sekmesindeki içerik kutusuna bir bağlantı ile metni ekleyin.
Bu metin modülü için kullanacağımız gradyan arka plan gradyan 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ü: 108 İlk Çekme:% 31 Son pozisyon:% 21
Metin Ayarları Bağlantı Metin alt kategorileri için aşağıdaki ayarlardan yararlanır:
Yazı tipi bağlantısı: andika
Bağlantıların yazı tipi ağırlığı: kalın
Metin Boyutu: 65px
Metin rengi: #000000
Hat yüksekliği metni: 1em Metin Oryantasyonu: Sol
Masaüstü sürümü gibi mesafe, bu gezinme öğesi metin modülü, daha büyük bir gradyan arka plan yapmak için üst ve alt dolgu ’80px’ gerektirir.
Görüntü görüntü modülünü son yükleyin, görüntü modülünü satırınızdaki son modül olarak ekleyin ve resim seçimini yükleyin.
İlk navigasyon satırı klonlaması, hücresel versiyon için aynı şeydir; Diğer navigasyon öğelerini de eklemek için gerektiği kadar yaptığınız sıraları klonlayabilirsiniz. Yeni navigasyon öğeleri eklediğinizde değiştirmeniz gereken üç şey var, bakalım. Menü öğesi için Metin Modülünü Değiştirin Değiştirme, değiştirmeniz gereken ilk şeyi değiştir, Navigasyon öğenizin metin modülündeki içerik sekmesindeki içerik kutusundaki metin ve bağlantıdır.
Gradyanın arka planını daha sonra metnin uzunluğuna göre değiştirin, ikinci gradyanın rengini ‘RGBA (224,43,32,0,62)’ olarak değiştirebilir ve başlangıç konum değerini de değiştirebilirsiniz. Metin.
Son görüntü modülünü değiştirin, görüntü modülü görüntüsünü satırdaki değiştirebilirsiniz.
Sonuçlar Bir masaüstü ve hücresel sürüm oluşturduktan sonra, masaüstü, tablet ve cep telefonunda iyi görünen inanılmaz bir navigasyon sayfanız olacak. Nihai sonuca bakalım. Masaüstündeki sonuçlar Hücresel sonuçlar
