Elementor ile Animasyonlu Amblem Logosu Nasıl Oluşturulur

Yazar hakkında: Roy Eyal, Elementorist @ Elementor

Roy Eyal, Elementor'da uzman bir Elementorist ve tasarımı ve tasarımcılarla çalışmayı seven bir WordPress web geliştiricisidir.

Geçen yıl boyunca, burada Elementor vitrinleri de dahil olmak üzere, bir görüntüyü çevreleyen animasyonlu metinden oluşan yeni bir tasarım trendi gördük. Örneğin, Ağustos 2020 vitrininde öne çıkan Diangelo Santos'un portföy web sitesi ve Kasım 2020 vitrininde yer alan Terrasol.

Animasyonlu bir GIF oluştururken kullanılan bu animasyon efektini gördüm. Ancak, böyle bir GIF oluşturmak, grafiği oluşturabilmek, onu bir videoya canlandırabilmek ve ardından bir GIF'e dönüştürebilmek için özel bilgi gerektirir. Grafik tasarım becerileri gerektirmenin ötesinde, çoğu insan için çok fazla zaman ve çaba gerektirir.

Bu eğitimdeki amacım, herhangi birinin özel bir grafiğe ihtiyaç duymadan ve gerçek "canlı" metin (özellikle bir SVG) kullanmadan aynı efekti nasıl oluşturabileceğini size göstermektir.

Daha da iyisi, size bu efekti iki farklı varyasyonda nasıl oluşturacağınızı göstereceğim - biri kaydırmada amblem metnini canlandıran ve diğeri amblemi hemen otomatik olarak canlandıran.

Animasyonlu amblem efekti, dekoratif amaçlar için bir grafiğin bir kısmına biraz dönen metin eklemenizi sağlar (aşağıda bazı örnekler göstereceğim).

Bu animasyonu kontrol etmek için iki farklı yöntemden birini seçebilirsiniz:

1. Kullanıcılar sayfanızda gezinirken göz alıcı bir efekt oluşturan Elementor Hareket Efektlerini kullanarak, kullanıcı aşağı kaydırırken metni canlandırabilirsiniz.
2. Bazı CSS kodlarını kullanarak metni otomatik olarak canlandırabilirsiniz (kullanıcı tarafından herhangi bir işlem yapılmasa bile).

Her tür animasyonlu amblem efektinin örnekleri:

Seçenek 1: Hareket Efektleri kullanılarak kaydırmada animasyonlu amblem efekti

Seçenek 2 : CSS kullanarak otomatik animasyonlu metin efekti

Bu öğreticiyi takip etmek ve Elementor'da kendi animasyonlu amblem efektinizi oluşturmak için aşağıdakilere ihtiyacınız olacak:

• Bir SVG dosyası – bunu grafiğinizin etrafında dönecek metni oluşturmak için kullanacaksınız. İlk adımda bunu nasıl oluşturacağınızı göstereceğim.

• CSS kodu – bunu SVG dosyasının içindeki metni biçimlendirmek için kullanacaksınız.

