Divi Kişi Modülü ile Yaratıcı Olmanın 5 Yolu
Son birkaç ay içinde meydana gelen tüm yeni Divi özellikleri, web siteleri tasarlarken sahip olduğunuz çeşitli olasılıkları genişlettikleri yadsınamaz. Bu öğretici için, ek bir CSS kodu kullanmadan Divi Kişi Modülü ile yaratıcı olmak için 5 farklı yol yaptık. Bu yazının temel amacı, bir sonraki Divi projenize başlamadan önce size ilham vermektir. Kişi modülleri genellikle ekip üyeleri hakkında daha fazla bilgi paylaşmak veya tanıklıkları paylaşmak için kullanılır. Bu 5 farklı örnekle, sayfanızda tasarım teşviki sağlamaya hazırsınız.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım. Masaüstü
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Bir sonraki mesafe, boşluk ayarlarını açın ve bazı özel dolgu değerleri ekleyin.
Üst Pilding: 100 piksel (masaüstü), 80px (tablet ve cep telefonu)
Aşağıda dolgu: 100 piksel (masaüstü), 80px (tablet ve cep telefonu)
Sol dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu)
Sağ dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu) Resim Modülünü Sütun 1’e ekleyin Modül eklemeye başlama zamanını yükleyin! Görüntü modülünü ilk sütuna ekleyin ve seçilen bir kare görüntü yükleyin. Kutunun gölgesi tasarım sekmesini açıp pürüzsüz bir kutu gölgesi uygulayarak devam eder. Filtreniz, görüntünüze efekt eklemek için filtre ayarlarıyla da oynayabilir. Doygunluk:% 40
Kontrast:% 130
Sütun 2’ye #1 Kişi Modülünü Ekleyin İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Kişi modülü. Devam edin ve ikinci sütuna bir tane ekleyin ve ad ve konum düzlemini doldurun. DEĞERLENDİRİM ARKAMI Bu modüle degradenin arka planını ekleyin. Renk 1: RGBA (11,15,229.0.41)
Renk 2: RGBA (45,237,255.0.87)
Gradyan yönü: 150deg
Başlık Metin Ayarları Ardından, Tasarım sekmesindeki başlık metin ayarlarını değiştirin. Yazı tipi başlığı: Baloo
Başlık metin rengi: #ffffff
Başlık Metin Boyutu: 20px
Gövde metnini ayarlamak İçindekiler metin ayarlarını da değiştirir. Vücut ağırlığı: ışık
Gövde metni rengi: #ffffff
Uzaklık ve boşluk ayarlarına bazı özel marj ve dolgu değerleri ekleyin. Sol kenar boşluğu: -4vw (masaüstü ve tablet), 0vw (telefon)
Sağ kenar boşluğu: 8VW (masaüstü ve tablet), 0vw (telefon)
Üst dolgu: 25px
Dolgu Alt: 25px
Sol dolgu: 20px
Sınırımız ayrıca modül için düz bir sol sınırı ekler. Sol sınır genişliği: 3px
Sol sınır rengi: #ffffff
Kutunun gölgesi, sayfada derinlik oluşturmanıza yardımcı olacak kutunun gölgesi ile birlikte. Bulanık Güç Gölgesi Kutusu: 80px
#2 Kişi Modülünü Sütun 2’ye ekleyin Dolgu ekle Bir öncekinin hemen altına başka birinin modülünü ekleyin. Bu modülü sosyal medya profillerini ve açıklamalarını görüntülemek için kullanıyoruz. Simgeyi Ayarla Tasarım sekmesini açın ve simge ayarlarında simgenin rengini değiştirin. Ikon Color: #50e8fe
Son fakat en az değil, açık alan ayarları ve bazı özel dolgu değerleri ekleyin. Üst dolgu: 30px
Sol dolgu: 30px (masaüstü ve tablet), 0px (telefon) Yeniden örnek #2
Bir sonraki örneğe yeni bir bölüm ekleyin! Sayfanıza yeni bir parça ekleyin. Sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısını kullanarak bu bölüme yeni bir satır ekleyin. Sütun Renk Sütunu 2 Modül eklemeden, satır ayarlarını açın ve sütun 2’nin arka plan rengini ekleyin. Sütun 2 arka plan rengi: #f4f4f4 Yapıştırıcı daha sonra tasarım sekmesini açın ve boyut ayarlarında bazı değişiklikler yapın.
Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Mesafe Uzay ayarlarına da bazı özel dolgu değerleri ekleyin.
Üst Pilding: 100 piksel (masaüstü), 80px (tablet ve cep telefonu) Aşağıda dolgu: 100 piksel (masaüstü), 80px (tablet ve cep telefonu)
Sol dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu)
Sağ dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu)
Resim Modülünü Sütun 1’e ekleyin Modül eklemeye başlama zamanını yükleyin! İhtiyacımız olan ilk modül Sütun 1’deki görüntü modülüdür. Resim seçimini yükleyin.
Kutunun gölgesi, kutunun gölgesini resme ekleyin. Bulanık Güç Gölgesi Kutusu: 160px Filtreniz filtre ayarlarıyla da oynayabilir.
Doygunluk:% 40 Kontrast:% 130
#1 Kişi Modülünü Sütun 2’ye ekleyin İkinci sütunda içeriği ekleyin, ihtiyacımız olan ilk modül kişi modülü. Sütunu ve konumu adını doldurun.
Arka plan rengi açık arka plan ayarları ve şeffaf arka plan renkleri ekleyin. Arka plan rengi: RGBA (255,255,255.0.7) Metin Ayarları Ardından, metin ayarlarındaki metin yönünü değiştirin.
Metin Oryantasyonu: Orta Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı Tip Başlığı: Abril Fatface Başlık Metin Rengi: #000000
Başlık Metin Boyutu: 40 PX
Gövde metni ayarları içerik metin ayarlarına denk gelir.
Vücut ağırlığı: ışık Gövde metni rengi: #000000
Vücut Metin Boyutu: 15px
Mesafemiz, uzay ayarlarında birkaç negatif sol marj kullanarak örtüşüyor.
Sol kenar boşluğu: -21.64vw (masaüstü), -46.1vw (tablet), 0vw (telefon) Üst dolgu: 30px
Dolgu Alt: 30 piksel
Kutunun gölgesi ve aynı zamanda pürüzsüz bir kutunun utançını da uyguluyoruz.
Bulanık Güç Gölgesi Kutusu: 80px #2 Kişi Modülünü Sütun 2’ye ekleyin 2 sütun 2’de ihtiyacımız olan ikinci modülün içeriğini ekleyin Başkasının modülüdür. Burada, sosyal medyanın bir bağlantısı ve açıklaması ekliyoruz.
Tasarım sekmesini girerek simge ayarlarına devam edin ve simge ayarlarındaki simgenin rengini değiştirin. Renk simgesi: #000000 Mesafe Bazı özel kenar boşlukları ve dolgu değerleri de ekleyin.
Üst Marj: 3VW Üst dolgu: 30px
Dolgu Alt: 30 piksel
Sol dolgu: 30px
Sağ dolgu: 30px
Bir örnek #3 yap
Üçüncü örneğe yeni bir parça ekleyin! Sayfanıza yeni bir parça ekleyin. Sütun yapısının yeni bir satırı ekleyin, ardından aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyin: Yapıştırıcı Satır ayarlarını 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
Yüksek sütunu eşitleyin: evet
Mesafe Bazı özel dolgu değerleri de ekleyin.
Üst Pilding: 100 piksel (masaüstü), 80px (tablet ve cep telefonu) Aşağıda dolgu: 100 piksel (masaüstü), 80px (tablet ve cep telefonu)
Sol dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu)
Sağ dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu)
1 numaralı kişi modülünü sütun 1’e ekleyin. İlk kişinin modülünü sütun 1’e ekleyin ve ad ve konum sütunu doldurun. Arka plan rengi daha sonra, arka plan rengini modüle ekleyin.
Arka plan rengi: #ffffff Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin. Ağır yazı tipi başlığı: Ultra Kalın
Başlık Metin Rengi: #000000 Başlık Metin Boyutu: 40 PX
Başlık Aralığı: -4px
Gövde metni ayarları içerik metin ayarları için aynı şeyi yapar.
Vücut ağırlığı: ışık
Gövde metni rengi: #000000 Vücut Metin Boyutu: 15px
Uzay ayarlarını girerek daha fazla mesafe ve bazı marj değerleri ve özel dolgu ekleyin.
Üst kenar: 40 piksel (masaüstü), 0px (tablet ve cep telefonu)
Üst dolgu: 30px
Dolgu Alt: 30 piksel
Sol dolgu: 30px
Sağ dolgu: 30px
Sınır ayarındaki sol üst köşeye ’20px’ ekleyin.
Kutunun gölgesi ve gölgenin renkli gölgesini verin.
Bulanık Güç Gölgesi Kutusu: 140px
Arka plan rengi daha sonra, arka plan ayarına gidin ve beyaz arka plan rengini ekleyin.
Arka plan rengi: #ffffff Simgeyi ayarlayın Simgenin rengini de değiştirin. Renk simgesi: #000000
Uzay ayarlarına bazı özel alan değerleri ekleyerek daha fazla mesafe. Sınır ve sol alt köşeye ’20px’ ekleyin.
Son kutu gölgesi, kutunun gölgesini ekleyin. Dikey Konum Gölge Kutusu: 50px Bulanık Güç Gölgesi Kutusu: 140px Kutunun gölgesinin dağılımının gücü: -10px
Gölge Renk: RGBA (2.219,219.0.26)
Resim Modülünü Sütun 2’ye Ekleyin İhtiyacımız olan bir sonraki modül görüntüsünü yükleyin. İkinci sütuna bir tane ekleyin ve bir tane ekleyin ve resmi yükleyin. Sınırlar, bu modülün sınır ayarında ’20px’ yuvarlak açısını verin.
Kutunun gölgesi ve pürüzsüz bir kutu gölge ekleyin.
Bir kez daha filtreleyin, görüntünün görünümünü değiştirmek için filtre ayarlarıyla oynamaktan çekinmeyin. Bir örnek #4 Dördüncü örneğe yeni bir parça ekleyin! Sayfanıza yeni bir parça ekleyin. Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını 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 Yüksek sütunu eşitleyin: evet
Mesafe ayrıca boşluk ayarlarını değiştirin.
Üst Pilding: 100 piksel (masaüstü), 80px (tablet ve cep telefonu)
Aşağıda dolgu: 100 piksel (masaüstü), 80px (tablet ve cep telefonu)
Sol dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu) Sağ dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu)
İnsanların modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! İnsanların modülünü sütun 1’e ekleyin ve tüm alanları doldurun.
Simge ayarları daha sonra simge ayarlarını açın ve simgenin rengini değiştirin.
Renk simgesi: #000000
Metin Ayarları Metin ayarlarında metin yönünü de değiştirir. Metin Oryantasyonu: Orta Başlık Metin Ayarları Ardından, başlık metni ayarlarını açın ve bazı değişiklikler yapın.
Ağır yazı tipi başlığı: Ultra Kalın Başlık Metin Rengi: #000000
Başlık Metin Boyutu: 40 PX Başlık Aralığı: -4px
Gövde metnini ayarlamak İçindekiler metin ayarlarını da değiştirir.
Vücut ağırlığı: ışık
Gövde metni rengi: #000000
Vücut Metin Boyutu: 15 Pixthe Body Hattı: 2em Uzay ayarlarında özel bir dolgu değeri kullanarak mesafe ve şekil yapın.
Üst Pilding: 280px (masaüstü), 200px (tablet), 50 piksel (cep telefonu)
Aşağıda dolgu: 280px (masaüstü), 200px (tablet), 50px (cep telefonu)
Sol dolgu: 200px (masaüstü), 150 piksel (tablet), 20px (cep telefonu)
Sağ dolgu: 200px (masaüstü), 150 piksel (tablet), 20px (cep telefonu) Sınır ayarlarındaki her açıya ‘700 piksel’ ekleyerek ve pürüzsüz bir sınır ekleyerek bir daire sınırlaması.
Sınır Genişliği: 1 piksel
Sınır rengi: #333333
Resim Modülünü Sütun 2’ye Ekleyin Görüntüyü Yükle İkinci sütuna görüntü modülünü ekleyerek ve seçilen kare görüntüyü yükleyin.
Mesafe Değişimi Aralık Ayarları Bu Modül. Üst kenar: 7VW (masaüstü), -15vw (tablet), -5vw (telefon)
Sol kenar boşluğu: -5vw (masaüstü), 0vw (tablet ve telefon)
Modülün her köşesine ‘1000px’ ekleyerek bu resmin daire şeklini sınırlar. Kutunun gölgesi pürüzsüz bir kutunun gölgesini de ekler. Bulanık Güç Gölgesi Kutusu: 160px
Kutunun gölgesinin dağılımının gücü: -10px
Görüntü filtre ayarlarıyla oynayarak tasarımı filtreleyin ve tamamlayın. Doygunluk:% 0 Kontrast:% 130
Bir örnek #5 yap
Bir sonraki ve son örneğe yeni bir parça ekleyin! Sayfanıza yeni bir parça ekleyin. Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Sütun 1 Arka plan gradyanı Satır ayarlarını açın ve sütun gradyanı 1’in arka planını ekleyin.
Renk 1: #DDDDDD Renk 2: #ffffff Sütun 1 Degrade Yönü: 90deg Sütun 1 Başlangıç Pozisyonu:% 40 Sütun 1:% 40’ın son konumu
Yapıştırıcı daha sonra boyut ayarlarını açın ve bazı değişiklikler yapın.
Bu çizgiyi tamamen genişletin: Özel olukların genişliğini kullanın: evet
Talang genişliği: 1
Mesafe Çizgiye de bazı özel dolgu değerleri ekleyin.
Üst Pilding: 100 piksel (masaüstü), 80px (tablet ve cep telefonu) Aşağıda dolgu: 100 piksel (masaüstü), 80px (tablet ve cep telefonu)
Sol dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu)
Sağ dolgu: 100px (masaüstü), 30px (tablet), 25px (cep telefonu)
İnsanların modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! İnsanların modülünü sütun 1’e ekleyin ve tüm alanları doldurun. Simgeyi ayarla, simgenin rengini simge ayarlarında değiştirin.
Renk simgesi: #000000
Metin Ayarları Metin ayarlarında metin yönünü de değiştirir.
Metin Oryantasyonu: Doğru
Sonraki başlık metin ayarları, başlık metninin başlığında bazı değişiklikler yapın. Yazı tipi başlığı: Chenla Başlık Metin Rengi: #000000
Başlık Metin Boyutu: 50px Başlık mektubu aralığı: -1px
Gövde metni ayarları içerik metin ayarları için aynı şeyi yapar. Vücut ağırlığı: ışık
Gövde metni rengi: #000000
Vücut Metin Boyutu: 15px
Vücut çizgisinin yüksekliği: 2em
Modül boşluk ayarlarına bazı özel dolgu değerleri ekleyerek daha fazla mesafe. Üst Pilding: 200px (masaüstü), 100 piksel (tablet ve cep telefonu)
Aşağıda dolgu: 200px (masaüstü), 100 piksel (tablet ve cep telefonu)
Sol dolgu: 500 piksel (masaüstü), 250 piksel (tablet), 50px (telefon)
Sağ dolgu: 200px (masaüstü), 100 piksel (tablet), 50px (telefon)
Son sınır, sınırı modüle ekleyin. Resim Modülünü Sütun 2’ye Ekleyin İhtiyacımız olan bir sonraki modül görüntüsünü yükleyin.
Daha sonraki mesafe, bu modül için boşluk ayarlarında bazı değişiklikler yapın.
Üst kenar: 7VW (masaüstü), -2vw (tablet ve cep telefonu)
Sol kenar boşluğu: -10VW (masaüstü), 0VW (Tablet ve Cep Telefonu) Gölge Kutusu Bir Modül Görüntü Gölge Kutusu da verin.
Bulanık Güç Gölgesi Kutusu: 160px Kutunun gölgesinin dağılımının gücü: -10px Filtre edin ve tamamlamak için filtre ayarlarıyla oynatın. Doygunluk:% 50
Kontrast:% 130
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.Masaüstü Hücresel
Bu yazıdaki son zihin, size Divi Kişi Modülü ile yaratıcı olmanın 5 farklı yolunu gösterdik.Bu örneği, her bir tasarım öğesinin ayarlarını değiştirerek kendi alternatif sürümünüzü oluşturduğunuz ve oluşturduğunuz herhangi bir web sitesi için kullanabilirsiniz.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
