Divi ile Güzel Mobil Sosyal Takip Bios Nasıl Oluşturulur (Ücretsiz İndirin!)

Kişisel web sitenizi oluştururken, kolayca bağlantı kurabileceğiniz bir sosyal takip biyografi sayfasına sahip olmanıza yardımcı olur. Yaptıklarınızın ve insanların çalışmalarınızı nerede görebileceğinin bir özetini içeren harika bir çevrimiçi ziyaret kartı yapar. Mobil sosyal takip bios'unda paylaşılan bilgiler genellikle resminiz, adınız, iş unvanınız, küçük bir açıklama ve portföy bağlantılarınızla sınırlıdır. Ayrıca ziyaretçilerin sizinle iletişime geçmesine yardımcı olmak için ek bir CTA ekleyebilirsiniz.

Bu gönderide, Divi kullanarak iki güzel mobil sosyal takip biosunu nasıl oluşturacağınızı göstereceğiz. Eğitimin sonunda, hemen başlayabilmeniz için her iki örneğin JSON dosyalarını da paylaşacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, sıfırdan yeniden oluşturacağımız iki örneğe hızlıca bir göz atalım.

örnek 1

Örnek 2

Örnek 1'i Yeniden Oluşturmaya Başlayın

Yeni Bölüm Ekle

Arka plan rengi

İlk örnekle başlayalım! Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

aralık

Ardından, bölümün boşluk ayarlarına gidin ve bazı değişiklikler yapın. Değerlerin ekran boyutuna göre değiştiğini fark edeceksiniz. Gittikçe sol ve sağ dolguyu değiştirerek farklı ekran boyutlarında aynı tür ince tasarımı koruyoruz.

• Üst Dolgu: 50px (Masaüstü ve Tablet), 0px (Telefon)
• Alt Dolgu: 50px (Masaüstü ve Tablet), 0px (Telefon)
• Sol Dolgu: 36vw (Masaüstü), 23vw (Tablet), 0vw (Telefon)
• Sağ Doldurma: 36vw (Masaüstü), 23vw (Tablet), 0vw (Telefon)

1. 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:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #333333

boyutlandırma

Ardından, tasarım sekmesindeki boyutlandırma ayarlarına gidin ve sütun ile satır arasındaki tüm özel boşluğu kaldırın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Kutu Gölge

Ayrıca, daha büyük ekran boyutlarında biraz derinlik oluşturmak için bir kutu gölgesi ekliyoruz.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.3)

Resim Modülü Ekle

Fotoğraf yükleniyor

Modül eklemeye başlama zamanı! 1: 1 oranına sahip bir Görüntü Modülü ile başlayın. Örneğin kullandığımız görüntünün genişliği ve yüksekliği '500px'.

hizalama

Resmi yükledikten sonra tasarım sekmesine gidin ve resim hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Sonraki boyutlandırma ayarlarında genişliği değiştirerek görüntünün boyutunu küçültüyoruz.

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

Sınır

Ayrıca kenarlık ayarlarında köşelerin her birine '50vw' ekleyerek resmi daire haline getiriyoruz. Bunun üzerine, aşağıdaki ayarları kullanarak beyaz bir kenarlık ekleyeceğiz:

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

Kutu Gölge

Son olarak, boyutsal bir tasarım oluşturmak için bir kutu gölgesi ekleyin.

• Kutu Gölge Dikey Konumu: 40px
• Kutu Gölge Bulanıklığı Gücü: 100 piksel
• Gölge Rengi: #000000

Metin Modülü #1 Ekle

H3 İçeriği Ekle

Bir sonraki modüle! Görüntü Modülünün hemen altına biraz H3 içeriği olan bir Metin Modülü ekleyin.

H3 Metin Ayarları

Tasarım sekmesine gidip H3 metin ayarlarını değiştirerek devam edin.

• Başlık 3 Yazı Tipi: Açık Sans
• Başlık 3 Yazı Ağırlığı: Yarı Kalın
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Çizgi Yüksekliği: 0.1em

aralık

Ayrıca, Görüntü Modülü ile bu Metin Modülü arasında boşluk yaratmak için bir miktar üst kenar boşluğu ekliyoruz.

• Üst Kenar Boşluğu: 30 piksel

