Divi ile Kişisel Web Siteniz İçin Güzel Bir Kahraman Bölümü Nasıl Oluşturulur

Kişisel bir web sitesi oluşturmak hem eğlenceli hem de zordur. Web sitenizin hikayenizi anlatacak kadar ilgi çekici ve kişisel görünmesini istiyorsunuz. Aynı zamanda, ne yaptığınızı bildiğinizi gösteren güzel ve özgün bir web sitesine sahip olmak istiyorsunuz.

Bu tür kişisel web sitesi oluşturma yaratıcı sürecinde size yardımcı olmak için web sitenizi kesinlikle öne çıkaracak güzel bir kahraman bölümü oluşturduk. Bu gönderide, her bir adım için Divi'nin yerleşik ayarlarından başka bir şey kullanmadan bu sonucu nasıl oluşturacağınızı adım adım göstereceğiz. Öğreticiye dalmadan önce, sonuca bir göz atalım.

Masaüstünde Sonuç

Masaüstündeki sonuç şöyle görünür:

Mobilde Sonuç

Ve web sitesini mobil olarak ziyaret eden ziyaretçiler aşağıdaki sonucu görecekler:

Divi ile Kişisel Web Siteniz İçin Güzel Bir Kahraman Bölümü Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Bölüm Oluştur

WordPress web sitenizde yeni bir sayfa oluşturarak, Divi Builder'ı etkinleştirerek, Visual Builder'a geçerek ve ona yeni bir bölüm ekleyerek başlayın.

Degrade Arka Plan

Bu bölümde değiştirmeniz gereken tek şey arka plandır. Bu arka plan, bu gönderinin sonraki adımlarında ekleyeceğimiz tüm satırlar için geçerli olacaktır. Arka Plan alt kategorisini açın ve buna aşağıdaki gradyan arka planını ekleyin:

• İlk Renk: #c2c6f3
• İkinci Renk: #cea5b9
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45

İlk Satırı Ekle

Ardından, devam edin ve bölüme ilk satırı ekleyin. Bu satır, yalnızca mizanpajın üstünde görebileceğiniz Metin Modülünü içerecektir.

Sütun Yapısı

Ardından, tek sütunlu bir sütun yapısı seçin.

boyutlandırma

Satır ayarlarınızın Tasarım sekmesine gidin ve Boyutlandırma alt kategorisi için aşağıdaki ayarları kullanın:

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

Metin Modülü

Daha önce de belirtildiği gibi, bu satır yalnızca bir Metin Modülüne ihtiyaç duyacaktır.

Metin Ayarları

İçerik sekmesinde görünmesini istediğiniz metni girdikten sonra Tasarım sekmesine gidin ve Metin alt kategorisine aşağıdaki ayarları uygulayın:

• Metin Yazı Tipi: Arizona
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 150 (Masaüstü), 80 (Tablet), 70 (Telefon)
• Metin Rengi: rgba(255,255,255,0.39)
• Metin Yönü: Merkez

İkinci Satır Ekle

İlk satırı tamamladıktan sonra devam edin ve aynı bölüme ikinci bir satır ekleyin.

Sütun Yapısı

Önceki satırda olduğu gibi, bu satırda da yalnızca bir sütun olacaktır.

Arka plan görüntüsü

Satır ayarlarını açın ve ilk sütun için arka plan resmi olarak kullanmak istediğiniz kişisel resmi ekleyin. Görüntü Konumunun da 'Merkez' olarak ayarlandığından emin olun.

boyutlandırma

Ardından Boyutlandırma alt kategorisini açın ve aşağıdaki değişiklikleri yapın:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: 557px

aralık

Ardından, satırın üst, alt, sağ ve sol dolgusu için '0px' kullanın.

Kutu Gölge

Son olarak, aşağıdaki Kutu Gölgesini uygulayın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 53px
• Kutu Gölge Yayılma Gücü: 10px
• Gölge Rengi: rgba(0,0,0,0.3)
• Gölge Konumu: Dış Gölge

Metin Modülü

Satır ayarlarınız tamamlandıktan sonra devam edin ve sütuna bir Metin Modülü ekleyin.

Arka plan rengi

