Divi için 5 Renk Palets ile Benzersiz Sosyal Takip Tasarımını İndirin
Web siteleri ve sosyal medya genellikle el ele gider. Sosyal ağlar, trafiği web sitelerine yönlendirmek için kullanılır, bunun yerine, özellikle sosyal ağınıza katılımı artırmak istiyorsanız da uygulanır. Bu nedenle çoğu web sitesi çeşitli sayfalardaki sosyal ağlarına bağlantılar içerir. Klasik yöntemi kullanabilir ve simgeler ekleyebilir veya daha benzersiz bir yaklaşım deneyebilirsiniz. İndirebileceğiniz ve Divi’yi kullanarak yaptığınız herhangi bir web sitesinde kullanılabileceğiniz inanılmaz ve yaratıcı bir sosyal takip tasarımı yaptık. Buna ek olarak, size bu tasarım için iyi görünen 5 farklı renk paletleri de veriyoruz.
Haydi Yapalım şunu! Başlayalım, bu tasarımın farklı varyasyonlarına ve göstergenin farklı ekran boyutlarında bakarak başlayalım.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Renk paletimiz, süreç boyunca adım adım yol gösterecektir. Ancak bunu yapmadan önce, devam edin ve seçilen renk paletini seçin ve renk kodunu yakın tutun. Öğretici boyunca renk numarasına atıfta bulunacağız.
Palet #1
Renk #1: #D09CF1 Renk #2: #00E2DF
Palet #2
Renk #1: #FFA0A0 Renk #2: #10007F
Palet #3
Renk #1: #FF3273 Renk #2: #050042
Palet #4
Renk #1: #F954EE Renk #2: #00Aeff
Palet #5
Renk #1: #FFCA3A Renk #2: #FF6005
Yeniden Yapın Tasarımı Takip Edin En başından beri, yeni veya mevcut sayfaya normal bölümü ekleyerek gradyan başlangıcının 1 numaralı arka planını ekleyin. Bölüm ayarlarını açın ve gradyanın arka planını uygulayın:
Renk 1: Renk #1 (renk paletinde bulun)
Renk 2: Renk #2 (renk paletinde bulun)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 6
Arka plan görüntüsü Ardından, indirme klasörü> arka plan desenini girerek bulabileceğiniz arka plan modelini yükleyin. Arka plan modelini aşağıdaki arka plan ayarlarıyla birleştirin: Arka Plan Görüntü Boyutu: Gerçek Boyut
Arka Plan Görüntü Pozisyonu: Alt Orta
Arka plan görüntüsünün tekrarlanması: Aralık bölümü Bir sonraki bölücü ayarlarını açın ve üst bölücüyü ekleyin.
Bölme Stili: Listede bulun Renk Renk: RGBA (72,0,79,0.08)
Böcek Yüksekliği: 500 piksel
Flip bölücü: dikey
Alt bölücü alt bölücüyü de ekleyin.
Bölme Stili: Listede bulun Renk Renk: #ffffff
Böcek Yüksekliği: 500 piksel
Ardından, boşluk ayarlarını açık ve bazı özel pedler ekleyin.
Üst Pilding: 220px Dolgu Alt: 329px
Son animasyon, o bölüme güzel bir animasyon ekleyin.
Animasyon Stili: Slayt Animasyonlu yön: aşağıda
Animasyon yoğunluğu:% 2
Animasyon Opaklık Başlar:% 100
Sütun yapımızdaki satırları ekle, aşağıdaki sütun yapısını kullanarak yeni satırlar ekleyebilir:
Bu satırda ihtiyacımız olan tek modülün içeriğini eklemek için metin modülünü ekleyin. Başlık ve paragrafı içerik kutusuna ekleyin. Metin Ayarları Ardından, metin ayarlarını açın ve bazı değişiklikler oluşturun. Metin Boyutu: 16px Hat yüksekliği metni: 2em
Metin Oryantasyonu: Orta
Metin Rengi: Işık
Metin Ayarları H1/H2 Seçtiğiniz başlık ayarlarını da değiştirin.
Yazı Tip Başlığı: Rubik Yazı tipi stili başlığı: büyük harf
Başlık Metin Boyutu: 100px (masaüstü), 42px (tablet), 32px (telefon)
Hat yüksekliği: 1.2em
Yapıştırıcı bir sonraki modülün genişliğini azaltır.
Genişlik:% 71 Modül hizalaması: merkez
Önceki bölümün hemen altına 2. Bölüm ekleyin, devam edin ve yeni bir düzenli bölüm ekleyin. Bölümün ayarlarında herhangi bir değişiklik yapmanıza gerek yoktur.
Sütun Yapısı Sıraları Ekle Aşağıdaki sütun yapısını kullanarak satırı ekleyin: Yapıştırıcı daha sonra, boyut ayarlarında tam genişlik yapın. Bu çizgiyi tamamen genişletin: evet Resim Modülünü Sütun 2’ye Ekle Mockup Mockup modül eklemeye başlama zamanı! İkinci sütuna bir görüntü modülü ekleyerek başlayın. Seçtiğiniz renk paletiyle eşleşen Mockup’u yükleyin. İndirme Klasörü> Mockup’ı açarak her türlü mockupları bulabilirsiniz. Daha yakın değiştir modül boyutu görüntüsünü değiştirin.
Genişlik:% 82 (masaüstü),% 100 (tablet ve cep telefonu) Modül hizalaması: merkez Çakışan görüntüler ve önceki parçalar için mesafe, görüntü modülüne bazı negatif kenar boşlukları ekleyin.
Üst kenar: -300px
Blurb modülünü Sütun 3’e ekleyin İçeriğimizi ekleyin Şimdi tüm sosyal ağları ekleyebilir! Bunu yapmak için bulanıklık modülünü kullanıyoruz. Devam edin ve ilk bulanıklık modülünü üçüncü sütuna ekleyin ve içeriği değiştirin. Bir bağlantı ekleyin, bir sonraki sosyal sayfaya bir bağlantı ekleyin.
Simgeyi seçin Simgenizi de seçin.
Simge Yerleştirme: Sol Başlık Metin Ayarları Sonraki başlık metin ayarlarında bazı değişiklikler oluşturun.
Ağır yazı tipi başlığı: yarı kalın
Başlık Metin Rengi: #FB3958 Hat yüksekliği başlığı: 1.7em
Mockup ile örtüşmek için mesafe, bazı alan değerleri ekleyeceğiz.
Üst kenar: -170px (masaüstü), -800 (tablet), -700 (cep telefonu)
Sol kenar boşluğu: -60% (masaüstü),% 0 (tablet ve cep telefonu) Sağ kenar boşluğu:% 60 (masaüstü),% 0 (tablet ve cep telefonu)
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Sınır Sınır ayarlarıyla da oynayacağız. Sol Sınır: 20 PX
Alt Sol Sınır: 20 piksel
Sağ sınır genişliği: 5px Sağ kenar renk: #fb3958
Kutunun gölgesi, kutunun gölgesinin birkaç derinliğe sahip bir tasarım öğesini vereceğini ekledi.
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -11px
Son animasyon, zaten bilinen hücresel bildirimlerin etkilerini taklit etmek için slayt içi animasyon stilini kullanıyoruz. Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Blurb Modül Klonunu Üç kez Kazanmak için, bulanıklık modülünü üç kez klonlayacağız. Ardından, istediğimiz sonuçları yapmak için her bir kopyayı değiştireceğiz. Negatif üst kısım marjını kaldırın İyi bir genel bakış sağlamak için, her bir kopyadan negatif özel kenar boşluklarını kaldırarak başlayacağız.
Benzersiz Blurb Modül Ayarları Bulanık Modül #2 Değiştir SOP Üçüncü sütunda ikinci bulanık modülünü açın ve içeriği değiştirin.
Simgeyi seçin başka bir simge de seçin. Simgenin Ayarlanması Simgenin rengini temsil ettiği sosyal ağa uyacak şekilde değiştirin. Renk simgesi: #3B5998 Başlık metni ayarları, başlık metninin rengi için aynı rengi kullanır. Başlık Metin Rengi: #3B5998 Mesafe Telefonun diğer tarafında başka bir örtüşme yapmak için boşluk değerini değiştirin.
Sol kenar boşluğu:% -170 (masaüstü),% 0 (tablet ve cep telefonu) Sağ kenar boşluğu:% 170 (masaüstü),% 0 (tablet ve cep telefonu)
Sınır bir sonraki sınır ayarlarını değiştirir. Sağ üst köşe: 20px
Sağ alt köşe: 20px
Sol sınır genişliği: 5px Sol sınır rengi: #3B5998
Bu bulanıklık modülü için animasyon, küçük bir gecikme ile diğer taraftan da slayt.
Animasyonlu yön: doğru
Animasyon gecikmesi: 100ms
Blurb Modül #3 Değiştir Kopyala Üçüncü Blurb modülü de bazı farklı kopyalar gerektirir. Bir sonraki simgeyi seçin Bir sonraki simgeyi seçin. Simgeyi Ayarla Simgenin rengini temsil ettiği sosyal ağ ile eşleşen bir renge değiştirin.
Renk simgesi: #1da1f2
Başlık Metin Ayarları Başlık metninin rengi için aynı rengi kullanın. Başlık Metin Rengi: #1da1f2 Mesafe ayrıca boşluk ayarlarını değiştirin. Sol kenar boşluğu: -80% (masaüstü),% 0 (tablet ve cep telefonu)
Sağ kenar boşluğu:% 80 (masaüstü),% 0 (tablet ve cep telefonu) Sınır ortamındaki sınır renk değişikliklerinin sınırlanması.
Sağ sınır rengi: #1da1f2 Son animasyon, mevcut animasyonda 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şladık. Simgeyi seçin Sonraki resim ayarları ve simgelerindeki diğer sosyal simgeleri seçin.
Simgenin Ayarlanması Simgenin rengini görüntülenen sosyal ağ ile ayarlar. Renk simgesi: #0077B5
Başlık Metni Ayarları Başlık metni için aynı rengi kullanın. Başlık Metin Rengi: #0077B5 Blurb modülünü sol tarafa itme mesafesi farklı alan ayarları da kullanır. Sol kenar boşluğu:% -180 (masaüstü),% 0 (tablet ve cep telefonu)
Sağ kenar boşluğu:% 180 (masaüstü),% 0 (tablet ve cep telefonu) Daha sonra sınır ayarlarını değiştirin.
Sağ üst köşe: 20px Sağ alt köşe: 20px
Sol sınır genişliği: 5px
Sol sınır rengi: #0077b5 Son fakat en az değil, bu bulanıklık modülüne farklı animasyon yönleri ve bazı animasyon gecikmeleri ekleyin.
Animasyonlu yön: doğru
Animasyon gecikmesi: 300ms
Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım.
Renk paletimiz, süreç boyunca adım adım yol gösterecektir. Ancak bunu yapmadan önce, devam edin ve seçilen renk paletini seçin ve renk kodunu yakın tutun. Öğretici boyunca renk numarasına atıfta bulunacağız.
Palet #1
Renk #1: #D09CF1 Renk #2: #00E2DF
Palet #2
Renk #1: #FFA0A0 Renk #2: #10007F
Palet #3
Renk #1: #FF3273 Renk #2: #050042
Palet #4
Renk #1: #F954EE Renk #2: #00Aeff
Palet #5
Renk #1: #FFCA3A Renk #2: #FF6005
Yeniden Yapın Tasarımı Takip Edin En başından beri, yeni veya mevcut sayfaya normal bölümü ekleyerek gradyan başlangıcının 1 numaralı arka planını ekleyin. Bölüm ayarlarını açın ve gradyanın arka planını uygulayın:
Renk 1: Renk #1 (renk paletinde bulun)
Renk 2: Renk #2 (renk paletinde bulun)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 6
Arka plan görüntüsü Ardından, indirme klasörü> arka plan desenini girerek bulabileceğiniz arka plan modelini yükleyin. Arka plan modelini aşağıdaki arka plan ayarlarıyla birleştirin: Arka Plan Görüntü Boyutu: Gerçek Boyut
Arka Plan Görüntü Pozisyonu: Alt Orta
Arka plan görüntüsünün tekrarlanması: Aralık bölümü Bir sonraki bölücü ayarlarını açın ve üst bölücüyü ekleyin.
Bölme Stili: Listede bulun Renk Renk: RGBA (72,0,79,0.08)
Böcek Yüksekliği: 500 piksel
Flip bölücü: dikey
Alt bölücü alt bölücüyü de ekleyin.
Bölme Stili: Listede bulun Renk Renk: #ffffff
Böcek Yüksekliği: 500 piksel
Ardından, boşluk ayarlarını açık ve bazı özel pedler ekleyin.
Üst Pilding: 220px Dolgu Alt: 329px
Son animasyon, o bölüme güzel bir animasyon ekleyin.
Animasyon Stili: Slayt Animasyonlu yön: aşağıda
Animasyon yoğunluğu:% 2
Animasyon Opaklık Başlar:% 100
Sütun yapımızdaki satırları ekle, aşağıdaki sütun yapısını kullanarak yeni satırlar ekleyebilir:
Bu satırda ihtiyacımız olan tek modülün içeriğini eklemek için metin modülünü ekleyin. Başlık ve paragrafı içerik kutusuna ekleyin. Metin Ayarları Ardından, metin ayarlarını açın ve bazı değişiklikler oluşturun. Metin Boyutu: 16px Hat yüksekliği metni: 2em
Metin Oryantasyonu: Orta
Metin Rengi: Işık
Metin Ayarları H1/H2 Seçtiğiniz başlık ayarlarını da değiştirin.
Yazı Tip Başlığı: Rubik Yazı tipi stili başlığı: büyük harf
Başlık Metin Boyutu: 100px (masaüstü), 42px (tablet), 32px (telefon)
Hat yüksekliği: 1.2em
Yapıştırıcı bir sonraki modülün genişliğini azaltır.
Genişlik:% 71 Modül hizalaması: merkez
Önceki bölümün hemen altına 2. Bölüm ekleyin, devam edin ve yeni bir düzenli bölüm ekleyin. Bölümün ayarlarında herhangi bir değişiklik yapmanıza gerek yoktur.
Sütun Yapısı Sıraları Ekle Aşağıdaki sütun yapısını kullanarak satırı ekleyin: Yapıştırıcı daha sonra, boyut ayarlarında tam genişlik yapın. Bu çizgiyi tamamen genişletin: evet Resim Modülünü Sütun 2’ye Ekle Mockup Mockup modül eklemeye başlama zamanı! İkinci sütuna bir görüntü modülü ekleyerek başlayın. Seçtiğiniz renk paletiyle eşleşen Mockup’u yükleyin. İndirme Klasörü> Mockup’ı açarak her türlü mockupları bulabilirsiniz. Daha yakın değiştir modül boyutu görüntüsünü değiştirin.
Genişlik:% 82 (masaüstü),% 100 (tablet ve cep telefonu) Modül hizalaması: merkez Çakışan görüntüler ve önceki parçalar için mesafe, görüntü modülüne bazı negatif kenar boşlukları ekleyin.
Üst kenar: -300px
Blurb modülünü Sütun 3’e ekleyin İçeriğimizi ekleyin Şimdi tüm sosyal ağları ekleyebilir! Bunu yapmak için bulanıklık modülünü kullanıyoruz. Devam edin ve ilk bulanıklık modülünü üçüncü sütuna ekleyin ve içeriği değiştirin. Bir bağlantı ekleyin, bir sonraki sosyal sayfaya bir bağlantı ekleyin.
Simgeyi seçin Simgenizi de seçin.
Arka plan rengi arka plan ayarlarını girerek ve biraz şeffaf bir arka plan rengi kullanarak devam edin.
Arka plan rengi: RGBA (255,255,255.0.79) Simge ayarı sonra simge ayarlarını değiştirin. Burada resmi Instagram renklerinden birini kullanıyoruz. Renk simgesi: #fb3958Simge Yerleştirme: Sol Başlık Metin Ayarları Sonraki başlık metin ayarlarında bazı değişiklikler oluşturun.
Ağır yazı tipi başlığı: yarı kalın
Başlık Metin Rengi: #FB3958 Hat yüksekliği başlığı: 1.7em
Mockup ile örtüşmek için mesafe, bazı alan değerleri ekleyeceğiz.
Üst kenar: -170px (masaüstü), -800 (tablet), -700 (cep telefonu)
Sol kenar boşluğu: -60% (masaüstü),% 0 (tablet ve cep telefonu) Sağ kenar boşluğu:% 60 (masaüstü),% 0 (tablet ve cep telefonu)
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Sınır Sınır ayarlarıyla da oynayacağız. Sol Sınır: 20 PX
Alt Sol Sınır: 20 piksel
Sağ sınır genişliği: 5px Sağ kenar renk: #fb3958
Kutunun gölgesi, kutunun gölgesinin birkaç derinliğe sahip bir tasarım öğesini vereceğini ekledi.
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -11px
Son animasyon, zaten bilinen hücresel bildirimlerin etkilerini taklit etmek için slayt içi animasyon stilini kullanıyoruz. Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Blurb Modül Klonunu Üç kez Kazanmak için, bulanıklık modülünü üç kez klonlayacağız. Ardından, istediğimiz sonuçları yapmak için her bir kopyayı değiştireceğiz. Negatif üst kısım marjını kaldırın İyi bir genel bakış sağlamak için, her bir kopyadan negatif özel kenar boşluklarını kaldırarak başlayacağız.
Benzersiz Blurb Modül Ayarları Bulanık Modül #2 Değiştir SOP Üçüncü sütunda ikinci bulanık modülünü açın ve içeriği değiştirin.
Simgeyi seçin başka bir simge de seçin. Simgenin Ayarlanması Simgenin rengini temsil ettiği sosyal ağa uyacak şekilde değiştirin. Renk simgesi: #3B5998 Başlık metni ayarları, başlık metninin rengi için aynı rengi kullanır. Başlık Metin Rengi: #3B5998 Mesafe Telefonun diğer tarafında başka bir örtüşme yapmak için boşluk değerini değiştirin.
Sol kenar boşluğu:% -170 (masaüstü),% 0 (tablet ve cep telefonu) Sağ kenar boşluğu:% 170 (masaüstü),% 0 (tablet ve cep telefonu)
Sınır bir sonraki sınır ayarlarını değiştirir. Sağ üst köşe: 20px
Sağ alt köşe: 20px
Sol sınır genişliği: 5px Sol sınır rengi: #3B5998
Bu bulanıklık modülü için animasyon, küçük bir gecikme ile diğer taraftan da slayt.
Animasyonlu yön: doğru
Animasyon gecikmesi: 100ms
Blurb Modül #3 Değiştir Kopyala Üçüncü Blurb modülü de bazı farklı kopyalar gerektirir. Bir sonraki simgeyi seçin Bir sonraki simgeyi seçin. Simgeyi Ayarla Simgenin rengini temsil ettiği sosyal ağ ile eşleşen bir renge değiştirin.
Renk simgesi: #1da1f2
Başlık Metin Ayarları Başlık metninin rengi için aynı rengi kullanın. Başlık Metin Rengi: #1da1f2 Mesafe ayrıca boşluk ayarlarını değiştirin. Sol kenar boşluğu: -80% (masaüstü),% 0 (tablet ve cep telefonu)
Sağ kenar boşluğu:% 80 (masaüstü),% 0 (tablet ve cep telefonu) Sınır ortamındaki sınır renk değişikliklerinin sınırlanması.
Sağ sınır rengi: #1da1f2 Son animasyon, mevcut animasyonda 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şladık. Simgeyi seçin Sonraki resim ayarları ve simgelerindeki diğer sosyal simgeleri seçin.
Simgenin Ayarlanması Simgenin rengini görüntülenen sosyal ağ ile ayarlar. Renk simgesi: #0077B5
Başlık Metni Ayarları Başlık metni için aynı rengi kullanın. Başlık Metin Rengi: #0077B5 Blurb modülünü sol tarafa itme mesafesi farklı alan ayarları da kullanır. Sol kenar boşluğu:% -180 (masaüstü),% 0 (tablet ve cep telefonu)
Sağ kenar boşluğu:% 180 (masaüstü),% 0 (tablet ve cep telefonu) Daha sonra sınır ayarlarını değiştirin.
Sağ üst köşe: 20px Sağ alt köşe: 20px
Sol sınır genişliği: 5px
Sol sınır rengi: #0077b5 Son fakat en az değil, bu bulanıklık modülüne farklı animasyon yönleri ve bazı animasyon gecikmeleri ekleyin.
Animasyonlu yön: doğru
Animasyon gecikmesi: 300ms
Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım.
