Divi's Theme Builder ve Anime.js ile Global Başlığınızın İçine SVG Logonuzu Ekleme ve Canlandırma

Logonuz, markanızın kimliğinin merkezi bir parçasıdır. Bu nedenle, karşılaştığınız herhangi bir web sitesi başlığına neredeyse her zaman dahil edilir. Başlığınıza bir logo eklerken, bir PNG dosyası yüklemeyi veya bunun yerine bir SVG entegrasyonunu tercih edebilirsiniz. Daha özelleştirilmiş bir yaklaşım için SVG logonuzu da canlandırabilirsiniz. Bu yazıda size tam olarak bunu göstereceğiz. Bunu önce Divi tarafından oluşturulmuş global başlığınıza nasıl ekleyeceğinizi ve ardından Anime JS kitaplığını kullanarak nasıl canlandıracağınızı göstereceğiz. Örneğimiz için basit bir tasarım kullanacağız, ancak bir kez yaklaştığınızda, herhangi bir logoyu canlandırabilirsiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ellerinizi global başlık şablonuna koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Adobe Illustrator'da SVG Logosu Oluşturun ve SVG Kodunu Alın

Illustrator'ı Açın ve Yeni Belge Oluşturun

Bu öğreticinin ilk bölümünde, Adobe Illustrator içinde basit bir logo oluşturacağız. Halihazırda kendinize ait bir SVG logonuz varsa, bunu kullanmaktan çekinmeyin. Alternatif olarak, yukarıdaki indirme klasöründen logo örneği Illustrator dosyasına da erişebilirsiniz. Logo örneğini sıfırdan oluşturmayı tercih ediyorsanız, 1:1 oranında yeni bir belge ekleyerek başlayın.

• Genişlik: 500 piksel
• Yükseklik: 500 piksel

Mevcut Katmana Çember Ekle

Ekleyeceğimiz ilk eleman bir dairedir. Spice Shop Layout Pack'in renk paletine uyan bir dolgu rengi kullanacağız. Ayrıca dairenin tuvalimizin içinde merkezi olarak hizalandığından emin olacağız.

• Doldurun: #0C1019
• İnme: Yok

Yeni Katman Oluştur ve Logo Metni Ekle

Ardından, yeni bir katman ekleyeceğiz.

Bu katmanı logo metni eklemek için kullanacağız.

• Yazı Tipi: Montserrat
• Yazı Tipi Ağırlığı: Siyah
• Yazı Tipi Boyutu: 110pt

Logo için Anahatlar Oluşturun

Logo metnini değiştirmeyi bitirdikten sonra, öğeye sağ tıklayıp metni bir anahatta dönüştürmek için "Anahat Oluştur"a tıklayabilirsiniz.

Metin Anahatlarını Hizala

Metin anahatlarının da merkeze hizalandığından emin olacağız.

SVG olarak dışa aktar

Artık tüm yolları yerleştirdiğimize göre, SVG'yi dışa aktarabiliriz. Bunu yapmak için, en üstteki “Dosya” seçeneğinin üzerine geleceğiz, “Dışa Aktar”a gidip “Farklı Dışa Aktar…” seçeneğine tıklayacağız.

SVG Kodunu Alın

“Dışa Aktar” düğmesini tıkladığınızda, bazı ek SVG seçeneklerinin bulunduğu bir pencere göreceksiniz. Orada, SVG kodunu kopyalayabileceksiniz. Bu eğitimde daha sonra kullanmak üzere SVG'yi yakınınızda tuttuğunuzdan emin olun.

2. Divi Theme Builder'da Global/Custom Header Oluşturmaya Başlayın

Divi Theme Builder'a gidin ve Global Başlık Oluşturmaya Başlayın

Logomuzun SVG kodunu alarak bu öğreticinin ilk bölümünü tamamladığımıza göre, şimdi Divi'ye geçme zamanı! WordPress Arka Uç içindeki Tema Oluşturucu'ya giderek yeni bir genel başlık oluşturacağız.

Bölüm Ayarları

Arka plan rengi

Genel başlık şablonunu girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: #eaeaea

aralık

Tasarım sekmesine gidin ve sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın, tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %95
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Ana Eleman

Sütunlarımızın daha küçük ekran boyutlarında yan yana kalmasını sağlamak için satırın ana öğesine de bir satır CSS kodu ekleyeceğiz.

display: flex;

Sütun 1 Ana Eleman

Ardından, her sütuna ayrı ayrı bir satır CSS kodu ekleyerek sütun yapısının (1/4 ve 3/4) daha küçük ekran boyutlarında korunmasını sağlayacağız. İlki ile başlayın.

width: 25% !important;

Sütun 2 Ana Eleman

İkinci sütun için de aynısını yapın, ancak başka bir genişlik yüzdesi kullanın.

width: 75% !important;

3. SVG Logosu Ekleyin (İç Kod Modülü)

Sütun 1'e Kod Modülü Ekle

İlk Kod Modülünden başlayarak modül ekleme zamanı. Bu Kod Modülünü sütun 1'e yerleştireceğiz ve SVG kodumuzu eklemek için kullanacağız.

Kopyalanan SVG Kodu Ekle

Yapılandır

SVG kodunu Kod Modülüne yapıştırdıktan sonra (bu eğitimin 1. bölümüne bakın), aşağıdaki yazdırma ekranında gösterildiği gibi her şeyi yapılandırmanıza yardımcı olur. Bu şekilde, SVG içindeki farklı öğelere ilişkin temiz bir genel bakışa sahip olacaksınız.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

CSS Kodundaki Öğelere Kontur ve Kontur Genişliği Ekleme

