Divi ile Duyarlı Bir Simge Gezinme Ana Sayfası Nasıl Yapılır
WordPress ile bir web sitesi oluşturduğunuzda, insanlar web sitenizi doğrudan ziyaret ettiğinde her zaman hangi sayfaların göründüğünü seçebilirsiniz. Çoğu web sitesi üreticisi ziyaretçileri hemen ana sayfalarına gönderir. Ancak, ziyaretçilerin ana sayfanız olarak simge navigasyon sayfaları ekleyerek ilk kez ziyaret ettiklerini ziyaret edenleri seçmelerine izin veren başka bir yaklaşım da seçebilirsiniz. İnsanlar seçtikleri sayfayı tıkladıktan sonra, sayfanın üst kısmındaki menü çubuğuyla başka bir sayfaya gitmelerine izin veren normal bir web sitesi deneyimine sahip olacaklar. Bu, ilk etkileşimden sonra geçtikten sonra bu simgenin navigasyon sayfasına geri dönmeleri gerekmediği anlamına gelir.
Bu öğreticide, tüm ekran boyutlarında iyi görünecek modern bir simge navigasyon ana sayfası ve% 100 duyarlı nasıl yapılacağını göstereceğiz. Ayrıca bunu web siteniz ana sayfası olarak yapmanıza ve ilk etkileşimde ana menü bıçaklarını ve altbilgilerini silmenize yardımcı olacağız. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım.
Tasarlamaya başlayalım! Bölüm #1 ekleyin, divi ile duyarlı tasarımlar yapmaya başlayalım! İlk normal bölümü ekleyin. Sütun yapısı sıraları ekleyin Aşağıdaki sütun yapısını kullanarak yeni satırlar ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarında ‘Bu satır tam genişliği yap’ seçeneğini etkinleştirin. Bu çizgiyi tamamen genişletin: evet
Görüntü Modülü Ekle Logo Şirketi Bu satırda ihtiyacımız olan ilk modül görüntü modülüdür. İnsanlar doğru web sitesini açtıklarını bilerek şirketinizin logosunu yükleyin. Daha sonra uyum, tasarım sekmesindeki görüntü seviyesini değiştirin. ‘Daima Hücresel Odaklanın’ seçeneklerini devre dışı bıraktığınızdan emin olun. Görüntü Tesviye: Sol
Mesafe Bir sonraki özel kenar boşluklarından bazılarını ekleyin. Kırık: 10VW (masaüstü), 20VW (tablet ve cep telefonu) Metin Modülünü Ekle İhtiyacımız olan bir sonraki H1 içeriğini ekleyin 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 eder. Yazı tipi başlığı: Didact Gothic Başlık Mektubu Ağırlığı: Kalınlık
Tesisat Metin Başlığı: Sol
Başlık Metin Rengi: #333333
Başlık Metin Boyutu: 5VW (Masaüstü), 6VW (Tablet), 7VW (Telefon)
Yüksek çizgi başlığı: 0.8em
Yapıştırıcı Bir sonraki boyut ayarlarını değiştirin.
Genişlik:% 68 (masaüstü),% 80 (tablet),% 88 (cep telefonu) Modül hizalaması: sol
Bir sonraki ve son olarak bu satırda ihtiyacımız olan görünürlük bölücü modülünü ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet O zaman renk tasarım sekmesini açın ve simgenin rengini değiştirin.
Renk: #333333 Yapıştırıcı değişimi de modül boyutunu ayarlayın.
Bölücü ağırlığı: 10 piksel Genişlik:% 8 (masaüstü),% 20 (tablet),% 25 (cep telefonu)
Modül hizalaması: sol
Bir sonraki bölüme Bölüm 1 ekleyin! Bir öncekinin altındaki normal bölümü ekleyin.
Sütun yapısı sıraları ekleme, o bölüme yeni satır ekleyerek devam edin. Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe o zaman, alan ayarlarını açık ve çeşitli ekran boyutlarında bazı değişiklikler yapın.
Dolgu Alt: 0.2VW Sol dolgu: 4VW (masaüstü), 2vw (tablet), 1VW (telefon)
Sağ dolgu: 25VW (masaüstü), 2vw (tablet), 1VW (telefon)
Sütun 1 Dolgu Sağ: 0.2VW
Sütun 2 Sol dolgu: 0.1vw
Sütun 2 Dolgu Sağ: 0.1VW
Solun 3 Sol: 0.2VWCSS Özellikle, Gelişmiş sekmesindeki ana öğeye bir satır CSS kodu ekleyerek, tabletlerde ve cep telefonlarında bile tüm sütunların yan yana görünmesini sağlıyoruz. Ekran: Flex;
Blurb Modülünü Sütun 1’e ekleyin Başlık ekleyin Şimdi modülümüzü eklemeye başlayabiliriz! İlk sütuna yeni bir bulanıklık modülü ekleyin ve başlığı girin.
Bir simge seçin, sonra istediğiniz simgeyi seçin.
Renk 2: RGBA (255,255,255.0) Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 60
Son pozisyon:% 60
Arka plan görüntüsü ile birlikte arka plan görüntüsü. Aşağıdaki resmi masaüstünüze kaydedin:
Ve aşağıdaki arka plan ayarlarıyla bir kombinasyon halinde kullanın:
Arka Plan Görüntü Pozisyonu: Orta Arka plan görüntüsünün tekrarlanması: Tekrar yok Tasarım sekmesindeki simge ayarlarını değiştirerek simge ayarlarına devam edin.
Ikon Color: #ffffff
Simge Yerleştirme: Üst Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 4VW (masaüstü), 6VW (tablet), 8VW (telefon)
Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı tipi başlığı: Didact Gothic
Hizalama Metin Başlığı: Orta Başlık metin rengi: #ffffff
Başlık Metin Boyutu: 2VW (masaüstü), 3VW (tablet), 4VW (telefon)
Başlık mektubu aralığı: -2px
Çizgi Yüksekliği Başlığı: 0EM
Mesafe ve özellikle farklı ekran boyutları için bazı üst ve alt dolgu değerleri ekleyin.
Üst Dolgu: 9VW (Masaüstü ve Tablet), 12VW (Telefon)
Dolgu Alt: 9VW (Masaüstü ve Tablet), 12VW (Telefon) Klon Blurb Modülünü iki kez iki kez yerleştirin ve Sütun 1’deki bulanıklık modülünü değiştirmeyi bitirdikten sonra kalan sütuna yinelenerek, devam edebilir ve modülleri iki kez klona edebilirsiniz. Kalan satır sütununa kopya yerleştirin. Blurb içeriğini değiştirin, elbette, her bir kopyanın başlığını değiştirmeniz gerekir.
Bulanık simgesini simgeyle birlikte değiştirin.
Bulanıklık bağlantısını, yeni bulanıklık modülünü doğru sayfaya götüren benzersiz bir URL ile eşleştirmek için değiştirin. URL bağlantı modülü: https://www.yourwebsite.com/about Gradyan bulanıklıkının arka planını daha sonra değiştirin, ilk rengi iki kopyanın gradyanının arka planından değiştirin. Renk 1: #f9f9f9 Renk 1: #FF445D
Sütun 2’deki bulanıklık modülü metninin simgesini ve rengini değiştirin ve bulanık modül metninin simgesini ve rengini yeni gradyanın arka plan rengi ile eşleştirin. Renk simgesi: #000000
Renkli Metin Başlığı: #000000 Sırayı bitirdikten sonra tüm satırları klonlayın, tamamen klonlayabilirsiniz. Sütun 2 Klonlama Bulanık Modülünde Blurb Klon Modülü Sütun 2’de.
Bulanık modül arka plan ışığını sütun 1 ve sütun 3’e yerleştirin ve parlak arka plan bulanık modülünü sütun 1 ve 3’e yerleştirin.
Bulanıklık modülü renk arka planını sütun 2’ye yerleştirin Bulanık modüllerden birini renk arka planını ikinci sütuna taşıyın. Kalan bulanıklık modüllerini silin ve kalan bulanıklık modüllerini silin. Blurb içeriğini bir kez daha değiştirin, her bulanıklık modülünün başlığını değiştirmeniz gerekir. Bulanık simgesini simgeyle birlikte değiştirin. Blurb bağlantısını ve bağlantısını da değiştirin. URL bağlantı modülü: https://www.yourwebsite.com/shop Sütun 2’deki gradyan modülü bulanıklığının arka planını değiştirin, ancak en az değil, ilk rengi sütun 2’deki bulanıklık modülü gradyanının arka planından değiştirin. Renk 1: #000000 Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarında nihai sonuçlara bakalım. Bu yazıdaki son zihin, size bir simge navigasyon sayfası oluşturmayı ve verandanız olarak nasıl kullanacağınızı gösterdik.Bu yaklaşım, ziyaretçilerinizin web sitesi içeriğine bakmadan önce hangi sayfalarda gezintiklerini seçmelerini sağlar.Birisi menü öğesini tıkladıktan sonra, ana menü çubuğundan tekrar normal gezinme yaşar.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