Her şeyden önce, bu Metin Modülü 'rgba(0,0,0,0.66)' rengine sahip bir arka plan rengine ihtiyaç duyacaktır.

Metin Ayarları

Ardından Tasarım sekmesine geçin ve Metin alt kategorisine aşağıdaki değişiklikleri uygulayın:

• Yazı Tipi: Andika
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 78px (Masaüstü), 70px (Tablet), 50px (Telefon)
• Metin Rengi: #c2c6f3
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Sınır

Ardından, Kenarlık alt kategorisini açın ve aşağıdaki kenarlığı kullanın:

• Kenarlık Kullan: Evet
• Kenar Rengi: #c2c6f3
• Kenar Genişliği: 8px
• Kenar Stili: Katı

aralık

Devam ederek, aşağıdaki kenar boşluğunu ve dolguyu ekleyin:

• Üst, Sağ, Alt ve Sol Kenar Boşluğu: 50px
• Üst Dolgu: 200 piksel
• Alt Dolgu: 200px

Kutu Gölge

Son olarak, Metin Modülüne aşağıdaki Kutu Gölgesini kullanın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 50px
• Gölge Rengi: rgba(206,165,185,0.41)
• Kutu Gölge Konumu: Dış Gölge

Üçüncü Satır Ekle

Daha önce de belirtildiği gibi, bu eğitim için yalnızca bir bölüm kullanıyoruz. Bunun nedeni, bölümün gradyan arka planının, paylaşılan tüm farklı içeriğe yayılmasını istememizdir. Devam edin ve yeni bir satır ekleyin.

Sütun Yapısı

Bu satır için iki sütun seçin.

boyutlandırma

Ardından, "Özel Genişliği Kullan" seçeneğini etkinleştirin ve "663 piksel" genişlik uygulayın.

aralık

Son olarak, '50px' üst ve alt kenar boşluğunu ekleyin.

İlk Metin Modülü

Satırın ilk sütununa bir ilk Metin Modülü ekleyin.

Metin Ayarları

Ardından Tasarım sekmesine gidin, Metin Yazı Tipi olarak 'Andika'yı ve Metin Yazı Tipi Ağırlığı olarak 'Normal'i kullanın.

Metin Modülünü Klonla ve İkinci Sütuna Yerleştir

İkinci sütundaki Metin Modülü tamamen aynı ayarlara sahiptir, bu yüzden devam edin, Metin Modülünü kopyalayın ve ikinci sütuna yerleştirin.

Dördüncü Satır Ekle

Tasarım tamamlanmadan bölüme eklenecek bir satır daha kaldı.

Sütun Yapısı

Bu yeni satırın da iki sütunu var.

boyutlandırma

Satır Ayarları'nı açın ve Boyutlandırma alt kategorisine aşağıdaki ayarları uygulayı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, 20 piksellik bir üst dolgu ekleyin.

İlk Görüntü Modülü

Devam edin ve bu son satırın ilk sütununa bir ilk Görüntü Modülü ekleyin.

Kutu Gölge

Ve buna aşağıdaki Kutu Gölgesini ekleyin:

• Kutu Gölgesi Yatay Konumu: -6px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 53px
• Kutu Gölge Yayılma Gücü: 10px
• Gölge Rengi: rgba(0,0,0,0.3)
• Kutu Gölge Konumu: Dış Gölge

Klon Görüntü Modülü ve İkinci Sütundaki Yeri

Ve son olarak, bu Görüntü Modülünü klonlayın ve bu satırı tamamlamak için ikinci sütuna da yerleştirin.

Sonuç

Bu gönderiye eklediğimiz tüm adımları tamamladıktan sonra, aşağıdaki sonucu elde edebilmelisiniz:

Masaüstünde

Mobilde

Son düşünceler

Divi ile sahip olduğunuz olanaklar sonsuzdur. Değişiklikleri gerçek zamanlı olarak gösterecek olan Visual Builder'ı kullanarak web sitenizin tam olarak istediğiniz gibi görünmesini sağlayabilirsiniz. Özellikle bu gönderi için, kişisel bir web sitesi için nasıl güzel bir kahraman bölümü oluşturabileceğinizi gösterdik. Bu eğitim, Divi'nin yerleşik seçeneklerinden başka bir şey kullanılmadan yapılmıştır. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!