Lordicon WordPress ve Divi ile Nasıl Kullanılır
Web tasarımı trendleri yıldan yıla büyük ölçüde değişir. Ancak hayatta kalan ve hayatta kalan bir şey, animasyonun kullanımıydı. Giderek daha fazla kişi mobil cihazlar ve uygulamalar kullanıyor, ziyaret ettikleri sitenin aynı prensipleri kullanmasını umuyorlar. Animasyon iyi kullanmak, kullanıcı etkileşimini artırabilir ve site ziyaretçilerine istediğiniz deneyim boyunca rehberlik etmenizi sağlar. Lordicon hizmetinin girdiği yer burasıdır. Lordicon nedir? Lordicon, çeşitli dijital formatlarda kullanılabilen havalı animasyonlu simgelerin bir koleksiyonudur. Her simge JSON, GIF, EPS, SVG ve PNG formatlarında mevcuttur. Ayrıca, standart bir HTML kodunu kopyalayıp ekleyebilirsiniz. HTML kullanmak, herhangi bir eklentiye gerek kalmadan çoğu CMS ve statik HTML ortamına simgelerin entegre edilmesini mümkün kılar.
Lordicon, kütüphanelerinde 5.600’den fazla animasyon simgesine erişim sunar. 1000’den fazla Lordicon simgesini ücretsiz kullanabilirsiniz. Ancak, kütüphanenin tamamına erişmek istiyorsanız, abone olmanız gerekir. Lordicon ile başlamak basittir. E -posta adresinize kaydolun, bir şifre ayarlayın ve geniş kütüphanelerini keşfetmeye hazırsınız. Bir geliştiriciyseniz, GitHub’a kaydolmak en kolay yol olabilir.
Kablo simgeleri, tamamen ayarlanabilen daha modern ve etkileyici simgelerdir. Renginizi seçebilir, animasyon hızını ayarlayabilir, tekrarlayıp tekrarlamayı seçebilir veya animasyonlu bir stil seçebilirsiniz.
Sistem simgesi, harika yazı tipi tarafından sunulan simgeye daha benzer ve Divi’ye gömülü stile benzer. Lordicon’un nasıl kullanılacağını göstermeden önce, Lordicon’un web sitenizde kullanmak istediğiniz bir şey olup olmadığına karar verebilmeniz için fiyat seçeneğini tartışalım. Lordicon ne kadar? Kullanım için ücretsiz lordicon! Ancak, daha önce de belirttiğimiz gibi, simgelerin tüm varyasyonlarını kullanmak için ücretli bir aboneliğe ihtiyacınız var. Lordicon iki fiyat noktası sunuyor. Aylık ödeme yapmayı seçebilirsiniz, bu da aylık 16 dolara mal olacak. Yıllık bir paket satın almayı seçerseniz, ücretiniz ayda yarıya 8 $ ‘a veya yılda 96 $’ a düşürülür. Ayrıca, ücretli bir abonelikle, simgeyi web sitenize entegre etme şekli üzerinde daha fazla kontrole sahip olacağınıza da dikkat edilmelidir. İlk adım simgeyi izlemektir. Ne kullanmak istediğinizi bulduktan sonra, seçeneğinizi açmak için tıklayın. Simgeniz seçildiğinde, yanda listelenen seçeneklerle düzenleyebilirsiniz. Burada çiziklerinizin rengini ve genişliğini ayarlayacaksınız. Oradan HTML’yi kopyalayabilir, GIF veya Lottie (JSON) olarak indirebilir veya ek seçenekler için diğer düğmeleri tıklayabilirsiniz. Simgeniz için tam bir kontrol parametresi istiyorsanız, tam editörü açmak için sağ taraftaki oku tıklamanız yeterlidir. Tam editörde, istediğiniz birkaç seçenek daha alacaksınız. Çizilmelerin rengini ve boyutunu seçmenin yanı sıra, simgeniz için varyasyonları seçebilirsiniz. Genellikle seçebileceğiniz üç farklı varyasyon vardır, böylece sitenizin estetiğini eşleştirebilirsiniz. Ek seçenekler arasında tetik kuvveti, boyut ve ölçeği bulunur. Beğendiğiniz değişiklikleri yaptıktan sonra, simgeni indirebilir veya gömebilirsiniz. Ayrıca, kaynak dosyayı EPS, Lottie Json veya After Effects formatında indirebilirsiniz. Daha sonra, bu dosyaları isteklerinize göre kullanmak için WordPress Media kitaplığına aktarabilirsiniz. Lordicon’un herhangi bir WordPress sitesinde nasıl kullanılacağı Lordicon’ları Lordicon eklentisi ile Gutenberg bloklarını kullanarak WordPress sitesindeki sabitlemek oldukça kolaydır. Lordicon belgeleri, simgelerinin Gutenberg blokları kullanılarak veya Divi modülünü (veya diğer site üreticilerini) kullanarak herhangi bir WordPress sitesine kolayca gömülebileceğini belirtir. Buna ek olarak, simgelerini kaydırıcıya entegre etmek için Slider Revolution ile ortaklık kurdular. Gutenberg ile Gutenberg simgesini kullanarak Gutenberg bloğunu kullanmak çok kolaydır. Yapmanın iki yolu vardır. İlk yol, tasarım parametrelerinizi Lordicon’da ayarlamak ve HTML’yi Gutenberg’deki özel HTML bloklarında kullanmak için kopyalamaktır. İkincisi, Gutenberg’deki kendi özel bloğuyla Lordicon Animasyon İkonları eklentisini kullanmaktır. İlk olarak, WordPress kontrol panelinden Lordicon eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Etkinleştirildikten sonra, WordPress sitenizde sayfalar oluşturun veya düzenleyin veya yayınlayın. Ardından, Lordicon Element bloğunu seçmek için Siyah simgeyi tıklayın. Ardından, Lordicon Icon Kütüphanesine gidin. Bu örnek için arı simgesini kullanacağız. Arılara bakın, ardından eksiksiz bir editör açmak için oklar. Icon’unuzu Gutenberg’e takma simgeni iki yoldan biriyle yapılabilir. İlk yol, JSON dosyalarını Lordicon’dan indirmek, ardından WordPress sitenize yüklemektir. İkinci yol, HTML düğmesine tıklamak ve onu bağlamak için Sematan kodundaki CDN bağlantısını kopyalamaktır.
İyi çalışmanın herhangi bir yolu, ancak sitenizde JSON kullanmak yavaşlama potansiyeline sahiptir. Sadece burada ve orada bazı animasyonlu efektler kullanmayı planlıyorsanız, sorun değil. Ancak, birkaç JSON dosyası kullanmak istiyorsanız, Lordicon’un kendi görüntülerini göndermesi için CDN bağlantısını kullanmalısınız. Bu örnek için CDN bağlantısını kullanacağız. Sitenize bir simge gömmek için Bee Icon ekranındaki HTML düğmesini ve CDN Link kopyasını tıklayın. Web sitenize dönün ve CDN bağlantısını IKON URL alanına engellemeden yapıştırın. Ardından, tetikleyicinizi ayarlayacak ve gecikme süresini seçeceksiniz (istenirse). Son olarak, simgenin boyutunu, çiziklerinizin ağırlığını ve rengi ayarlayın. İşte burada. Gördüğünüz gibi, Lordicon simgesinin kullanımı kolaydır ve Gutenberg editörü kullanarak WordPress web sitenize entegre etmek için çeşitli yollar sunar. Şans eseri Lordicon eklentisini kullanmak ve kodu seçmek istemiyorsanız, bir sonraki bölümde tanımladığımız adımları izleyerek Divi kod modülünü Gutenberg’deki özel bir HTML bloğu ile değiştirebilirsiniz. Lordicon’un bir sonraki divi ile nasıl kullanılacağı, bu animasyon simgesini divi’de nasıl birleştireceğinizi göstereceğiz. Bu öğretici için, zarif tema üyeliğinizle mevcut hücresel uygulama sayfasının (ücretsiz!) Düzenini kullanacağız. Tüm ön katlama paketlerimize Divi Builder’ın kendisinden erişebilirsiniz. Divi’deki Lordicon simgesine girmenin bazı yolları vardır. GIF kullanma, Divi kod modülüne HTML ekleme veya kısa bir kod kullanarak. Hangisinin sizin için en kolay olduğunu seçebilmeniz için her seçeneği keşfedelim. Bu öğretici için GIF’leri kullanarak, hücresel uygulama düzen paketinin yön sayfasını kullanalım. İlk olarak, kahramanın altında bir açıklama alacağız ve görüntüyü GIF Lordicon ile değiştireceğiz. Kahramandan mor rengi seçin ve saat simgesini seçmek için Lordicon’a gidin. Yeşil varsayılan rengi tıklayın ve #6F4FFF ile değiştirin. Değişikliklerinizi kaydetmek için Uygula’yı tıklayın.
Simgeler için üç stil vardır. Simgemiz için satır stilini (aşağıdaki ekran görüntüsünde gösterilen orta seçenek) seçin. Önizleme ayarlarının altında, imleci yönlendirirken tetiği döngüye ve boyutu büyüklüğüne ayarlayın. Ardından, Hover-1 için mevcut hareket türünü ayarlayın. Bu, animasyonu yönlendirirken ve çalarken simge hayatınızı bir hayat haline getirecektir. Ardından, çizik genişliğini%35’e ayarlayın. Doğru ayarlara sahip olduktan sonra, simgeni indirmek için GIF düğmesine tıklayın. İletişim kutusu göründüğünde, arka plan için şeffaf, boyut için 100px’i seçin ve gecikme için varsayılan 250ms bırakın. İndir düğmesini tıklayın. Divi’ye Divi Maker’a geri dönün ve kahramanın altındaki ilk açıklamayı seçin. Düzenlemek için dişli simgesini tıklayın, ardından Çekme ve Icon bölümünü seçin. Değiştirmek için yüklü takvim simgesini tıklayın. Medya kütüphanesine eklemek için yeni indirilen GIF’inizi seçin. Ardından, Tasarım sekmesine tıklayın ve görüntü/simgenin genişliğine kadar kaydırın. Simge genişliğinizi 100 piksel olarak ayarlayın. Tesviye sola düzenlenmiş, ardından modülü kaydetmek için yeşil kontrolü tıklayın.
Divi web sitenize GIF gömmek basit olsa da, Lordicon animasyonlu simgeyi Divi sitenize girmenin ek yollarını keşfedelim. Divi Kod Modülünü kullanarak bu yöntem, simginizin nasıl sunulduğu konusunda biraz daha fazla kontrol sağlayacaktır. GIF’lerin iyi işlev görmesi, ancak bazı animasyonlu efektleri sınırlamak. Örneğin, GIF kullanılırken Hakem gibi efektler çalışmaz. Lordicon simginizin Divi’de nasıl göründüğünün tüm yönlerini gerçekten kontrol etmek için Divi Kod modülünü kullanmanızı öneririz. Basit bir kod modülü kullanma. Aynı düzen paketi sayfasını kullanarak, sayfadaki ikinci bulanık modülüne gidin. Bu sefer, görüntüleri bulanıklık modülünden silerek kaydedeceğiz. Kaydettikten sonra siyah + simgesini tıklayın ve Divi Kod modülünü bulun. Bulanıklığın üzerindeki bölüm/satır ekleyin. Lordicon’a dönün ve HTML Gömme düğmesini tıklayın. Bu, Web iletişim kutusuna gömülür. Varışta döngü seçildiğinden emin olun. Ardından, boyutunuzun 100 piksel olarak ayarlandığından emin olun. Son olarak, HTML kodunun kopyasını tıklayın. Şimdi, Divi sayfanıza dönün ve HTML’yi kod modülüne yapıştırın. Kaydet ve yeni Lordicon gömme, görüntüyü sildiğiniz bulanıklık modülünün üzerinde görünecektir. Kısa Kodları Kullanmanın Kısa Kod kullanmak için adımlar HTML’yi gömmek için çok benzer. Lordicon’da büyüyen bir bitki simgesi arayın. Önizleme ayarlarının altında, imleci ve boyutunu büyük olacak şekilde yönlendirirken tetiği döngüye ayarlayın. Standart yeşil renklerini #6F4FFF ile değiştirin. Scratch genişliğini%35’e ayarlayın. Son olarak, JSON (Lottie) düğmesini tıklayarak JSON dosyasını indirin. Ardından, Lordicon’dan WordPress Medya Kütüphanenize indirdiğiniz JSON’u yükleyebilir veya HTML kodunda bulacağınız URL’ye bağlantı verebilirsiniz. Kısa kodunuza Medya Kütüphanenize yüklemek yerine URL’ye bağlantı kurmanızı öneririz. . Bu, özellikle birçok simgenin yanı sıra sunucu işlemlerini kullanmayı planlıyorsanız, sitenizdeki yerden tasarruf edecektir. Lordicon’un kısa kodu [Lord-Icon] ile başlar ve [/lord-icon] ile biter. Bir CDN bağlantısı kullanırsanız, kısa kodunuz şöyle görünecektir: [Lord-icon src = “https://cdn.lordicon.com/bccqzuyr.json” Tetik = “Hover” boyutu = “100” paleti = ” #000000, #6f4fff”] [/lord-icon] Simge kaynakları (SRC =) için, HTML kodunda büyüyen tesis simgesinden bir bağlantı kopyalayacaksınız. Animasyonunuzun Hover’a göre düzenlendiğinden, boyut 100 olarak ayarlandığından ve rengin (palet) #000000 ve #6F4FFF olduğundan emin olun. Son adım, kısa kodunuzu Divi kod modülüne yerleştirmek ve kaydetmektir. Kısa kodunuz aşağıdaki bir ekran görüntüsü gibi görünecektir.
