Hover'da Dönen Menü Çarkı Nasıl Oluşturulur

Fareyle üzerine gelindiğinde dönen bir menü tekerleği oluşturmak, web sitenizdeki faydalı bağlantıları sergilemenin eğlenceli bir yoludur. Bu, kullanıcıları gitmeleri gereken yere yönlendirmek için bir başlıkta birden fazla harekete geçirici mesaj sağlamanın harika bir yolu olacaktır. Ayrıca blogunuz için harika bir alt kategori menüsü olacaktır.

Bu derste, size Divi'de fareyle üzerine gelindiğinde dönen bir menü tekerleğinin nasıl oluşturulacağını göstereceğim. Bu, yerleşik Divi seçeneklerinin ve birkaç özel css parçacığının bir kombinasyonu kullanılarak yapılabilir.

Gizlice Bakış

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak 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?

Youtube Kanalımıza Abone Olun

Başlamak için Gerekenler

Başlamak için aşağıdakilere sahip olmanız gerekir:

1. Divi Teması yüklü ve etkin
2. Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)

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

Divi'de Dönen Menü Çarkı Tasarımını Oluşturma

Temel Fikir

Tekerlek, sıraya 500px yükseklik ve genişlik ve %50 yuvarlatılmış köşeler verilerek dairesel bir elemana dönüştürülerek oluşturulur. Her menü bağlantısı ayrı bir metin modülünde oluşturulur ve her metin modülü satırın yarıçapı (merkezi) boyunca döndürülerek dairesel satırın çevresi boyunca hizalanır. Bu kurulum, Divi'de nasıl kavisli metin oluşturacağınıza benzer.

Bölüm ve Satır 1'i oluşturun

Bir sütun satırıyla normal bir bölüm oluşturun.

Ardından, aşağıdaki içeriğe sahip satıra bir metin modülü ekleyin.

Ardından metin tasarımını aşağıdaki gibi güncelleyin:

Metin Yazı Tipi: Teknolojiyi Paylaşın
Metin Harf Aralığı: 1px
Başlık 2 Metin Boyutu: 8vw

Tekerleği İnşa Etmek için 2. Satırı Ekleyin

Ardından, Satır 1'in altına yeni bir tek sütunlu satır eklememiz gerekiyor.

Linklerimiz için metin modüllerimizi eklemeye başlamadan önce sıramızı tekerlek olarak tasarlamamız gerekiyor. Tekerlek tasarımımızı yapmak için sırada iyi bir optimizasyona ihtiyaç olacak. Başlamak için 2. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #02366b
Arka Plan Gradyanı Sol Renk: rgba(0,0,0,0.45)
Arka Plan Gradyanı Sağ Renk: #02366b
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç ​​Konumu: %36
Bitiş Konumu: %0

Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Genişlik: 500 piksel
Maksimum Genişlik: 500px (masaüstü), otomatik (tablet ve telefon)
Yükseklik: 500 piksel (masaüstü), otomatik (tablet ve telefon)
Dolgu (masaüstü): 0 piksel üst, 0 piksel alt
Dolgu (tablet ve telefon): 20 piksel üst, 20 piksel alt, 20 piksel sol
Marj (telefon): -%10 sağ

Tam kare olması için satırın hem yüksekliğini hem de genişliğini 500 piksele ayarlamamız gerekiyor. Bu, Divi'deki yuvarlatılmış köşeler (sınır yarıçapı) seçeneğini kullanarak ona mükemmel bir dairesel şekil vermemizi sağlayacaktır.

Yuvarlatılmış Köşeler: %50

Ardından, aşağıdaki gibi bir kutu gölgesi kullanarak başka bir daire tasarımı seviyesi ekleyebiliriz:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Bulanıklığı Gücü: 0px
Kutu Gölge Yayılma Gücü: 210px
Gölge Rengi: rgba(2,54,107,0.66)

Ardından, satır içeriğimizi dikey olarak ortalamak için küçük bir CSS parçacığı ekleyeceğiz. Gelişmiş sekmesinin altında, Ana Öğeye aşağıdaki özel CSS'yi ekleyin.

display:flex;
align-items:center;

Bu, şimdilik satır ayarlarıyla ilgilenir. Dönen vurgulu efektimizi daha sonra eklemek için geri döneceğiz.

Bağlantıları Ekleme

