Divi ile Ekip Üyesi Resimlerine Hover Sosyal Simgeleri Nasıl Eklenir

Hakkında sayfanızı oluştururken, şirketinizin farklı ekip üyelerini bir vitrine eklemeyi düşünebilirsiniz. Bu tasarım sürecini başlatırken, yarasadan üç şeyin eksik olamayacağını fark edeceksiniz: bir görüntü, bir isim ve bir konum. Ancak ekip üyelerinizi daha da öne çıkarmak istiyorsanız, onların sosyal ağ bağlantılarını da tasarıma eklemeyi düşünebilirsiniz. Tabii ki, eski moda bir yoldan gidebilir ve kişinin adının ve konumunun altına bir Sosyal Medya Takip Modülü ekleyebilirsiniz. Bununla birlikte, birisi kişi resimlerinden birinin üzerine gelir gelmez sosyal simgeleri tetikleyerek küçük bir etkileşim eklemeyi de seçebilirsiniz. Bugünün eğitiminde, Divi kullanarak bunu tam olarak nasıl yapacağı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 bunları 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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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!

Yeniden Yaratmaya Başlayalım!

1. Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #0f0f0f

aralık

Bölümün tasarım sekmesine gidin ve sonraki boşluk ayarlarını değiştirin.

• Üst Dolgu
  • Masaüstü ve Tablet: 100 piksel
  • Telefon: 50 piksel
• Alt Dolgu:
  • Masaüstü ve Tablet: 100 piksel
  • Telefon: 50 piksel

Yeni Satır Ekle

Sütun Yapısı

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

Sütuna Metin Modülü #1 Ekle

H1 İçeriği Ekle

Seçtiğiniz bazı H1 içeriğiyle satırın sütununa ilk Metin Modülünü ekleyin.

H1 Metin Ayarları

Modülün tasarım sekmesine gidin ve H1 metin ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Alata
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu:
  • Masaüstü: 50 piksel
  • tablet: 45 piksel
  • Telefon: 35 piksel
• Yön Çizgisi Yüksekliği: 1.2em

Sütuna Ayırıcı Modül Ekle

görünürlük

Ardından, bir Bölücü Modül ekleyeceğiz. “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Modülün tasarım sekmesine gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #ffffff

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 2px
• Maksimum Genişlik: 100 piksel
• Yükseklik: 2 piksel

Sütuna Metin Modülü #2 Ekle

Açıklama İçeriği Ekle

Bu satırda ihtiyacımız olan sonraki ve son modül, seçtiğiniz bazı açıklama içeriğine sahip başka bir Metin Modülüdür.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Yazı Tipi: Alata
• Metin Rengi: #7c7c7c
• Metin Boyutu: 17px
• Metin Satır Yüksekliği: 1.9em

aralık

Varsayılan alt kenar boşluğunu da kaldırın.

• Alt Kenar Boşluğu: 0px

2. Bölüm Ekle

Degrade Arka Plan

Bir öncekinin hemen altına başka bir bölüm ekleyin ve bunun için degrade bir arka plan kullanın.

• Renk 1: #0f0f0f
• Renk 2: #000000
• Başlangıç ​​Konumu: %10
• Bitiş Konumu: %10

aralık

Sonraki boşluk ayarlarını değiştirin.

• Üst Dolgu: 0px
• Alt Dolgu: 200px

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

Satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2px

Sosyal Medya Takip Modülünü Sütun 1'e Ekleyin

Seçtiğiniz Sosyal Ağları Ekleyin

Sıramızda ihtiyacımız olan ilk modül, 1. sütundaki Sosyal Medya Takip Modülü. İstediğiniz sosyal ağları ekleyin.

Her Sosyal Ağ Arka Plan Rengini Tek Tek Kaldırın

Ardından, her bir sosyal ağı ayrı ayrı açın ve arka plan rengini kaldırın.

Her Sosyal Ağa Ayrı Ayrı Bağlantı Ekleyin

Her sosyal ağa da karşılık gelen bir bağlantı ekleyin.

Varsayılan Arka Plan Rengi

Ardından, genel modül ayarlarına geri dönün ve aşağıdaki arka plan rengini uygulayın:

• Arka Plan Rengi: rgba(0,0,0,0)

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde arka plan rengini değiştirin.

• Vurgulu Arka Plan Rengi: #494949

Arka plan görüntüsü

