Her hafta size farklı projelerinizde kullanabileceğiniz yeni tasarım fikirleri sunuyoruz. Divi. Bu öğreticiler, genellikle, işinizi almanıza yardımcı olacak kullanım örnekleri içerir. Site Web üst seviyede.

Tasarım girişimimizin bir parçası olarak bu hafta Divi Devam ederken, üzerine geldiğinizde veya tıkladığınızda genişleyen güzel bir kayan düzen menüsünün nasıl oluşturulacağını göstereceğiz. Bazı genel adımlarla başlayalım. Blurb modüllerini kullanarak menü öğeleri eklemeye devam edeceğiz ve bir fareyle üzerine gelme veya tıklama efekti arasında seçim yapmanıza izin vererek bitireceğiz.

Gidelim!

anket

Öğreticiye dalmadan önce, alabileceğimiz sonuca bir göz atalım. Fakat bu farklı olabilir çünkü muhtemelen öğrendiklerinizi kişiselleştirmek isteyeceksinizdir.

1. Boş bir sayfa oluşturun ve Şehir Gezisi Sayfası Şablonunu kullanın

Yeni bir boş sayfa ekleyin ve Divi Builder'ı etkinleştirin

Yapılacak ilk şey yeni bir boş sayfa oluşturmaktır. Sayfanıza bir başlık verin ve devam edin Divi Oluşturucu.

Bir turist hedefi sayfası indirin

Divi Builder'ı etkinleştirdikten sonra, Sightseeing Layout Pack açılış sayfasını düzenleyin.

2. Sayfanın altına yeni bir normal bölüm ekleyin

Ana menü çubuğu gizlendiğinde, genel bakış menüsünü eklemeye başlayabiliriz. Bunu yapmak için, sayfamızın altına yeni bir normal bölüm ekleyeceğiz.

Arka plan rengi

Bölüm ayarlarını açın ve hafif şeffaf bir beyaz arka plan rengi ekleyin.

• Arka plan rengi: rgba (255,255,255,0.98)

aralık

Tasarım sekmesine geçin ve tüm varsayılan üst ve alt dolguyu bölümden kaldırın.

• Üst Dolgu: 0px
• Alt doldurma: 0px

Varsayılan gölge

Bir sonraki bölüme bir kutu gölge ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 18px
• Gölge Rengi: #383838

Vurgulu Kutusu Gölge

Ve gezinen kutu gölgesinin bulanıklık gücünü değiştirin.

• Kutu Gölge Bulanıklığı Gücü: 1000px

Bölüm taşmalarını gizleyin ve Z endeksini artırın

Bu tekniğin işe yaraması için bölüm boyutlandırma ayarlarını kullanacağız, ancak hiçbir şeyin bölüm kabının ötesine geçmediğinden emin olmak için taşmaları gizlememiz gerekecek. Ayrıca bölümün sayfanın geri kalanının en üstünde kalmasını sağlamak için Z endeksini de artırıyoruz.

• Yatay taşma: gizli
• Dikey taşma: gizli
• Z dizini: 9999

3. Menü boyutunu tüm ekran boyutlarıyla eşleşecek şekilde yapılandırın

Satır ekle 1

Sütun yapısı

Bölüm setinin temel parametrelerine sahip olduğunuzda, tüm bölümleri eklemenin zamanı geldi. içindekiler Menüde görüntülemek istediğiniz Divi'nin tasarım öğelerini ve yerleşik seçeneklerini kullanarak istediğiniz tasarımı oluşturabilirsiniz, ancak tüm ekran boyutları için "100 piksel" yükseklikte mükemmel şekilde ölçeklendiğinden emin olmanız gerekir. Bunu yapmak için yapım süreci boyunca görünüm genişliği birimini kullanacağız ve farklı ekran boyutlarındaki değerleri ayarlayacağız. Aşağıdaki sütun yapısını kullanarak bölümünüze yeni bir satır ekleyerek başlayın:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve bölümün tüm genişliğini doldurduklarından emin olun.

• Özel bir oluk genişliği kullanın: Evet
• Oluk genişliği: 1
• Genişlik:% 100
• Maksimum genişlik:% 100

aralık

Aralık ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt doldurma: 0px

Bir sütuna bir metin modülü ekleme

