Dönen bir menü çarkı nasıl yapılır yönlendirilir
İmleciyi yönlendirirken bir eğirme menüsü tekerleği yapmak, web sitenizde yararlı bağlantılar görüntülemenin eğlenceli bir yoludur. Bu, kullanıcıyı gitmek zorunda oldukları yere yönlendirmek için başlıkta hareket etmek için bazı davetiyeler sağlamanın iyi bir yolu olacaktır. Bu da blogunuz için harika bir alt kategori menüsü olacak. Bu öğreticide, Divi’de yüzerken menü çarkının nasıl dönüş yapacağınızı göstereceğim. Bu, varsayılan divi seçenekleri ve birkaç özel CSS görüntüsü kombinasyonu kullanılarak yapılabilir. Gizlice göz atma
Bu öğreticiden bir tasarım almak için düzeni ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, zip dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin. Sadece öğreticiye gidin? YouTube kanalımıza Abone Olmaya başlamanız gereken şeylere abone olun, aşağıdakilere sahip olmanız gerekir:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Tekerlek tasarımı menüsü yapmak, tekerleğin temel fikrinde döner. Her menü bağlantısı ayrı bir metin modülünde yapılır ve her metin modülünü yarıçap (orta) satır boyunca çevirerek dairesel bir çizgi boyunca hizalanır. Bu ayar, Divi’de kavisli metin yapma şeklinize benzer.
Bir satır sütunu ile normal bölüm için bölüm ve satır 1 oluşturun.
Ardından metin modülünü aşağıdaki içerikle satıra ekleyin. Ardından metin tasarımını aşağıdaki gibi güncelleyin: Metin Yazı Tipi: Metin Mektubu Boşluk Teknolojisi: 1px Başlık 2 Metin Boyutu: 8VW Satır 2 Ekle Bir sonraki tekerleği oluşturmak için, satır 1 altına yeni bir sütunun satır eklememiz gerekir. Bağlantımız için metin modülünü eklemeye başlamadan önce, çizgimizi tekerlek olarak tasarlamamız gerekir. Tekerlek tasarımımızı yapmak için satırda biraz iyi optimizasyon gerekli olacak. Başlamak için, satır 2 için ayarları açın ve aşağıdakileri güncelleyin: Arka plan rengi: #02366b Sol Renk Arka Plan Yasası: RGBA (0.0,0,0.45) Sağ Renk Arka Plan Yasası: #02366B Gradyan Türü: Radyal Radyal Yön: Başlangıç Pozisyon Merkezi:% 3 Nihai Konum:% 0% 0
Özel Talang genişliğini kullanın: evet talang genişliği: 1 genişlik: 500 piksel maks: 500px (masaüstü), otomatik (tablet ve cep telefonu) Yükseklik: 500 piksel (masaüstü), otomatik (tablet ve cep telefonu) dolgu (masaüstü): 0px üst, 0px Dövme Düşük (Tablet ve Cep Telefonu): 20px üst, 20px alt, 20px sol kenar boşluğu (telefon):% -10’un, satırın yüksekliğini ve genişliğini mükemmel bir kare haline gelecek şekilde 500 piksel olarak ayarlaması gerekiyor. Bu, Divi’de yuvarlak açılı bir seçenek (sınır yarıçapı) kullanarak mükemmel bir daire şekli vermemizi sağlayacaktır. Yuvarlak açı:% 50 Ardından, kutunun gölgesini aşağıdaki gibi kullanarak başka bir daire tasarımının başka bir seviyesi ekleyebiliriz: Gölge Kutusu: Bkz. Ekran Ekranı Güç Kutusu: 0PX GÜÇ GÖREDİ GÖZLEME YAYRIK: 210px Renk Gölgesi: RGBA (2.54.107.0.66)
Daha sonra, satır içeriğimizi dikey olarak merkezi hale getirmek için küçük bir CSS parçası ekleyeceğiz. Gelişmiş sekmesinin altına, ana öğeye aşağıdaki özel CSS ekleyin. Ekran: Flex; Hizalama-öğeler: merkez; Şimdilik satır ayarlarını ele alıyor. Daha sonra dönen gelişimimizin etkisini eklemek için geri döneceğiz.
Tekerleklerdeki her bağlantı için bir bağlantı eklemek bir metin modülü ile yapılacaktır. Toplam altı metin modülü yapacağız. Metin modülünün beşi tekerlekler için bağlantıları saklayacak ve metin modüllerinden biri menü başlıkları içerecektir. Yeni bir metin modülü oluşturarak başlayın. Ardından metin ayarlarını aşağıdaki gibi güncelleyin: İçindekiler: “Bağlantı öğesi”
Metin yazı tipi: Metin Metin Rengi Teknolojisi: #FFFFF Metin Boyut Metin Metin: 16px (Varsayılan), 20px (nokta imleç) Metin Mektup Alanı: 1px Yükseklik Metin Satırı: 60px genişlik: 250px (masaüstü), otomatik (tablet ve cep telefonu) Yükseklik : 60 piksel dolgu: sol 20 piksel Şimdilik ayarları kaydedin. Ardından, toplam 5 metin modülü yapmak için metin modülünü 4 kez çoğaltın. Bağlantı/metin modülünü konumlandırın Şimdi bağlantımızı tekerlek çevresi boyunca konumlandırmaya hazırız. Bunu yapmak için, her metin modülünü modülü hareket eden/çeviren ve oynayan bir dönüşüm seçeneğiyle güncelleyeceğiz. Kolay hale getirmek için, çerçeve görüntü görüntüleme modunu uygulayın ve üstte bir bağlantı 1 ile başlayan metin modülünü alttaki 5 bağlantıya etiketleyin. Bağlantı 1 Bağlantıyı düzenleyerek başlayacağız 1. Bağlantılar 1 için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevir: 120px (masaüstü), 0px (tablet ve cep telefonu) dönüşümü Döndürme z ekseni: 60deg (masaüstü),, 0px (Tablet ve Cep Telefonu) Dönüşüm Kökeni:% 50% 100 (Orta Sağ) Bağlantı 2 Bağlantı 2 için metin modülünün ayarlarını açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevir: 60px (masaüstü), 0px (tablet ve cep telefonu) Dönüştürme D dönme z ekseni: 30deg (masaüstü ve cep telefonu) dönüşüm (tablet ve cep telefonu) Origin:% 50% 100 (orta sağ) Bağlantı 3 Bağlantı 3 için metin modülü ortada olduğundan, onu yerine bırakabiliriz. Bağlantı 4 Bağlantı 2 için metin modülünün ayarlarını açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevir: -60px (masaüstü), 0px (tablet ve cep telefonu) Dönüştürme Z ekseni: -30deg (masaüstü), 0px (tablet ve cep telefonu ) Dönüşüm Kökeni:% 50% 100 (Orta Sağ)
Şimdi sonuçlara bakın. Direksiyon simidinin sağındaki baş aşağı menü öğesi göreceksiniz. Hover efektini eklemek için satır/tekerleğe bir dönen efekt eklemek satıra döner, satır ayarlarını aşağıdaki gibi güncelleyin: dönüş z ekseni: 180deg (masaüstü), 0deg (Hover, 0deg (tablet ve cep telefonu) sonra geçişini güncelleyin. Aşağıdaki ayarlar: Süre Geçiş: 450ms Geçiş Hız Eğrisi: Kolaylık-Out Şimdi yüzerken tekerleklerin nasıl döndüğüne bakın. Düzenin geçerli kısmı için iki sütunun düzeni yapmak, birbirinin üstüne istiflenmiş bir sütunun iki satırından oluşur. Bununla birlikte, her iki sırayı da yatay olarak uyumlu hale getirmek için Flex CSS özelliğini kullanabiliriz. Bunu yapmak için, bu bölüme özel küçük bir CSS parçası ekleyebiliriz. Bittiğinde, mesafeyi her şeyin doğru görünmesi için biraz ayarlamamız gerekiyor. Bölüm ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: Ekran: Flex; Sıra 1 Boşluk 1, Satır 1’in boyutunu ve alanı şu şekilde güncelleyin: Genişlik:% 40 (masaüstü),% 100 (tablet ve cep telefonu) kenar boşluğu (masaüstü):% 5 sol kenar boşluğu (tablet):% 5 sol, 5 sol, 5 % sağ marj (telefon):% 5 doğru Tablet ve mobil ekrandaki son dokunuş, 1 metin bağlantı modülüne biraz üst kenar eklemeniz gerekir. Marj (tablet): 30px üst Ve tasarımı tamamlamak için bölüme her zaman parça ayırıcı ekleyebilirsiniz. Nihai sonuç şimdi sonucuna bakalım. Alternatif Tasarım Yarım Tekerlek Serin alternatif tasarımlardan biri, tekerleklerin sağ tarafını parçanın dışındaki gizlemektir, böylece bağlantının gizlenmesi ve daha sonra yüzerken ortaya çıkmasıdır. Bunu yapmak için, yeni yaptığımız tasarımı tutan tüm parçaları devam ettirin ve çoğaltın. Yinelenen bölümde, satır ayarlarını 1 şu şekilde güncelleyin: Genişlik:% 70 (Masaüstü) Ardından, tekerlekleri aşağıdaki bölümün dışına itmek için satır 2 ayarlarını güncelleyin: -250px Sağ -250px kullanmalıyız çünkü çünkü -250px kullanmalıyız çünkü toplam genişliği toplam genişliği. Tekerlekler 500 piksel ve hattın tam yarısını gizlemek istiyoruz. Ardından, parçanın görünürlüğünü ayarlayın: İşte son tasarım. Dönen bağlantı çarkının son zihni, ince ve benzersiz bir yüzer etkiye sahip ziyaretçileri içerebilen zarif tasarımın unsurlarından biridir. Ve bu tasarımlardan kaç tanesinin yalnızca Divi’nin varsayılan tasarım ayarlarıyla yapabileceğiniz gerçekten şaşırtıcı. Umarım bu, bir sonraki projeniz için tasarım aracınıza biraz ekstra ekler. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, zip dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin. Sadece öğreticiye gidin? YouTube kanalımıza Abone Olmaya başlamanız gereken şeylere abone olun, aşağıdakilere sahip olmanız gerekir:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Tekerlek tasarımı menüsü yapmak, tekerleğin temel fikrinde döner. Her menü bağlantısı ayrı bir metin modülünde yapılır ve her metin modülünü yarıçap (orta) satır boyunca çevirerek dairesel bir çizgi boyunca hizalanır. Bu ayar, Divi’de kavisli metin yapma şeklinize benzer.
Bir satır sütunu ile normal bölüm için bölüm ve satır 1 oluşturun.
Ardından metin modülünü aşağıdaki içerikle satıra ekleyin. Ardından metin tasarımını aşağıdaki gibi güncelleyin: Metin Yazı Tipi: Metin Mektubu Boşluk Teknolojisi: 1px Başlık 2 Metin Boyutu: 8VW Satır 2 Ekle Bir sonraki tekerleği oluşturmak için, satır 1 altına yeni bir sütunun satır eklememiz gerekir. Bağlantımız için metin modülünü eklemeye başlamadan önce, çizgimizi tekerlek olarak tasarlamamız gerekir. Tekerlek tasarımımızı yapmak için satırda biraz iyi optimizasyon gerekli olacak. Başlamak için, satır 2 için ayarları açın ve aşağıdakileri güncelleyin: Arka plan rengi: #02366b Sol Renk Arka Plan Yasası: RGBA (0.0,0,0.45) Sağ Renk Arka Plan Yasası: #02366B Gradyan Türü: Radyal Radyal Yön: Başlangıç Pozisyon Merkezi:% 3 Nihai Konum:% 0% 0
Özel Talang genişliğini kullanın: evet talang genişliği: 1 genişlik: 500 piksel maks: 500px (masaüstü), otomatik (tablet ve cep telefonu) Yükseklik: 500 piksel (masaüstü), otomatik (tablet ve cep telefonu) dolgu (masaüstü): 0px üst, 0px Dövme Düşük (Tablet ve Cep Telefonu): 20px üst, 20px alt, 20px sol kenar boşluğu (telefon):% -10’un, satırın yüksekliğini ve genişliğini mükemmel bir kare haline gelecek şekilde 500 piksel olarak ayarlaması gerekiyor. Bu, Divi’de yuvarlak açılı bir seçenek (sınır yarıçapı) kullanarak mükemmel bir daire şekli vermemizi sağlayacaktır. Yuvarlak açı:% 50 Ardından, kutunun gölgesini aşağıdaki gibi kullanarak başka bir daire tasarımının başka bir seviyesi ekleyebiliriz: Gölge Kutusu: Bkz. Ekran Ekranı Güç Kutusu: 0PX GÜÇ GÖREDİ GÖZLEME YAYRIK: 210px Renk Gölgesi: RGBA (2.54.107.0.66)
Daha sonra, satır içeriğimizi dikey olarak merkezi hale getirmek için küçük bir CSS parçası ekleyeceğiz. Gelişmiş sekmesinin altına, ana öğeye aşağıdaki özel CSS ekleyin. Ekran: Flex; Hizalama-öğeler: merkez; Şimdilik satır ayarlarını ele alıyor. Daha sonra dönen gelişimimizin etkisini eklemek için geri döneceğiz.
Tekerleklerdeki her bağlantı için bir bağlantı eklemek bir metin modülü ile yapılacaktır. Toplam altı metin modülü yapacağız. Metin modülünün beşi tekerlekler için bağlantıları saklayacak ve metin modüllerinden biri menü başlıkları içerecektir. Yeni bir metin modülü oluşturarak başlayın. Ardından metin ayarlarını aşağıdaki gibi güncelleyin: İçindekiler: “Bağlantı öğesi”
Metin yazı tipi: Metin Metin Rengi Teknolojisi: #FFFFF Metin Boyut Metin Metin: 16px (Varsayılan), 20px (nokta imleç) Metin Mektup Alanı: 1px Yükseklik Metin Satırı: 60px genişlik: 250px (masaüstü), otomatik (tablet ve cep telefonu) Yükseklik : 60 piksel dolgu: sol 20 piksel Şimdilik ayarları kaydedin. Ardından, toplam 5 metin modülü yapmak için metin modülünü 4 kez çoğaltın. Bağlantı/metin modülünü konumlandırın Şimdi bağlantımızı tekerlek çevresi boyunca konumlandırmaya hazırız. Bunu yapmak için, her metin modülünü modülü hareket eden/çeviren ve oynayan bir dönüşüm seçeneğiyle güncelleyeceğiz. Kolay hale getirmek için, çerçeve görüntü görüntüleme modunu uygulayın ve üstte bir bağlantı 1 ile başlayan metin modülünü alttaki 5 bağlantıya etiketleyin. Bağlantı 1 Bağlantıyı düzenleyerek başlayacağız 1. Bağlantılar 1 için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevir: 120px (masaüstü), 0px (tablet ve cep telefonu) dönüşümü Döndürme z ekseni: 60deg (masaüstü),, 0px (Tablet ve Cep Telefonu) Dönüşüm Kökeni:% 50% 100 (Orta Sağ) Bağlantı 2 Bağlantı 2 için metin modülünün ayarlarını açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevir: 60px (masaüstü), 0px (tablet ve cep telefonu) Dönüştürme D dönme z ekseni: 30deg (masaüstü ve cep telefonu) dönüşüm (tablet ve cep telefonu) Origin:% 50% 100 (orta sağ) Bağlantı 3 Bağlantı 3 için metin modülü ortada olduğundan, onu yerine bırakabiliriz. Bağlantı 4 Bağlantı 2 için metin modülünün ayarlarını açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevir: -60px (masaüstü), 0px (tablet ve cep telefonu) Dönüştürme Z ekseni: -30deg (masaüstü), 0px (tablet ve cep telefonu ) Dönüşüm Kökeni:% 50% 100 (Orta Sağ)
Bağlantı 5 Bağlantı 2 için metin modülünün ayarlarını açın ve Dönüşümü Güncelle: Dönüşümü Çevirme Y ekseni: -120px (masaüstü), 0px (tablet ve cep telefonu) Dönüştürme Z ekseni: -60deg (masaüstü), 0px (tablet ve cep telefonu ) Dönüşüm Kökeni:% 50% 100 (Orta Sağ)
Şimdi şu ana kadar sonuçlara bakalım. Metin modülündeki bağlantının/metnin dairenin çevresi boyunca nasıl mükemmel bir şekilde döndüğüne dikkat edin. Bir menü etiketi ekleyin Bir menü etiketi eklemek için, zaten sahip olduğumuz beş metin modülünün üstüne başka bir metin modülü eklememiz gerekir. Lütfen bağlantı 1’e yeni bir metin modülü ekleyin. Ardından, gövde içeriğini aşağıdakilerle güncelleyin: & amp; p & amp; gt; lt; lt;/p & amp; gt; Menü etiketinin AP etiketine sarıldığından emin olun. Bu, çizginin yüksekliğinin metin ayarlarında tanınmasını sağlayacaktır. Ardından tasarımı hızlandırmak için, modül stilini bağlantı 3 için metin modülünden kopyalayın ve modülün kuvvetini yeni metin modülüne yapıştırın. Ardından aşağıdakileri güncelleyin: Satır Yüksekliği: 300 piksel (masaüstü), 20px (tablet ve cep telefonu) Yüksek: Varsayılan ayarları geri yükle (otomatik) satır yüksekliği 300 piksel olmalı, böylece 300px (5 olan içerik sütununun yüksekliğine eşit olmalıdır her biri yüksek yükseklikte 60 piksel olan 300 piksele eşit metin modülleri). Bu, metnin dikeyin ortasında kalmasını sağlayacaktır. Ardından, tekerleklerin karşı tarafında doğru şekilde görüntülenecek şekilde 180 derecelik menü etiket metin modülünü oynatmamız gerekir. Bu, ziyaretçilerin ekrandaki bağlantıyı oynatan Hover durumundan önce menü etiketini görmelerini sağlayacaktır. Dönüşüm Döndürme Z Ekseni: 180deg (masaüstü), 0deg (tablet ve cep telefonu) Dönüşüm Kökeni:% 50% 100 (orta sağ) Bittiğinde, menü etiketi metin modülüne mutlak bir konum vermemiz gerekir. Bunu yapmak için, ana öğeye aşağıdaki özel CSS ekleyin: Pozisyon: Mutlak! Önemli;Şimdi sonuçlara bakın. Direksiyon simidinin sağındaki baş aşağı menü öğesi göreceksiniz. Hover efektini eklemek için satır/tekerleğe bir dönen efekt eklemek satıra döner, satır ayarlarını aşağıdaki gibi güncelleyin: dönüş z ekseni: 180deg (masaüstü), 0deg (Hover, 0deg (tablet ve cep telefonu) sonra geçişini güncelleyin. Aşağıdaki ayarlar: Süre Geçiş: 450ms Geçiş Hız Eğrisi: Kolaylık-Out Şimdi yüzerken tekerleklerin nasıl döndüğüne bakın. Düzenin geçerli kısmı için iki sütunun düzeni yapmak, birbirinin üstüne istiflenmiş bir sütunun iki satırından oluşur. Bununla birlikte, her iki sırayı da yatay olarak uyumlu hale getirmek için Flex CSS özelliğini kullanabiliriz. Bunu yapmak için, bu bölüme özel küçük bir CSS parçası ekleyebiliriz. Bittiğinde, mesafeyi her şeyin doğru görünmesi için biraz ayarlamamız gerekiyor. Bölüm ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: Ekran: Flex; Sıra 1 Boşluk 1, Satır 1’in boyutunu ve alanı şu şekilde güncelleyin: Genişlik:% 40 (masaüstü),% 100 (tablet ve cep telefonu) kenar boşluğu (masaüstü):% 5 sol kenar boşluğu (tablet):% 5 sol, 5 sol, 5 % sağ marj (telefon):% 5 doğru Tablet ve mobil ekrandaki son dokunuş, 1 metin bağlantı modülüne biraz üst kenar eklemeniz gerekir. Marj (tablet): 30px üst Ve tasarımı tamamlamak için bölüme her zaman parça ayırıcı ekleyebilirsiniz. Nihai sonuç şimdi sonucuna bakalım. Alternatif Tasarım Yarım Tekerlek Serin alternatif tasarımlardan biri, tekerleklerin sağ tarafını parçanın dışındaki gizlemektir, böylece bağlantının gizlenmesi ve daha sonra yüzerken ortaya çıkmasıdır. Bunu yapmak için, yeni yaptığımız tasarımı tutan tüm parçaları devam ettirin ve çoğaltın. Yinelenen bölümde, satır ayarlarını 1 şu şekilde güncelleyin: Genişlik:% 70 (Masaüstü) Ardından, tekerlekleri aşağıdaki bölümün dışına itmek için satır 2 ayarlarını güncelleyin: -250px Sağ -250px kullanmalıyız çünkü çünkü -250px kullanmalıyız çünkü toplam genişliği toplam genişliği. Tekerlekler 500 piksel ve hattın tam yarısını gizlemek istiyoruz. Ardından, parçanın görünürlüğünü ayarlayın: İşte son tasarım. Dönen bağlantı çarkının son zihni, ince ve benzersiz bir yüzer etkiye sahip ziyaretçileri içerebilen zarif tasarımın unsurlarından biridir. Ve bu tasarımlardan kaç tanesinin yalnızca Divi’nin varsayılan tasarım ayarlarıyla yapabileceğiniz gerçekten şaşırtıcı. Umarım bu, bir sonraki projeniz için tasarım aracınıza biraz ekstra ekler. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
