Divi için 5 Renk Paletli Eşsiz Sosyal Takip Tasarımını İndirin

Web siteleri ve sosyal medya genellikle el ele gider. Sosyal ağlar, web sitelerine trafik çekmek için kullanılır, ancak özellikle sosyal ağlarınıza katılımı artırmak istiyorsanız, bunun tersi de geçerlidir. Bu nedenle çoğu web sitesi, çeşitli sayfalarda sosyal ağlarına bağlantılar içerir. Klasik yoldan gidebilir ve simgeler ekleyebilir veya daha benzersiz bir yaklaşım deneyebilirsiniz.

Divi kullanarak oluşturduğunuz herhangi bir web sitesinde indirebileceğiniz ve kullanabileceğiniz çarpıcı ve yaratıcı bir sosyal takip tasarımı oluşturduk. Bunun da ötesinde, size bu tasarım için harika görünen 5 farklı renk paleti de sağladık.

Hadi hadi bakalım!

Ön izleme

Bu tasarımın farklı varyasyonlarına ve farklı ekran boyutlarındaki görünüme bir göz atarak başlayalım.

Sosyal Takip Tasarımını ÜCRETSİZ İndirin

5 farklı renk paleti ile sosyal takip tasarımına el atmak için öncelikle aşağıdaki butondan indirmeniz gerekecek. İ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.

Renk Paletleri

Size süreç boyunca adım adım rehberlik edeceğiz. Ama bunu yapmadan önce, devam edin ve bir renk paleti seçin ve renk kodlarını yakınınızda tutun. Eğitim boyunca renk numarasına değineceğiz.

Palet #1

• Renk #1: #D09CF1
• Renk #2: #00e2df

2 numaralı palet

• Renk #1: #ffa0a0
• Renk #2: #10007f

Palet #3

• Renk #1: #ff3273
• Renk #2: #050042

4 numaralı palet

• Renk #1: #f954ee
• Renk #2: #00aeff

Palet #5

• Renk #1: #ffca3a
• Renk #2: #ff6005

Sosyal Takip Tasarımını Sıfırdan Yeniden Oluşturun

1. Bölüm Ekle

Degrade Arka Plan

Yeni veya mevcut bir sayfaya normal bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve bir degrade arka planı uygulayın:

• Renk 1: Renk #1 (Renk Paletinde Bul)
• Renk 2: Renk #2 (Renk Paletinde Bul)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %6

Arka plan görüntüsü

Ardından, indirilen klasör > Arka Plan Deseni'ne giderek bulabileceğiniz arka plan desenini yükleyin. Arka plan desenini aşağıdaki arka plan ayarlarıyla birleştirin:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Konumu: Alt Orta
• Arka Plan Resmi Tekrarı: Boşluk

Üst Bölücü

Ardından ayırıcı ayarlarını açın ve bir üst ayırıcı ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(72,0,79,0.08)
• Bölücü Yüksekliği: 500px
• Bölücü Çevirme: Dikey

Alt Bölücü

Bir alt bölücü de ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #FFFFFF
• Bölücü Yüksekliği: 500px

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel dolgular ekleyin.

• Üst Dolgu: 220px
• Alt Dolgu: 329px

Animasyon

Son olarak, bölüme ince bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Yoğunluğu: %2
• Animasyon Opaklığı Başlatma: %100

Satır ekle

Sütun Yapısı

Artık aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyebiliriz:

Metin Modülü Ekle

İçerik Ekle

Bu satırda ihtiyacımız olan tek modül bir Metin Modülü. İçerik kutusuna bir başlık ve paragraf ekleyin.

Metin Ayarları

Ardından, metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Boyutu: 16px
• Metin Satır Yüksekliği: 2em
• Metin Yönü: Merkez
• Metin Rengi: Açık

H1/H2 Metin Ayarları

Seçtiğiniz başlığın ayarlarını da değiştirin.