Ardından, bir arka plan resmi yükleyin.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Karışımı: Çarpma

hizalama

Modülün tasarım sekmesine gidin ve hizalamayı değiştirin.

• Modül Hizalaması: Merkez

Simge

Simge rengini de değiştirin.

• Simge Rengi: rgba(0,0,0,0)

aralık

Ardından, boşluk ayarlarına gidin ve aşağıdaki değerleri uygulayın:

• Alt Kenar Boşluğu: 0px
• Üst Dolgu:
  • Masaüstü: 250 piksel
  • Tablet: 450 piksel
  • Telefon: 200 piksel
• Alt Dolgu: 20px

Sınır

Kenarlık ayarlarını da değiştiriyoruz.

• Tüm Köşeler: 100 piksel
• Kenar Genişliği: 2px
• Kenar Rengi: rgba(255,255,255,0)

fareyle üzerine gelin

Fareyle üzerine gelindiğinde başka bir kenarlık rengi kullanın.

• Kenarlık Renginin Üzerine Gel: #ffffff

CSS Sınıfı

Ardından, gelişmiş sekmeye gidin ve özel bir CSS sınıfı uygulayın.

• CSS Sınıfı: takım sosyalleri

Öğeden Önce Fareyle Üzerine Gelin

Ve önceki öğede fareyle üzerine gelme ayarını etkinleştirerek ve aşağıdaki CSS kodu satırlarını kopyalayıp yapıştırarak modül ayarlarını tamamlayın:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

1. Sütun'a Kişi Modülü Ekle

İçerik Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Kişi Modülüdür. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Hizalama: Merkez
• Metin Rengi: Açık

Başlık Metni Ayarları

Sonraki başlık metnine stil verin.

• Başlık Fontu: Alata
• Başlık Metin Boyutu:
  • Masaüstü: 27 piksel
  • Tablet: 25 piksel
  • Telefon: 22 piksel

Konum Metni Ayarları

Ardından, konum metni ayarlarını değiştirin.

• Pozisyon Yazı Tipi: Alata
• Konum Metin Boyutu:
  • Masaüstü: 17 piksel
  • Tablet ve Telefon: 15px

aralık

Boşluk ayarlarına bazı özel üst ve alt dolgular uygulayın.

• Üst Dolgu: 40px
• Alt Dolgu: 40px

Sınır

Ve aşağıdaki kenarlık ayarlarını uygulayarak modül ayarlarını tamamlayın:

• Kenar Genişliği: 1px
• Kenar Rengi: #ffffff

Satırın Kalan Sütunlarını Kaldır

1. sütundaki modülleri tamamladığınızda, satırın kalan iki sütununu kaldırabilirsiniz.

Sütunu İki Kez Klonla

Sütun 1'i iki kez klonlayarak yeniden kullanın.

Tüm Satırı Klonla

Ardından, tüm satırı istediğiniz kadar klonlayın.

Tüm Yinelenen İçeriği Değiştir

Sosyal Medya Takip Bağlantıları

Elbette, her bir yinelenen Sosyal Medya Takip Modülündeki sosyal ağ bağlantılarından başlayarak tüm yinelenen içeriği değiştirmeniz gerekecektir.

Sosyal Medya Takip Arka Plan Resimleri

Ardından, her Sosyal Medya Takip Modülündeki arka plan resmini değiştirin.

Kişi Modül İçeriği

Ve her Kişi Modülündeki içeriği değiştirerek değişiklikleri tamamlayın.

Bölüm #1'in 1. Satırındaki Son Metin Modülünün Altına Kod Modülü Ekleyin

Şimdi, tüm modül üzerine gelindiğinde her bir sosyal ağın stilleri değiştirdiğinden emin olmak için birkaç satırlık CSS koduna ihtiyacımız olacak. Bu kodu, Metin Modülü açıklamasının hemen altındaki ilk bölüme ekleyeceğimiz yeni bir Kod Modülünün içine yerleştireceğiz.

CSS Kodu Ekle

Aşağıdaki CSS kod satırlarını kopyalayıp yapıştırın ve işiniz bitti:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

Ö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, ekip üyesi vitrininizle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, ekip üyelerinden birinin resminin üzerine geldiğinizde sosyal simgeleri nasıl tetikleyeceğinizi gösterdik. Bu, oluşturduğunuz her tür web sitesi için kullanabileceğiniz ince ama eğlenceli bir etkileşimle sonuçlanır. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz 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.