Divi's Person Modülü ile Yaratıcı Olmanın 5 Yolu

Son birkaç ayda gerçekleşen tüm yeni Divi özellik güncellemeleri, web siteleri tasarlarken sahip olduğunuz olasılıkları inkar edilemez bir şekilde genişletti. Bu eğitim için, Divi Kişi Modülü ile herhangi bir ek CSS kodu kullanmadan yaratıcı olmanın 5 farklı yolunu oluşturduk. Bu yazının ana amacı, bir sonraki Divi projenize başlamadan önce size ilham vermektir. Kişi Modülü genellikle ekip üyeleri hakkında daha fazla bilgi paylaşmak veya referansları paylaşmak için kullanılır. Bu 5 farklı örnekle, sayfalarınıza tasarım desteği vermeye hazırsınız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Youtube Kanalımıza Abone Olun

Örnek 1'i Yeniden Oluştur

Yeni Bölüm Ekle

İlk örneği oluşturmaya başlayalım! Yeni veya mevcut bir sayfa açın ve normal bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarını değiştirmeden aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarında bazı değişiklikler yapın.

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

aralık

Ardından, boşluk ayarlarını açın ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Alt Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Sol Dolgu: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)

Sütun 1'e Görüntü Modülü Ekle

Fotoğraf yükleniyor

Modül eklemeye başlama zamanı! İlk sütuna bir Görüntü Modülü ekleyin ve istediğiniz kare bir görüntüyü yükleyin.

Kutu Gölge

Tasarım sekmesine gidip ince bir kutu gölgesi uygulayarak devam edin.

Filtreler

Resminize efekt eklemek için filtre ayarlarıyla da oynayabilirsiniz.

• Doygunluk: %40
• Kontrast: %130

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

İçerik Ekle

İhtiyacımız olan bir sonraki modül bir Kişi Modülü. Devam edin ve ikinci sütuna bir tane ekleyin ve ad ve konum alanlarını doldurun.

Degrade Arka Plan

Bu modüle bir degrade arka planı ekleyin.

• Renk 1: rgba(11,15,229,0.41)
• Renk 2: rgba(45,237,255,0.87)
• Gradyan Yönü: 150deg

Başlık Metni Ayarları

Ardından, tasarım sekmesinde başlık metni ayarlarını değiştirin.

• Başlık Yazı Tipi: Baloo
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 20px

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Rengi: #ffffff

aralık

Ve boşluk ayarlarına bazı özel kenar boşluğu 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
• Alt Dolgu: 25px
• Sol Dolgu: 20px

Sınır

Ayrıca modüle ince bir sol kenarlık ekliyoruz.

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

Kutu Gölge

Sayfada derinlik oluşturmanıza yardımcı olacak bir kutu gölgesiyle birlikte.

• Kutu Gölge Bulanıklığı Gücü: 80px

Kişi Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

Bir öncekinin hemen altına başka bir Kişi Modülü ekleyin. Sosyal medya profillerini ve açıklamasını göstermek için bu modülü kullanıyoruz.

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarından simge rengini değiştirin.

• Simge Rengi: #50e8fe

aralık

Son olarak, boşluk ayarlarını açın ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 30 piksel
• Sol Dolgu: 30px (Masaüstü ve Tablet), 0px (Telefon)

Örnek 2'yi Yeniden Oluştur

Yeni Bölüm Ekle

Bir sonraki örneğe geçelim! Sayfanıza yeni bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bu bölüme yeni bir satır ekleyin.

Sütun 2 Arka Plan Rengi

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

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

boyutlandırma

Ardından, tasarım sekmesine gidin ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Boşluk ayarlarına da bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Alt Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Sol Dolgu: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)

Sütun 1'e Görüntü Modülü Ekle

Fotoğraf yükleniyor

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül, 1. sütundaki bir Resim Modülüdür. İstediğiniz bir resmi yükleyin.

Kutu Gölge

Ardından, resme bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 160 piksel

Filtreler

Ayrıca filtre ayarlarıyla da oynayabilirsiniz.

• Doygunluk: %40
• Kontrast: %130

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

İçerik Ekle

İkinci sütunda, ihtiyacımız olan ilk modül bir Kişi Modülüdür. İsim ve pozisyon alanlarını doldurun.

Arka plan rengi

Arka plan ayarlarına gidin ve şeffaf bir arka plan rengi ekleyin.

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

Metin Ayarları

Ardından, metin ayarlarında metin yönünü değiştirin.

• Metin Yönü: Merkez

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi: Abril Fatface
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 40px

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Rengi: #000000
• Gövde Metin Boyutu: 15px

