Divi ile Sayfanız İçin Fareyle Üzerine Geldiğinizde/Tıkladığınızda Blurb Menüsü Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, üzerine geldiğinizde veya tıkladığınızda genişleyen çarpıcı bir tanıtım menüsünün nasıl oluşturulacağını göstereceğiz. İlk önce bazı genel adımlardan geçerek başlayacağız. Blurb Modules kullanarak menü öğeleri ekleyerek devam edeceğiz ve bir fareyle üzerine gelme veya tıklama efekti arasında seçim yapmanıza izin vererek bitireceğiz.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Hover Modu

masaüstü

Mobil

Modus'u tıklayın

masaüstü

Mobil

1. Boş Sayfa Oluşturun ve Gezi Açılış Sayfası Yükleyin

Yeni Boş Sayfa Ekle ve Divi Builder'ı Etkinleştir

Yapmanız gereken ilk şey, yeni bir boş sayfa oluşturmaktır. Sayfanıza bir başlık verin ve Divi Builder'a geçin.

Gezi Açılış Sayfası Yükle

Divi Builder'ı etkinleştirdikten sonra Sightseeing Layout Pack'in açılış sayfası düzenini yükleyin.

2. Sayfanın Altına Yeni Normal Bölüm Ekle

Birincil menü çubuğu gizlendikten sonra, tanıtım 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 biraz şeffaf beyaz arka plan rengi ekleyin.

• Arka Plan Rengi: rgba(255,255,255,0.98)

aralık

Tasarım sekmesine gidin ve bölümün tüm varsayılan üst ve alt dolgularını kaldırın.

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

Varsayılan Kutu Gölgesi

Sonraki bölüme bir kutu gölgesi ekleyin.

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

Vurgulu Kutu Gölgesi

Ve fareyle üzerine gelindiğinde kutu gölge bulanıklığı gücünü değiştirin.

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

Bölüm Taşmalarını Gizle ve Z İndeksini Artır

Bu tekniğin çalışması için bölüm boyutlandırma ayarlarını kullanacağız, ancak hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olmak için taşmaları gizlememiz gerekecek. Ayrıca, bölümün sayfanın geri kalanının üstünde kalmasını sağlamak için Z İndeksini de artırıyoruz.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli
• Z İndeksi: 9999

3. Tüm Bölüm Menü İçeriğinin Vw Kullanılarak Oluşturulduğundan Emin Olun ve Tüm Ekran Boyutlarında 100 Görünüm Penceresi Yüksekliğine Sığdır

1. Satır Ekle

Sütun Yapısı

Temel bölüm ayarlarını tamamladıktan sonra, menüde görünmesini istediğiniz tüm içeriği eklemenin zamanı geldi. Divi'nin tasarım öğelerini ve yerleşik seçeneklerini kullanarak istediğiniz tasarımı oluşturabilirsiniz, ancak bunların tüm ekran boyutlarında '100vh' yüksekliğe sığdığından emin olmalısınız. Bunu başarmak için, oluşturma süreci boyunca görüntü alanı genişlik birimini kullanacağız ve değerleri farklı ekran boyutlarında 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 kapladığından emin olun.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

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

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

Sütuna Metin Modülü Ekle

Sembol Ekle

Satırın sütununa bir Metin Modülü ekleyerek devam edin. İçerik kutusuna '=' sembolünü ekleyin veya istediğiniz başka bir sembolü kullanmaktan çekinmeyin.

Arka plan rengi

Sonraki modülün arka plan rengini değiştirin.

• Arka Plan Rengi: #000000

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını da değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Hizalama: Merkez
• Metin Rengi: #ffffff
• Metin Boyutu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Metin Satırı Yüksekliği: 1em

aralık

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

• Üst Dolgu: 2.5vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 2.5vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)

2. Satır Ekle

Sütun Yapısı

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

boyutlandırma

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Boşluk ayarlarına geçin ve ardından bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Alt Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

Görüntülemek

Daha küçük ekran boyutlarında her iki sütunun da yan yana kalmasını sağlamak için satırın ana öğesine tek bir CSS kodu satırı ekleyeceğiz.

display: flex;

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Menü öğelerini eklemeye başlama zamanı! Satırın ilk sütununa yeni bir Blurb Modülü ekleyin ve istediğiniz içeriği girin.

Simge Seç

Sonraki bir simge seçin.

