Divi ile sayfanız için bir bulanıklık menüsü nasıl yönetilir/tıklayın
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, yönlendirdikten veya tıkladıktan sonra genişleyen inanılmaz bir açıklama menüsünün nasıl oluşturulacağını göstereceğiz. Her şeyden önce birkaç ortak adımdan başlayacağız. Blurb modülünü kullanarak menü öğeleri ekleyerek devam edeceğiz ve Hover efektini veya tıklamanızı seçmenize izin vererek bitireceğiz.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü Modunu Yönlendirin
Arka plan rengi: RGBA (255,255,255.0.98) Mesafe Tasarım sekmesine geçin ve bu bölümden tüm dolgu üst ve alt varsayılan olarak silin. Dolgu üstü: 0px
Aşağıda dolgu: 0px
Varsayılan kutunun gölgesi Kutunun gölgesini bir sonraki bölüme ekleyin. Bulanık Güç Gölgesi Kutusu: 18px
Gölge Renk: #383838
Kutunun gölgesini yönlendirin ve yüzerken bulanık kutunun gölgesinin gücünü değiştirin. Bulanık Güç Gölgesi Kutusu: 1000 PX
Taşmayı gizleyin ve z indexini artırın Bu teknik işlevini yapmak için boyutun ayarını kullanacağız, ancak hiçbir şeyin kabı aşmamasını sağlamak için taşmayı gizlemeliyiz. Ayrıca, parçanın kalan avlunun üstünde kalmasını sağlamak için Z endeksini de artırıyoruz. Yatay taşma: gizli
Dikey taşma: gizli
Dizin Z: 9999
3. Tüm bölüm menüsü içeriğinin VW & 100 View Porulunun Yüksekliğine uygun olarak yapıldığından emin olun. menüde. Divi’nin varsayılan tasarım öğelerini ve seçeneklerini kullanmak istediğiniz herhangi bir tasarımı yapabilirsiniz, ancak her şeyin tüm ekran boyutlarında ‘100VH’ yüksekliğiyle eşleştiğinden emin olmalısınız. Bunu başarmak için, üretim işlemi sırasında görünüm alanının genişliğini kullanacağız ve çeşitli ekran boyutlarındaki değeri değiştireceğiz. Aşağıdaki sütun yapısını kullanarak kendi tarafınıza yeni satır ekleyerek başlayın: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve bölümün tüm genişliğini karşıladığından emin olun. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Uzaklık Alan Ayarlarına Taşınır ve Tüm Dolgu Üst ve Alt Varsayılan’ı Sil. Aşağıda dolgu: 0px
Metin modülünü sütuna ekleyin Sembol ekleyin. Metin modülünü satır sütununa ekleyerek devam edin. İçerik kutusuna ‘=’ sembolünü ekleyin veya seçtiğiniz başka bir sembolü kullanın.
Arka Plan Rengi Bir sonraki modülün arka plan rengini değiştirin. Arka plan rengi: #000000 Metin ayarları Tasarım sekmesine geçer ve metin ayarlarını da değiştirir.
Metin yazı tipi: SANS’ı aç Hizalama Metni: Orta
Metin rengi: #ffffff
Metin Boyutu: 3VW (masaüstü), 5VW (tablet), 7VW (telefon)
Hat yüksekliği metni: 1em
Mesafemiz ayrıca aşağıdaki özel dolgu değerlerini kullanarak modülün üstüne ve altına birkaç boşluk ekler:
Üst Dolgu: 2.5VW (masaüstü), 3.5vw (tablet), 5VW (Telefon) Aşağıda dolgu: 2.5vw (masaüstü), 3.5vw (tablet), 5VW (telefon)
Aşağıdaki sütun yapısını kullanarak ikinci satırı ekleyerek #2 sütun yapısı ekleyin:
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 boşluk ayarlarına geçer ve bazı üst ve alt özel dolgu ekler.
Üst Dolgu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon) Aşağıda dolgu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon)
İki sütunun daha küçük ekran boyutunun yanında kaldığından emin olmak için, satırın ana öğesine bir CSS kod satırı ekleyeceğiz. Ekran: Flex;
Blurb modülünü sütun 1’e ekleyin. İlk satır sütununa yeni bir bulanıklık modülü ekleyin ve içerik seçiminizi girin. Simgeyi seçin Bir sonraki simgeyi seçin. Bağlantıyı ekleyin ve menü öğesiyle eşleşen sayfa bağlantısını girin. URL bağlantısı başlığı: # Simgeyi ayarlama Tasarım sekmesine geçer ve uygun simge ayarlarını değiştirin: Renk simgesi: #ff3314
Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 2VW (masaüstü), 3VW (tablet), 4VW (telefon)
Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı tipi başlığı: PT Serif
Yazı tipi stili başlığı: alt çizgiler
Hizalama Metin Başlığı: Orta
Boyut Metin Başlığı: 1.8VW (masaüstü), 2.3vw (tablet), 3.3vw (telefon)
Gövde metnini ayarlayın, içerik metin ayarlarını değiştirin.
Gövde yazı tipi: lato
Vücut metninin hizalanması: orta Gövde metni rengi: #c6c6c6
Gövde metni boyutu: 0.9vw (masaüstü), 1.7vw (tablet), 2.1vw (telefon)
Vücut Hattı Yüksekliği: 1.8EM
Aşağıdaki değerleri kullanarak modülün genişliğini çeşitli ekran boyutlarında yapıştırıcı ve değiştirin:
Genişlik:% 60 (masaüstü),% 65 (tablet),% 80 (cep telefonu)
Animasyonumuz ayrıca animasyon ayarlarında simge animasyonunu kaldırır. Animasyonlu simge: animasyon olmadan
Klon Blurb Modülü ve Yinelendirme Sütun 2’ye yerleştirin Bulanıklık modülünü tamamladıktan sonra klonlayabilir ve kopyayı satırın ikinci sütununa yerleştirebilirsiniz. Kopyalayı Değiştir Kopyayı değiştirdiğinizden emin olun.
Simgeyi simgeyle birlikte değiştirin. Yeni menü öğesiyle eşleşen bağlantı ve sayfa bağlantısını değiştirin. Klon satırı iki kez iki bulanık modülü sıradaki bitirdikten sonra, tüm satırı iki kez klonlayabilirsiniz. Her yinelenen bulanıklık için kopya, simgeler ve bağlantıları değiştirin, her menü öğesi açıklaması için kopyaları, simgeleri ve bağlantıları tek tek değiştirdiğinizden emin olun. 4. Varsayılan çubukları yapın Bölümünüze görüntülemek istediğiniz tüm öğeleri ekledikten sonra, ana öğe bölümüne aşağıdaki CSS kodunun iki satırını ekleyerek sayfanızın sol üst kısmına ekli bölümü yapabilirsiniz: konumlandırabilirsiniz. : Düzeltildi; Üst: 0; İmleci yönlendirin (önemli!) İmleci bölümün ana elemanına yönlendirme seçeneğini etkinleştirin ve parçanın bu durumda da yapışkan kaldığından emin olun. Konum: Sabit; 5. Yöntemi seçin: a) Menü Yüzerken veya b) Menü A) Menü A) Menü, öğreticinin bir sonraki bölümündeki varsayılan bölümün boyutuna yönlendirilirken, tercih edilen yöntemi seçmelisiniz; Gemirme veya tıklayın menüsü. Geri Yükseklik menüsü daha küçük bir cihaza tıklama gibi davranır. Hover seçeneğini seçmeye karar verirseniz, ayarları tekrar açın, boyut ayarlarını açın ve menünüzün genişliğini ve yüksekliğini buna göre değiştirin:
Genişlik: 8VW (masaüstü), 12vw (tablet), 20vw (telefon)
Yükseklik: 7.4vw (masaüstü), 12vw (tablet), 16vw (telefon) İmleci genişletilmiş bir menü oluşturmaya yönlendirirken değeri değiştirme değerini değiştirin. Genişlik:% 80
Yükseklik: 100vh
B) Menü Metin modülüne CSS sınıfı ekle tıklayın, sadece tıklayarak açık bir menü istiyorsanız, menü sembolünü içeren metin modülünü açmanız gerekir. Gelişmiş sekmesini açın ve özel bir CSS sınıfı ekleyin. CSS sınıfı: Tam geniş aç
CSS sınıfını bir sonraki bölüm ayarlarını açın ve farklı bir CSS sınıfı ekleyin.
CSS Sınıfı: İnce Dönüşüm Parçamızın boyutu, bir sonraki bölümümüzün genişliğini ve yüksekliğini değiştirir.
Genişlik: 8VW (masaüstü), 12vw (tablet), 20vw (telefon) Yükseklik: 7.4vw (masaüstü), 12vw (tablet), 16vw (telefon)
Kodu sayfaya ekleyin Geçerli bölümden yeni bir satır ekleyin, geçiş yapan bir efekt oluşturmak için biraz jQuery ve CSS koduna ihtiyacımız var. Kod modülünü bölümünüzün altındaki yeni satıra ekleyerek başlayın. Kod modülünü bölüme ekleyin ve geçiş jQuery kodunu ekleyin. Aşağıdaki jQuery kodunu kopyalayın ve kod kutusuna yapıştırın: jQuery (işlev ($) {
$ (“. FullWidth-Open”). Click (function () {
$ (‘. Smooth-Transform’). }); });
Özel CSS kodunu son fakat en az değil sayfa ayarlarına ekleyin, sonraki sayfa ayarlarını açın ve aşağıdaki CSS kod satırını ekleyin:
Yükseklik: 100vh;
Genişlik:%80;
}
.Smooth-Transform {
-Moz-Transition: Tüm 0.5s kolaylığı;
-O-geçiş: tüm 0.5s kolaylığı;
-MS-Transition: Tüm 0.5s kolaylığı;
Geçiş: Tüm 0.5s kolaylığı;
}
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Modunu Yönlendirin
Hücresel
Masaüstü modunu tıklayın
Hücresel