aralık

Boşluk ayarlarında bir miktar negatif sol kenar boşluğu kullanarak çakışma oluşturuyoruz.

• Sol Kenar Boşluğu: -21.64vw (Masaüstü), -46.1vw (Tablet), 0vw (Telefon)
• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px

Kutu Gölge

Ayrıca ince bir kutu gölgesi de uyguluyoruz.

• Kutu Gölge Bulanıklığı Gücü: 80px

Kişi Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

2. sütunda ihtiyacımız olan ikinci modül başka bir Kişi Modülüdür. Buraya sosyal medya bağlantılarını ve açıklamasını ekliyoruz.

Simge Ayarları

Tasarım sekmesine giderek ve simge ayarlarından simge rengini değiştirerek devam edin.

• Simge Rengi: #000000

aralık

Bazı özel kenar boşluğu ve dolgu değerleri de ekleyin.

• Üst Marj: 3vw
• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Örnek 3'ü Yeniden Oluştur

Yeni Bölüm Ekle

Üçüncü örneğe geçelim! Sayfanıza yeni bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyin:

boyutlandırma

Satır ayarlarını açın 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
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Alt Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Sol Dolgu: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)

Kişi Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Modül eklemeye başlama zamanı! İlk Kişi Modülünü sütun 1'e ekleyin ve ad ve pozisyon alanlarını doldurun.

Arka plan rengi

Ardından, modüle bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 40px
• Başlık Harf Aralığı: -4px

Gövde Metni Ayarları

Gövde metni ayarları için de aynısını yapın.

• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Rengi: #000000
• Gövde Metin Boyutu: 15px

aralık

Aralık ayarlarına giderek devam edin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Kenar Boşluğu: 40px (Masaüstü), 0px (Tablet ve Telefon)
• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Sınır

Kenarlık ayarlarında da sol üst köşeye '20px' ekleyin.

Kutu Gölge

Ve modüle renkli bir kutu gölgesi verin.

• Kutu Gölge Bulanıklığı Gücü: 140 piksel
• Gölge Rengi: rgba(31,15,255,0.66)

Kişi Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Sütun 1'deki ikinci kişi modülüne! Sosyal medya bağlantılarını ve açıklamasını görüntülemek için bu modülü kullanın.

Arka plan rengi

Ardından, arka plan ayarlarına gidin ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Simge Ayarları

Simge rengini de değiştirin.

• Simge Rengi: #000000

aralık

Aralık ayarlarına bazı özel aralık değerleri ekleyerek devam edin.

Sınır

Ve sol alt köşeye '20px' ekleyin.

Kutu Gölge

Son olarak, kutu gölgesini ekleyin.

• Kutu Gölgesi Dikey Konumu: 50px
• Kutu Gölge Bulanıklığı Gücü: 140 piksel
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: rgba(2.219.219.0.26)

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

Fotoğraf yükleniyor

İhtiyacımız olan bir sonraki modül bir görüntü modülü. Devam edin ve ikinci sütuna bir tane ekleyin ve istediğiniz bir resmi yükleyin.

Sınır

Kenarlık ayarlarında bu modüle '20px' yuvarlatılmış köşeler verin.

Kutu Gölge

Ve ince bir kutu gölgesi ekleyin.

Filtreler

Yine, görüntünün görünümünü değiştirmek için filtre ayarlarıyla oynamaktan çekinmeyin.

Örnek 4'ü Yeniden Oluştur

Yeni Bölüm Ekle

Dördüncü örneğe geçelim! Sayfanıza yeni bir bölüm ekleyin.

Yeni 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:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın 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
• Sütun Yüksekliklerini Eşitle: Evet

aralık

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

• Üst Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Alt Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Sol Dolgu: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)

1. Sütun'a Kişi Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! 1. sütuna bir Kişi Modülü ekleyin ve tüm alanları doldurun.

Simge Ayarları

Ardından simge ayarlarına gidin ve simge rengini değiştirin.

• Simge Rengi: #000000

Metin Ayarları

Metin ayarlarından da metin yönünü değiştirin.

• Metin Yönü: Merkez

Başlık Metni Ayarları

Ardından, başlık metni ayarlarını açın ve bazı değişiklikler yapın.

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 40px
• Başlık Harf Aralığı: -4px

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Rengi: #000000
• Gövde Metin Boyutu: 15px
• Gövde Çizgisi Yüksekliği: 2em

aralık

Ve boşluk ayarlarında özel dolgu değerlerini kullanarak bir şekil oluşturun.

