Çarpıcı Bir Kahraman Bölüm Tasarımı Oluşturmak için Divi'nin Satır Kenarlıklarını Yaratıcı Bir Şekilde Kullanma

Sayfanızın kahraman bölümü genellikle sayfanın geri kalanı için çıtayı belirler. Ayrıca ziyaretçilerinizin ilk izleniminde önemli bir rol oynar. Divi ile yalnızca yerleşik seçenekleri kullanarak harika kahraman bölümleri oluşturabilirsiniz. Şimdi, bir sonraki kahraman bölümünüzü öne çıkarmanın bir yolunu arıyorsanız, bu gönderiyi seveceksiniz. Divi'nin satır kenarlıkları ile uğraşırken etkili ve güzel bir kahraman bölümü tasarımının nasıl oluşturulacağını size göstereceğiz. Tasarım JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

Kahraman Bölüm Düzenini ÜCRETSİZ İndirin

ÜCRETSİZ kahraman bölümü düzenini elde etmek için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Degrade Arka Plan

Devam edin ve yeni bir sayfa oluşturun veya mevcut bir sayfayı açın. Yeni bir normal bölüm ekleyin, bölüm ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:

• Renk 1: #7e2dff
• Renk 2: #ffffff
• Başlangıç ​​Konumu: %63
• Bitiş Konumu: %63

aralık

Tasarım sekmesine geçin ve farklı ekran boyutlarına bazı özel üst ve alt dolgular ekleyin.

• Üst Dolgu: 6vw (Masaüstü), 13vw (Tablet), 32vw (Telefon)
• Alt Dolgu: 6vw (Masaüstü), 10vw (Tablet), 20vw (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ı açın ve maksimum genişliği değiştirin.

• Maksimum Genişlik: %100

aralık

Satırın varsayılan üst ve alt dolgusunu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Resim Modülü Ekle

Fotoğraf yükleniyor

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül bir Görüntü Modülü. Bu öğreticinin başında indirebildiğiniz sıkıştırılmış klasörde bulabileceğiniz resmi yükleyin. Başka bir görsel kullanmayı tercih ederseniz, 1160 piksel genişlik ve 1385 piksel yükseklik kullandığınızdan emin olun.

boyutlandırma

Görüntü Modülünün tasarım sekmesine gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

aralık

Sonraki boşluk ayarlarını değiştirin.

• Resmin Altındaki Boşluğu Göster: Hayır
• Sol Dolgu: 17vw

Sınır

Ve Görüntü Modülünün sağ üst köşesine '50vw' ekleyin.

Filtreler

Ayrıca, renk paletimize uyması için resmimizin renklerini de değiştiriyoruz. Filtre ayarlarını açın ve aşağıdaki ayarları uygulayın:

• Renk tonu: 211 derece
• Doygunluk: %600
• Parlaklık: %67
• Kontrast: %112
• Ters Çevir: %18

Sütuna Metin Modülü #1 Ekle

H1 İçeriği Ekle

Bu satırda ihtiyacımız olan ikinci modül, biraz H1 içeriğine sahip bir Metin Modülüdür.

H1 Metin Ayarları

Tasarım sekmesine gidin ve H1 metin ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 5vw
• Başlık Harf Aralığı: -2px

boyutlandırma

Daha sonra modülün genişliğini değiştirin.

• Genişlik: %70

aralık

Ve bir miktar negatif üst kenar boşluğu kullanarak bu modül ile önceki modül arasında bir örtüşme oluşturun.

• Üst Marj: -57vw (Masaüstü), -75vw (Tablet), -91vw (Telefon)

Sütuna Ayırıcı Modül Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Sonraki çizgi rengini değiştirin.

• Çizgi Rengi: #00dcff

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 0.8vw
• Genişlik: %27

Sütuna Metin Modülü #2 Ekle

Paragraf İçeriği Ekle

Seçtiğiniz bazı paragraf içeriğine sahip yeni bir Metin Modülü ekleyerek devam edin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #ffffff
• Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)
• Metin Satır Yüksekliği: 1.8em

boyutlandırma

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

• Genişlik: %53 (Masaüstü), %65 (Tablet), %100 (Telefon)

Sütuna 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. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Sonraki düğme ayarlarına gidin ve düğmenizin stilini buna göre değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Tipi: Sans'ı Aç

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sol Dolgu: 4vw
• Sağ Dolgu: 4vw

2. Satır Ekle

Sütun Yapısı

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

Arka plan rengi

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

• Arka Plan Rengi: #ffffff

boyutlandırma

Tasarım sekmesine gidin ve maksimum genişliği artırın.

• Maksimum Genişlik: %100

aralık

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

• Üst Dolgu: 3vw
• Alt Dolgu: 8vw
• Sol Dolgu: 7vw
• Sağ Dolgu: 7vw

Sınır

Satırın sol alt ve sağ üst köşelerine '20vw' ekleyerek devam edeceğiz. Aşağıdaki ayarları da kullanarak bir üst kenarlık ekleyeceğiz:

• Üst Kenar Genişliği: 1.2vw
• Üst Kenar Rengi: #00dcff

Kutu Gölge

Ayrıca sayfada derinlik oluşturmak için ince bir kutu gölgesi ekliyoruz.

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

Z İndeksi

Satırın Görüntü Modülünün üstünde göründüğünden emin olmak için, görünürlük ayarlarında Z Dizini satırını artıracağız.

• Z İndeksi: 10

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Satır ayarlarını tamamladıktan sonra satırın ilk sütununa bir Blurb Modülü ekleyebilirsiniz. Seçtiğiniz bazı içeriği girin.

Simge Seç

Daha sonra istediğiniz bir simgeyi seçin.

Simge Ayarları

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

• Simge Rengi: #000000
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 5vw

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 1.1vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Başlık Harf Aralığı: -1px

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Hizalama: Orta
• Gövde Metni Boyutu: 0.8vw (Masaüstü), 1.6vw (Tablet), 2vw (Telefon)
• Gövde Çizgisi Yüksekliği: 1.5vw (Masaüstü), 3vw (Tablet ve Telefon)

Blurb Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki Bulanıklık Modülünü tamamladıktan sonra, onu iki kez klonlayabilir ve kopyaları satırın kalan iki sütununa yerleştirebilirsiniz.

İçeriği Değiştir

Her iki kopyanın da içeriğini değiştirdiğinizden emin olun ve işiniz bitti!

Ön izleme

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

Son düşünceler

Bu gönderide, bir sonraki Divi projeniz için kullanabileceğiniz çarpıcı bir kahraman bölümü oluşturmak için Divi'nin yerleşik satır kenarlıkları ile nasıl yaratıcı olabileceğinizi gösterdik. Sıfırdan güzel bir örnek oluşturduk ve siz de JSON dosyasını ücretsiz olarak indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.