Divi'de Tıklandığında Genişleyen Dairesel Simge Menüsü Nasıl Oluşturulur

Dairesel bir simge menüsü, Divi sitenize basit bir menü eklemek için zarif bir çözümdür. Bu menü tarzı sezgiseldir ve mobil cihazlarınız için sabit bir menü olarak gerçekten iyi çalışır. Bugün, Divi'de Divi Builder'ın güçlü tasarım özelliklerini gerçekten vurgulayacak şekilde dairesel bir simge menüsünün nasıl oluşturulacağını göstereceğiz. Ve tıkladığınızda menüyü açıp kapatmak için kolay bir JavaScript pasajı sağlayacağız.

Başlayalım

Gizlice Bakış

İşte oluşturacağımız dairesel ikon menüsüne hızlı bir bakış.

Daire Simgesi Menü Düzenini ÜCRETSİZ olarak indirin

Bu eğitimdeki tasarıma el koymak için önce aşağıdaki düğmeyi kullanarak onu indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız, kurulu Divi Temasını (veya Divi Temasını kullanmıyorsanız Divi Builder Eklentisini) kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve Divi Builder'ın sayfayı ön uçta (görsel oluşturucu) düzenlemesini sağlayın.

Bu eğitim için, Divi'nin tanıtıcı modülündeki yerleşik simgelerini kullanacağız, bu nedenle herhangi bir harici varlığa gerek yok.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bölüm 1

Divi Builder, sayfayı ön uçta düzenlemek için etkinleştirildiğinde, varsayılan normal bölüme bir sütun satırı ekleyin.

Ardından satır ayarlarını açın ve aşağıdaki dolguyu ekleyin:

Dolgu: 300 piksel üst

Bu, dairesel menü öğelerinin tıklandığında çıkması için biraz alan sağlamak içindir.

Blurb Modülleri ile Menü Simgeleri Oluşturma

1 numaralı bulanıklık

Satır dolgusu yerleştirildikten sonra, sütuna bir tanıtıcı modül ekleyin. Bu, dairesel simge menümüzü oluşturmak için ekleyeceğimiz toplam 5 tanıtımdan ilki olacak. Buna 1 numaralı tanıtım yazısı olarak değineceğiz.

Ardından, başlığı ve gövde metnini çıkararak tanıtıcı içeriği güncelleyin. Ardından, tanıtım yazısına aşağıdaki gibi bir simge ekleyin.

Simgeyi Kullan: Evet
Simge: ekran görüntüsüne bakın

Ardından, tasarım ayarlarını aşağıdaki gibi güncelleyeceğiz:

Simge Rengi: #29a1f2
Daire Simgesi: EVET
Daire Rengi: #222222
Daire Kenarlığını Göster: EVET
Daire Kenarlık Rengi: #29a1f2
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 25px
Gövde Metni Boyutu: 20px
Kenar boşluğu: 0 piksel

Dairesel simgeyi şekillendirmeye ek olarak, bir gövde metni boyutu da ekledik. Gövde metni yoktur, ancak bu daha sonra, transform translate kullanarak menü öğelerimizi/açıklamaları boşaltmak için em uzunluk birimini (ana gövde metni boyutuna göredir) kullandığımızda kullanışlı olacaktır. Bu konuda daha sonra.

Bundan sonra, varsayılan görüntü/simge animasyonunu çıkarın.

Resim/Simge Animasyonu: Animasyon Yok

Ardından, bu modülün Z İndeksini 1'e ayarlayın, böylece sonunda arkasında kalacak olan diğerlerinin üzerine oturacaktır.

Z İndeksi: 1

Son olarak, Blurb Image'a aşağıdaki özel CSS'yi ekleyerek simgenin altındaki varsayılan alt kenar boşluğunu çıkarın.

margin-bottom: 0px;

2 numaralı bulanıklık

İkinci tanıtım yazısı oluşturmak için, tanıtım yazısı #1'i kopyalamanız yeterlidir.

