Sosyal Medya Takip Modülü Monarch Gibi Sabit Nasıl Yapılır

Bugünkü eğitimde, size Sosyal Medya Takip Modülünü belirli ihtiyaçlara nasıl uygun hale getireceğinizi göstereceğiz. Sosyal Medya Takip, herhangi bir web sitesindeki herhangi bir sayfada nadiren eksik olan bir modüldür. Sosyal medya kanallarını web sitesine bağlamanın ana yollarından biridir. Web siteniz ve sosyal medya kanalları arasında istediğiniz bağlantıyı elde etmenize yardımcı olmak için Monarch'ımız var. Web sitenizde sosyal medya takip düğmelerini kolayca göstermenize yardımcı olan bir eklenti. Ancak, Monarch sonuçlarından bazılarını Divi oluşturucu aracılığıyla elde etmeyi tercih ediyorsanız, bu gönderi kullanışlı olabilir.

Monarch eklentisinin sağladığı şeylerden biri olan web siteniz için nasıl sabit bir Sosyal Medya Takip Modülü oluşturacağınızı göstereceğiz. Sol veya sağ tarafa yerleştirmenin yanı sıra (Monarch'taki standart ayarlar), sayfanızın üstüne ve altına nasıl yapıştırılacağını da göstereceğiz. Sayfanın üst kısmına yapıştırmanın yanı sıra, Sosyal Medya Takip Modülünün web sitenizdeki birincil menünün altında nasıl görüneceğini (birincil menünüz sabit olsun veya olmasın) gösterdiğimiz bir bölüm de ekleyeceğiz. .

Aşağıdaki nihai sonuçlara bir göz atalım.

Sol Taraf Örneği

Sağ Taraf Örneği

En İyi Örnek (Standart)

Sabit Navigasyon Olmadan

Sabit Navigasyon ile

Alt Örnek

Sosyal Medya Takip Modülü Monarch Gibi Sabit Nasıl Yapılır

Youtube Kanalımıza Abone Olun

Genel Adımlar

Bir sayfaya Sosyal Medya Takip Modülü eklemenin temel adımları her örnekte aynı olduğu için bunu sadece bir kez göstereceğiz. Sağ taraf, üst veya alt yerleşim için aynı sonucu elde etmek istiyorsanız, bu yazının sonraki bölümünde açıklandığı gibi önce sosyal medya takip modülünü eklemeniz gerekir.

Sayfaya Sosyal Medya Takip Modülü Ekle

Bunu kolaylaştırmak için sayfamızın ilk bölümüne Sosyal Medya Takip Modülünü ekleyeceğiz. Bunu yaparak, gelecekte herhangi bir değişiklik yapmak istediğinizde onu nerede bulacağınızı hemen bileceksiniz. Bu modül için ayrı bir satıra ihtiyacımız yok çünkü ona sabit bir pozisyon atayacağız.

Sosyal Medya Takip Modülüne Sosyal Medya Kanalları Ekleyin+

Bir sonraki yapmamız gereken şey, gerekli sosyal medya kanallarını Sosyal Medya Takip Modülüne eklemek. Modül ayarlarını açın ve 'Yeni Sosyal Ağ Ekle'ye tıklayın. Bunu yaptıktan sonra, eklemek istediğiniz sosyal medya ağını seçebilir ve ona bir URL atayabilirsiniz.

Sosyal ağların her biri için, otomatik olarak sosyal ağla eşleşen bir simge rengi atanır. Ancak renkleri kendi web sitenizin tarzında kullanmayı tercih ederseniz, Tasarım sekmesinde farklı bir renk seçebilirsiniz. Size nasıl yapılacağını göstereceğimiz örnek için dört sosyal ağ ekleyeceğiz; Facebook, Twitter, Google+ ve LinkedIn. Standart renkleri kullanmak yerine, sosyal ağların her birine aynı rengi ancak farklı bir opaklıkla vereceğiz. Sosyal medya kanallarını da önem sırasına göre sıralayacağız.

Facebook Ayarları

'Yeni Sosyal Ağ Ekle'yi tıklayın. Sosyal ağ seçeneklerinde Facebook'u seçin. Hala İçerik sekmesindeyken, Facebook sosyal medya kanalına bağlı URL'yi ekleyin.

Ardından Tasarım sekmesine geçin. Bu durumda Facebook en önemli sosyal ağdır. Bu yüzden ona en çok dikkat çeken renk tonunu vereceğiz. Kullandığımız renk 'rgba(59,89,152,0.94)'.

Twitter Ayarları

Ardından, yeni bir Sosyal Ağ ekleyin. Facebook'u tercih etmek yerine bu sefer Twitter'ı tercih edin. URL'yi aynı İçerik sekmesine ekleyin ve Tasarım sekmesine geçin. Tasarım sekmesinde, arka plan rengi olarak 'rgba(59,89,152,0.76)'yı seçin. Bu durumda Twitter önemli bir sosyal medya kanalıdır ancak Facebook kadar önemli değildir. Bu nedenle, biraz daha şeffaf ve daha az dikkat çekici bir renkle arka arkaya ikinci sırada geliyor.

LinkedIn Ayarları

Aynı işlemi İçerik sekmesinde LinkedIn sosyal ağı için tekrarlayın ve Tasarım sekmesine gidin. Tasarım sekmesinde simgeye 'rgba(59,89,152,0.6)' rengini atayın.

Google+ Ayarları

Ve son ama en az değil; bir Google+ sosyal simgesi ekleyin. URL'yi doldurun ve Tasarım sekmesine gidin. Bu, bu örnekteki listeye eklemek istediğimiz 'en az' önemli sosyal ağdır ve 'rgba(59,89,152,0.42)' simge rengine sahip olacaktır.

Sol Kenar Çubuğunu Oluşturun Sosyal Medya Takip Edin

Nasıl yapılacağını göstereceğimiz ilk sabit Sosyal Medya Takip Modülü sayfanızın sol tarafında yer almaktadır. Bu en sık kullanılanıdır ve sizi hemen Monarch hakkında en çok düşündüren olabilir. Önce genel adımları izleyin ve bu yazının sonraki bölümünde bulacağınız CSS kodunu ekleyerek devam edin. Size CSS kodunu nasıl ekleyeceğinizi iki şekilde göstereceğiz; Tema Seçeneklerine ve özellikle bir sayfaya. Bu örnekten sonra, diğer örnekler için de iki seçenek arasından seçim yapabilirsiniz.

Tema Seçeneklerine CSS Kod Satırları Ekleme

Ek CSS kodu ekleme yöntemlerinden biri Tema Seçenekleridir. Bu yöntem en sık olarak tüm web sitesinde etki yaratmak istediğinizde kullanılır. Ama hatırla; Bu efekti kullanıyorsanız, web sitenizin her sayfasına (veya görünmesini istediğiniz sayfalara) Sosyal Medya Takip Modülünü eklemeniz gerekir.

CSS kodunu Tema Seçeneklerinize eklemek için WordPress Panonuz > Divi > Tema Seçenekleri > Genel > Genel sekmesine gidin ve Özel CSS alanına aşağıdaki CSS kodu satırlarını ekleyin:

ul.et_pb_social_media_follow { 
position: fixed; 
left: 0; 
top: 35%;
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

Özellikle Bir Sayfaya CSS Kod Satırları Ekleyin

CSS kodunu uygulamanıza yardımcı olan bir diğer yöntem, onu özellikle bir sayfaya eklemektir. Bu yöntem en çok Sosyal Medya Takip Modülünü özellikle tek bir sayfaya eklemeye karar verdiğinizde kullanılır. Bu yöntemi kullandığınızda, web sitenizde Sosyal Medya Takip Modülü içermeyen diğer sayfalara CSS kod satırları yüklenmeyecektir. Veya diğer sayfalardaki Sosyal Medya Takip Modülünün her zamanki gibi çalışmasını istiyorsanız bu yöntem de size yardımcı olacaktır.

Divi oluşturucunuzda aşağıdaki düğmeye tıklayın:

Ardından, CSS kodunu kopyalayıp Özel CSS alanına yapıştırın.

Sağ Kenar Çubuğu Oluştur Sosyal Medya Takip Et

Paylaşacağımız bir sonraki kod, Sosyal Medya Takip modülünü web sitenizin sağ tarafına yerleştirmenize yardımcı olacaktır.

Gerekli CSS Kod Satırları

Aşağıdaki CSS kod satırlarını Tema Seçeneklerine veya özellikle yukarıdaki örnekte açıklandığı gibi bir sayfaya ekleyin.

ul.et_pb_social_media_follow {
position: fixed;
top: 40%; 
padding: 0 !important; 
right: 0; 
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

En İyi Sosyal Medya Takiplerini Oluşturun

Devam ederek, Sosyal Medya Takip Modülünüzü web sitenizin en üstünde de bulabilirsiniz. Bu aslında sosyal medya simgelerinin ziyaretçilerinizi web sitesi üzerinden takip etmesine izin vermenin çok ilginç bir yoludur. Çok sık kullanılmadığı için insanların dikkatini çekiyor.

Gerekli CSS Kod Satırları

Aşağıdaki CSS kod satırlarını kopyalayıp Tema Seçeneklerine yapıştırın veya özellikle bir sayfaya ekleyin.

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

En İyi Sosyal Medyayı Oluşturun Birincil Menünün Altında Takip Edin

Sosyal Medya Takip Modülünü web sitenize eklemek için daha önce gösterilen yöntem, Birincil Menüyü dikkate almaz. Bununla birlikte, Sosyal Medya Takip'inin birincil menünün altında görünmesini ve kaydırırken en üste geri dönmesini istiyorsanız, gönderinin bu kısmı size yardımcı olabilir.

CSS Kodunu Ekle

Sabit navigasyonun etkin olduğu ve olmadığı her iki durumda da, aşağıdaki CSS kod satırlarını Tema Seçeneklerine eklemeniz veya özellikle bir sayfaya eklemeniz gerekir:

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

Bundan sonra, bazı jQuery kodları da eklemeniz gerekecek. jQuery kodu, sabit navigasyonu etkinleştirip etkinleştirmediğinize bağlıdır.

Sabit Navigasyon ile

Sabit navigasyonu etkinleştirdiyseniz, web sitenizin başına veya sayfanın içinde çalışmasını istediğiniz bir Kod Modülüne aşağıdaki jQuery kod satırlarını eklemeniz gerekir:

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
});
});
</script>

