Divi'deki Sayfa Şablonunuz için Pop Out Sosyal Medya Takip Düğmeleri Çubuğu Nasıl Tasarlanır
Yayınlanan: 2019-12-22Sosyal Medya Takip düğmeleri, herhangi bir web sitesine popüler bir ek olmaya devam ediyor. Şirketler ve bireyler, ziyaretçilerin onları takip etmesi veya kanallarına abone olması umuduyla kullanıcıları sosyal medya sayfalarına yönlendirmek için bu bağlantıları kullanır. Normalde bu düğmeleri bir iletişim sayfasında, kenar çubuğunda veya bir web sitesinin alt kısmında görürsünüz.
Bu derste, size Divi'de bir sayfa şablonuna açılır bir sosyal medya takip düğmeleri çubuğunu nasıl tasarlayacağınızı göstereceğiz. Bu, bu sosyal medya takip düğmelerine dikkatinizi dağıtmadan sitenizde daha fazla görünürlük sağlayacaktır. Ayrıca Divi's Theme Builder ile sitenizdeki herhangi bir (veya tüm) sayfa için bu düğmeleri içeren bir sayfa şablonu kolaylıkla oluşturabilirsiniz.
Hadi atlayalım ve başlayalım!
Gizlice Bakış
İşte bu eğitimde oluşturulan sosyal medya takip düğmelerine hızlı bir bakış.
Pop Out Sosyal Medya Takip Düğmeleri Çubuğu Sayfa Şablonunu ÜCRETSİZ olarak indirin
Bu öğreticiden Sosyal Medya Takip Düğmeleri Çubuğu Sayfa Şablonu'na el 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.
Ü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.
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!
Düzeni sayfanıza aktarmak için, zip dosyasını çıkarın ve Theme Builder Taşınabilirlik seçeneğini kullanarak json dosyalarından birini Divi Theme Builder'a ekleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için Divi Temasını yüklemeniz ve etkinleştirmeniz gerekir. Divi'nin en son sürümüne sahip olduğunuzdan emin olun.
Ayrıca, sonucu göstermek üzere yeni şablonu o sayfaya atamak için Divi Builder ile test amacıyla oluşturulmuş en az bir sayfaya ihtiyacınız olacaktır.
Bundan sonra, gitmeye hazırsınız.
Divi'de Sayfa Şablonu için Pop Out Sosyal Medya Takip Düğmeleri Çubuğu Oluşturma
Yeni Şablon Oluşturma
WordPress Kontrol Panelinden Divi > Tema Oluşturucu'ya gidin. Ardından yeni bir şablon oluşturmak için “Yeni Şablon Ekle” kutusunu tıklayın.
Promosyon çubuğunun görüntülenmesini istediğiniz sayfaya/sayfalara şablonu atayın.
Yeni şablonda, “Özel Gövde Ekle” alanını tıklayın ve ardından “Özel Gövde Oluştur” seçeneğini seçin.
Ardından “Sıfırdan Oluştur” seçeneğini seçin.
Sosyal Medya Takip Düğmeleri Çubuğunu Oluşturma
Yeni Satır Oluştur
Yeni başlayanlar için şablona tek sütunlu bir satır ekleyelim.
Sosyal Medya Takip Butonları Modülü Ekleyin
Tek sütunlu satıra bir sosyal medya takip modülü ekleyin.
Sosyal Ağlar Ekle
Sosyal medya takip ayarları altında, görüntülenmesini istediğiniz tüm sosyal ağları ekleyin. Yeni bir ağ eklemek için Yeni Sosyal Ağ Ekle gri artı simgesine tıklayın ve ardından listeden ağı seçin.
Ziyaretçileri yönlendirmek istediğiniz sosyal medya sayfasının bağlantı URL'sini de eklemeniz gerekecektir. Bunu yapmak için sosyal medya ağındaki ayarlar simgesine tıklayın ve Hesap Bağlantısı URL'sini güncelleyin.
Düğme Modülü Ekle
Sosyal medya takip modülü ağlarını bitirdikten sonra bir buton modülü eklemeye hazırız. Bu düğme, kullanıcının açılır çubuğu ortaya çıkarmak için üzerine geldiği düğme olacaktır. Devam edin ve düğme modülünü ekleyin, ardından sosyal medya takip modülünün üzerine sürükleyin.
Düğme İçeriği
Daha sonra Düğme içeriğini aşağıdaki gibi güncelleyin:
- Düğme Metni: Takip Et
- Düğme Bağlantı URL'si: #
Düğme Stilleri ve Konumlandırma
Ardından düğme tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Düğme Metin Boyutu: 16px
- Düğme Metin Rengi:
- Düğme Kenar Genişliği: 0px
- Düğme Harf Aralığı: 1px
- Düğme Yazı Tipi: Montserrat
- Düğme yazı tipi Ağırlık: Kalın
- Düğme Simgesi: sağ ok (ekran görüntüsüne bakın)
- Marj: %100 kaldı
- Dolgu: 100 piksel alt
Ardından aşağıdaki Özel CSS'yi Ana Öğeye ekleyin:
position: absolute;
Satır Ayarları
Düğmenin stilini belirleyip kullanıma hazır olduğunda, satır ayarlarını aşağıdaki gibi güncelleyin:
- Arka Plan Rengi: #ffffff
- Oluk Genişliği: 1
- Genişlik: %100
- Maksimum Genişlik: 64px
- Dolgu: 24 piksel üst, 16 piksel alt, 16 piksel sol
Satır Kutusu Gölgesi
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölge Bulanıklığı Gücü: 0px
- Kutu Gölge Bulanıklığı Gücü: 30 piksel
- Gölge Rengi (masaüstü): şeffaf
- Gölge Rengi (vurgulu): rgba(0,0,0,0.2)
Satır Konumlandırma
Ardından aşağıdaki özel CSS'yi Ana Öğe satırına ekleyin:
position: fixed; top: calc(33.33vh - 55px); left: 0;
Bu, satırı tarayıcının üstünden üçte biri kadar sabit bir konumda konumlandıracaktır.
Özel Kenar Boşlukları ile Hover Etkisinde Açılır
Şimdi, fareyle üzerine gelindiğinde açılır işlevini eklemek için aşağıdaki kenar boşluğu değerlerini ekleyin.
- Kenar boşluğu (masaüstü): -64 piksel sol
- Kenar boşluğu (fareyle üzerine gelin): 0 piksel kaldı
Bu, sosyal medya takip düğmeleri çubuğunu önemser. Ancak yine de gerekli post içerik modülünü oluşturarak şablonu bitirmemiz gerekiyor.
Gönderi İçeriği Modülünü Şablona Ekleme
Bu noktada sosyal medya takip butonları çubuğu kullanıma hazırdır. Ancak bu bir şablon olduğu için, bu şablonu kullanan sayfaların içeriğini görüntülemek için post içerik modülünü eklememiz gerekiyor.
Post Content Modülü ile Yeni Satır Ekle
Sosyal medya takip düğmeleri çubuğunu içeren satırın altına, yeni bir tek sütunlu satır ekleyin.
Ardından İçerik Gönderi Modülünü Satıra ekleyin.
Şu anda gönderi içeriği modülü, üst satırın varsayılan genişliğiyle sınırlı olacaktır. Herhangi bir boşluk olmadan tarayıcının tüm genişliğini kapsayacak şekilde satırın genişliğini ve dolgusunu değiştirmemiz gerekiyor. Bu önemlidir çünkü yazı içeriği modülü, Divi Builder'ı kullanarak bir sayfa oluşturmanız gereken alanı belirler.
Aşağıdakileri güncelleyin:
- Genişlik: %100
- Maksimum Genişlik: %100
- Dolgu: 0 piksel üst, 0 piksel alt
Şimdi Bölüm ayarlarını aşağıdaki gibi güncelleyin:
- Dolgu: 0 piksel üst, 0 piksel alt
Bu konuda yapar. Şimdi düzenleyiciden çıkmadan önce düzeni kaydettiğinizden emin olun. Ardından, tema oluşturucu için değişiklikleri de kaydedin.
Son sonuç
Nihai sonuçları görmek için, kendisine atanmış şablonun bulunduğu sayfayı ziyaret edin. İşte sosyal medya takip butonları çubuğunun nasıl görüneceği.
Son düşünceler
Bu sosyal medya takip butonları çubuğu kesinlikle bu önemli sosyal ağları ön plana çıkarmaya yardımcı olacaktır. Açılır kapanır işlevi, simgelerin kullanıcıların dikkatini dağıtmamasını sağlar. Ayrıca, Tema Oluşturucu'yu kullanarak çubuğu herhangi bir sayfa şablonuna ekleyebilirsiniz. Umarım bu, bir sonraki projenize harika bir katkı olur!
Yorumlarda sizden haber bekliyorum.
Şerefe!