Divi’ye tıklarken genişleyen dairesel simge menüsü nasıl oluşturulur
Dairesel simge menüsü, divi sitenize basit bir menü eklemek için zarif bir çözümdür. Bu menü stili sezgiseldir ve mobil cihazınız için sabit bir menü olarak çok iyi çalışır. Bugün, Divi’de Divi Builder’ın güçlü tasarım özelliklerini gerçekten vurgulayacak şekilde Divi’de dairesel bir simge menüsünün nasıl oluşturulacağını göstereceğiz. Ve tıklandığında menüyü açıp kapatması kolay olan JavaScript görüntülerini sunacağız. Aşağıdaki Sneak Peek’e başlayalım, yapacağımız daire simgesi menüsüne bir bakış.
Free Circle Icon menüsünün düzenini indirin Bu öğreticinin tasarımını almak için, ö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? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Değilse, yüklü Divi temasını (veya Divi temasını kullanmıyorsanız Divi Builder eklentisini) yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön uçtaki sayfayı düzenlemek için Divi Builder’ı etkinleştirin (görsel yapımcı).
Bu öğretici için, açıklama modülünden varsayılan divi simgesini kullanacağız, bu nedenle herhangi bir harici varlığa gerek yok. Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bölüm 1 Divi Builder, ön uçtaki sayfayı düzenlemek için etkinleştirildikten sonra, sütunun bir satırını normal varsayılan bölüme ekleyin.
Ardından satır ayarlarını açın ve aşağıdaki dolguyu ekleyin: Dolgu: 300 piksel üst Bu sadece biraz yer vermek içindir, böylece tıklandığında dairesel bir menü öğesi görünür. Bir Menü Simgesi Oluşturma Blurb #1 modülü ile dolgu satırı yüklendikten sonra açıklama modülünü sütuna ekleyin. Bu, Dairesel İkon menümüzü yapmak için ekleyeceğimiz toplam 5 açıklamadan ilki olacak. Bunu açıklama #1 olarak adlandıracağız. Ardından, içeriğin başlığını ve metnini ortadan kaldırarak açıklama içeriğini güncelleyin. Ardından simgeyi aşağıdaki açıklamaya ekleyin. Simgeler kullanın: evet simgesi: Ekran görüntüsüne bakın Ayrıca, tasarım ayarlarını aşağıdaki gibi güncelleyeceğiz: Renk Icon: #29A1F2 Daire Icon: Evet Daire Renk: #222222 Göster Çember Sınır: EVET RENK ÇAĞRI Sınır: #29A1F2 Simge Yazı Tipi Boyutunu Kullan: Evet simge yazı tipinin boyutu: 25px gövde metni boyutu: 20px marj: 0px Dairesel bir simge düzenlemenin yanı sıra, içeriğin boyutunu da ekliyoruz. İçindekiler metni yoktur, ancak bu, birim Long EM’yi (üst içerik metninin boyutuna göre) her kullandığımızda, çeviriler dönüşümlerini kullanarak menü/bulanık öğeleri boşaltmak için her kullandığımızda yararlı olacaktır. Bunun hakkında daha fazla bilgi. Bundan sonra, varsayılan görüntü/simge animasyonunu kaldırın. Görüntü/animasyon simgesi: animasyon olmadan, bu modül için Z index’ini 1’e ayarlayın, böylece diğerinin üstünde oturacak ve sonunda arkasında oturacak. Dizin Z: 1 ve son olarak, bulanık görüntüye aşağıdaki özel CSS ekleyerek simgenin altındaki varsayılan marjı kaldırın. Marj-Alt: 0px; İkinci bir açıklama yapmak için #2, sadece yinelenen açıklama #1.
Ardından yeni bulanıklık (Blurb #2) ayarlarını açın ve simgeyi değiştirin ve Z dizinini varsayılana (0) geri ayarlayın. Bundan sonra, dönüşüm ölçeğini aşağıdaki gibi kullanarak simgeyi azaltalım: Dönüşüm Ölçeği:% 70 #3, #4 ve #5 Üç Yapın Açıklama #2’yi çoğaltarak ve her açıklama için simgeyi güncelleyerek yapılabilir. . Blurb’u aynı mutlak konumda düzenleyin Varsayılan menü durumumuz, ana Hamburger menü simgesinin açıklamasının arkasında istiflenmiş menü öğelerinin dört açıklamasıyla mutlak bir konumda tüm açıklamalara sahip olacaktır. Açıklamamızı aynı mutlak konumda elde etmek için, açıklamanın beş modülünü seçmek için çok seçmeli özelliği kullanın (CTRL/CMD’yi basılı tutun ve her birine tıklayın). Ardından, 5’in tümü için öğe ayarlarını aynı anda güncellemek için seçilen açıklamalardan birinin ayarlarını açın. Ardından ana öğeye aşağıdaki özel CSS ekleyin: Pozisyon: Mutlak! Önemli; Alt: 20px; Sol: 20px;
Bu açıklamayı satırın sol alt kısmına konumlandırır. Menü simgesini konumlandırın Tüm açıklamalar varsayılan durum için konumlandırıldıktan sonra çevirileri kullanarak konumlandırın, Menü öğesini tıklama durumu için konumlandırmaya başlayabiliriz (Ana Menü düğmesini tıkladıktan sonra bitecekler. ). Bunu yapmak için Divi Builder’daki Transform Transform özelliklerini kullanabiliriz. Divi Maker’da (imleci yönlendirme gibi) bir tıklama durumu yoktur, çünkü bu JavaScript tarafından ele alınan bir şeydir. Bu yüzden menü öğemizi şimdi tıklamalarını istediğimiz yere konumlandıracağız. Ardından, ana menü düğmesini tıklarken konumu etkinleştirmek ve devre dışı bırakmak için JavaScript’i kullanacağız.
Ana menü düğmesi olduğu için #1 açıklamasını korumak istiyoruz. Ancak, #2, #3, #4 ve #5 açıklamasını taşımak istiyoruz. Ve açıklamamız şimdi görsel bir yapımcıda istiflendiğinden, her bir açıklama için konumu güncellemek için görüntü çerçevesi modunu kullanalım. Blurb Pozisyon #2 Açıklama #2 için ayarları açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevirin: -10EM
Bu, 2 #2’nin yeni bir konumudur. Blurb Pozisyon #3 Açıklama #3 için Ayarlar Açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevirin: -8.6EM Dönüşüm X Eksenini Çevir: 5EM
.Has-transform, .transform_target .et-pb-icon { Geçiş: 400 ms kolaylık; } .toggle-transform-animation {
Dönüşüm: Yok! Önemli;
}
.transform_target {
İmleç: işaretçi;
}
.toggle-ACTICT-TGET.ET_PB_BLURB .ET-PB-ICON {
Arka plan rengi: şeffaf;
}
Bu, jQuery kodu ile birlikte kullanılan harici bir CSS’dir.
(işlev ($) {
$ (belge) .Ready (function () {
$ (‘. Transform_target’). Click (function () {
$ (bu). Toggleclass (‘geçiş-aktif hedef’);
$ (‘. Has-Transform’).
});
});
}) (jQuery);
ve bu, menü düğmesini tıklarken genişletilmesi için dairesel bir simge menü öğesi alması için bir javascript olması gerekir. Etiket stili etiketlerini JavaScript/JQuery’nin etrafına sarılmış CSS ve etiket komut dosyalarının etrafına sarılmış tuttuğunuzdan emin olun. Doğrudan sayfadaki işlevselliğin nihai sonuçlarını kontrol edin.
Menü öğesi URL ekle, bu bir menü olduğundan, dört menü öğesi bir bağlantı/url gerektirecektir. Her menü öğesi için gereken URL’yi eklemek için, 4 menü öğesinin her biri için modül ayarlarını açın ve modül bağlantısı URL’sini ekleyin.
Bu menü mobil cihazlar için küçük ve sezgisel olduğu için yapışkan bir menü düğmesi (veya onarılmış) oluşturmak, menüyü tarayıcının sol altta kalmasını sağlamak isteyebilirsiniz. Bunu yapmak için, çok seçici özelliği kullanarak beş açıklamayı seçin ve ardından “mutlak” konum değerini “sabit” ile değiştirerek ana öğedeki özel CSS’yi güncelleyin. Pozisyon: Sabit! Önemli;
Alt: 20px;
Sol: 20px; Şimdi menü tarayıcı penceresinin sol altta kalacaktır. Menünün sayfadaki diğer içeriğin üstünde olduğundan emin olmak için, hatlar için Z dizinini aşağıdaki gibi güncelleyin: Dizin Z: 11 Ardından dolgu sırasını çıkarın: dolgu: 0px üst, 0px aşağıda
Aşağıdaki son tasarım, daha önce yapılmış düzen ile sabit daire simgesinin son tasarımıdır.
Ve işte cep telefonu. Menünün boyutunu ve boşluğunu nasıl ayarlanır Daha önce belirtildiği gibi, menü, Menü öğelerinin X ve Y eksenine konumlandırılması için Long EM ünitesi kullanılarak tasarlanmıştır (çeviri dönüşümlerini kullanarak). EM uzunluğu birimi, üst içerik metninin boyutunun boyutuna göredir. Bu nedenle, açıklama modüllerimizin her biri aynı boyutta metin boyutuna sahip olduğundan, 20px’e sahip olduğundan, tüm açıklamalar için içerik metnini bir kerede değiştirmek için MultiSect kullanabiliriz. Bu, gerektiğinde menü öğeleri arasındaki mesafeyi artırır veya azaltır. Ve aynı şeyi yazı tipi simgesinin boyutu için de yapabilirsiniz. Tüm menü öğeleri için yazı tipi simgesinin boyutunu aynı anda ayarlamak için çoklu seçmen kullanın. Sayfaya dairesel bir simge menüsü eklemek için kimin eklediğini bilen son zihin, divi kadar basit olabilir. Bu hücresel için de mükemmel bir menü türü! Tabii ki, gerekli bazı özel kod görüntüleri var, ancak görsel yapıcıları kullanarak menü öğelerini tıklama durumunu tasarlayabilmeniz ve konumlandırabilmeniz oldukça havalı. Kendi web sitenize göre kolayca bir menü oluşturabilen çeşitli renkleri, boyutları ve havada uçuş tasarımlarını keşfetmeyi unutmayın. 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? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Değilse, yüklü Divi temasını (veya Divi temasını kullanmıyorsanız Divi Builder eklentisini) yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön uçtaki sayfayı düzenlemek için Divi Builder’ı etkinleştirin (görsel yapımcı).
Bu öğretici için, açıklama modülünden varsayılan divi simgesini kullanacağız, bu nedenle herhangi bir harici varlığa gerek yok. Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bölüm 1 Divi Builder, ön uçtaki sayfayı düzenlemek için etkinleştirildikten sonra, sütunun bir satırını normal varsayılan bölüme ekleyin.
Ardından satır ayarlarını açın ve aşağıdaki dolguyu ekleyin: Dolgu: 300 piksel üst Bu sadece biraz yer vermek içindir, böylece tıklandığında dairesel bir menü öğesi görünür. Bir Menü Simgesi Oluşturma Blurb #1 modülü ile dolgu satırı yüklendikten sonra açıklama modülünü sütuna ekleyin. Bu, Dairesel İkon menümüzü yapmak için ekleyeceğimiz toplam 5 açıklamadan ilki olacak. Bunu açıklama #1 olarak adlandıracağız. Ardından, içeriğin başlığını ve metnini ortadan kaldırarak açıklama içeriğini güncelleyin. Ardından simgeyi aşağıdaki açıklamaya ekleyin. Simgeler kullanın: evet simgesi: Ekran görüntüsüne bakın Ayrıca, tasarım ayarlarını aşağıdaki gibi güncelleyeceğiz: Renk Icon: #29A1F2 Daire Icon: Evet Daire Renk: #222222 Göster Çember Sınır: EVET RENK ÇAĞRI Sınır: #29A1F2 Simge Yazı Tipi Boyutunu Kullan: Evet simge yazı tipinin boyutu: 25px gövde metni boyutu: 20px marj: 0px Dairesel bir simge düzenlemenin yanı sıra, içeriğin boyutunu da ekliyoruz. İçindekiler metni yoktur, ancak bu, birim Long EM’yi (üst içerik metninin boyutuna göre) her kullandığımızda, çeviriler dönüşümlerini kullanarak menü/bulanık öğeleri boşaltmak için her kullandığımızda yararlı olacaktır. Bunun hakkında daha fazla bilgi. Bundan sonra, varsayılan görüntü/simge animasyonunu kaldırın. Görüntü/animasyon simgesi: animasyon olmadan, bu modül için Z index’ini 1’e ayarlayın, böylece diğerinin üstünde oturacak ve sonunda arkasında oturacak. Dizin Z: 1 ve son olarak, bulanık görüntüye aşağıdaki özel CSS ekleyerek simgenin altındaki varsayılan marjı kaldırın. Marj-Alt: 0px; İkinci bir açıklama yapmak için #2, sadece yinelenen açıklama #1.
Ardından yeni bulanıklık (Blurb #2) ayarlarını açın ve simgeyi değiştirin ve Z dizinini varsayılana (0) geri ayarlayın. Bundan sonra, dönüşüm ölçeğini aşağıdaki gibi kullanarak simgeyi azaltalım: Dönüşüm Ölçeği:% 70 #3, #4 ve #5 Üç Yapın Açıklama #2’yi çoğaltarak ve her açıklama için simgeyi güncelleyerek yapılabilir. . Blurb’u aynı mutlak konumda düzenleyin Varsayılan menü durumumuz, ana Hamburger menü simgesinin açıklamasının arkasında istiflenmiş menü öğelerinin dört açıklamasıyla mutlak bir konumda tüm açıklamalara sahip olacaktır. Açıklamamızı aynı mutlak konumda elde etmek için, açıklamanın beş modülünü seçmek için çok seçmeli özelliği kullanın (CTRL/CMD’yi basılı tutun ve her birine tıklayın). Ardından, 5’in tümü için öğe ayarlarını aynı anda güncellemek için seçilen açıklamalardan birinin ayarlarını açın. Ardından ana öğeye aşağıdaki özel CSS ekleyin: Pozisyon: Mutlak! Önemli; Alt: 20px; Sol: 20px;
Bu açıklamayı satırın sol alt kısmına konumlandırır. Menü simgesini konumlandırın Tüm açıklamalar varsayılan durum için konumlandırıldıktan sonra çevirileri kullanarak konumlandırın, Menü öğesini tıklama durumu için konumlandırmaya başlayabiliriz (Ana Menü düğmesini tıkladıktan sonra bitecekler. ). Bunu yapmak için Divi Builder’daki Transform Transform özelliklerini kullanabiliriz. Divi Maker’da (imleci yönlendirme gibi) bir tıklama durumu yoktur, çünkü bu JavaScript tarafından ele alınan bir şeydir. Bu yüzden menü öğemizi şimdi tıklamalarını istediğimiz yere konumlandıracağız. Ardından, ana menü düğmesini tıklarken konumu etkinleştirmek ve devre dışı bırakmak için JavaScript’i kullanacağız.
Ana menü düğmesi olduğu için #1 açıklamasını korumak istiyoruz. Ancak, #2, #3, #4 ve #5 açıklamasını taşımak istiyoruz. Ve açıklamamız şimdi görsel bir yapımcıda istiflendiğinden, her bir açıklama için konumu güncellemek için görüntü çerçevesi modunu kullanalım. Blurb Pozisyon #2 Açıklama #2 için ayarları açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevirin: -10EM
Bu, 2 #2’nin yeni bir konumudur. Blurb Pozisyon #3 Açıklama #3 için Ayarlar Açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevirin: -8.6EM Dönüşüm X Eksenini Çevir: 5EM
Bu, açıklama #3’ün yeni bir konumudur.
Blurb Pozisyon #4 Açıklama #4 için ayarları açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevirin: -5EM Dönüşümü X eksenini çevirin: 8.6EM Bu, #4 bulanıklığının yeni konumudur. Blurb Pozisyon #5 Açıklama #5 için ayarları açın ve aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevirin: 0px Dönüşüm X eksenini çevirin: 10EM Bu Blurb #5’in yeni konumudur. JavaScript’imizin iyi çalışması için Blurb’a özel bir CSS sınıfı eklemek, ek güç ve işlevsellik için seçim olarak işlev görecek birkaç CSS sınıfı eklememiz gerekir. CSS sınıfını Çerçeve görüntü görüntüleme modunda #1 bulanık olarak ekleyin, açıklama #1 için ayarları açın ve aşağıdaki CSS sınıfını ekleyin: CSS sınıfı: Transform_Target CSS sınıfını #2, #3, #4 ve #5 Blurb’a ekleyin Dört diğer açıklamaların hepsi aynı CSS sınıfını paylaşacak, böylece çok seçici özelliği #2, #3, #4 ve #bulanık seçmek için kullanabiliriz. 5 ve dördünün de CSS sınıfının güncellenmesi aşağıdaki gibi: CSS Sınıfı: HAS-Transform geçiş-dönüşüm-animasyon, boşluklarla ayrılmış iki CSS sınıfının olduğunu unutmayın. Kod modülüyle harici CSS ve JavaScript ekleyin Açıklamaya CSS sınıfımız eklendikten sonra, kod modülünü kullanarak kodumuzu sayfaya eklemeye hazırız. Bunu yapmak için Kod Modülünü Açıklama #5 altına ekleyin. Ardından aşağıdaki kodu kod modülüne yapıştırın:.Has-transform, .transform_target .et-pb-icon { Geçiş: 400 ms kolaylık; } .toggle-transform-animation {
Dönüşüm: Yok! Önemli;
}
.transform_target {
İmleç: işaretçi;
}
.toggle-ACTICT-TGET.ET_PB_BLURB .ET-PB-ICON {
Arka plan rengi: şeffaf;
}
Bu, jQuery kodu ile birlikte kullanılan harici bir CSS’dir.
(işlev ($) {
$ (belge) .Ready (function () {
$ (‘. Transform_target’). Click (function () {
$ (bu). Toggleclass (‘geçiş-aktif hedef’);
$ (‘. Has-Transform’).
});
});
}) (jQuery);
ve bu, menü düğmesini tıklarken genişletilmesi için dairesel bir simge menü öğesi alması için bir javascript olması gerekir. Etiket stili etiketlerini JavaScript/JQuery’nin etrafına sarılmış CSS ve etiket komut dosyalarının etrafına sarılmış tuttuğunuzdan emin olun. Doğrudan sayfadaki işlevselliğin nihai sonuçlarını kontrol edin.
Menü öğesi URL ekle, bu bir menü olduğundan, dört menü öğesi bir bağlantı/url gerektirecektir. Her menü öğesi için gereken URL’yi eklemek için, 4 menü öğesinin her biri için modül ayarlarını açın ve modül bağlantısı URL’sini ekleyin.
Bu menü mobil cihazlar için küçük ve sezgisel olduğu için yapışkan bir menü düğmesi (veya onarılmış) oluşturmak, menüyü tarayıcının sol altta kalmasını sağlamak isteyebilirsiniz. Bunu yapmak için, çok seçici özelliği kullanarak beş açıklamayı seçin ve ardından “mutlak” konum değerini “sabit” ile değiştirerek ana öğedeki özel CSS’yi güncelleyin. Pozisyon: Sabit! Önemli;
Alt: 20px;
Sol: 20px; Şimdi menü tarayıcı penceresinin sol altta kalacaktır. Menünün sayfadaki diğer içeriğin üstünde olduğundan emin olmak için, hatlar için Z dizinini aşağıdaki gibi güncelleyin: Dizin Z: 11 Ardından dolgu sırasını çıkarın: dolgu: 0px üst, 0px aşağıda
Aşağıdaki son tasarım, daha önce yapılmış düzen ile sabit daire simgesinin son tasarımıdır.
Ve işte cep telefonu. Menünün boyutunu ve boşluğunu nasıl ayarlanır Daha önce belirtildiği gibi, menü, Menü öğelerinin X ve Y eksenine konumlandırılması için Long EM ünitesi kullanılarak tasarlanmıştır (çeviri dönüşümlerini kullanarak). EM uzunluğu birimi, üst içerik metninin boyutunun boyutuna göredir. Bu nedenle, açıklama modüllerimizin her biri aynı boyutta metin boyutuna sahip olduğundan, 20px’e sahip olduğundan, tüm açıklamalar için içerik metnini bir kerede değiştirmek için MultiSect kullanabiliriz. Bu, gerektiğinde menü öğeleri arasındaki mesafeyi artırır veya azaltır. Ve aynı şeyi yazı tipi simgesinin boyutu için de yapabilirsiniz. Tüm menü öğeleri için yazı tipi simgesinin boyutunu aynı anda ayarlamak için çoklu seçmen kullanın. Sayfaya dairesel bir simge menüsü eklemek için kimin eklediğini bilen son zihin, divi kadar basit olabilir. Bu hücresel için de mükemmel bir menü türü! Tabii ki, gerekli bazı özel kod görüntüleri var, ancak görsel yapıcıları kullanarak menü öğelerini tıklama durumunu tasarlayabilmeniz ve konumlandırabilmeniz oldukça havalı. Kendi web sitenize göre kolayca bir menü oluşturabilen çeşitli renkleri, boyutları ve havada uçuş tasarımlarını keşfetmeyi unutmayın. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
