Divi Blurbs Kullanarak Bölümlere Ayrılmış Dairesel Menü Nasıl Oluşturulur

Divi'nin dönüştürme seçenekleriyle yaratıcı olmak her zaman eğlencelidir. Bazı harika "kutunun dışında" tasarımlar yaratmanıza izin veriyorlar. Ve bu eğitimde, bazı Divi tanıtım yazılarını, tıklandığında genişleyen ve daralan güzel, bölümlere ayrılmış dairesel bir menüye dönüştüreceğiz. Bölünmüş alanları (bir pasta grafiği gibi) oluşturmanın püf noktası, dönüşüm çarpıklığını oldukça benzersiz bir şekilde kullanmaktır. Bu fikir için ilham kaynağı bu eğitimden geldi ve şunu söylemeliyim ki Divi ile inşa etmek son derece eğlenceliydi.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız bölümlenmiş dairesel menüde bir zirve.

Bölünmüş Dairesel Menü Divi Düzenini ÜCRETSİZ İndirin

Bu öğreticiden menü tasarımına el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

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 sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).

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

Divi Blurbs Kullanarak Bölünmüş Dairesel Menü Oluşturma

Bu tasarım, yerleşik Divi ayarları ve harici kodun bir kombinasyonunu kullanacaktır. Menümüzün tasarımının çoğunu oluşturmak için görsel oluşturucuyu kullanacağız. Ardından, öğeler kesinlikle konumlandırıldığında, ulaşılması zor ayarlara ulaşmak için tel kafes görüntüleme modunu dağıtacağız. Arka arkaya birden çok tanıtım yazısı içeren dairesel menüyü oluşturmaya başlayacağız. Ardından, üst üste binen menü düğmesi olarak hizmet etmek için ayrı bir bölümde ek bir tanıtım yazısı tasarlayacağız.

Menü Öğeleri için Satır Oluşturma

Varsayılan normal bölümde, tek sütunlu bir satır ekleyin.

Satırı Şekillendirmek

Modül eklemeden önce, dairesel şeklimizi ve arka plan rengimizi elde etmek için satırı stillendirelim. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: #8857f2
• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: 30em
• Yükseklik: 30em
• Dolgu: 0 piksel üst, 0 piksel alt

Ardından yuvarlatılmış köşeleri ve kutu gölgesini ekleyin.

Yuvarlatılmış Köşeler: %50
Kutu Gölgesi: ekran görüntüsüne bakın

Satıra biraz daha özelleştirme eklemek için geri döneceğiz, ancak şimdilik tanıtım yazılarımızı eklemeye başlayabiliriz.

Menü için Blurb Oluşturma

Dairesel satırın içindeki bir sütun satırına yeni bir tanıtım yazısı ekleyin.

Stil Bulanıklığı #1

İlk tanıtım yazısının içeriğini bir başlık ve bir simge içerecek şekilde güncelleyin.

• Başlık: bağlantı
• Simgeyi Kullan: EVET
• Simge: ekran görüntüsüne bakın

Bundan sonra, tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #773ef2
• Arka Plan Rengi (fareyle üzerine gelin): #222222
• Simge Rengi: #ffffff
• Simge Yazı Tipi Boyutu: 40px (masaüstü), 30px (tablet)
• Metin Hizalama: orta

Ardından başlık metni stilini aşağıdaki gibi güncelleyin:

• Başlık Yazı Tipi: Arşiv Dar
• Başlık Yazı Tipi Stili: TT
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 14px (masaüstü), 12px (tablet)

Ardından, bazı özel CSS kullanarak tanıtım yazısını konumlandırmamız gerekiyor. Gelişmiş sekmesine gidin ve aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

position:absolute !important;
left: 50%;
top: 50%;

Şimdi tasarım sekmesine geri dönün ve tanıtım yazısının boyutunu ve aralığını aşağıdaki gibi güncelleyin:

• Genişlik: 15em
• Yükseklik: 15em
• Kenar Boşluğu: -15em Sol

Bu, tanıtım yazısının sağ alt köşesini doğrudan dairenin merkezine yerleştirir.

Dönüştürme Seçeneklerini Kullanarak Segment Oluşturma

Tanıtım yazısını bir daire parçasına dönüştürmek için tanıtım yazısını eğip döndüreceğiz. Bunu yapmak için aşağıdaki dönüştürme seçeneklerini güncelleyin:

• Eğik X Eksenini Dönüştür: 60deg

• Kökeni Dönüştür: %100 %100 (sağ altta)

Tanıtım yazımızın sağ alt köşesi doğrudan dairenin merkezinde olduğundan, dönüşüm kaynağının da sağ altta ayarlanmasını istiyoruz. Bu, çarpık tanıtım yazısının ucunun dairenin merkezinde olmasını sağlayarak segmenti oluşturur.