Çarktaki her bağlantı bir metin modülü ile oluşturulacaktır. Toplam altı adet metin modülü oluşturacağız. Metin modüllerinden beşi çarkın bağlantılarını barındıracak ve metin modüllerinden biri menü başlığını içerecektir.

Yeni bir metin modülü oluşturarak başlayın.

Ardından metin ayarlarını aşağıdaki gibi güncelleyin:

Gövde içeriği: "Bağlantı Öğesi"

Metin Yazı Tipi: Teknolojiyi Paylaşın
Metin Metin Rengi: #ffffff
Metin Metin Boyutu: 16px (varsayılan), 20px (fareyle üzerine gelin)
Metin Harf Aralığı: 1px
Metin Satır Yüksekliği: 60px
Genişlik: 250 piksel (masaüstü), otomatik (tablet ve telefon)
Yükseklik: 60 piksel
Dolgu: 20 piksel kaldı

Ayarları şimdilik kaydedin. Ardından, toplam 5 metin modülü oluşturmak için metin modülünü 4 kez çoğaltın.

Bağlantıları/Metin Modüllerini Konumlandırma

Artık bağlantılarımızı tekerleğin çevresi boyunca konumlandırmaya hazırız. Bunu yapmak için, her metin modülünü, modülü yerine taşıyan/çeviren ve döndüren dönüştürme seçenekleriyle güncelleyeceğiz.

Bunu kolaylaştırmak için, tel kafes görünüm modunu dağıtın ve metin modüllerini en üstte Bağlantı 1'den başlayarak en alttaki Bağlantı 5'e kadar etiketleyin.

Bağlantı 1

Bağlantı 1'i düzenlemeye başlayacağız. Bağlantı 1 için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Dönüştürme Y Eksenini Çevir: 120 piksel (masaüstü), 0 piksel (tablet ve telefon)
Dönüştür Döndür Z Ekseni: 60deg (masaüstü), 0px (tablet ve telefon)
Kökeni Dönüştür: %50 %100 (sağ orta)

Bağlantı 2

Bağlantı 2 için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Dönüştürme Y Eksenini Çevir: 60 piksel (masaüstü), 0 piksel (tablet ve telefon)
Dönüştür Döndür Z Ekseni: 30deg (masaüstü), 0px (tablet ve telefon)
Kökeni Dönüştür: %50 %100 (sağ orta)

Bağlantı 3

Link 3'ün metin modülü ortada olduğu için onu yerinde bırakabiliriz.

Bağlantı 4

Bağlantı 2 için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Dönüştürme Y Eksenini Çevir: -60 piksel (masaüstü), 0 piksel (tablet ve telefon)
Dönüştür Döndür Z Ekseni: -30deg (masaüstü), 0px (tablet ve telefon)
Kökeni Dönüştür: %50 %100 (sağ orta)

Bağlantı 5

Bağlantı 2 için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Y Eksenini Dönüştür: -120px (masaüstü), 0px (tablet ve telefon)
Dönüştür Döndür Z Ekseni: -60deg (masaüstü), 0px (tablet ve telefon)
Kökeni Dönüştür: %50 %100 (sağ orta)

Şimdi buraya kadarki sonuca bakalım. Metin modüllerindeki bağlantıların/metnin dairenin çevresi boyunca nasıl mükemmel bir şekilde döndüğüne dikkat edin.

Menü Etiketini Ekleme

Menü etiketini eklemek için elimizdeki beş metin modülünün en üstüne başka bir metin modülü eklememiz gerekecek. Devam edin ve Bağlantı 1'in üzerine yeni bir metin modülü ekleyin.

Ardından gövde içeriğini aşağıdakilerle güncelleyin:

<p>menu</p>

Menü etiketinin ap etiketine sarıldığından emin olun. Bu, metin ayarlarında satır yüksekliğinin tanınmasını sağlayacaktır.

Ardından tasarımı hızlandırmak için Link 3 metin modülünün modül stillerini kopyalayın ve bu modül stillerini yeni metin modülüne yapıştırın.

Ardından aşağıdakileri güncelleyin:

Satır Yüksekliği: 300px (masaüstü), 20px (tablet ve telefon)
Yükseklik: varsayılan ayarı geri yükle (otomatik)

Satır Yüksekliğinin 300 piksel olması gerekir, böylece yine 300 piksel olan içerik sütununun yüksekliğine eşit olur (her biri 60 piksel yüksekliğe sahip 5 metin modülü 300 piksele eşittir). Bu, metnin dikey olarak ortalandığından emin olacaktır.