Metin Modülü #2 Ekle

İçerik Ekle

İhtiyacımız olan bir sonraki modül başka bir Metin Modülü. İş unvanınızı içerik kutusuna ekleyin.

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Rengi: #919191
• Metin Yönü: Merkez

Metin Modülü #3 Ekle

İçerik Ekle

Kendinizin kısa bir açıklamasını içeren başka bir Metin Modülü ekleyerek devam edin.

Metin Ayarları

Metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #b7b7b7
• Metin Satırı Yüksekliği: 1,6em
• Metin Yönü: Merkez

boyutlandırma

Modülün genişliğini de değiştirin.

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

aralık

Ek alan oluşturmak için biraz üst ve alt kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 30px
• Alt Kenar Boşluğu: 30px

Düğme Modülü Ekle

Kopya Ekle

Bu satırda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Biraz kopya ekleyin.

hizalama

Ardından, tasarım sekmesine gidin ve önceki modüllerle eşleşmesi için düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarında düğmenin görünümünü değiştirerek devam edin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 13px
• Düğme Metin Rengi: #ffffff
• Renk 1: #ad32ff
• Renk 2: #32baff
• Gradyan Yönü: 96deg
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 30px
• Düğme Yazı Tipi: Sans'ı Aç
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Daha sonra biraz özel kenar boşluğu ve dolgu ekleyin.

• Alt Kenar Boşluğu: 50px
• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Kutu Gölge

Ve bir kutu gölgesi ekleyerek düğme tasarımını tamamlayın.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.69)

2. Satır Ekle

Sütun Yapısı

Bir sonraki sıraya! Aşağıdaki sütun yapısını kullanın:

Degrade Arka Plan

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir degrade arka planı ekleyin:

• Renk 1: #1e1e1e
• Renk 2: #3f3f3f
• Gradyan Türü: Radyal
• Radyal Yön: Sol Üst
• Başlangıç ​​Konumu: %26
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Aşağıdaki resmi bilgisayarınıza kaydedin ve satır için arka plan resmi olarak kullanın:

Aşağıdaki arka plan ayarlarıyla birlikte:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Sert Işık

boyutlandırma

Ardından tasarım sekmesine gidin ve sütunlar ile satır arasındaki tüm boşluğu kaldırın. Bu, elde ettiğimiz satır alanından tam olarak yararlanmamıza yardımcı olacaktır.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Sonraki bazı özel dolgu ekleyin.

• Üst Dolgu: 84px
• Alt Dolgu: 84px
• Sol Dolgu: 4vw (Masaüstü), 7vw (Tablet), 14vw (Telefon)
• Sağ Doldurma: 4vw (Masaüstü), 7vw (Tablet), 14vw (Telefon)

Kutu Gölge

Bir kutu gölgesi ile birlikte.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.3)

Görüntülemek

Tüm sosyal takip simgelerinin yan yana görünmesini sağlamak için satırın ana öğesine tek bir CSS kodu satırı ekleyeceğiz.

display: flex;

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

hizalama

1. sütunda ihtiyacımız olan ilk modül bir Sosyal Medya Takip Modülü. Modülü ekledikten sonra tasarım sekmesinde öğe hizalamasını değiştirin.

• Öğe Hizalama: Merkez

Yeni Sosyal Ağ Ekle

Yeni bir sosyal ağ ekleyerek devam edin. Bu örnek için Dribbble kullanıyoruz.

Bağlantı

Dribbble profilinize bir bağlantı ekleyin.

Degrade Arka Plan

Ardından, aşağıdaki ayarları kullanarak degrade arka planını değiştirin:

• Renk 1: #ea0061
• Renk 2: #ea4c8d
• Gradyan Yönü: 136deg

aralık

Ve bazı özel dolgular ekleyerek modülün boyutunu artırın.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

Sınır

Ayrıca kenarlık ayarlarında köşelerin her birine '20vw' ekleyerek modülü daire haline getiriyoruz.

Kutu Gölge

Son olarak, bir kutu gölgesi ekleyin.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: #000000

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Sonraki ilk sütuna bir Metin Modülü ekleyin.

Metin Ayarları

Metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Rengi: #ffffff
• Metin Yönü: Merkez

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Bir öncekinin altına bir tane daha ekleyin.