• Otomatik animasyon için ayrı CSS kodu – otomatik döndürme efektini kullanmak istiyorsanız (kaydırma efekti için Elementor'un yerleşik Hareket Efektlerine güvenmek yerine) biraz ek CSS eklemeniz gerekir.

Sana ihtiyacın olan tüm kodu vereceğim – tek yapman gereken aşağıdaki öğreticiyi takip etmek.

İşte sürece üst düzey bir bakış:

1. SVG metin dosyanızı kurun (başlangıç ​​olarak örnek kodumu kullanarak).
2. Bir Simge widget'ı kullanarak SVG dosyasını ekleyin.
3. Amblem metninize stil vermek için özel CSS ekleyin.
4. Ambleminizi arka plan grafiği üzerinde konumlandırmak için mutlak konumlandırmayı ayarlayın.
5. Animasyon efektinizi ekleyin (kaydırmalı veya otomatik).

Hadi kazalım…

Başlamak için, canlandırmak istediğiniz metni görüntülemek için SVG dosyanızı özelleştirmeniz gerekir.

Bunu yapmak için aşağıdaki örnek SVG dosyasını indirin ve bir kod düzenleyicide açın:

Kodu düzenlemeyi çok daha kolay hale getireceğinden, kod vurgulamalı bir kod düzenleyici kullanmanızı öneririm. Visual Studio Code ve Atom hem ücretsiz hem de platformlar arasıdır (PC, Mac ve Linux). Şahsen ben Nova kullanıyorum, ancak yalnızca macOS için mevcut.

İpucu – kod düzenleyiciniz metni düzgün bir şekilde vurgulamıyorsa, SVG'yi bir XML dosyası olarak görüntülemek isteyebilirsiniz. Bu, bazı şeyleri düzeltmeli ve aşağıdaki örnek ekran görüntüsü gibi vurgulamayı sağlamalıdır.

Metni özelleştirmek için "Elementor Müthiş! …” kullanmak istediğiniz metinle. Alan sınırlı olduğundan karakter sayısını sınırladığınızdan emin olun - örnek metnimle aynı uzunlukta tutmaya çalışın.

Bir sonraki adımda ihtiyacınız olacağından, dosyayı kolayca erişilebilen bir klasöre kaydedin.

Ardından, bir Simge widget'ı kullanarak SVG dosyasını Elementor tasarımınıza eklemeniz gerekir.

Animasyonlu ambleminizi eklemek istediğiniz arka plan grafiğini zaten eklediğinizi varsayacağım. Bunu yapmadıysanız, normal bir Görüntü widget'ı kullanarak bunu yapabilirsiniz.

SVG dosyasını eklemek ve özelleştirmek için:

1. Hedeflemek istediğiniz grafiğin üzerine yeni bir Simge widget'ı sürükleyin. Diğer bir deyişle, Simge widget'ınızı mevcut Resim widget'ının üstüne ekleyin.

2. Simge ayarlarında Gelişmiş sekmesine gidin. CSS Sınıfları alanını ayarlayın amblem için eşittir.

3. İçerik sekmesine geri dönün. SVG Yükle seçeneğini tıklayın ve önceki adımda oluşturduğunuz SVG dosyasını yükleyin.

4. Stil sekmesine gidin ve metniniz için Birincil Renk'i seçin - ideal olarak, temanızla eşleşen küresel bir renk.

5. Stil sekmesinde Boyutu artırın. 160 ile başlayabilirsiniz, ancak doğru efekti elde etmek için boyutuyla oynamanız gerekebilir. Amblem metni şu anda çok büyük görünüyorsa endişelenmeyin – bunu bir sonraki adımda CSS ile düzelteceksiniz.

Not – SVG dosyasını yüklerken sorun yaşıyorsanız, SVG dosyası yüklemelerinin etkinleştirildiğinden emin olmanız gerekir. WordPress, varsayılan olarak SVG yüklemelerini devre dışı bırakır, ancak Simge widget'ında SVG Yükle özelliğini kullandığınızda Elementor, SVG yüklemelerini otomatik olarak etkinleştirmelidir.

SVG yüklemelerinin etkinleştirildiğinden emin olmak için Elementor → Ayarlar → Gelişmiş'e gidin ve Filtrelenmemiş Dosya Yüklemelerini Etkinleştir açılır menüsünün Etkinleştir olarak ayarlandığından emin olun.

Şimdi, amblem metninizi biraz CSS kullanarak stillendirmeniz gerekiyor. Bu, Simge widget'ının boyutunu artırdıktan sonra gördüğünüz sorunları çözmelidir.

Bunu yapmak için, aşağıdaki CSS'yi bölümünüze veya tasarımınız için global CSS'ye ekleyin:

 .emblem text { font-family: initial; font-size: 16px; font-weight: normal; letter-spacing: 0px; } <code readonly="true">.emblem text { font-family: initial; font-size: 16px; font-weight: normal; letter-spacing: 0px; }</code> .emblem text { font-family: initial; font-size: 16px; font-weight: normal; letter-spacing: 0px; }
			

Amblem metninde hemen herhangi bir değişiklik görmezseniz, iki sorun giderme adımı vardır:

• Emin olun Simge widget'inin CSS sınıf amblem için eşit olarak ayarlayın.
• Elementor arayüzünü yeniden yüklemek için sayfayı yenileyin. Yenilemeden önce değişikliklerinizi kaydettiğinizden emin olun.

Çok fazla metniniz yoksa, amblem efektinizi geliştirmek için daha ileri gidip harfleri biraz doldurmak isteyebilirsiniz.

Burada iki ana seçeneğiniz var:

1. Yazı tipi ağırlığını kalın olarak ayarlayabilirsiniz.
2. Harf aralığını 0 pikselden daha yüksek bir sayıya yükseltebilirsiniz – 3 piksel iyi bir başlangıç ​​noktasıdır, ancak tercihlerinize göre onunla oynayabilirsiniz

Farklı bir yazı tipi seçmeyi de düşünebilirsiniz. Örneğin, aşağıdaki özelleştirilmiş kodda üç şey yaptım:

1. Yazı tipini Montserrat olarak değiştirdi.
2. Yazı tipini kalınlaştırdı.
3. Harf aralığı 3 piksele yükseltildi.

 .emblem text { font-family: "Montserrat", Sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 3px; } <code readonly="true">.emblem text { font-family: &quot;Montserrat&quot;, Sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 3px; }</code> .emblem text { font-family: "Montserrat", Sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 3px; }
			

Şimdi, simge widget'ının hedef görüntünüzün üstünde görünmesini sağlamanın zamanı geldi. Şu anda, yukarıda konumlandırılmış ve arka plan görüntüsünden ayrı:

Bunu yapmak için, amblem metninin konumlandırması üzerinde size piksel mükemmel bir kontrol sağlayacak olan mutlak konumlandırma kullanabilirsiniz.

Simge widget'ının ayarlarını açın. Ardından, Gelişmiş sekmesine gidin ve Konumlandırma ayarlarını bulun. Bunları aşağıdaki gibi yapılandırın:

• Genişlik : Satır içi (Otomatik)
• Pozisyon : Mutlak
• Yatay Yön : Sağ
• Ofset (Yatay) : -16px
• Dikey Yön : Üst
• Ofset (Dikey) : -16px

Hem yatay hem de dikey ofsetler için -16'yı seçtim, ancak tasarımınız ve arka plan resminiz için en iyi olanı bulmak için farklı sayılarla oynamak isteyebilirsiniz. Ayrıca yatay ve dikey yönlendirmeleri tercihlerinize göre değiştirebilirsiniz.

Mobil ve tablet cihazlar için ofseti ayarlamak için duyarlı ayarları da kullanmalısınız. Dikey kaydırma ile ilgili sorunları önlemek için mobil cihazlar için yatay ofseti sıfıra ayarladığınızdan emin olun.

İşleri bitirmek için ambleminiz için animasyonu ayarlamanız gerekir. Yine iki seçeneğiniz var:

1. Amblemi, kullanıcı aşağı kaydırdıkça dönmesi için canlandırabilirsiniz.
2. Amblemi, herhangi bir kullanıcı girişi olmadan dönmesi için otomatik olarak canlandırabilirsiniz.

Size her ikisini de nasıl yapılandıracağınızı göstereceğim – yine de bu yöntemlerden yalnızca birini seçmelisiniz.

Kullanıcı aşağı kaydırırken amblemi canlandırmak için Elementor'un yerleşik Hareket Efektlerini kullanabilirsiniz.

Simge widget'ını açın ve Gelişmiş sekmesine gidin. Hareket Efektleri → Kaydırma Efektleri (açın) → Döndür'ü seçin (düzenleme simgesine tıklayın). Bu, bazı ek ayarları açacaktır - bunları aşağıdaki gibi yapılandırın:

• Yön: Sağa
• Hız : 4

Amblem metnini otomatik olarak canlandırmak için aşağıdaki CSS kodunu kullanabilirsiniz. Daha önce eklemiş olduğunuz CSS'ye ek olarak bu kodu da eklemek isteyeceksiniz.

 .emblem svg { animation-name: spinning_animation; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spinning_animation { from { transform: rotate(360deg); } to { transform: rotate(0); } } <code readonly="true">.emblem svg { animation-name: spinning_animation; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spinning_animation { from { transform: rotate(360deg); } to { transform: rotate(0); } }</code> .emblem svg { animation-name: spinning_animation; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spinning_animation { from { transform: rotate(360deg); } to { transform: rotate(0); } }
			

İsteğe bağlı: Erişilebilirlik Amaçlı Hareketi Azalt

Yukarıdaki kod parçacığının son kısmı teknik olarak isteğe bağlıdır, ancak animasyonlu amblem efektini sürekli harekete duyarlı kullanıcılar için daha kolay hale getirerek web sitenizin erişilebilirliğini iyileştirmek için buraya ekledim:

 @media (prefers-reduced-motion) { .emblem svg { animation-duration: 30s; } } <code readonly="true">@media (prefers-reduced-motion) { .emblem svg { animation-duration: 30s; } }</code> @media (prefers-reduced-motion) { .emblem svg { animation-duration: 30s; } }
			

Kodun bu kısmı, cihazlarını "hareket azaltma" moduna ayarlayan kullanıcılar için animasyonu yavaşlatır (örneğin, MacOS'ta hareketi azalt veya iOS'ta ekran hareketini azalt).

Etkisini değiştirmeden kod parçacığının bu bölümünü teknik olarak kaldırabilseniz de, özellikle web sitesi erişilebilirliği söz konusu olduğunda, kullanıcılarınızın tercihlerine saygı göstermek her zaman iyi bir fikir olduğundan, onu olduğu gibi bırakmanızı öneririm. Kullanıcı tercihlerine saygı duymanın bir başka örneği de karanlık moddur, tıpkı bir kullanıcı sistem tercihlerinde bunu seçtiyse Elementor editörünün karanlık modu nasıl benimseyeceği gibi.

Spesifik olarak, kod, bir kullanıcı tercihi olarak azaltılmış hareket oluşturmuşsa, 30 saniye (30s), 10 saniye (10s) animasyonu yavaşlar.

Başka bir seçenek, bir kullanıcı cihazını "hareket azaltacak" şekilde ayarladıysa, animasyonu tamamen durdurmak olabilir. Bunu, erişilebilirlik odaklı kod parçacığını şu parçayla değiştirerek gerçekleştirebilirsiniz:

 @media (prefers-reduced-motion) { .emblem svg { animation-duration: none; } } <code readonly="true">@media (prefers-reduced-motion) { .emblem svg { animation-duration: none; } }</code> @media (prefers-reduced-motion) { .emblem svg { animation-duration: none; } }
			

Animasyonlu amblem efekti, Elementor ile daha göz alıcı bir tasarım yaratmanın zarif bir yolunu sunar. Tek ihtiyacınız olan metni kontrol etmek için bir SVG dosyası, Simge widget'ı ve biraz da CSS.

Animasyonlu amblemi kendi Elementor tasarımlarınızda nasıl kullanacaksınız? Yoksa nasıl çalıştığı hakkında hala sorularınız mı var? Yorumlarda bize bildirin!