Genişletilmiş yapışkan bir menü nasıl yapılır Divi’ye yönlendirilir
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, divi mekanik düzen paketini kullanarak imleci yönlendirirken genişletilen yapışkan bir menü nasıl yapacağınızı göstereceğiz. Başından itibaren yeniden yaratabileceğiniz iki farklı tasarım örneğini ele alacağız ve yaptığınız her türlü web sitesine başvuracağız! Menü, imleci masaüstü ekran boyutuna yönlendirirken görüntülenir ve mobil cihaza tıklarken etkinleştirilir.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Örnek 1 Masaüstü
Kalıcı navigasyon çubuğu: devre dışı Sayfa açılış sayfasındaki ana menü çubuğunu gizle, genişletilmiş bir macun menüsü eklemek ve sayfa ayarlarını açmak istediğiniz sayfaya taşıyın. Özel bir CSS ekleyin Sayfanıza aşağıdaki CSS kod satırını ekleyerek ana menüyü gizleyin. #Play-Heading {ekran: yok;
}
Yeniden yapmak istediğiniz örneğin herhangi bir sayfasının sonuna yeni bir bölüm ekleyin, birkaç temel adım aynı kalır. İlk adım, normal bölümü sayfanın altına eklemektir. Aralık ayarları bölümünü açın ve tüm özel üst ve alt yatakları silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Mesafe Tüm dolguyu bir sonraki varsayılan olarak yukarı ve aşağı silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Ana öğemiz, hattın ana öğelerine iki sıra CSS kodu ekleyerek tüm satırların sayfamızın altına yapışmasını sağlar. Alt: 0px; Konum: Sabit;
Dizin Z ve gelecekteki adımlara eklediğimiz metin modüllerinin) hattın görünürlük ayarlarındaki Z dizinini artırarak tüm sayfa içeriğinin üzerinde kalmasını sağlayacağız. Dizin Z: 99
Kod modülünü sütuna ekle Genel adımın stil etiketinin son kısmı arasına CSS kodunu ekleyin Kod modülünü yeni satıra eklemektir. Bu modüle eklediğimiz CSS kodu, imleci yönlendirirken açık efekti elde etmemize yardımcı olacaktır. Modülde aşağıdaki CSS kod satırını yapıştırın: .dt-menu li {
yazı tipi boyutu: 0;
Çizgi yüksekliği: 0;
}
.dt-menu: hover li {
yazı tipi boyutu: 2VH;
Çizgi yüksekliği: 2.1em;
}
Bir örnek #1 yap
Metin modülünü sütuna ekleyin ve tüm adımlardan geçtikten sonra içeriğe ekleyin, ilkinden başlayarak iki farklı tasarım örneğine odaklanmaya başlayabiliriz! Metin modülünü satır sütununuza ekleyin. İçerik kutusunda, ‘≡ menü’ bir kopyasını görüntülemek için bir paragraf stili kullanırız. Ardından, listeye sıralı olmayan tüm menü öğelerini yerleştiriyoruz. Ayrıca her sayfa başlığına tek tek bağlantılar ekleyeceğiz. Varsayılan arka plan, modülün arka plan ayarlarına geçmek ve arka plan rengini değiştirmektir. Arka plan rengi: #ffffff Yüzerken bu arka planın rengini değiştirmek için arka plan rengini yönlendirin.Arka plan rengi: RGBA (255,255,255.0.83) Degrade arka plan ve varsayılan gradyan arka plan ekleyin.
Renk 1: RGBA (255,255,255.0) Renk 2: #ffffff
Son pozisyon:% 60
Tasarım sekmesini açarak ve metin ayarlarını değiştirerek varsayılan metin ayarları devam eder.
Metin Yazı Tipi: Khand Metin yazı tipi ağırlığı: kalınlık
Metin rengi: #021827
Metin Boyutu: 3VH
Metin Oryantasyonu: Orta
Metin Ayarlarını Yönlendirin İmleci yönlendirirken bazı metin ayarlarını değiştirin.
Metin Rengi: RGBA (255,255,255.0) Metin Boyutu: 0vh
Bağlantı metnini ayarlayın Ardından, bağlantının metin ayarlarını açın ve bağlantının metninin rengini değiştirin.
Bağlantı metninin rengi: #000000 Varsayılan metin ayarları, varsayılan liste metin ayarlarına ve istediğiniz gibi stillere geçer. Varsayılan durumdaki metin boyutu için ‘0px’ kullandığınızdan emin olun.
Yazı Tipleri Kayıt Okul değil: Khand Yazı tipi stili listesi sıralanmadı: büyük harf
Yıkıcı metin deneyimi: Merkez
Renk metin listesi sırayla değil: RGBA (255,255,255.0)
Metin Boyutu Kayıt Sıralama Sıralama: 0px
Listenin satır yüksekliği sıralanmadı: 0EM
Liste kuvvetinin konumu sıralanmaz: Liste metin ayarlarının talimatlarında daha sonra, imleci menü öğelerinin görünmesine izin vermeye yönlendirirken bazı değerleri değiştirin.
Renkli Metin Listesi Sıralama Sıralama: #000000
Metin Boyutu Oybirliğiyle Kayıt: 2VH
Unsamy Hat Yüksekliği: 2.1em
Varsayılan Aralık Sonraki boşluk ayarlarını açın ve metin modülüne şekil verin.
Sol kenar boşluğu: 45VW (masaüstü), 39VW (tablet), 33vw (telefon)
Sağ kenar boşluğu: 45VW (masaüstü), 39VW (tablet), 33vw (telefon)
Aşağıda dolgu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon)
İmleçi yönlendirirken aynı değeri değiştirmek için doğrudan aralık.
Sol kenar boşluğu: 14vw
Doğru marj: 14VW Üst Dolgu: 8VW
Dolgu Alt: 8VW
Varsayılan sınır sınır ayarına geçer ve her yuvarlak köşenin ‘0px’ değerine sahip olduğundan emin olun.
Doğrudan Sınır, yuvarlak köşedeki vurgulu seçeneği etkinleştirin ve üst ve sağ sol ve sağ değerleri değiştirin.
Sol üst: 50VW Sağ üst: 50VW Kutunun gölgesi, kutunun gölgesini kullanarak birkaç derinliğe sahip bir modül vererek devam eder. Bu, menünün sayfadaki dikkatden kaçmamasını sağlayacaktır.
Bulanık Güç Gölgesi Kutusu: 1000ms
Gölge Rengi: RGBA (0.0,0,0.68) CSS sınıfımız da modüle CSS sınıfı ekledi.
CSS Sınıfı: DT-menu
Son fakat en az değil, geçiş düzenlemesindeki geçiş süresini azaltın. Geçiş süresi: 100ms
Yeni bir örnek #2 yap Metin modülünü sütuna ekleyin İkinci örneğe içeriği ekleyin! Burada, paragraf metin stillerini ve menü öğelerini kullanarak tekrarlanan listeleri kullanarak ‘≡ menü’ ekleyeceğiz. Ayrıca her menü öğesine tek tek bağlantılar ekleyeceğiz.
Varsayılan arka plan rengi arka plan ayarına geçer ve arka plan rengini değiştirir. Arka plan rengi: #ffffff Yüzerken arka plan rengini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: #F71535 Varsayılan Metin Ayarları Ardından, Tasarım sekmesini açın ve paragraf kopya ekranında bazı değişiklikler yapın.
Metin Yazı Tipi: Khand Metin rengi: #021827
Metin Boyutu: 3VH Metin ayarlarını imleci yönlendirirken bu ayarları değiştirmek için yönlendirin.
Metin Rengi: RGBA (255,255,255.0)
Metin Boyutu: 0vh
Bağlantı Metin ayarları metin ayarlarına geçin ve bağlantının metninin rengini değiştirin. Renkli metin bağlantısı: #ffffff
Varsayılan liste metin ayarları ayrıca sıralanmayan tasarım öğelerini de değiştirir.
Yazı Tipleri Kayıt Okul değil: Khand Yazı tipi stili listesi sıralanmadı: büyük harf
Yıkıcı metin deneyimi: Merkez Renk metin listesi sırayla değil: RGBA (255,255,255.0)
Metin Boyutu Kayıt Sıralama Sıralama: 0px
Listenin satır yüksekliği sıralanmadı: 0EM
Liste kuvvetinin konumu sıraya göre değil:
Liste metin ayarlarına gidin ve imleci yönlendirirken bu değerlerin bazılarını değiştirin.
Renk Metin Listesi Sıralama Sıralama: #ffffff
Metin Boyutu Oybirliğiyle Kayıt: 2VH
Düşük yükseklik yanlış değil: 2.1em Varsayılan alan sonra, açık alan ayarları ve birkaç boşluk modüllerini verir.
Sağ kenar boşluğu: 88VW (masaüstü ve tablet), 71VW (telefon)
Üst Pilding: 6VW (masaüstü), 10vw (tablet), 18VW (Telefon)
Dolgu Alt: 4VW (masaüstü), 10vw (tablet), 12VW (Telefon) Sol dolgu: 1VW
Aralık Direktif Değer Değişimi Varıştaki değeri değiştirin.
Sağ kenar boşluğu: 59VW
Üst Dolgu: 13VW
Dolgu Alt: 8VW Sol dolgu: 1VW
Doğru dolgu: 13vw
Sınır ve çeyrek daire tasarımı yapmak için, sınır ayarlarındaki sağ üst sınırı değiştireceğiz.
Kutumuzun gölgesi ayrıca sayfada bir derinlik oluşturmak için bir kutunun gölgesi ekleyecektir.
Bulanık Güç Gölgesi Kutusu: 1000 PX
Gölge Rengi: RGBA (0.0,0,0.68) CSS sınıfı sonra CSS sınıfını Gelişmiş sekmesine ekleyeceğiz.
CSS Sınıfı: DT-menu Hızlı geçiş yapmak için gelişmiş sekmedeki geçiş süresini geçiş ve azaltın.
Geçiş süresi: 100ms
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Örnek 1 Masaüstü Hücresel
Örnek #2 masaüstü Hücresel
Bu yazıdaki son zihin, Divi Mekanik Düzen Paketi kullanılarak genişletilen yapışkan bir menü oluşturmayı gösterdik. Yeniden yapabileceğiniz ve yaptığınız her tür web sitesinde kullanabileceğiniz iki farklı tasarım örneğini ele aldık! Her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız bu devam eden Divi Tasarım Girişimi’nden keyif aldığınız için mutluyuz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