Metin Ayarları

Bu modülün metin ayarlarını da değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #898989
• Metin Boyutu: 11px
• Metin Yönü: Merkez

Modülleri Sütun 1'de İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Sütun 1'deki tüm modülleri özelleştirmeyi tamamladığınızda, devam edip onları iki kez klonlayabilirsiniz. Kopyaları satırın kalan iki sütununa yerleştirin.

Sosyal Ağları Değiştir

Tabii ki, sosyal ağları değiştirmeniz gerekecek.

Sosyal Ağ Bağlantılarını Değiştir

Bağlantılarla birlikte.

Sosyal Ağ Gradyan Arka Planlarını Değiştirin

Ve ağ gradyan arka planları.

• Renk 1: #0043ff
• Renk 2: #00aslı

• Renk 1: #ea2c59
• Renk 2: #fed270

Örnek #2'yi Yeniden Oluşturmaya Başlayın

Yeni Bölüm Ekle

Arka plan rengi

Bir sonraki örneğe geçelim! Beyaz arka plan rengiyle yeni bir bölüm ekleyin.

• Arka Plan Rengi: #ffffff

aralık

Sonraki bazı özel dolgu ekleyin.

• Üst Dolgu: 50px (Masaüstü ve Tablet), 0px (Telefon)
• Alt Dolgu: 50px (Masaüstü ve Tablet), 0px (Telefon)
• Sol Dolgu: 36vw (Masaüstü), 23vw (Tablet), 4vw (Telefon)
• Sağ Doldurma: 36vw (masaüstü), 23vw (Tablet), 4vw (Telefon)

1. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarının tasarım sekmesine gidin ve boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Resim Modülü Ekle

Fotoğraf yükleniyor

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül, 1: 1 oranına sahip bir Görüntü Modülüdür.

hizalama

Görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Genişliği de değiştirin.

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

Sınır

Ve kenarlık ayarlarındaki köşelerin her birine '20px' ekleyin.

Kutu Gölge

İnce bir kutu gölgesi ekleyerek görüntü tasarımını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 51px
• Gölge Rengi: rgba(0,0,0,0.37)

Metin Modülü #1 Ekle

H3 İçeriği Ekle

İhtiyacımız olan bir sonraki modül bir Metin Modülü. Seçim bazı H3 içeriği ekleyin.

H3 Metin Ayarları

Tasarım sekmesinde H3 metin ayarlarını değiştirin.

• Başlık 3 Yazı Tipi: Açık Sans
• Başlık 3 Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık 3 Yazı Tipi Stili: Büyük Harf
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Rengi: #000000
• Başlık 3 Harf Aralığı: -1px
• Başlık 3 Çizgi Yüksekliği: 0.9em

aralık

Sonra biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 30px

Metin Modülü #2 Ekle

İçerik Ekle

Başka bir Metin Modülü ekleyin.

Metin Ayarları

Metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #919191
• Metin Yönü: Merkez

2. Satır Ekle

Sütun Yapısı

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

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve satır arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Sütun 2 Arka Plan Rengi

İkinci sütuna da bir arka plan rengi ekleyin.

• 2. Sütun Arka Plan Rengi: #efefef

hizalama

Sol satır hizalamasını kullandığınızdan emin olun.

• Satır Hizalama: Sol

boyutlandırma

Sonraki boyutlandırma ayarlarına gidin ve bazı değişiklikler yapın.

• Özel Genişlik Kullan: Evet
• Birim: %
• Özel Genişlik: %67
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ayrıca satıra ve sütunlarına bazı özel dolgular ekliyoruz.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 1 Üst Dolgu: 20 piksel
• Sütun 1 Alt Dolgu: 20px
• Sütun 2 Üst Dolgu: 20 piksel
• Sütun 2 Alt Dolgu: 20px

Sınır

Sol üst, sağ üst ve sol alt köşelere '14px' ekleyin.

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek satır tasarımını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.17)

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

hizalama

İlk sütunda, bir Sosyal Medya Takip modülüne ihtiyacımız olacak. Öğe hizalamasını değiştirin.

• Öğe Hizalama: Merkez

Yeni Sosyal Ağ Ekle

