Fareyle üzerine gelindiğinde dönen tekerlek şeklinde orijinal bir Divi menüsü oluşturmak ister misiniz?
Fareyle üzerine gelindiğinde dönen bir menü tekerleği oluşturmak, yararlı bağlantıları web sitenizde sergilemenin eğlenceli bir yoludur. Site Web. 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 harika bir alt kategori menüsü de olabilir. blogunuzun.
Bu eğitimde, Divi'de fareyle üzerine gelindiğinde dönen bir menü tekerleğinin nasıl oluşturulacağını göstereceğiz. Bu, yerleşik Divi seçeneklerinin ve bazı özel css parçacıklarının bir kombinasyonu kullanılarak yapılabilir.
anket
Bu eğitime geçmeden önce, elde etmek istediğimiz sonuca bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Divi Builder ile yeni bir sayfa oluşturun
Başlamak için aşağıdakilere ihtiyacınız olacak:
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de dönen menü tekerleğinin tasarımı
Bölüm ve satır 1 oluştur
Varsayılan olarak bulunan bölümde, aşağıdaki sütun yapısına sahip bir satır ekleyin.
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 oluşturmak için 2. satırı ekleyin
Ardından, 1. satırın altındaki bir sütuna yeni bir satır eklememiz gerekiyor.
Linklerimiz için Text modüllerimizi eklemeye başlamadan önce hattımızı tekerlek olarak tasarlamamız gerekiyor. Tekerlek tasarımımızı yapmak için sırada birçok optimizasyon gerekecek.
Ayrıca Oku: Divi'de Hover Section Divider'da İçerik Nasıl Ortaya Çıkarılır
Başlamak için 2. Satır Ayarları'nı açın ve aşağıdakileri güncelleyin:
- Arka Plan Rengi: #02366b
- Sol arka plan degrade rengi: rgba(0,0,0,0.45)
- Sağ arka plan degrade rengi: #02366b
- Gradyan Türü: Dairesel
- Radyal Yön: Merkez
- Başlangıç pozisyonu: %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ü): 0px (Üst ve Alt)
- Dolgu (Tablet ve Telefon): 20px (Üst, Alt ve Sol)
- Marj (Telefon): -%10 (Sağ)
Tam kare olması için çizginin hem yüksekliğini hem de genişliğini 500 piksele ayarlamamız gerekiyor. Bu, Divi'nin yuvarlatılmış köşeleri (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ö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ımızın içeriğini dikey olarak ortalamak için küçük bir CSS parçacığı ekleyeceğiz. sekmenin altında gelişmiş, ana öğeye aşağıdaki özel CSS'yi ekleyin.
display:flex;align-items:center;
Bağlantı ekleme
Çarktaki her bağlantı bir modül ile oluşturulacaktır. Metin. Toplam altı modül oluşturacağız Metin. Modüllerin beşi Metin tekerleğin bağlantılarını, diğeri ise menünün 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:
- Body: “Element 1”
- Metin Yazı Tipi: Teknolojiyi Paylaşın
- Metin Rengi: #ffffff
- Boyut: 16px (varsayılan), 20px (Vurgulu)
- 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 (Sol): 20 piksel
Ayarları şimdilik kaydedin. Ardından, toplam 4 metin modülü oluşturmak için metin modülünü 5 kez çoğaltın.
Metin bağlantılarını/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 modülü güncelleyeceğiz Metin Modülü yerinde hareket ettiren/çeviren ve döndüren dönüştürme seçenekleriyle.
Ayrıca keşfedin: Divi'de fareyle üzerine gelindiğinde bir akışkan sütun ızgarası nasıl oluşturulur
Bunu kolaylaştırmak için, tel kafes görüntüleme modunu dağıtın ve Metin modüllerini üstte bağlantı 1 ile başlayarak alttaki bağlantı 5'e etiketleyin.
Bağlantı 1
Bağlantı 1'i düzenleyerek başlayacağız. Bağlantı 1 için Metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Dönüştür Çevir (Y ekseni): 120 piksel (Masaüstü), 0 piksel (Tablet ve Telefon)
- Dönüştür Döndür (Z ekseni): 60 derece (Masaüstü), 0 piksel (Tablet ve Telefon)
- Menşei: %50 (orta sağ)
Bağlantı 2
Bağlantı 2 için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Dönüştürmek
- Çevir (Y ekseni): 60px (Masaüstü), 0px (Tablet ve Telefon)
- Z ekseni dönüşü: 30deg (Masaüstü), 0px (Tablet ve Telefon)
- Menşei: %50 (orta sağ)
Bağlantı 3
Link 3 için 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ür:
- Y eksenini çevir: -60px (Masaüstü), 0px (Tablet ve Telefon)
- Z Ekseni Döndürme: -30deg (Masaüstü), 0px (Tablet ve Telefon)
- Menşei: %50 (Merkez sağ)
Bağlantı 5
Bağlantı 2 için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Dönüştür:
- Y eksenini çevir: -120px (Masaüstü), 0px (Tablet ve Telefon)
- Z Ekseni Döndürme: -60deg (Masaüstü), 0px (Tablet ve Telefon)
- Menşei: %50 (orta sağ)
Şimdi buraya kadarki sonucu görelim. Metin modüllerindeki bağlantıların/metinlerin dairenin çevresi boyunca nasıl mükemmel bir şekilde çalıştığına dikkat edin.
Menü etiketi eklendi
Menü etiketini eklemek için halihazırda sahip olduğumuz beş Metin modülünün ü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:
Menu
Ardından, tasarımı hızlandırmak için bağlantı 3 için Metin 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:
- Metin Satır Yüksekliği: 300px (Masaüstü), 20px (Tablet ve Telefon)
- Yükseklik: varsayılan ayarı geri yükle (otomatik)
- Dönüştürme Döndürme (Z ekseni): 180 derece (Masaüstü), 0 derece (Tablet ve Telefon)
- Kökeni Dönüştür: %50 (orta sağ)
Bir kez yapıldıktan sonra Menu Label Text modülüne mutlak bir pozisyon vermemiz gerekiyor. Bunu yapmak için ana öğeye aşağıdaki özel CSS'yi ekleyin:
position: absolute!important;
Şimdi sonucu öğrenin. Menü öğesinin çarkın sağ tarafında baş aşağı olduğunu görmelisiniz.
Çizgiye/tekerleğe dönen vurgulu efekti eklendi
Satıra döner vurgulu efekti eklemek için satır ayarlarını aşağıdaki gibi güncelleyin:
- Dönüştürme Döndürme (Z ekseni): 180 derece (Masaüstü), 0 derece (Vurgulu), 0 derece (Tablet ve Telefon)
Ardından, geçiş ayarlarını aşağıdaki gibi güncelleyin:
- Geçiş Süresi: 450ms
- Hız Eğrisi Geçişi: Giriş-Çıkış Kolaylığı
Şimdi çarkın üzerine gelindiğinde nasıl döndüğünü izleyin.
Bölüm için iki sütunlu bir düzen oluşturma
Şu anda düzen, üst üste yığılmış iki tek sütunlu satırdan oluşur. Ancak, iki çizgiyi 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. Bu yapıldıktan sonra, işleri doğru yapmak 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;
1. Satır Aralığını Güncelle
Ardından, 1. satırın boyutunu ve aralığını aşağıdaki gibi güncelleyin:
- Genişlik: %40 (Masaüstü)
- Marj (Masaüstü): %5 kaldı
Nihai sonuç
Şimdi son sonucu görelim.
DIVI'yı Şimdi İndirin !!!
Alternatif yarım tekerlek tasarımı
İlginç 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 oluşturduğumuz çizimi içeren bölümün tamamını çoğaltın.
Yinelenen bölümde, 1. satırdaki parametreleri aşağıdaki gibi güncelleyin:
- Genişlik: %70 (masaüstü)
Ardından, tekerleği bölümden dışarı itmek için satır 2'deki ayarları 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ün görünürlüğünü aşağıdaki gibi gizli olarak ayarlayın:
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
İşte son sonuç.
DIVI'yı Şimdi İndirin !!!
Sonuç
Dönen bağlantılı tekerlek, ziyaretçi ince ve benzersiz bir vurgulu efektle. Divi'nin yerleşik tasarım ayarlarıyla bu tasarımın bu kadar kolay yapılabilmesi oldukça şaşırtıcı.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
