Divi ile Benzersiz Sosyal Medya Takip Düğmesi Vurgulu Efektler Nasıl Oluşturulur

Divi'nin Sosyal Medya Takip modülü, web sitenizin herhangi bir yerindeki sosyal ağlarınıza kolayca stil eklemenize ve bu önemli bağlantıları eklemenize olanak tanır. Divi'nin bazı güçlü yerleşik vurgulu efektlerinden bazılarıyla ellerinizi kirletmek istiyorsanız, sosyal medya takip düğmeleriniz için de bazı yaratıcı vurgulu efektler tasarlayabilirsiniz.

Bu derste, sizi şaşırtabilecek bazı benzersiz sosyal medya takip düğmesi vurgulu efektlerini göstereceğim.

Bunu kontrol et!

Gizlice Bakış

İşte yaratacağımız vurgulu efektlere bir göz atın.

Bölüm 1: Sosyal Medya Takip Düğmelerinizi Öne çıkarmak için Kutu Gölgelerini Taşıma

Noktalara Kenarlıklar

Noktalardan Kenarlara

Zıplayan Gölgeler 1

Zıplayan Gölgeler 2

1. Bölüm Hover Efektlerini Oluşturmaya Başlayın

Bölüm 2: Fareyle Üzerine Geldiğinde Rengi, Boyutu ve Şekli Değiştirme

Boyut ve Renk Değiştirme

Boyut, Renk ve Şekil Değiştirme

2. Bölüm Hover Efektlerini Oluşturmaya Başlayın

Bölüm 3: Filtre Efektleri

3. Bölüm Hover Efektini Oluşturmaya Başlayın

Bölüm 4: Ekran Karışımı ve Filtre Efektleri ile Büyük Simgeler

4. Bölüm Hover Efektini Oluşturmaya Başlayın

Başlarken

Youtube Kanalımıza Abone Olun

Bu eğitimde işleri ilerletmek için, gerçekten ihtiyacınız olan tek şey kurulu ve aktif olan Divi Teması. Ardından yeni bir sayfa oluşturun ve sayfanıza bir başlık verin. Ardından Divi Builder'ı kullanmak için tıklayın ve Hazır Düzen Kullan seçeneğini belirleyin. Kitaplıktan Yükle açılır modundan, Uygulama Geliştirici Düzen Paketi'ni seçin. Ardından, sosyal medya takip düğmelerimizin tasarımını hızlı başlatmak için Uygulama Geliştirici Ana Sayfası düzenini kullanacağız.

Sayfanızı yayınlayın ve Ön Uçta Oluşturmak için düğmeye tıklayın.

Şimdi sayfanın alt kısmında yer alan sosyal medya takip butonlarını içeren bölüm hariç sayfanın tüm bölümlerini silin.

Bu, vurgulu efektlerimizi oluşturmak için başlatılmış bir şablon görevi görecek.

Bu sosyal medya takip buton tasarımlarının gerektiğinde yeni bir versiyonunu ekleyebilmemiz için bölümü Divi Kütüphanesine kaydedelim.

Ayrıca, bölümü sayfanızda birden çok kez çoğaltabilirsiniz. Bu, önceden hazırlanmış bölümden başlayarak farklı vurgulu efektler oluşturmanıza olanak tanır.

Artık vurgulu efektleri oluşturmaya başlamaya hazırsınız.

Başlayalım.

1 Numaralı Hareketli Kutu Gölgeleri, Sosyal Medya Takip Düğmelerinizi Öne Çıkarır

Noktalara Kenarlıklar

Bu fareyle üzerine gelme efekti için, fareyle üzerine gelindiğinde küçülen ve düğmenin üzerinde gezinen düğmenin etrafına bir kutu gölgesi ekleyeceğiz. Bunu yapmak için sosyal medya takip modülünü açın ve facebook sosyal ağının ayarlarını açmak için tıklayın.