Illustrator'da eklediğimiz öğeler için yalnızca dolgu renkleri kullandık. Bunun nedeni, fazladan yollar oluşturmaktan kaçınmak istememizdir. SVG kodu her zaman düşündüğünüz kadar öngörülebilir değildir, bu nedenle CSS kodunda bazı manuel değişiklikler yapmak çoğu zaman yolları basit tutmaya yardımcı olabilir. Bu gönderinin önizlemesindekiyle aynı sonucu oluşturmak için her iki öğemize de bir kontur eklememiz gerekecek. Bunu yapmak için, kodumuzun içindeki iki sınıfa CSS kod satırları ekleyeceğiz. AI'da oluşturulan "cls-1" CSS sınıfı daireyi, "cls-2" CSS sınıfı ise metin ana hatlarını temsil eder.

stroke: #0c1019;
stroke-width: 3px;

Daire Yarıçapını Azalt

Dairemize fazladan bir vuruş eklediğimiz için daire SVG tuvalinden daha uzağa uzanıyor gibi görünüyor (yanlarda fark edilir), bunu düzeltmek için daire etiketimizin içindeki yarıçapı küçülteceğiz. Orijinal “232.5”i kullanmak yerine “225”e indiriyoruz. Bu sayı ile nazikçe oynayarak hangi değeri tercih ettiğinizi kendiniz belirleyebilirsiniz.

• r=”225″

Kod Modülü Ayarlarını Değiştirin

boyutlandırma

Artık SVG kodumuz yerinde olduğuna göre, Kod Modülünün kendisinde bazı ek değişiklikler yapabiliriz. Tasarım sekmesine gidin ve modülün genişliğini farklı ekran boyutlarında değiştirin.

• Genişlik:
  • Masaüstü: %25
  • Tablet: %50
  • Telefon: %80

aralık

Boşluk ayarlarını değiştirerek bir alt örtüşme de oluşturuyoruz.

• Üst Dolgu: %5
• Alt Dolgu:
  • Masaüstü: -%12
  • Tablet: -%20
  • Telefon: -%35

4. SVG Logonuzu Canlandırmak için Anime.js Kullanın

Önceki Kod Modülünün Altına Başka Bir Kod Modülü Ekleyin

Divi başlığımıza SVG logomuz eklendi! Bu öğreticinin sonraki bölümünde Anime JS kitaplığını kullanarak SVG logosunu canlandıracağız. Önizlemede görebileceğiniz çizim animasyonu en popülerlerinden biri ama bu kütüphane ile her türlü animasyonu oluşturabilirsiniz. Bir öncekinin hemen altına yeni bir Kod Modülü ekleyin.

Anime Kitaplığı Ekle

Yapmanız gereken ilk şey, kütüphaneyi script etiketlerinin içine eklemek.

• src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

Anime Zaman Çizelgesi Animasyon Kodu Ekle

Hemen altına, aşağıdaki yazdırma ekranında gösterildiği gibi komut dosyası etiketleri arasına anime JS kodunu eklemeniz gerekir:

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

Her "ekleme" işlevi, bir animasyon zaman çizelgesindeki bir animasyonu temsil eder. Bu “ekleme” işlevlerini istediğiniz gibi değiştirebilir, yenilerini ekleyebilir veya mevcut olanları kaldırabilirsiniz, sadece son ekleme işlevinin bir ';' ile düzgün bir şekilde kapatıldığından emin olun. sonunda (yukarıdaki kodda görebileceğiniz gibi). Bu "ekleme" işlevlerinin içine farklı CSS özellikleri ekleyebilirsiniz. Anime.js belge örneklerinde özellikler ve bunların nasıl kullanıldığı hakkında daha fazla bilgi edinebilirsiniz.

5. Sütun 2'ye Menü Modülü Ekleme

Genel başlığımızı tamamlamak için ihtiyacımız olan tek unsur 2. sütundaki Menü Modülüdür.

Seçim Menüsü

İstediğiniz bir menü seçin.

Arka Plan Rengini Kaldır

Ardından, varsayılan arka plan rengini kaldırın.

Menü Metin Ayarları

Tasarım sekmesine gidin ve menü metin ayarlarını aşağıdaki gibi değiştirin:

• Menü Metin Rengi: #000000
• Menü Metin Boyutu:
  • Masaüstü: 0.7vw
  • Tablet: 2.2vw
  • Telefon: 3vw
• Metin Hizalama: Sağ

Açılır Menü Metin Ayarları

Açılır menü satırı rengini de değiştirin.

• Açılır Menü Satır Rengi: #ffffff

Simge Ayarları

Hamburger menü simgesi rengiyle birlikte.

• Hamburger Menü Simgesi Rengi: #0c1019

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve genişliğin “%100” olduğundan emin olun.

• Genişlik: %100

Konum

Modülü gelişmiş sekmesinde yeniden konumlandırarak modül ayarlarını tamamlayın.

• Pozisyon: Mutlak
• Konum: Merkez Sağ

6. Tüm Tema Oluşturucu Değişikliklerini Kaydet

Tüm genel başlık tasarımını tamamladığınızda, tüm tema oluşturucu değişikliklerini kaydedebilir ve sonucu web sitenizde görüntüleyebilirsiniz!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, web geliştirme yolculuğunuzda Divi global başlığınızı nasıl bir adım ileriye taşıyacağınızı gösterdik. Daha spesifik olarak, Divi ve Anime JavaScript kitaplığını kullanarak SVG logonuzu nasıl ekleyeceğinizi ve canlandıracağınızı gösterdik. Global başlık şablonu JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.