Merhabalar,
Woocommerce, wordpress gibi sitelerinizde duyuru alanı / kargo ücretsiz vb. yazıları yazabileceğiniz ve eklentisiz bir şekilde yapabileceğiniz bir yöntem göstereceğim.
Hem sitenizi tam anlamı ile yormaz hem de güzel bir görüntü ortaya çıkartır. Sizlerde ücretsiz bilgi sunmak için kategoride konu açabilirsiniz. Böylelikle bilgi paylaştıkça büyür ve gelişir.
İlk olarak ne yapacağınız? Gifte gördüğünüz gibi sitenin bir ucundan diğer ucuna kayan yazı efekti yapacağız.
( Donma sebebi videoyu gife dönüştürürken düşük fps kaydı almış ancak siz yapınca çok akıcı ve güzel ilerleyecek. )
Öncelikle header.php alanımıza gidiyoruz ve yazmak istediklerimizi yazıyoruz.
Wordpress > Görünüm > Tema Düzenleyecisi > Header.php
Woocommerce, wordpress gibi sitelerinizde duyuru alanı / kargo ücretsiz vb. yazıları yazabileceğiniz ve eklentisiz bir şekilde yapabileceğiniz bir yöntem göstereceğim.
Hem sitenizi tam anlamı ile yormaz hem de güzel bir görüntü ortaya çıkartır. Sizlerde ücretsiz bilgi sunmak için kategoride konu açabilirsiniz. Böylelikle bilgi paylaştıkça büyür ve gelişir.
İlk olarak ne yapacağınız? Gifte gördüğünüz gibi sitenin bir ucundan diğer ucuna kayan yazı efekti yapacağız.
( Donma sebebi videoyu gife dönüştürürken düşük fps kaydı almış ancak siz yapınca çok akıcı ve güzel ilerleyecek. )
Öncelikle header.php alanımıza gidiyoruz ve yazmak istediklerimizi yazıyoruz.
Wordpress > Görünüm > Tema Düzenleyecisi > Header.php
Daha sonra <body>etiketinin hemen altına geliyoruz.
<div class="kayan-yazi">
<div class="yazi">
<span> 1000TL üzeri alışverişlerde kargo ücretsiz.</span>
<span class="bosluk">⠀⠀•⠀⠀</span>
<span> İstanbul içi aynı gün teslimat fırsatı!</span>
<span class="bosluk">⠀⠀•⠀⠀</span>
<span> Yeni sezon ürünlerinde %20 indirim seni bekliyor!</span>
<span class="bosluk">⠀⠀•⠀⠀</span>
<span> Her 10 kişiden birine sürpriz hediye fırsatı!</span>
</div>
</div>(Yazıların başlarına emoji ekleyebilirsiniz. Verdiğim kod emojisizdir.)Bu kodu yapıştırıyorsunuz. Ek olarak 4 tane yazı eklerseniz tam anlamıyla git gel yapıyor.
Eğer yazıyı azaltırsanız süreyi hızlandırma işlemi yaparsınız.
Ama vereceğim tam kodlar sayesinde net bir görüntü elde edebiliyorsunuz.
Yukarıdaki kodu yapıştırdıktan sonra temanızın '' ek css " bölümüne geliyoruz ve şu kodları ekliyoruz
Görünüm > Özelleştir > EK CSS
Şu kodları yapıştırıyoruz;
.kayan-yazi {
width: 100%;
overflow: hidden;
background: #000;
padding: 5px 0;
position: relative;
}
.yazi {
display: inline-block;
white-space: nowrap;
color: #fff;
font-weight: 300;
padding-left: 100%;
animation: kaydir 25s linear infinite;
}
.bosluk {
display: inline-block;
width: 50px;
}
@keyframes kaydir {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}Animation yazan yerde 25s linear yazıyor. Eğer yazı size yavaş geliyorsa düşürün 15s / 20s ya da çok hızlı geliyorsa 35s / 45s
gibi deneme yanılma yoluyla yapabilirsiniz. Ek olarak background yani arka plan siyah olmasını istemiyorsanız
İlk paragrafta yazan background #000'daki #000 kodlarına renk kodu yazabilirsiniz. Renk kodlarını internette bulabilirsiniz.
Teşekkürler.