Ardından simge için kullanılan arka plan rengini panonuza kopyalayın (#3b5998). Bu renk kutu gölgesi için kullanılacaktır.

Şimdi tasarım sekmesini açın ve aşağıdakileri güncelleyin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Dikey Konumu: 0px (varsayılan), -46px (vurgulu)
Kutu Gölge Bulanıklığı Gücü: 0px
Kutu Gölge Yayılma Gücü: 5px (varsayılan), -16px (vurgulu)

Gölge rengi için arka plan rengini (#3b5998) yapıştırın ve opaklığı %50 azaltın. Bu size düğme arka plan renginin daha açık bir versiyonunu verecektir.

Gölge Rengi: rgba(59,89,152,0.5)

Şimdi Kutu Gölge stili kategorisine sağ tıklayın ve Kutu Gölge Stillerini Kopyala'yı seçin.

Facebook sosyal ağının ayarlarını kaydedin ve ardından sosyal ağların her birine sağ tıklayın ve her biri için Öğe Stillerini Yapıştır'ı seçin. Bu, aynı kutu gölge stillerini düğmelerin geri kalanına uygular.

Ancak yine de her birine özel olan kutu gölgesinin rengini güncellemeniz gerekecektir. Bunu yapmak için Facebook sosyal ağı için yaptığımız işlemi tekrarlayın. Belirli sosyal ağ ayarlarını açın, kullanılan arka plan rengini kopyalayın, yeni kutu gölge rengi olarak yapıştırın ve ardından opaklığı %50 azaltın.

Kalan sosyal ağların her biri için kutu gölge renkleri şunlardır:

Twitter Kutusu Gölge Rengi: rgba(0,172,237,0.5)
Instagram Kutusu Gölge Rengi: rgba(234,44,89,0.5)
Dribble Box Gölge Rengi: rgba(234,76,141,0.5)
Youtube Kutusu Gölge Rengi: rgba(168,36,0,0.5)

Kutu gölge renkleri güncellendiğinde, nihai sonucu kontrol edin.

Noktalardan Kenarlara

Kutu gölge dikey konumu ve yayılma gücü için varsayılan ve vurgulu değerlerini değiştirerek vurgulu efektini kolayca tersine çevirebilirsiniz.

Bölümü çoğaltın (“sınırları noktalara” tasarımını korumak istiyorsanız) ve ardından sosyal medya takip modülü ayarlarını açın. Ardından Facebook sosyal ağının ayarlarını açın ve aşağıdakileri güncelleyin:

Kutu Gölgesi Dikey Konumu: -46px (varsayılan), 0px (vurgulu)
Kutu Gölge Yayılma Gücü: -16 piksel (varsayılan), 5 piksel (fareyle üzerine gelme)

Kalan sosyal ağların her biri için bu yeni kutu gölge ayarlarını güncellemeniz gerekecek. Bunu manuel olarak yapabilirsiniz veya Kutu Gölge Dikey konumunu kopyalamak ve gücü yaymak için sağ tıklamayı kullanabilir ve ardından bunları ağların her birine yapıştırabilirsiniz.

Bittiğinde, son tasarımınız böyle görünecek.

Sıçrayan Gölgeler Etkisi

Bu tasarımın ve fareyle üzerine gelme efektinin bir sonraki sürümü için, her bir düğmenin kutu gölgesinin (nokta) varsayılan olarak aynı konumda başlamasını sağlayacağız. Bu bir tür zıplama efekti yaratacaktır.

Başlamak için, daha önce oluşturduğumuz "noktadan sınırlara" tasarımını çoğaltabilirsiniz. Sosyal medya takip modülü ayarlarını açın ve ardından facebook sosyal ağ ayarlarını açın. Aşağıdaki kutu gölge stillerini güncelleyin:

Kutu Gölgesi Yatay Konumu: 140px (varsayılan), 0px (fareyle üzerine gelin)
Kutu Gölgesi Dikey Konumu: -70px (varsayılan), 0px (vurgulu)

Twitter sosyal ağı için aşağıdakileri güncelleyin:

Kutu Gölgesi Yatay Konumu: 70px (varsayılan), 0px (vurgulu)
Kutu Gölgesi Dikey Konumu: -70px (varsayılan), 0px (vurgulu)

Instagram sosyal ağı için aşağıdakileri güncelleyin:

Kutu Gölgesi Yatay Konumu: 70px (varsayılan), 0px (vurgulu)
Kutu Gölgesi Dikey Konumu: -70px (varsayılan), 0px (vurgulu)

Dribble sosyal ağı için aşağıdakileri güncelleyin:

Kutu Gölgesi Yatay Konumu: -70px (varsayılan), 0px (vurgulu)
Kutu Gölgesi Dikey Konumu: -70px (varsayılan), 0px (vurgulu)

Youtube sosyal ağı için aşağıdakileri güncelleyin:

Kutu Gölgesi Yatay Konumu: -140px (varsayılan), 0px (vurgulu)
Kutu Gölgesi Dikey Konumu: -70px (varsayılan), 0px (vurgulu)

Nihai sonucu kontrol edin.

Noktanın başlangıçta görünmesini istemiyorsanız, varsayılan kutu gölge rengini saydam olarak ayarlayabilir ve ardından üzerine gelindiğinde bir kutu gölge rengi ekleyebilirsiniz. Bu size aşağıdaki gibi görünen bir tasarım verecektir:

#2 Hover'da Renk, Boyut ve Şekli Değiştirme

Bu sonraki vurgulu efekt serisi için, fareyle üzerine gelindiğinde sosyal medya düğmelerinin rengini, boyutunu ve veya şeklini kolayca nasıl değiştireceğinizi göstereceğim. Başlamak için, Uygulama Geliştirici Ana Sayfası düzenindeki sosyal medya takip düğmesi bölümünün yeni bir sürümünü kullandığınızdan emin olun. Divi Kitaplığınıza kaydettiyseniz, şimdi sayfanıza eklemek için iyi bir zaman olacaktır.

Renk Değiştirme

Fareyle üzerine gelindiğinde bir sosyal medya düğmesinin rengini değiştirmek oldukça basittir. Bu örnek için, varsayılan olarak sosyal ağ rengine dönüşen koyu gri bir arka plan rengiyle başlayalım.

Bunu yapmak için Sosyal Medya Takip modülünü açın ve ardından Facebook Ağı ayarlarını açın. Aşağıdakileri güncelleyin:

Arka Plan Rengi: #333333 (varsayılan), #3b5998 (fareyle üzerine gelin)

Ardından kalan dört sosyal ağ arka plan rengini aşağıdaki gibi güncellemek için bu işleme devam edin:

Twitter arka plan rengi: #333333 (varsayılan), #00aced (fareyle üzerine gelin)
Instagram arka plan rengi: #333333 (varsayılan), #ea2c59 (fareyle üzerine gelin)
Top sürme arka plan rengi: #333333 (varsayılan), #ea4c8d (fareyle üzerine gelin)
Youtube arka plan rengi: #333333 (varsayılan), a82400 (fareyle üzerine gelin)

İşte sonuç.

Değişen Boyut

Düğmenin boyutunu değiştirmek için fareyle üzerine gelindiğinde bir kutu gölgesi ekleyebiliriz. Bu, düğmenin üzerine gelindiğinde bitişik düğmeleri itecek herhangi bir gerçek alan eklemeden düğmenin büyümesini sağlar.

Bunu yapmak için Facebook ağ ayarlarını açın ve aşağıdaki kutu gölge stillerini ekleyin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Bulanıklığı Gücü: 0px
Kutu Gölge Yayılma Gücü: 0px (varsayılan), 10px (vurgulu)
Gölge Rengi: #3b5998 (bu, düğmenin üzerine gelindiğinde arka plan rengiyle aynı renkte olmalıdır)

Aynı kutu gölge tasarımını diğer sosyal ağ düğmelerine ekleme işlemini hızlandırmak için, Facebook Ağı'nın kutu gölge kategorisine sağ tıklayın ve “Kutu Gölge Stillerini Kaydet” seçeneğine tıklayın.

Ayarları kaydedin ve ardından sosyal ağların her birine sağ tıklayın ve “Öğe Stillerini Yapıştır” seçeneğini seçin.

Şimdi yapmanız gereken tek şey, kutunun gölge rengini, vurgulu arka plan rengiyle eşleşen doğru sosyal ağ rengiyle güncellemek.

Bu güncellemeyi yapmak için aşağıdakileri yapın:

Twitter Kutusu Gölge rengi: #00aced
Instagram Kutusu Gölge rengi: #ea2c59
Dribble Box Gölge rengi: #ea4c8d
Youtube Kutusu Gölge rengi: #a82400

İşte nihai sonuç.

Şekil değiştirmek

Fareyle üzerine gelindiğinde düğmenin şeklini değiştirmek için tek yapmanız gereken “Yuvarlak Köşeler” seçeneğini ayarlamaktır. Bu sosyal medya takip modülü şu anda 40 piksele ayarlanmış yuvarlak köşelere sahip ve düğmeleri dairesel yapıyor. Kare olarak değiştirmek istiyorsak, fareyle üzerine gelindiğinde yuvarlatılmış köşeleri 0px olarak ayarlamanız yeterlidir.

Bunu yapmak için Facebook Ağı ayarlarını açın ve aşağıdakileri güncelleyin:

Yuvarlatılmış Köşeler (vurgulu): Dört köşede 4 piksel

Ardından kenarlık stillerini kopyalayın ve kalan her ağa yapıştırın.

İşte son tasarım.

#3 Filtre Efektleri

Bir sonraki vurgulu efekt için, fareyle üzerine gelindiğinde sosyal medya düğmelerinin renklerini değiştirmek için birkaç filtre efektinin nasıl kullanılacağını göstereceğim. Başlamak için, Uygulama Geliştirici Ana Sayfası düzenindeki sosyal medya takip düğmesi bölümünün yeni bir sürümünü kullandığınızdan emin olun. Divi Kitaplığınıza kaydettiyseniz, şimdi sayfanıza eklemek için iyi bir zaman olacaktır.

Fareyle üzerine gelindiğinde Doygunluk ve Ters Filtre efektleri

Doygunluğu ve ters filtre efektlerini kullanmak, fareyle üzerine gelindiğinde sosyal medya düğmelerinizin stilini değiştirmenin basit ve güçlü bir yoludur. Bu örnekte, fareyle üzerine gelindiğinde orijinal renklerine geri dönen siyah simgelerle gri düğmeler oluşturmak için doygunluğu ve ters çevirmeyi nasıl birleştireceğinizi göstereceğim.

Bunu yapmak için sosyal medya takip modülü ayarlarını açın ve ardından bireysel sosyal ağ ayarlarının her birini açın ve aşağıdaki filtre seçeneklerini güncelleyin:

Doygunluk: %0 (varsayılan), %100 (vurgulu)
Ters Çevir: %100 (varsayılan), %0 (fareyle üzerine gelme)

Sonucu kontrol edin.

#4 Ekran Karıştırma ve Filtre Efektli Büyük Renkli Simgeler

Bu son sosyal medya düğmesi vurgulu tasarımı için tamamen sıfırdan başlayacağız. Bu yüzden tek sütunlu bir satırla yeni bir bölüm oluşturun ve satıra bir sosyal medya takip modülü ekleyin.

Ardından sosyal medya takip ayarlarını açın ve yalnızca facebook sosyal ağ öğesini bırakarak varsayılan twitter sosyal ağını silin.

Ardından sosyal medya takip ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #ffffff
Öğe hizalama: merkez
Karışım Modu: Ekran

Ardından, Facebook Sosyal ağ öğesi ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #000000
Özel Kenar Boşluğu: 10 piksel sol, 10 piksel sağ
Özel Dolgu: 10 piksel üst, 10 piksel alt, 10 piksel sol, 10 piksel sağ
Doygunluk: %0 (varsayılan), %100 (vurgulu)
Ters Çevir: %100 (varsayılan), %0 (fareyle üzerine gelme)

Ayarları kaydet.

Ardından facebook sosyal ağ öğesini 4 kez çoğaltın, böylece toplam 5 sosyal ağ butonunuz olur.

Şimdi çoğaltılan sosyal ağ öğelerinin her birini açın ve sosyal ağı ve arka plan rengini #000000 olarak güncelleyin.

Ayarları kaydet.

Artık ekran harmanlama moduna sahip olduğumuz için, sosyal medya takip modülümüzü içeren satır sütununa bir arka plan rengi ekleyebiliriz. Hangi arka plan rengini kullanırsak kullanalım, sosyal medya simgelerimizin rengini ve üzerine gelindiğinde arka plan rengini belirleyecektir.

Bunu yapmak için satır ayarlarını açın ve aşağıdakileri güncelleyin:

Sütun 1 Arka Plan Rengi: #0c71c3

Simge renklerinin bu arka plan rengine nasıl değiştiğine dikkat edin.

Şimdi şimdiye kadarki sonucu kontrol edin.

Simgeleri/düğmeleri büyütmek için bir Özel CSS pasajı kullanabiliriz. Bunun için öncelikle sosyal medya takip modülüne bir CSS ID eklememiz ve ardından sayfa ayarlarımıza biraz CSS eklememiz gerekiyor.

Sosyal medya takip modülünü açın ve gelişmiş sekmesinin altına aşağıdaki CSS kimliğini ekleyin.

CSS kimliği: büyük simgeler

Ardından, sayfa ayarlarınızı açın ve aşağıdaki özel css'yi ekleyin.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

Bu kod, simgelerin boyutunu 50 piksele ve düğmelerin yüksekliğini ve genişliğini 100 piksele çıkarır. Medya sorgusu, bu stilin yalnızca masaüstüne uygulanmasını sağlar.

Nihai sonucu kontrol edin.

Son düşünceler

Umarım bu sosyal medya takip düğmesi vurgulu efektleri, ziyaretçilerinizi bazı benzersiz tasarımlarla nasıl çekeceğiniz konusunda size yeni fikirler verir. Özellikle Divi'de fareyle üzerine gelme efektlerinin nasıl çalıştığını biliyorsanız, bu örneklerin çoğunu oluşturmak kolaydır. Bir dahaki sefere kadar Divi becerilerinizde ustalaşmaya devam edin ve bir sonraki projeniz için güzel bir şey yaratın.

Yorumlarda sizden haber bekliyorum.

Şerefe!