Nasıl güzel bir biyografi yapılır -divi ile hücresel sosyal takip (ücretsiz indir!)
Kişisel bir web sitesi oluşturduğunuzda, kolayca bağlanabileceğiniz bir sosyal biyografi takip sayfası olması iyi bir fikirdir. Ne yaptığınızın ve insanların işinizi nerede görebileceğinin bir özetiyle iyi bir çevrimiçi ziyaret kartı yapar. BIOS’da paylaşılan bilgiler, sosyal hücresel olarak genellikle resimler, isimler, pozisyonlar, küçük açıklamalar ve portföy bağlantılarınızla sınırlıdır. Ziyaretçilerin sizinle iletişim kurmasına yardımcı olmak için ek CTA da ekleyebilirsiniz. Bu yazıda, Divi’yi kullanarak iki güzel hücresel sosyal biyografiyi nasıl takip edeceğinizi göstereceğiz. Öğreticinin sonunda, hemen başlayabilmeniz için JSON dosyalarını her iki örnekten de paylaşacağız.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, baştan yeniden yapacağımız iki örneğe bakalım. örnek 1
Arka plan rengi: #ffffff Mesafe o zaman, uzay alanı ayarlarına gidin ve bazı değişiklikler yapın. Ekran boyutuna göre değerin farklı olduğunu göreceksiniz. Aynı ince tasarım türünü, kullandığımızda sol ve sağ yatakları değiştirerek çeşitli ekran boyutlarında tutuyoruz.
Üst Pilding: 50px (masaüstü ve tablet), 0px (cep telefonu)
Aşağıda dolgu: 50px (masaüstü ve tablet), 0px (cep telefonu)
Sol dolgu: 36vw (masaüstü), 23VW (tablet), 0vw (telefon)
Doğru dolgu: 36vw (masaüstü), 23VW (tablet), 0vw (telefon) Satırlar #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak bölüme yeni satırlar ekleyerek devam edin: herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini ekleyin. Arka plan rengi: #333333
O zaman yapıştırıcı, tasarım sekmesindeki boyut ayarlarını açın ve sütunlar ve satırlar arasındaki tüm özel alanları silin. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Kutumuzun gölgesi ayrıca daha büyük bir ekran boyutunda biraz derinlik elde etmek için bir kutu gölgesi ekledi. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3)
Modül eklemeye başlama zamanı geldiğinde yükleme modülünü ekleyin! 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 ‘500 piksel’. Hizalama Bir resim yükledikten sonra, tasarım sekmesini açın ve görüntü seviyelendirmesini değiştirin. Görüntü Uygulama: Orta
Yapıştırıcımız, bir sonraki boyut ayarlarındaki genişliği değiştirerek görüntünün boyutunu azaltır. Genişlik:% 33
Modül hizalaması: merkez
Sınırımız ayrıca sınır ayarlarındaki her köşeye ’50VW’ ekleyerek görüntüyü bir daire haline getirir. Ayrıca, aşağıdaki ayarları kullanarak beyaz bir sınır ekleyeceğiz: Sınır Genişliği: 8px
Sınır rengi: #ffffff
Son fakat en az değil kutunun gölgesi, boyutsal bir tasarım oluşturmak için kutunun gölgesini ekleyin. Dikey Konum Gölge Kutusu: 40px
Bulanık Güç Gölgesi Kutusu: 100 PX
Gölge Renk: #000000
Metin Modülü Ekle #1 Bir sonraki modüle H3 içeriği ekleyin! Bazı H3 içeriğiyle görüntü modülünün hemen altına metin modülünü ekleyin. H3 Metin Ayarları Tasarım sekmesini açarak ve H3 metin ayarlarını değiştirerek devam ediyor. Başlık 3 Yazı Tipi: Aç SANS Başlık 3 Font Ağırlığı: Yarı Kalınlık
Başlık 3 Metin Seviyeleri: Orta
Başlık 3 Renk Metni: #ffffff
POS 3 Sıra Yükseklik: 0.1EM
Mesafemiz ayrıca görüntü modülü ile bu metin modülü arasındaki boşluk yapmak için birkaç üst kenar boşluğu ekler.
Üst kenar boşluğu: 30 piksel Metin Modülünü Ekle #2 İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Başka bir metin modülü. Çalışmanızın başlığını içerik kutusuna ekleyin.
Ardından metin ayarları, tasarım sekmesini açın ve metin ayarlarını değiştirin. Metin yazı tipi: SANS’ı aç Metin yazı tipi ağırlığı: normal
Metin rengi: #919191
Metin Oryantasyonu: Orta
Metin Modülü Ekle #3 Dolgu Ekle Ekle Kendinizi kısa bir açıklama ile başka bir metin modülü ekleyerek devam edin.
Metin Ayarları Metin ayarlarını açın ve bazı değişiklikler yapın. Metin yazı tipi: SANS’ı aç Metin rengi: #b7b7b7
Hat yüksekliği metni: 1.6em
Metin Oryantasyonu: Orta
Yapıştırıcı modülün genişliğini de değiştirin.
Genişlik:% 68 Modül hizalaması: merkez
Mesafe ve ek alan yaratmak için bazı üst ve alt kenar boşlukları ekleyin.
Üst kenar boşluğu: 30 piksel Alt kenar boşluğu: 30 piksel
Bu satırda ihtiyacımız olan modülün kopyasını bir sonraki ve son olarak eklemek için modülü ekleyin Düğme modülü. Bazı kopyalar ekleyin.
Daha sonra hizalama, tasarım sekmesini açın ve önceki modülle eşleşecek düğmenin hizalanmasını değiştirin. Düğmenin hizalanması: orta Düğme ayarlarında düğme ekranını değiştirerek düğme ayarlarına devam edin.
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 13px
Metin Renk Düğmesi: #fffffff
Renk 1: #AD32FF
Renk 2: #32baff
Gradyan yönü: 96deg
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 30px
Yazı tipi düğmesi: SANS’ı açın
Mektup Ağırlığı: Çok kalın yazı tipi: büyük harf
Mesafe Bazı özel kenar boşlukları ve bir sonraki dolgu ekleyin.
Alt kenar boşluğu: 50 piksel
Üst dolgu: 15px Dolgu Alt: 15 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Kutu gölgesi ve bir kutu gölgesi ekleyerek düğmenin tasarımını tamamlayın.
Dikey Konum Gölge Kutusu: 20px
Bulanık Güç Gölgesi Kutusu: 80px Gölge Rengi: RGBA (0.0,0,0.69)
Bir sonraki satıra satırlar #2 sütun yapısı ekleyin! Aşağıdaki sütun yapısını kullanın:
Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve gradyanın arka planını ekleyin:
Renk 1: #1E1E1E Renk 2: #3F3F3F Gradyan Türü: Radyal
Radyal yön: sol üst
Başlangıç Pozisyonu:% 26
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka Plan Görüntüsü Aşağıdaki görüntüyü bilgisayarınıza kaydedin ve satırlar için bir arka plan görüntüsü olarak kullanın:
Aşağıdaki arka plan ayarlarıyla birlikte:
Arka Plan Görüntü Boyutu: Gerçek Boyut Arka Plan Görüntü Pozisyonu: Orta Arka plan görüntüsünün tekrarlanması: Tekrar yok
Karışık arka plan görüntüsü: sert ışık
O zaman yapıştırıcı, tasarım sekmesini açın ve sütunlar ve satırlar arasındaki tüm boşlukları silin. Bu, aldığımız sıra alanını tam olarak kullanmamıza yardımcı olacaktır.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet Talang genişliği: 1
Mesafe Bir sonraki özel pedlerden bazılarını ekleyin.
Üst dolgu: 84px
Dolgu Alt: 84 piksel Sol dolgu: 4VW (masaüstü), 7vw (tablet), 14vw (telefon)
Sağ dolgu: 4VW (masaüstü), 7vw (tablet), 14vw (telefon)
Kutunun gölgesi ile birlikte kutunun gölgesi.
Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3) Tüm simgelerin sosyal olarak yan yana takip etmesini sağlamak için, hattın ana öğelerine bir satır CSS kodu ekleyeceğiz. Ekran: Flex; Sosyal medyayı takip etmek için modüller ekleyin Sütun 1’de ihtiyacımız olan ilk modülün hizalanmasının 1. sütununa 1 Sosyal Medya Takip Modülü. Modülü ekledikten sonra tasarım sekmesindeki öğe seviyesini değiştirin.
Hizalama Öğesi: Merkez
Yeni sosyal ağlar ekleyerek yeni sosyal ağlar ekleyin. Bu örnek için Dribbble kullanıyoruz. Bağlantı Dribbble profilinize bağlantı ekleyin. Gradyan Arka Plan Daha sonra, aşağıdaki ayarları kullanarak gradyanın arka planını değiştirin:
Renk 1: #EA0061 Renk 2: #EA4C8D Gradyan yönü: 136deg Bazı özel pedler ekleyerek mesafe ve modül boyutunu artırın.
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Sol dolgu: 20px Doğru dolgu: 20 piksel
Sınırımız, sınır ayarlarındaki her köşeye ’20VW’ ekleyerek modülü bir daireye değiştirir.
Son kutu gölgesi, kutunun gölgesini ekleyin.
Dikey Konum Gölge Kutusu: 20px
Bulanık Güç Gölgesi Kutusu: 80px Gölge Renk: #000000 Sütun 1’e Metin Modülü #1 ekleyin Doldurma Ekle Metin modülünü bir sonraki ilk sütuna ekleyin.
Metin Ayarları Metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç
Metin yazı tipi ağırlığı: çok kalın Metin rengi: #ffffff Metin Oryantasyonu: Orta
Sütun 1’e Metin Modülü #2 ekleyin Dolgu ekle Bir öncekinin altına bir tane daha ekleyin.
Metnin Ayarlanması Bu modülün metin ayarlarını da değiştirin.
Metin yazı tipi: SANS’ı aç
Metin rengi: #898989 Metin Boyutu: 11 piksel Metin Oryantasyonu: Orta
Sütun 1’deki modülü klonlamak iki kez klonlama ve Sütun 1’deki tüm modülleri ayarlamayı bitirdikten sonra kalan sütuna kopya yerleştirerek, devam edip iki kez klonlayabilirsiniz. Kalan iki satır sütuna yinelenen yerleştirin. Sosyal ağları değiştirin, elbette sosyal ağları değiştirmelisiniz.
Sosyal ağ bağlantısını bağlantı ile birlikte değiştirin.
Sosyal ağ gradyanlarının ve ağ gradyan arka planının arka planını değiştirin.
Renk 1: #0043ff Renk 2: #00ed Renk 1: #EA2C59 Renk 2: #Fed270 Yeniden Oluşturma Örnek #2
Bir sonraki örneğe arka plan renginin yeni bir kısmını ekleyin! Beyaz arka plan rengine sahip yeni bir parça ekleyin.
Arka plan rengi: #ffffff Mesafe Bir sonraki özel pedlerden bazılarını ekleyin.
Üst Pilding: 50px (masaüstü ve tablet), 0px (cep telefonu) Aşağıda dolgu: 50px (masaüstü ve tablet), 0px (cep telefonu)
Sol dolgu: 36VW (masaüstü), 23VW (tablet), 4VW (Telefon)
Doğru dolgu: 36vw (masaüstü), 23VW (tablet), 4VW (telefon)
Herhangi bir modül eklemeden yapıştırıcı, çizgi ayarı tasarımı sekmesini açın ve boyut ayarlarını değiştirin.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Modül eklemeye başlama zamanı geldiğinde yükleme modülünü ekleyin! İhtiyacımız olan ilk modül, 1: 1 oranına sahip görüntü modülüdür. Hizalama görüntü seviyesini değiştirir.
Görüntü Uygulama: Orta
Yapıştırıcı da genişliği değiştirin.
Genişlik:% 33 Modül hizalaması: merkez Sınır ve sınır ayarındaki her köşeye ’20px’ ekleyin.
Kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyerek görüntünün tasarımını tamamlar. Pleaing Güç Kutusu: 51px Gölge Renk: RGBA (0.0,0,0.0.37)
Metin Modülü Ekle #1 İhtiyacımız olan bir sonraki H3 içeriğini ekleyin Metin modülü. Bazı H3 içerik seçenekleri ekleyin.
H3 Metin Ayarları Tasarım sekmesindeki H3 metin ayarlarını değiştirin. Başlık 3 Yazı Tipi: SANS’ı Aç Başlık 3 Font Ağırlığı: Ultra Kalın
Başlık 3 yazı tipi stili: büyük harf
Başlık 3 Metin Seviyeleri: Orta Başlık 3 Renk Metni: #000000 Başlık alanı 3 harf: -1px
POS 3 Sıra Yükseklik: 0.9EM
Mesafe Sonraki bir üst kenar boşluğu ekleyin.
Üst kenar boşluğu: 30 piksel
Metin Modülü Ekle #2 Dolgu 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 Oryantasyonu: Orta
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek #2 sütun yapısı ekleyin: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve satırın arka plan rengini değiştirin. Arka plan rengi: #ffffff
Arka Plan Rengi Sütun 2 Arka plan rengini ikinci sütuna da ekleyin.
Sütun 2 arka plan rengi: #effef
Hizalama Sol çizgi seviyesini kullandığınızdan emin olun. Satır Hizalama: Sol Yapıştırıcı Bir sonraki boyut ayarlarını açın ve bazı değişiklikler yapın.
Özel genişlik kullanın: evet Birim: %
Özel genişlik:% 67 Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Yüksek sütunu eşitleyin: evet
Bizim mesafemiz ayrıca satır ve sütuna bazı özel dolgu ekledi.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Dolgu Üst: 20px
Sütun 1 Pilding Alt: 20px
Sütun 2 Dolgu Üst: 20px Sütun 2 Dolgu Alt: 20px
Sınır sol üst, üst ve sağ sol köşelere ’14px’ ekleyin.
Gölge kutusu ve pürüzsüz bir kutu gölge ekleyerek satırın tasarımını tamamlayın. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0.17)
Sosyal medyayı takip etmek için modülü ekleyin İlk sütunda Sütun 1 hizalamasına, bir Sosyal Medya Takip Modülüne ihtiyacımız var. Öğe tesviye değiştirme.
Hizalama Öğesi: Merkez
Daha sonra yeni bir sosyal ağ ekleyin, yeni bir sosyal ağ ekleyin. Dribbble kullanıyoruz. Bağlantı, Dribbble portföyünüze bir bağlantı ekler. Gradyan arka plan ve sosyal ağ gradyan arka planını değiştirin.
Renk 1: #EA0061
Renk 2: #EA4C8D Gradyan yönü: 136deg
Mesafe Bir sonraki özel dolgu değerleri ekleyin. Üst dolgu: 20px Dolgu Alt: 20 piksel Sol dolgu: 20px
Doğru dolgu: 20 piksel
Sınır ve sosyal ağların her köşesine ’10 piksel’ ekleyin.
Kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyerek modül tasarımını tamamlar. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3)
Metin Modülü #1 ekle Sütun 2’ye Ekle Dolgu Ekle Metin modülünü ikinci sütuna ekleyin.
Metin Ayarları Uygun metin ayarlarını değiştirin:
Metin yazı tipi: SANS’ı aç Metin yazı tipi ağırlığı: çok kalın Metin rengi: #000000
Metin Oryantasyonu: Orta
Yukarıda birkaç kenar ekleyerek boşluk mesafesi. Üst kenar boşluğu: 10 piksel Sütun 2’ye Metin Modülü #2 ekleyin Ekle 2 sütun 2’de ihtiyacımız olan ikinci modülün içeriğini ekleyin başka bir metin modülüdür.
Metin Ayarları Metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç
Metin rengi: #898989
Metin Boyutu: 11 piksel Metin Oryantasyonu: Orta
Satır Klonu #2 Satırı değiştirmeyi bitirdikten sonra devam edebilir ve bir kez klonlayabilirsiniz. Bir sonraki modülü değiştirme modülü. Sütun 1’in arka plan rengini ekleyin, ardından Sütun 1’in arka plan rengini yinelenen satıra ekleyin. Sütun 1 Arka Plan Rengi: #DBDBDB
Sütun 2’nin arka plan rengini silin Sütun 2’nin arka plan rengini silin.
Hat seviyesini değiştirin Çizgi hizalama seviyesini de değiştirin.
Satır Hizalama: Doğru
Boyut ayarlarında özel bir genişlik ile birlikte satırın boyutunu değiştirin. Özel genişlik:% 66.99 Sıra sınırlarımızı değiştirin, ’14px’in sağ üst ve sağ alt köşeye belirlendiğinden emin olun. Ağı değiştirme Sosyal ağları değiştirerek sosyal takip takip edin.
Ağ gradyanının arka planını değiştirin, gradyanın arka planı ile birlikte sosyal takip edin. Renk 1: #0043ff Renk 2: #00ed
Her iki sıranın da sosyalleşmesini bitirdikten sonra çizginin ikinci klonu sosyal takip eder, her satırı klonlayabilirsiniz. Yinelenen sınırını değiştir #1 Yuvarlak açıyı ilk kopyadan değiştirin.
Ağı Değiştir Sosyal ağlarla birlikte Sosyal Yinelenen # 1’i takip edin. Yinelenen gradyan arka planı #1 ve gradyan arka planı değiştirin. Renk 1: #EA2C59 Renk 2: #Fed270
Yinelenen sınırını değiştirin #2, yuvarlak açıyı ikinci kopyadan da değiştirerek devam edin.
Ağı Değiştir Sosyal ağlarla birlikte Sosyal Yinelenen #2’yi takip edin. Yinelenen gradyan #2’nin arka planını değiştirin ve bir kez daha gradyanın arka planını sosyal ağa belirleyin. Renk 1: #00306B Renk 2: #007BB6 BIOS’u İndirin Sosyal Hücresi Takip Edin Ücretsiz Hücre Ergenliği Bölümünü almak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone Olmayacak” veya Ek E -posta Almayacaksınız. Dosyayı indirin
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.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin! Önizleme Şimdi tüm adımlardan geçtikten sonra, tekrar yaptığımız iki örneğin nihai sonuçlarına bakalım. örnek 1 Örnek 2