Ardından, yeni bir sosyal ağ ekleyin. Dribbble'ı kullanıyoruz.

Bağlantı

Bağlantıyı Dribbble portföyünüze ekleyin.

Degrade Arka Plan

Ve sosyal ağın gradyan arka planını değiştirin.

• Renk 1: #ea0061
• Renk 2: #ea4c8d
• Gradyan Yönü: 136deg

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

Sınır

Ve sosyal ağın her köşesine '10px' ekleyin.

Kutu Gölge

İnce bir kutu gölgesi ekleyerek modül tasarımını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.3)

Metin Modülü #1'i Sütun 2'ye ekleyin

İçerik Ekle

İkinci sütuna bir Metin Modülü ekleyin.

Metin Ayarları

Metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Rengi: #000000
• Metin Yönü: Merkez

aralık

Daha sonra bir miktar üst kenar boşluğu ekleyerek alan yaratın.

• Üst Kenar Boşluğu: 10px

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

2. sütunda ihtiyacımız olan ikinci modül başka bir Metin Modülü.

Metin Ayarları

Metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #898989
• Metin Boyutu: 11px
• Metin Yönü: Merkez

Klon Satır #2

Satırı değiştirmeyi tamamladığınızda, devam edip bir kez klonlayabilirsiniz.

Modülleri Değiştir

Daha sonra modülleri değiştirin.

Sütun 1 Arka Plan Rengi Ekle

Ardından, yinelenen satıra bir sütun 1 arka plan rengi ekleyin.

• Sütun 1 Arka Plan Rengi: #dbdbdb

Sütun 2 Arka Plan Rengini Kaldır

Sonraki sütun 2 arka plan rengini kaldırın.

Satır Hizalamasını Değiştir

Satır hizalamasını da değiştirin.

• Satır Hizalama: Sağ

Satır Boyutlandırmasını Değiştir

Boyutlandırma ayarlarındaki özel genişlikle birlikte.

• Özel Genişlik: %66,99

Satır Kenarlığını Değiştir

Ayrıca '14px' değerinin yalnızca sağ üst ve sağ alt köşelere atanmasını sağlıyoruz.

Sosyal Takip Ağını Değiştir

Sosyal ağı değiştirerek devam edin.

Sosyal Takip Ağı Gradyan Arka Planını Değiştirin

Gradyan arka planı ile birlikte.

• Renk 1: #0043ff
• Renk 2: #00aslı

Her İki Sosyal Takip Satırını Klonla

Her iki sosyal takip satırına sahip olduğunuzda, her birini klonlayabilirsiniz.

Yinelenen #1 Sınırını Değiştir

İlk kopyanın yuvarlatılmış köşelerini değiştirin.

Yinelenen #1'in Sosyal Takip Ağını Değiştirin

Sosyal ağ ile birlikte.

Yinelenen #1'in Gradyan Arka Planını Değiştir

Ve gradyan arka planı.

• Renk 1: #ea2c59
• Renk 2: #fed270

Kopya #2'nin Kenarlığını Değiştir

İkinci kopyanın yuvarlak köşelerini de değiştirerek devam edin.

Kopya #2'nin Sosyal Takip Ağını Değiştirin

Sosyal ağ ile birlikte.

Yinelenen #2'nin Gradyan Arka Planını Değiştir

Ve bir kez daha, sosyal ağa atanan gradyan arka planı.

• Renk 1: #00306b
• Renk 2: #007bb6

Mobil Sosyal Takip Bios'u ÜCRETSİZ İndirin

Ücretsiz mobil sosyal takip bölümlerinden faydalanmak için öncelikle aşağıdaki butonu kullanarak indirmeniz gerekmektedir. İ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!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi yeniden oluşturduğumuz her iki örneğin sonucuna son bir göz atalım.

örnek 1

Örnek 2

Son düşünceler

Bu gönderide, mobil cihazlar için nasıl çarpıcı sosyal takip biyografileri oluşturacağınızı gösterdik. Bu tasarımları çevrimiçi ziyaret kartınız olarak kullanabilir ve insanları bu sayfaya yönlendirerek bağlantı kurabilmeleri veya portföy bağlantılarınızı görüntüleyebilmelerini sağlayabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!