Bulanık İçeriğin Eğikliğini Kaldırma

Gerçekten tek istediğimiz, içindeki içeriği (yani simge ve metin) değil, segment şeklini oluşturmak için tanıtım yazısının şeklidir. Ancak bu mümkün olmadığı için, tek yapmamız gereken, çarpıklık efektini tersine çeviren ve normal görünmesi için bulanık içeriğe bir transform özelliği eklemek. Bunu yapmak için gelişmiş sekmeye gidin ve aşağıdaki özel CSS'yi ekleyin:

Bulanık İçerik CSS:

transform: skew(-60deg) rotate(-75deg);
position: absolute;
height: 27em;
width: 27em;
bottom: -13.5em;
right: -13.5em;

Ardından, Blurb Image için aşağıdaki CSS'yi ekleyerek simge ile başlık metni arasındaki boşluğu azaltın:

Bulanık Resim CSS'si

margin-bottom: 15px;

Ve şimdi, tanıtım yazısı içerik alanı tanıtım yazısının ötesine geçtiği için (göremeseniz bile), taşmayı aşağıdaki gibi gizlememiz gerekiyor:

• Yatay Taşma: gizli
• Dikey Taşma: gizli

Bunu eklemezsek, istenmeyen vurgulu alanımız olacaktır.

Bulanıkların Geri Kalanını Oluşturma

Geri kalan tanıtımları oluşturmak için, tel çerçeve görüntüleme modunu dağıtın ve toplam 6 özdeş tanıtım yazısına sahip olmak için mevcut tanıtım yazısını 5 kez çoğaltın.

Bulanıklığı Döndür #2

Ardından 2 numaralı tanıtım yazısı için ayarları açın ve modülü aşağıdaki gibi döndürün:

• Dönüştür Z eksenini döndür: 30deg

Bu, 2 numaralı tanıtım yazısını dairenin merkez noktasından saat yönünde döndürecektir.

Ardından, yarım daire segment oluşturmak için tanıtım yazılarının geri kalanını 30 derecelik artışlarla döndürmeye devam edebiliriz.

Bulanıklığı Döndür #3

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

• Dönüştür Döndür Z ekseni: 60deg

Bulanıklığı Döndür #4

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

• Dönüştür Döndür Z ekseni: 90deg

Bulanıklığı Döndür #5

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

• Dönüştür Döndür Z ekseni: 120deg

Bulanıklığı Döndür #6

Açıklama #6 için ayarları açın ve aşağıdakileri güncelleyin:

• Dönüştür Döndür Z ekseni: 150deg

İşte şimdiye kadarki sonuç.

Menü Düğmesini Oluşturma

Menü düğmesini oluşturmak için tüm bölümün boyutunu küçülteceğiz ve ardından düğme tasarımı için bir tanıtım yazısı simgesi kullanacağız.

Bunu yapmak için önce mevcut bölümün altına yeni bir normal bölüm ekleyin.

Ardından bölüme tek sütunlu bir satır ekleyin.

Düğme için Bulanıklık Simgesi Oluşturma

Ardından satıra bir tanıtıcı modül ekleyin.

Varsayılan başlığı ve gövde içeriğini silin ve aşağıdaki gibi bir simge kullanın:

• Simgeyi Kullan: EVET
• Simge: Artı sembolü (ekran görüntüsüne bakın)

Ayarları aşağıdaki gibi güncellemeye devam edin:

• Simge Rengi: #222222
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 50px
• Resim/Simge Animasyonu: Animasyon Yok

Ardından, simgenin altındaki varsayılan kenar boşluğundan kurtulmak için aşağıdaki özel CSS'yi Ana Öğeye ekleyin.

Ana Eleman CSS

margin-bottom: 0px;

Satır Dolgusu

Ardından, satırın varsayılan dolgusunu çıkarın.

• Dolgu: 0 piksel üst, 0 piksel alt

Bölüm Ayarları

Butonu bitirmek için bölümümüzü daire şeklinde şekillendireceğiz.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Genişlik: 100 piksel
• Yükseklik: 100 piksel
• Dolgu: 0 piksel üst, 0 piksel alt
• Yuvarlatılmış Köşeler: %50
• Kutu Gölgesi: ekran görüntüsüne bakın

Sonra beyaz bir arka plan verin.

• Arka Plan Rengi: #ffffff

Gelişmiş sekmesi altında, düğmeyi pencerenin altında sabitlenmiş olarak konumlandırmak için aşağıdaki özel CSS'yi Ana Öğeye ekleyin.

position: fixed !important;
bottom: -50px;
left: 50%;
margin-left: -50px;

Ayrıca jQuery ile hedefleyebilecek bir CSS Sınıfı eklememiz gerekiyor. Aşağıdakileri ekleyin:

• CSS Sınıfı: transform_target

Ardından, düğme sayfadaki içeriğin geri kalanının üzerinde kalacak şekilde Z Dizini'ni güncelleyin.

• Z İndeksi: 12

Dairesel Menü Satırını Konumlandırma

Şimdi menü düğmesi yerinde olduğuna göre, bölümlenmiş dairesel menümüzü içeren satırı, aynı zamanda sabitlenecek ve sayfanın alt kısmında ortalanacak ve dairenin yalnızca üst yarısı görünecek şekilde konumlandırmamız gerekiyor.

Bunu yapmak için menü tanıtımlarını içeren satırın satır ayarlarını açın ve aşağıdaki Özel CSS'yi ekleyin:

Ana Eleman CSS

position: fixed !important;
bottom: -10em;
left: 50%;
margin-left: -15em;
margin-bottom: -5em;

Z dizinini aşağıdaki gibi güncelleyin:

• Z İndeksi: 11

Ardından aşağıdaki CSS Sınıfını ekleyin.

• CSS Sınıfı: has-transform

Son olarak, dönüşüm ölçeğini kullanarak dairesel menüyü tamamen küçültmemiz (veya küçültmemiz) gerekiyor. Bu, tıklamada menüyü genişletecek ve daraltacak olan jQuery ile efekti açıp kapatmamıza izin verecektir.

Aşağıdakileri güncelleyin:

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

Bölünmüş dairesel menümüz ve menü butonumuz yerindeyken, tek yapılması gereken, butonun işlevselliğini tamamlamak için özel CSS ve jQuery eklemektir.

Sayfa Ayarlarına Harici Özel CSS Ekleme

Görsel oluşturucunun altındaki menüden sayfa ayarlarını açın ve gelişmiş sekmesinin altına aşağıdaki Özel CSS'yi ekleyin:

.has-transform, .transform_target .et-pb-icon, .toggle-transform-animation {
  transition: all 400ms ease-in-out;
} 
.has-transform, .toggle-transform-animation {
  font-size:14px;
}
.toggle-transform-animation {
  transform: none !important;
}
.transform_target {
  cursor: pointer;
}
.toggle-active-target .et_pb_blurb .et-pb-icon {
  transform: rotateZ(45deg);
}

@media all and (max-width: 980px) {
  .has-transform {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .has-transform, .toggle-transform-animation {
    font-size:10px;
  } 
} 

Bir Kod Modülü ile jQuery ekleme

Ardından, tel kafes görünüm modunu dağıtın ve menü düğmesi açıklamasının altına bir kod modülü ekleyin.

Ardından aşağıdaki kodu modüle ekleyin.

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

Son sonuç

Şimdi nihai sonucu canlı bir sayfada görelim.

Menü, mevcut sayfanızla veya ayarlar menüsünden artı simgesine tıklayarak ekleyebileceğiniz önceden hazırlanmış düzenlerimizden herhangi biriyle iyi çalışacaktır.

Psikolog açılış sayfası düzenimizde göründüğü gibi.

Ve işte mobilde.

Dairesel Menünün Boyutunu Ayarlama

Bölünmüş dairesel menü, ana gövde yazı tipinin boyutuna göre em uzunluk birimleri kullanılarak oluşturulur. Bu, menünün boyutunu artırmayı ve azaltmayı kolaylaştırır. Yazı tipinin boyutunu değiştirmek için sayfa ayarlarına eklediğimiz özel CSS'de satırı hedefleyen has-transform sınıfının font-size özelliğini değiştirmeniz yeterlidir.

Son düşünceler

Bu eğitimde, Divi'nin dönüştürme seçenekleriyle yaratıcı hale gelerek Divi'de bölümlenmiş dairesel bir menünün nasıl oluşturulacağını ele aldık. Ayrıca, menü öğeleri için sabit konumlandırma ve tanıtım metni içeriğini "çözme" gibi şeyler için bazı özel CSS kullandık. jQuery, menü düğmesine tıklandığında menünün genişleme ve daraltma efektini oluşturmak için dönüştürme ölçeği özelliğini açıp kapatmamıza olanak tanır.

Genel olarak, bu yazıdan çok fazla ilham alacağınızı düşünüyorum. Daha fazla tasarım oluşturmak için bu konsepti genişletmekten çekinmeyin. Örneğin, bölümlere ayrılmış menü bağlantılarıyla tam bir daire oluşturmak için tanıtım yazısı eklemeye devam edebilir ve bunları 30 derecelik artışlarla döndürebilirsiniz.

Veya etkileşimli bir pasta grafiği bile oluşturabilirsiniz!

İşte beğenebileceğiniz dairesel bir simge menüsü.

Yorumlarda sizden haber bekliyorum.

Şerefe!