Bir sembol ekle

Satır sütununa bir metin modülü ekleyerek devam edin. Kutuya '=' sembolünü ekleyin içindekiler veya dilediğiniz başka bir sembolü kullanmaktan çekinmeyin.

Arka plan rengi

Ardından modülün arka plan rengini değiştirin.

• Arka plan rengi: #000000

Metin ayarları

Tasarım sekmesine geçin ve metin ayarlarını da değiştirin.

• Metin Yazı Tipi: Açık Sans
• Metnin hizalanması: orta
• Metin rengi: #ffffff
• Metin boyutu: 3vw (masaüstü), 5vw (tablet), 7vw (telefon)
• Metin satırının yüksekliği: 1em

aralık

Ayrıca aşağıdaki özel dolgu değerlerini kullanarak modülün üstüne ve altına boşluk ekliyoruz:

• Üst dolgu: 2.5vw (masaüstü), 3.5vw (tablet), 5vw (telefon)
• Altta Döşeme: 2.5vw (masaüstü), 3.5vw (tablet), 5vw (telefon)

2 satırını ekle

Sütun yapısı

Aşağıdaki sütun yapısını kullanarak ikinci bir satır eklemeye devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ekranın tüm genişliğini kaplamasına izin verin.

• Özel bir oluk genişliği kullanın: Evet
• Oluk genişliği: 1
• Genişlik:% 100
• Maksimum genişlik:% 100

aralık

Aralık ayarlarına gidin ve ardından üstte ve altta özel dolgu ekleyin.

• Üst dolgu: 2vw (masaüstü), 4vw (tablet), 6vw (telefon)
• Altta Döşeme: 2vw (masaüstü), 4vw (tablet), 6vw (telefon)

ekran

İki sütunun daha küçük ekran boyutlarında yan yana kalmasını sağlamak için, ana satır öğesine tek bir CSS kodu satırı ekleyeceğiz.

ekran: esnek;

Blurb modülünü 1 sütununa ekleyin

İçerik ekle

Menü öğelerini eklemeye başlamanın zamanı geldi! Satırdaki ilk sütuna yeni bir Blurb modülü ekleyin ve içindekiler De Chore Choix.

Simgeyi seçin

Sonra bir simge seçin.

Bir link ekle

Ve menü öğesine karşılık gelen bir sayfa bağlantısı girin.

• Bağlantı Başlığı URL'si: #

Simge ayarları

Tasarım sekmesine geçin ve simge ayarlarını buna göre değiştirin:

• Simge Rengi: # ff3314
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge yazı tipi boyutu: 2vw (masaüstü), 3vw (tablet), 4vw (telefon)

Başlık metni ayarları

Ayrıca başlığın metin ayarlarını da değiştirin.

• Başlık Polisi: PT Şerif
• Başlık Yazı Tipi Stili: Alt Çizgi
• Başlığın alt çizgi rengi: # ff3314
• Metin Başlığı: Merkez hizalaması
• Metin Başlığı Boyutu: 1.8vw (masaüstü), 2.3vw (tablet), 3.3vw (telefon)

Gövde metni ayarları

Ardından ana metin ayarlarını değiştirin.

• Gövde Yazı Tipi: Lato
• Metin gövdesinin hizalanması: merkez
• Gövde metni rengi: # c6c6c6
• Gövde metin boyutu: 0.9vw (masaüstü), 1.7vw (tablet), 2.1vw (telefon)
• Gövde yüksekliği: 1.8em

boyutlandırma

Ve aşağıdaki değerleri kullanarak farklı ekran boyutlarında modül genişliğini değiştirin:

• Genişlik:% 60 (masaüstü),% 65 (tablet),% 80 (telefon)

Animasyon

Ayrıca animasyon ayarlarında ikon animasyonunu da kaldırıyoruz.

• Simge Animasyonu: Animasyon Yok

Modülü klonlayın ve kopyayı 2 sütununa yerleştirin

Blurb modülünü tamamladığınızda, onu klonlayabilir ve kopyayı çizginin ikinci sütununa yerleştirebilirsiniz.

Kopyayı değiştir

Kopyayı değiştirdiğinizden emin olun. Simgeyi ve bağlantıyı değiştirmeyi unutmayın.