Link ekle

Ve menü öğesiyle eşleşen bir sayfa bağlantısı girin.

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

Simge Ayarları

Tasarım sekmesine gidin 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ı

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi: PT Serif
• Başlık Yazı Tipi Stili: Altı Çizili
• Başlık Alt Çizgi Rengi: #ff3314
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 1.8vw (Masaüstü), 2.3vw (Tablet), 3.3vw (Telefon)

Gövde Metni Ayarları

Ardından, gövde metni ayarlarını değiştirin.

• Gövde Yazı Tipi: Lato
• Gövde Metni Hizalama: Orta
• Gövde Metni Rengi: #c6c6c6
• Gövde Metni Boyutu: 0.9vw (Masaüstü), 1.7vw (Tablet), 2.1vw (Telefon)
• Gövde Çizgisi Yüksekliği: 1.8em

boyutlandırma

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

• Genişlik: %60 (Masaüstü), %65 (Tablet), %80 (Telefon)

Animasyon

Ayrıca animasyon ayarlarından simge animasyonunu kaldırıyoruz.

• Simge Animasyonu: Animasyon Yok

Blurb Modülünü Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir

Bulanıklık Modülünü tamamladıktan sonra, onu klonlayabilir ve kopyayı satırın ikinci sütununa yerleştirebilirsiniz.

Kopyayı Değiştir

Kopyayı değiştirdiğinizden emin olun.

Simgeyi Değiştir

Simge ile birlikte.

Bağlantıyı Değiştir

Ve yeni menü öğesiyle eşleşen sayfa bağlantısı.

Satırı İki Kez Klonla

Satırdaki her iki Blurb Modülünü de tamamladıktan sonra, tüm satırı iki kez klonlayabilirsiniz.

Her Bir Blurb Çoğaltması için Kopyayı, Simgeyi ve Bağlantıyı Ayrı Ayrı Değiştirin

Tanımlayıcı menü öğelerinin her biri için kopyayı, simgeyi ve bağlantıyı ayrı ayrı değiştirdiğinizden emin olun.

4. Bölümü Yapışkan Yap

Varsayılan

Bölümünüzde görünmesini istediğiniz tüm öğeleri ekledikten sonra, bölümün ana öğesine aşağıdaki iki satırlık CSS kodunu ekleyerek bölümün sayfanızın sol üst köşesine yapışmasını sağlayabilirsiniz:

position: fixed;
top: 0;

Üzerine gelin (Önemli!)

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

position: fixed;

5. Bir Yöntem Seçin: A) Fareyle Üzerine Geldiğinde Menü veya B) Tıklandığında Menü

A) Hover'daki Menü

Varsayılan Bölüm Boyutlandırma

Eğitimin sonraki bölümünde, tercih edilen bir yöntem seçmeniz gerekecek; üzerine gelindiğinde veya tıklandığında bir menü. Fareyle üzerine gelme menüsü, daha küçük cihazlarda bir 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, boyutlandırma ayarlarına gidin 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)

Hover Bölüm Boyutlandırma

Genişleyen bir menü oluşturmak için üzerine gelindiğinde değerleri değiştirin.

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

B) Tıklamada Menü

Metin Modülüne CSS Sınıfı Ekle

Yalnızca tıklamayla 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

Bölüme CSS Sınıfı Ekle

Sonraki bölüm ayarlarını açın ve farklı bir CSS sınıfı ekleyin.

• CSS Sınıfı: sorunsuz dönüşüm

Bölüm Boyutlandırma

Bundan 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 Kod Ekle

Bölümün Altına Yeni Satır Ekle

Şimdi, geçiş efektini 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 Kod Modülü Ekle ve JQuery Geçiş Kodunu Ekle

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

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

});
</script>

Sayfa Ayarlarına Özel CSS Kodu Ekle

Son olarak, daha sonra sayfa ayarlarını açın ve aşağıdaki CSS kodu satırlarını ekleyin:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Hover Modu

masaüstü

Mobil

Modus'u tıklayın

masaüstü

Mobil

Son düşünceler

Bu gönderide, tıklama/fareyle üzerine gelme ile genişleyen (tercihinize bağlı olarak) güzel bir tanıtım modülünün nasıl oluşturulacağını gösterdik. Bu, tüm ekran boyutlarında duyarlı bir sonucu korurken menünüze ekstra etkileşim eklemenin harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.