• Üst Dolgu: 280px (Masaüstü), 200px (Tablet), 50px (Telefon)
• Alt Dolgu: 280 piksel (Masaüstü), 200 piksel (Tablet), 50 piksel (Telefon)
• Sol Dolgu: 200px (Masaüstü), 150px (Tablet), 20px (Telefon)
• Sağ Doldurma: 200px (Masaüstü), 150px (Tablet), 20px (Telefon)

Sınır

Kenarlık ayarlarında köşelerin her birine '700px' ekleyerek bir daire oluşturun ve ince bir kenarlık da ekleyin.

• Kenar Genişliği: 1px
• Kenar Rengi: #333333

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

Fotoğraf yükleniyor

İkinci sütuna bir Görüntü Modülü ekleyerek devam edin ve istediğiniz kare bir görüntüyü yükleyin.

aralık

Bu modülün boşluk ayarlarını değiştirin.

• Üst Kenar Boşluğu: 7vw (Masaüstü), -15vw (Tablet), -5vw (Telefon)
• Sol Kenar Boşluğu: -5vw (Masaüstü), 0vw (Tablet ve Telefon)

Sınır

Modülün her bir köşesine '1000px' ekleyerek bu görüntüden bir daire şekli oluşturun.

Kutu Gölge

İnce bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 160 piksel
• Kutu Gölge Yayılma Gücü: -10px

Filtreler

Ve görüntünün filtre ayarlarıyla oynayarak tasarımı tamamlayın.

• Doygunluk: %0
• Kontrast: %130

Örnek 5'i Yeniden Oluştur

Yeni Bölüm Ekle

Bir sonraki ve son örneğe geçelim! Sayfanıza yeni bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

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

Sütun 1 Gradyan Arka Planı

Satır ayarlarını açın ve bir sütun 1 degrade arka planı ekleyin.

• Renk 1: #dddddd
• Renk 2: #ffffff
• Sütun 1 Gradyan Yönü: 90deg
• Sütun 1 Başlangıç ​​Konumu: %40
• Sütun 1 Bitiş Konumu: %40

boyutlandırma

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

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

aralık

Satıra bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Alt Dolgu: 100px (Masaüstü), 80px (Tablet ve Telefon)
• Sol Dolgu: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 30px (Tablet), 25px (Telefon)

1. Sütun'a Kişi Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! 1. sütuna bir Kişi Modülü ekleyin ve tüm alanları doldurun.

Simge Ayarları

Ardından, simge ayarlarından simge rengini değiştirin.

• Simge Rengi: #000000

Metin Ayarları

Metin ayarlarından da metin yönünü değiştirin.

• Metin Yönü: Sağ

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Chenla
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 50px
• Başlık Harf Aralığı: -1px

Gövde Metni Ayarları

Gövde metni ayarları için de aynısını yapın.

• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Rengi: #000000
• Gövde Metin Boyutu: 15px
• Gövde Çizgisi Yüksekliği: 2em

aralık

Modülün boşluk ayarlarına bazı özel dolgu değerleri ekleyerek devam edin.

• Üst Dolgu: 200px (Masaüstü), 100px (Tablet ve Telefon)
• Alt Dolgu: 200px (Masaüstü), 100px (Tablet ve Telefon)
• Sol Dolgu: 500px (Masaüstü), 250px (Tablet), 50px (Telefon)
• Sağ Doldurma: 200px (Masaüstü), 100px (Tablet), 50px (Telefon)

Sınır

Son olarak, modüle bir kenarlık ekleyin.

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

Fotoğraf yükleniyor

İhtiyacımız olan bir sonraki modül 2. sütundaki Görüntü Modülü. Devam edin ve tercih ettiğiniz kare bir görüntüyü yükleyin.

aralık

Ardından, bu modülün boşluk ayarlarında bazı değişiklikler yapın.

• Üst Marj: 7vw (Masaüstü), -2vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: -10vw (Masaüstü), 0vw (Tablet ve Telefon)

Kutu Gölge

Görüntü Modülüne bir kutu gölgesi de verin.

• Kutu Gölge Bulanıklığı Gücü: 160 piksel
• Kutu Gölge Yayılma Gücü: -10px

Filtreler

Üstüne üstlük, filtre ayarlarıyla oynayın.

• Doygunluk: %50
• Kontrast: %130

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi Kişi Modülü ile yaratıcı olmanın 5 farklı yolunu gösterdik. Bu örnekleri, oluşturduğunuz herhangi bir web sitesi için kullanabilir ve her tasarım öğesinin ayarlarını değiştirerek kendi alternatif sürümlerinizi oluşturabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!