Ardından yeni tanıtım yazısı (bulanıklık #2) için ayarları açın ve simgeyi değiştirin ve Z İndeksini varsayılana (0) geri ayarlayın.

Bundan sonra, dönüştürme ölçeğini kullanarak simgeyi aşağıdaki gibi küçültelim:

Dönüşüm Ölçeği: %70

3, 4 ve 5 numaralı Bulanıklıklar Oluşturma

Sonraki üç tanıtım yazısı, 2 numaralı tanıtım yazısı çoğaltılarak ve her biri için simge güncellenerek oluşturulabilir.

Blurb'ları Aynı Mutlak Konumda İstifleme

Menümüzün varsayılan durumu, ana hamburger menü simgesi tanıtıcısının arkasına yığılmış dört menü öğesi tanıtıcısı ile tüm tanıtıcı metinleri mutlak bir konumda içerecektir. Tanıtım yazılarımızı aynı mutlak konuma getirmek için, beş tanıtım modülünün tümünü seçmek için çoklu seçim özelliğini kullanın (ctrl/cmd tuşunu basılı tutun ve her birini tıklayın). Ardından, aynı anda 5 öğenin tümü için öğe ayarlarını güncellemek için seçilen tanıtım yazılarından birinin ayarlarını açın.

Ardından ana öğeye aşağıdaki özel CSS'yi ekleyin:

position: absolute !important;
bottom: 20px;
left: 20px;

Bu, tanıtım yazılarını satırın sol alt kısmına konumlandırır.

Dönüştürme Çevirisini Kullanarak Menü Simgelerini Konumlandırma

Tüm tanıtım yazıları varsayılan durum için konumlandırıldığında, menü öğelerini tıklama durumu için konumlandırmaya başlayabiliriz (ana menü düğmesine tıkladıktan sonra sona erecekleri yer). Bunu yapmak için Divi oluşturucu içindeki transform translate özelliğini kullanabiliriz. Bu JavaScript tarafından ele alınan bir şey olduğundan, Divi oluşturucuda (vurgulu gibi) kullanılabilir bir tıklama durumu yoktur. Bu yüzden menü öğelerimizi şimdi tıklandığında olmasını istediğimiz yere konumlandıracağız. Ardından, ana menü düğmesine tıklandığında bu konumu açıp kapatmak için Javascript kullanacağız.

Ana menü düğmesi olduğu için 1 numaralı tanıtım metnini yerinde tutmak istiyoruz. Ancak, 2, 3, 4 ve 5 numaralı tanıtım yazısını taşımak istiyoruz. Ve tanıtım yazılarımız artık görsel oluşturucuda istiflendiğinden, her tanıtım yazısının konumlarını güncellemek için tel kafes modunu kullanalım.

Pozisyon Bulanıklığı #2

2 numaralı tanıtım yazısı için ayarları açın ve aşağıdakileri güncelleyin:

Dönüştür Y eksenini çevir: -10em

İşte 2 numaralı tanıtım yazısının yeni konumu.

Konum Bulanıklığı #3

3 numaralı bulanıklık ayarlarını açın ve aşağıdakileri güncelleyin:

Dönüştür Y eksenini çevir: -8.6em
Dönüştür X eksenini çevir: 5em

İşte 3 numaralı tanıtım yazısının yeni konumu.

Pozisyon Bulanıklığı #4

4 numaralı tanıtım yazısı için ayarları açın ve aşağıdakileri güncelleyin:

Dönüştür Y eksenini çevir: -5em
Dönüştür X eksenini çevir: 8.6em

İşte 4 numaralı tanıtım yazısının yeni konumu.

Konum Bulanıklığı #5

5 numaralı tanıtım yazısı için ayarları açın ve aşağıdakileri güncelleyin:

Dönüştür Y eksenini çevir: 0px
Dönüştür X eksenini çevir: 10em

İşte 5 numaralı tanıtım yazısının yeni konumu.

Blurbs'a özel CSS Sınıfları Ekleme

JavaScript'imizin düzgün çalışması için, ek stil ve işlevsellik için seçici olarak hizmet edecek bazı CSS sınıfları eklememiz gerekiyor.

Blurb #1'e CSS Sınıfı Ekle

Tel kafes görünümü modunda, tanıtım yazısı #1 için ayarları açın ve aşağıdaki CSS Sınıfını ekleyin:

CSS Sınıfı: transform_target

2, #3, #4 ve #5 Blurbs'a CSS Sınıfları ekleyin

Diğer dört tanıtım yazısının tümü aynı CSS sınıflarını paylaşacaktır, bu nedenle Çoklu seçim özelliğini kullanarak Bulanıklık #2, #3, #4 ve #5'i seçebilir ve dördü için CSS Sınıfını aşağıdaki gibi güncelleyebiliriz:

CSS Sınıfı: has-transform geçiş-dönüştürme-animasyonu

Bir boşlukla ayrılmış iki css sınıfı olduğuna dikkat edin.

Kod Modülüyle Harici CSS ve JavaScript Ekleme

CSS Sınıflarımız tanıtım yazılarına eklendikten sonra kod modülünü kullanarak kodumuzu sayfaya eklemeye hazırız. Bunu yapmak için tanıtım yazısı #5 altına bir kod modülü ekleyin.

Ardından aşağıdaki kodu kod modülüne yapıştırın:

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

Bu, jQuery koduyla birlikte kullanılan harici CSS'dir.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

Ve bu, JavaScript'in menü düğmesine tıklandığında genişletmek için dairesel simge menü öğelerini alması gerekir.

style etiketinin CSS'nin etrafına sarıldığından ve script etiketinin JavaScript/jQuery'nin etrafına sarıldığından emin olun.

Canlı sayfadaki işlevselliğin nihai sonucunu kontrol edin.

Menü Öğesi URL'leri Ekleme

Bu bir menü olduğundan, dört menü öğesinin bağlantılara/URL'lere ihtiyacı olacaktır. Her menü öğesi için gereken URL'leri eklemek için, 4 menü öğesinin her biri için tanıtıcı modül ayarlarını açın ve bir Modül bağlantı URL'si ekleyin.

Menü Düğmesini Yapışkan (veya Sabit) Yapmak

Bu menü mobil cihaz için küçük ve sezgisel olduğundan, menüyü tarayıcının sol alt kısmında sabit kalacak şekilde yapışkan yapmak isteyebilirsiniz.

Bunu yapmak için, çoklu seçim özelliğini kullanarak beş tanıtım yazısının tümünü seçin ve ardından "mutlak" konum değerini "sabit" ile değiştirerek Ana Öğedeki özel CSS'yi güncelleyin.

position: fixed !important;
bottom: 20px;
left: 20px;

Artık menü, tarayıcı penceresinin sol alt kısmında sabit kalacaktır.

Menünün sayfadaki diğer içeriğin üzerinde olduğundan emin olmak için satırın z dizinini aşağıdaki gibi güncelleyin:

Z İndeksi: 11

Ardından satırın dolgusunu çıkarın:

Dolgu: 0 piksel üst, 0 piksel alt

Son tasarım

İşte önceden hazırlanmış bir düzen ile sabit dairesel simgenin son tasarımı.

Ve işte mobilde.

Menü Boyutunu ve Aralığını Kolayca Ayarlama

Daha önce bahsedildiği gibi, menü, menü öğesinin x ve y ekseninde konumlandırılması için em uzunluk birimi kullanılarak tasarlanmıştır (dönüşüm çevirisi kullanılarak). em uzunluk birimi, ana gövde metni boyutunun boyutuna göredir. Bu nedenle, tanıtıcı modüllerimizin her biri 20 piksellik aynı gövde metni boyutuna sahip olduğundan, tüm tanıtıcı metinlerin gövde metnini bir kerede değiştirmek için çoklu seçim kullanabiliriz.

Bu, menü öğeleri arasındaki boşluğu gerektiği gibi artıracak veya azaltacaktır.

Aynı şeyi Simge yazı tipi boyutu için de yapabilirsiniz. Tek seferde tüm menü öğeleri için simge yazı tipinin boyutunu ayarlamak için çoklu seçimi kullanın.

Son düşünceler

Bir sayfaya sabit bir dairesel simge menüsü eklemeyi bilenler Divi ile bu kadar basit olabilirdi. Mobil cihazlar için de mükemmel bir menü türü! Elbette, gerekli birkaç özel kod parçacığı var, ancak görsel oluşturucuyu kullanarak menü öğelerinin tıklama durumunu tasarlayıp konumlandırabilmeniz oldukça güzel şeyler. Menüyü kendi web sitenizle kolayca eşleştirebilecek farklı renk, boyut ve vurgulu tasarımları keşfetmeyi unutmayın.

Yorumlarda sizden haber bekliyorum.

Şerefe!