Satırı iki kez klonla

Her iki Blurb modülünü de satırda tamamladığınızda, tüm çizgiyi iki kez çoğaltabilirsiniz.

Her bir tanıtım yazısı için kopyayı, simgeyi ve bağlantıyı ayrı ayrı değiştirin

Her bir tanıtım menüsü öğesinin kopyasını, simgeyi ve bağlantısını ayrı ayrı değiştirdiğinizden emin olun.

4. Bölümü yapışkan hale getirin

Kusur

Bölümünüze görüntülemek istediğiniz tüm öğeleri ekledikten sonra, ana bölüm öğesine aşağıdaki iki satır CSS kodunu ekleyerek bölümü sayfanızın sol üst kısmında tutabilirsiniz. :

pozisyon: sabit; üst: 0;

Vurgulu (Önemli!)

Bölümün ana öğesinde üzerine gelme seçeneğini etkinleştirin ve bölümün bu durumda da yapışkan kaldığından emin olun.

konum: sabit;

5. Bir yöntem seçin: A) Overflight menüsü veya B) Menüyü tıklayın

A) Gezinme menüsü

Varsayılan bölüm boyutlandırma

Eğitimin bir sonraki bölümünde, tercih edilen bir yöntem seçmeniz gerekecek. fareyle üzerine gelindiğinde bir menü veya tıklama. Fareyle üzerine gelme menüsü, daha küçük cihazlarda tıklama menüsü gibi davranacaktır. Fareyle üzerine gelme seçeneğini seçmeye karar verirseniz, bölüm ayarlarını tekrar açın, boyut ayarlarına gidin ve menü 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)

Hover Bölümü

Genişleyen bir menü oluşturmak için rollover değerlerini değiştirin.

• Genişlik:% 80
• Yükseklik: 100vh

B) Tıklamada Menü

Bir bölüme bir CSS sınıfı ekleyin

Yalnızca tıklayarak açılan bir menü istiyorsanız, menü sembolünü içeren metin modülünü açmanız gerekir. Gelişmiş sekmesine gidin ve özel bir CSS sınıfı ekleyin.

• CSS sınıfı: tam genişlikte açık

Metin modülüne bir CSS sınıfı ekleyin

Ardından bölümün parametrelerini açın ve başka bir CSS sınıfı ekleyin.

• CSS sınıfı: pürüzsüz dönüşüm

Bölüm boyutlandırma

Daha sonra bölümümüzün genişliğini ve yüksekliğini değiştiriyoruz.

• Genişlik: 8vw (masaüstü), 12vw (tablet), 20vw (telefon)
• Yükseklik: 7.4vw (masaüstü), 12vw (tablet), 16vw (telefon)

Sayfaya bir kod ekle

Bölümün altına yeni bir satır ekle

Şimdi, çevirme efekti oluşturmak için biraz JQuery ve CSS koduna ihtiyacımız olacak. Bölümünüzün altındaki yeni bir satıra bir kod modülü ekleyerek başlayın.

Bölüme bir kod modülü ekleyin ve bir JQuery geçiş kodu ekleyin

Aşağıdaki satırları JQuery kodundan kopyalayın ve kod kutusuna yapıştırın:

jQuery(function($){
$("#fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});
});

Sayfa ayarlarına özel CSS kodu ekleyin

Son fakat en az değil, aşağıdaki sayfa ayarlarını açın ve aşağıdaki CSS kod satırlarını ekleyin:

.smooth-transform-active {height: 100vh; genişlik:% 80; } .smooth-transform {-webkit-transition: tüm 0.5'leri kolaylaştırır; -moz-geçişi: tüm 0.5'ler kolaylıkla; -o-geçişi: tüm 0.5'ler kolaylıkla; -ms-geçişi: tüm 0.5'ler kolaylıkla; geçiş: tüm 0.5'ler kolaylıkla; }

Son düşünceler

Bu eğitimde, tıklayarak / üzerine gelindiğinde (tercihlerinize bağlı olarak) genişleyen güzel bir sunum modülünün nasıl oluşturulacağını gösterdik. Tüm ekran boyutları için duyarlı bir sonucu korurken menünüze ekstra etkileşim eklemenin harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, lütfen aşağıdaki ayrılmış bölüme bir yorum bırakın.