Divi Tasarımınıza Daire Metin Yolu SVG Animasyonu Nasıl Eklenir

Web tasarım alanındaki trendleri takip etmek, bir web tasarımcısı olarak güncel kalmanın en iyi yollarından biridir. Müşterilerinizi etkileyecek ve beceri setinizi bir sonraki seviyeye taşımanıza yardımcı olacak modern web siteleri oluşturmanıza olanak tanır. Bugünün eğitiminde, günümüzde gelişmiş web sitelerinde sıklıkla gördüğünüz bir trende nasıl aşina olacağınızı göstereceğiz; daire metin SVG animasyonları. Bunları Divi sayfa tasarımınıza nasıl ekleyeceğinizi ve hatta bunları bir düğme olarak nasıl kullanacağınızı göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

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

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene 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.

Kahraman Tasarımı Oluştur

Yeni Bölüm Ekle

Arka plan rengi

Kahraman tasarımını oluşturarak başlayalım. Divi ile yeni veya mevcut bir sayfa açın ve ona yeni bir normal bölüm ekleyin. Bölüm ayarlarını açın ve seçtiğiniz bir arka plan rengini uygulayın.

• Arka Plan Rengi: #f3eee8

aralık

Sonraki boşluk ayarlarına geçin ve üst ve alt dolgu değerlerini değiştirin.

• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın, tasarım sekmesine gidin, boyutlandırma ayarlarını açın ve aşağıdaki ayarlamaları yapın:

• Genişlik: %95
• Maksimum Genişlik: 2580 piksel

Sütun 1 Ayarları

Genel satır ayarları yapıldığında, ilk sütunun ayarlarını açmaya devam edebilirsiniz.

Arka plan görüntüsü

Arka plan ayarlarının içinde, seçtiğiniz bir arka plan resmini yükleyin. Bu resim, öğreticinin ilerleyen kısımlarında daire metni SVG animasyonunun altında görünecektir.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok

Metin Modülü #1'i Sütun 2'ye ekleyin

H1 İçeriği Ekle

Sütun 2'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. Bu bölümü bir kahraman olarak kullanıyorsanız tercih ettiğiniz bazı H1 içeriğini veya bunu sayfanızda başka bir yerde kullanıyorsanız H2 içeriğini ekleyin.

H1 Metin Ayarları

Daha sonra bu modülün başlık metni ayarlarını şekillendirin.

• Başlık Yazı Tipi: Playfair Ekranı
• Başlık Metni Rengi: #212121
• Başlık Metni Boyutu:
  • Masaüstü: 100 piksel
  • Tablet: 60 piksel
  • Telefon: 45 piksel

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve maksimum genişlik uygulayın.

• Maksimum Genişlik: 600 piksel

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

İlk Metin Modülünün altına başka bir Metin Modülü ekleyeceğiz. Bu sefer, bazı açıklama içeriği ekleyeceğiz.

Metin Ayarları

Tasarım sekmesine gidin ve metni aşağıdaki gibi biçimlendirin:

• Metin Yazı Tipi: Montserrat
• Metin Boyutu: 15px
• Metin Satır Yüksekliği: 2em

boyutlandırma

Boyutlandırma ayarlarında da maksimum genişlik kullanın.

• Maksimum Genişlik: 520 piksel

aralık

Ardından, boşluk ayarlarına gidin ve bazı duyarlı değerler kullanın.

• Üst boşluk:
  • Masaüstü: 20vh
  • Tablet ve Telefon: 50px
• Sol Dolgu: %5

Sınır

Kenarlık ayarlarına da bir sol kenarlık ekliyoruz.

• Sol Kenar Genişliği: 2px
• Sol Kenar Rengi: #000000

Daire Metni SVG Animasyonu Ekle

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

Bölüm tasarımımızın temelini oluşturduğumuza göre, artık daire metni SVG animasyonunu oluşturmaya odaklanabiliriz. Daire metni SVG animasyonunu eklemek için 1. sütunda bir Kod Modülü kullanacağız. Devam edin ve bir tane ekleyin.

Link ekle

Bu daire metin SVG animasyonunun tıklanabilir olmasını istiyorsanız, modülün bağlantı ayarlarında istediğiniz bir URL'yi ekleyebilirsiniz.

boyutlandırma

Boyutlandırma ayarlarında da modülün genişliğinin “%100” olarak ayarlandığından emin olun.

• Genişlik: %100

Kod Kutusuna Çevre ve Metin SVG'leri Ekleme

İçerik sekmesindeki kod kutusuna geri dönün. Burada, önce aşağıdaki HTML kodunu kullanarak daire SVG'sini ve metin yolunu ekleyeceğiz:

<svg viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle">
	</path>
</defs>
	<text dy="70">
		<textPath xlink:href="#circle">View Portfolio • New Homes •</textPath>
	</text>
</svg>

SVG'leri CSS ile Stillendirin

Elbette, tasarımımıza uyması için SVG metin yolunun stilini belirlememiz gerekecek. SVG'nin de "%100" olarak ayarlandığından emin oluyoruz. Aşağıdaki CSS kod satırlarını kod kutusunun içine stil etiketleri arasına yapıştırın:

<style>
svg { 
	width: 100%;
}
svg textPath { 
  font-size: 39px;
	font-family:  "Montserrat";
	text-transform: uppercase;
	letter-spacing: 20px;
	fill: #fff;
}
</style>

AnimateTransform HTML Etiketleri Ekle

Şimdi, metnimiz için sonsuz bir rotasyon oluşturmak için, harici JavaScript koduna ihtiyaç duymadan animasyonu oluşturmamıza izin veren animate transform öğesini kullanacağız. SVG'mize atadığımız nitelikler şunlardır:

  <animateTransform
            attributeName="transform"
            begin="0s"
            dur="15s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>

İstediğiniz animasyonu oluşturmak için bu özellikleri istediğiniz gibi değiştirebilirsiniz. Son özniteliğin, tekrar Sayısının nasıl "belirsiz" olarak ayarlandığına dikkat edin. Bu, SVG'miz için sonsuz bir dönüş döngüsü oluşturmamızı sağlar.

Kendi Kullanımınız İçin Metin Yolunu Değiştirin

Elbette, metni kendi web sitenize uyacak şekilde değiştirmek isteyeceksiniz, bunu metin yolu etiketleri arasında kolayca yapabilirsiniz. Ancak, kopyanın uzunluğunu değiştirdiğinizde, mükemmel bir daire oluşturduğunuzdan emin olmak için ayarları değiştirmeniz gerekecektir. İstediğiniz sonucu elde edene kadar y ekseni boyunca bir kaymayı gösteren “dy” değeriyle oynayabilir ve metin yolunun yazı tipi boyutunu ve harf aralığını değiştirebilirsiniz. Bu kadar!

Ö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 sitenizi tasarım trendleriyle nasıl güncel tutacağınızı gösterdik. Daha spesifik olarak, size bir daire metin SVG animasyonunu nasıl oluşturacağınızı ve onu Divi tasarımınızda nasıl zarif bir şekilde kullanacağınızı gösterdik. Yaklaşımı öğrendikten sonra, istediğiniz metni görüntülemek ve kendi tasarımınıza göre ince ayar yapmak için bu öğeyi kullanabilirsiniz. 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.