• Başlık Yazı Tipi: Rubik
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Boyutu: 100px (Masaüstü), 42px (Tablet), 32px (Telefon)
• Yön Çizgisi Yüksekliği: 1.2em

boyutlandırma

Sonraki modülün genişliğini azaltın.

• Genişlik: %71
• Modül Hizalaması: Merkez

2. Bölüm Ekle

Önceki bölümün hemen altında, devam edin ve yeni bir normal bölüm ekleyin. Bölüm ayarlarında herhangi bir değişiklik yapmanıza gerek yoktur.

Satır ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bir satır ekleyin:

boyutlandırma

Ardından, boyutlandırma ayarlarında satırı tam genişlikte yapın.

• Bu Satırı Tam Genişlikte Yap: Evet

Sütun 2'ye Görüntü Modülü Ekle

Maketi Yükle

Modül eklemeye başlama zamanı! İkinci sütuna bir Görüntü Modülü ekleyerek başlayın. Seçtiğiniz renk paletine uygun maketi yükleyin. İndirilen klasör > Maketler'e giderek tüm maket çeşitlerini bulabilirsiniz.

boyutlandırma

Görüntü Modülünün boyutunu da değiştirin.

• Genişlik: %82 (Masaüstü), %100 (Tablet ve Telefon)
• Modül Hizalaması: Merkez

aralık

Görüntü Modülü ile önceki bölümü çakıştırmak için, Görüntü Modülüne bir miktar negatif kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: -300px

Sütun 3'e Blurb Modülü Ekle

İçerik Ekle

Artık tüm sosyal ağları ekleyebiliriz! Bunları oluşturmak için Blurb Modules kullanıyoruz. Devam edin ve ilk Blurb Modülünü üçüncü sütuna ekleyin ve içeriği değiştirin.

Link ekle

Sonraki sosyal sayfaya bir bağlantı ekleyin.

Simge Seç

Simgenizi de seçin.

Arka plan rengi

Arka plan ayarlarına giderek ve biraz şeffaf bir arka plan rengi kullanarak devam edin.

• Arka Plan Rengi: rgba(255,255,255,0.79)

Simge Ayarları

Ardından, simge ayarlarını değiştirin. Burada Instagram'ın resmi renklerinden birini kullanıyoruz.

• Simge Rengi: #fb3958
• Simge Yerleşimi: Sol

Başlık Metni Ayarları

Sonraki başlık metni ayarlarında bazı değişiklikler yapın.

• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metin Rengi: #fb3958
• Başlık Satırı Yüksekliği: 1.7em

aralık

Modelle örtüşme oluşturmak için bazı boşluk değerleri ekleyeceğiz.

• Top Marign: -170px (Masaüstü), -800 (Tablet), -700 (Telefon)
• Sol Kenar Boşluğu: -%60 (Masaüstü), %0 (Tablet ve Telefon)
• Sağ Kenar Boşluğu: %60 (Masaüstü), %0 (Tablet ve Telefon)
• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Sınır ayarlarıyla da oynayacağız.

• Sol Üst Kenarlık: 20px
• Sol Alt Kenarlık: 20px
• Sağ Kenar Genişliği: 5px
• Sağ Kenar Rengi: #fb3958

Kutu Gölge

Bir kutu gölgesi eklemek, tasarım öğesine biraz derinlik kazandıracaktır.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -11px

Animasyon

Son olarak, insanların aşina olduğu mobil bildirim efektini taklit etmek için kaydırmalı animasyon stili kullanıyoruz.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol

Blurb Modülünü Üç Kez Klonla

Zaman kazanmak için Blurb Module'ü üç kez klonlayacağız. Ardından, istenen sonucu elde etmek için kopyaların her birini değiştireceğiz.

Yinelenenlerin Negatif Üst ​​Marjını Kaldır

İyi bir genel bakış sağlamak için, yinelenenlerin her birinin negatif özel kenar boşluğunu kaldırarak başlayacağız.

Benzersiz Blurb Modül Ayarları

Blurb Modülü #2