CSS kod satırlarını da kullanmayı unutmayın. jQuery kodu ektir. Ayrıca, kaydırdığınızda birincilinizin yüksekliğinin aynı kaldığından emin olun. Bunu, WordPress Panonuz > Görünüm > Özelleştir > Başlık ve Gezinme > Sabit Gezinme Ayarları > Sabit Menü Yüksekliği için minimum değeri seçerek yapabilirsiniz.

Sabit Navigasyon Olmadan

Aynı sonucu elde etmek istiyorsanız, ancak sabit bir navigasyonunuz yoksa, kod biraz farklı olacaktır:

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
else {
$("ul.et_pb_social_media_follow").css("margin-top", 0);
}
});
});
</script>

Alt Sosyal Medya Takip Oluştur

Sıradaki sonuncusu en alttaki Sosyal Medya Takip Modülüdür.

Gerekli CSS Kod Satırları

Tema Seçeneklerinizin Özel CSS alanına veya özellikle bir sayfaya aşağıdaki CSS kodu satırlarını ekleyin:

ul.et_pb_social_media_follow { 
position: fixed; 
left: 45%; 
bottom: 0; 
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; 
padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

Son düşünceler

Bu eğitimde, Monarch eklentisiyle aynı tarzda Sosyal Medya Takip Modülünü nasıl oluşturacağınızı gösterdik. Bu yöntemi kullanarak, yalnızca sosyal medya kanallarınızı paylaşmak için kullanıyorsanız Monarch eklentisini indirmenize gerek kalmayacak. Sosyal medya paylaşımı için yine de Monarch eklentisini kullanmanız gerekir. Herhangi bir sorunuz veya öneriniz varsa; İletişime geçebilmemiz için aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Öne Çıkan Görsel Snopek Nadia / Shutterstock.com