Daha sonra menü etiket metin modülünü 180 derece döndürmemiz gerekiyor ki çarkın karşı tarafında doğru görünsün. Bu, ziyaretçinin, görünümdeki bağlantıları döndüren fareyle üzerine gelme durumundan önce menü etiketini görmesini sağlar.

Dönüştür Döndür Z Ekseni: 180deg (masaüstü), 0deg (tablet ve telefon)
Kökeni Dönüştür: %50 %100 (sağ orta)

Tamamlandığında, menü etiketi metin modülüne mutlak bir konum vermemiz gerekiyor. Bunu yapmak için Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

position: absolute !important;

Şimdi sonucu kontrol edin. Direksiyonun sağ tarafında menü öğesinin baş aşağı olduğunu görmelisiniz.

Satıra/Tekerleğe Dönen Hover Etkisi Ekleme

Dönen vurgulu efektini satıra eklemek için satır ayarlarını aşağıdaki gibi güncelleyin:

Dönüştür Döndür Z ekseni: 180deg (masaüstü), 0deg (vurgulu, 0deg (tablet ve telefon)

Ardından geçiş ayarlarını aşağıdaki gibi güncelleyin:

Geçiş Süresi: 450ms
Geçiş Hızı Eğrisi: Giriş-Çıkış Kolaylığı

Şimdi tekerleğin üzerine gelindiğinde nasıl döndüğüne bakın.

Bölüm İçin İki Sütun Düzeni Yapma

Şu anda düzen, üst üste yığılmış iki tek sütunlu satırdan oluşuyor. Ancak, iki satırı yatay olarak hizalamak için flex css özelliğini kullanabiliriz. Bunu yapmak için bölüme küçük bir özel CSS parçası ekleyebiliriz. Bir kez bittiğinde, şeylerin doğru görünmesini sağlamak için aralığı biraz ayarlamamız gerekecek.

Bölüm ayarlarını açın ve ana öğeye aşağıdaki özel css'yi ekleyin:

display:flex;

Satır 1 Aralığını Güncelle

Ardından, 1. satır için boyutu ve aralığı aşağıdaki gibi güncelleyin:

Genişlik: %40 (masaüstü), %100 (tablet ve telefon)
Marj (masaüstü): %5 kaldı
Marj (tablet): %5 sol, %5 sağ
Marj (telefon): %5 sağ

Son dokunuşlar

Tablet ve telefon ekranında Link 1 Text modülüne bir miktar üst kenar boşluğu eklemeniz gerekecektir.

Kenar boşluğu (tablet): 30 piksel üst

Ve tasarımı tamamlamak için bölüme her zaman bir bölüm ayırıcı ekleyebilirsiniz.

Son sonuç

Şimdi nihai sonucu kontrol edelim.

Alternatif Yarım Tekerlek Tasarımı

Harika bir alternatif tasarım, bağlantıların gizlenmesi ve üzerine gelindiğinde ortaya çıkması için tekerleğin sağ yarısını bölümün dışına gizlemek. Bunu yapmak için devam edin ve az önce yaptığımız tasarımı tutan tüm bölümü çoğaltın. Yinelenen bölümde, 1. satır ayarlarını aşağıdaki gibi güncelleyin:

Genişlik: %70 (masaüstü)

Ardından, tekerleği bölümün dışına itmek için 2. sıranın ayarlarını aşağıdaki gibi güncelleyin:

Kenar boşluğu: -250 piksel sağ

-250px kullanmamız gerekiyor çünkü tekerleğin toplam genişliği 500px ve satırın tam olarak yarısını gizlemek istiyoruz.

Ardından, bölüm görünürlüğünü aşağıdaki gibi gizli olarak ayarlayın:

İşte son tasarım.

Son düşünceler

Dönen bağlantı çarkı, ziyaretçilerin ince ve benzersiz bir havada durma efektiyle ilgisini çekebilecek zarif tasarım öğelerinden biridir. Ve bu tasarımın ne kadarını sadece Divi'nin yerleşik tasarım ayarlarıyla yapabileceğiniz oldukça şaşırtıcı. Umarım bu, bir sonraki projeniz için tasarım araç kemerinize fazladan bir şeyler ekler.

Yorumlarda sizden haber bekliyorum.

Şerefe!