Kopyayı Değiştir

Üçüncü sütundaki ikinci Blurb Modülünü açın ve içeriği değiştirin.

Simge Seç

Başka bir simge de seçin.

Simge Ayarları

Simge rengini, temsil ettiği sosyal ağla eşleşecek şekilde değiştirin.

• Simge Rengi: #3b5998

Başlık Metni Ayarları

Başlık metni rengi için de aynı rengi kullanın.

• Başlık Metin Rengi: #3b5998

aralık

Telefonun diğer tarafında başka bir örtüşme oluşturmak için boşluk değerlerini değiştirin.

• Sol Kenar Boşluğu: -%70 (Masaüstü), %0 (Tablet ve Telefon)
• Sağ Kenar Boşluğu: %170 (Masaüstü), %0 (Tablet ve Telefon)

Sınır

Sonraki kenarlık ayarlarını değiştirin.

• Sağ Üst Köşe: 20px
• Sağ Alt Köşe: 20px
• Sol Kenar Genişliği: 5px
• Sol Kenar Rengi: #3b5998

Animasyon

Bu Blurb Module'ü diğer taraftan da küçük bir gecikmeyle içeri kaydırın.

• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 100ms

Blurb Modülü #3

Kopyayı Değiştir

Üçüncü Blurb Module'ün de farklı bir kopyaya ihtiyacı var.

Simge Seç

Sonraki başka bir simge seçin.

Simge Ayarları

Simge rengini, temsil ettiği sosyal ağla eşleşen bir renge değiştirin.

• Simge Rengi: #1da1f2

Başlık Metni Ayarları

Başlık metni rengi için aynı rengi kullanın.

• Başlık Metin Rengi: #1da1f2

aralık

Boşluk ayarlarını da değiştirin.

• Sol Kenar Boşluğu: -%80 (Masaüstü), %0 (Tablet ve Telefon)
• Sağ Kenar Boşluğu: %80 (Masaüstü), %0 (Tablet ve Telefon)

Sınır

Kenarlık ayarlarından kenarlık rengini de değiştirin.

• Sağ Kenar Rengi: #1da1f2

Animasyon

Son olarak, zaten orada olan animasyona küçük bir gecikme ekleyin.

• Animasyon Gecikmesi: 200ms

Blurb Modülü #4

Kopyayı Değiştir

Son Blurb Modülü için içeriği değiştirerek başlıyoruz.

Simge Seç

Sonraki Görüntü ve Simge ayarlarında başka bir sosyal simge seçin.

Simge Ayarları

Simge renginin görüntülenen sosyal ağla eşleşmesini sağlayın.

• Simge Rengi: #0077B5

Başlık Metni Ayarları

Başlık metni için aynı rengi kullanın.

• Başlık Metin Rengi: #0077B5

aralık

Farklı aralık ayarlarını da kullanarak Blurb Modülünü sol tarafa doğru itin.

• Sol Kenar Boşluğu: -%80 (Masaüstü), %0 (Tablet ve Telefon)
• Sağ Kenar Boşluğu: %180 (Masaüstü), %0 (Tablet ve Telefon)

Sınır

Ardından, kenarlık ayarlarını değiştirin.

• Sağ Üst Köşe: 20px
• Sağ Alt Köşe: 20px
• Sol Kenar Genişliği: 5px
• Sol Kenar Rengi: #0077B5

Animasyon

Son olarak, bu Blurb Modülüne farklı bir animasyon yönü ve biraz animasyon gecikmesi ekleyin.

• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 300ms

Ön izleme

Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.

Son düşünceler

Bu gönderide, ücretsiz olarak indirebileceğiniz benzersiz bir sosyal takip tasarımı paylaştık. Ayrıca size uygulayabileceğiniz 5 farklı renk paleti sağladık. Web siteniz aracılığıyla sosyal etkileşimi artırmak için oluşturduğunuz herhangi bir Divi web sitesinde JSON dosyalarını kullanmaktan çekinmeyin. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!