Divi Tasarım Izgaranızı Vurgulamak için Sütun Anahatlarını Kullanma

Divi'nin yerleşik öğe yapısı, farklı bölümleri, satırları, sütunları ve modülleri tanımlamak ve biçimlendirmek için geleneksel yöntemlerle kullanılabilir. Ancak, sayfanızdaki tasarım yapılarını geliştirmek için yaratıcı bir şekilde de kullanılabilirler. Bu öğreticide, Divi tasarım kılavuzunuzu vurgulamak için sütun ana hatlarını nasıl kullanacağınızı göstereceğiz. Güzel arka plan sütun ana hatlarını oluşturmak için mutlak konumlu bir satır ayıracağız ve onu bölümümüzdeki diğer satırlarla birleştireceğiz. 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.

masaüstü

Mobil

ÜCRETSİZ Sütun Anahatları Düzenini İndirin

Ellerinizi ücretsiz sütun anahatları düzenine koymak 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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

taşmalar

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve taşmaları gizli olarak ayarlayın. Bu, hiçbir şeyin bölüm kapsayıcısını, özellikle de öğreticide daha sonra ekleyeceğimiz sütun ana hatlarını aşmamasını sağlamaya yardımcı olacaktır.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

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 boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Genişlik: %100
• Maksimum Genişlik: %100
• Satır Hizalama: Sağ

aralık

Ardından, bazı özel boyutlandırma ayarlarını kullanarak satırı masaüstünde sayfanın sağ tarafına iteceğiz.

• Üst Kenar Boşluğu: 200 piksel
• Sol Dolgu: %47 (Masaüstü), %6 (Tablet), %10 (Telefon)
• Sağ Dolgu: %6 (Tablet), %10 (Telefon)

Sınır

Üst ve alt kenarlık ekleyerek genel satır ayarlarını tamamlayacağız.

• Üst ve Alt Kenar Genişliği: 4px
• Üst ve Alt Kenar Rengi: #bdffed

Sütun 1 Ayarları

aralık

Genel satır ayarlarını tamamladıktan sonra, ilk sütunun ayarlarını açın ve bazı özel boşluk değerleri ekleyin.

• Üst Dolgu: %12
• Alt Dolgu: %12
• Sol Dolgu: %3
• Sağ Dolgu: %3

Sütun 2 Ayarları

aralık

Daha sonra ikinci sütunun ayarlarını açın ve bunun için aşağıdaki boşluk ayarlarını kullanın:

• Üst Dolgu: %12
• Alt Dolgu: %12
• Sol Dolgu: %5 (Masaüstü), %20 (Tablet), %15 (Telefon)
• Sağ Dolgu: %5 (Masaüstü), %20 (Tablet), %15 (Telefon)

Metin Modülü #1'i Sütun 1'e ekleyin

H2 İçeriği Ekle

Sütun 1'de H2 İçeriğini içeren bir Metin Modülü ile başlayarak modül ekleme zamanı.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: Kaynak Kodu Pro
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Rengi: rgba(35,38,211,0.46)
• Başlık 2 Metin Boyutu: 4vw (Masaüstü), 60px (Tablet), 50px (Telefon)
• Başlık 2 Harf Aralığı: 5px

• Başlık 2 Metin Gölgesi Yatay Uzunluk: 0.05em
• Başlık 2 Metin Gölgesi Dikey Uzunluğu: 0.07em
• Başlık 2 Metin Gölge Rengi: #bdffed

Dikey Hareket

Biraz dikey hareket de ekleyeceğiz.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 2
• Orta Ofset: 0
• Bitiş Ofseti: -2
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Kaynak Kodu Pro
• Metin Rengi: rgba(35,38,211,0.76)
• Metin Boyutu: 15px
• Metin Satır Yüksekliği: 2em

Dikey Hareket

Bu modül için de biraz dikey hareket kullanacağız.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 2
• Orta Ofset: 0
• Bitiş Ofseti: -2
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Sütun 1'de ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Rengi: #2326d3
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Kaynak Kodu Pro
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

aralık

Ardından, bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Dikey Hareket

Ve biraz dikey hareket ekleyerek modül ayarlarını tamamlayın.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 2
• Orta Ofset: 0
• Bitiş Ofseti: -2
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

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

1:1 Oran Resmi Yükle

Sütun 2'de, bir Görüntü Modülüne ihtiyacımız olan tek modül. 1: 1 oranında bir resim yükleyin.

boyutlandırma

Modülün tasarım sekmesine gidin ve görüntü üzerinde tam genişliğe zorlayın.

• Tam Genişliği Zorla: Evet

Sınır

Daha sonra yuvarlak köşeler ekleyerek resmi bir daireye çevireceğiz.

• Tüm Kornerler: 50vw

Kutu Gölge

Ardından, bir kutu gölgesi ekleyeceğiz.

• Kutu Gölgesi Yatay Konumu: 30px
• Kutu Gölgesi Dikey Konumu: 30px
• Gölge Rengi: rgba(38,255,197,0.3)

Dikey Hareket

Ve biraz dikey hareket ekleyerek modül ayarlarını tamamlayacağız.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -2
• Orta Ofset: 0
• Bitiş Ofseti: 2
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Tüm Satırı İki Kez Klonla

İlk satırı tamamladıktan sonra iki kez klonlayabilirsiniz.

Tüm İçeriği ve Görselleri Değiştir

Tüm yinelenen içeriği ve resimleri değiştirdiğinizden emin olun.

Son Satıra Alt Kenar Boşluğu Ekle

Ve son satırın ayarlarını açın, boşluk ayarlarına gidin ve biraz alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu: 200 piksel

Yeni Satırı (Bölümün En Üstünde) Sütun Anahatlarına Ayırın

Sütun Yapısı

Artık genel satırları yerleştirdiğimize göre, sıra sütun ana hatlarını eklemeye geldi. Bunu yapmak için, aşağıdaki sütun yapısını kullanarak bölümümüzün en üstüne yeni bir satır ekleyeceğiz:

boyutlandırma

Satır ayarlarını açın, tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %90
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguları da kaldırıyoruz.

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

Konum

Ardından, gelişmiş sekmeye geçin ve tüm satırı yeniden konumlandırın. Konumu mutlak olarak ayarlayarak, sayfanın içindeki satırın kapladığı kapsayıcı alanını kaldıracağız.

• Pozisyon: Mutlak
• Yer: Üst Merkez

Tüm Sütun Ana Öğe CSS Genişliği

Genel satır ayarları yapıldığında, sütunları şekillendirmeye başlama zamanı. İlk olarak, satırın ana öğesinin içinde bir satır CSS Kodu kullanarak her sütuna bir miktar özel genişlik ekleyin. Bu, sütun yapısını daha küçük ekran boyutlarında tutmamıza yardımcı olacaktır.

width: 20% !important;

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve farklı ekran boyutlarındaki dolgu değerlerini değiştirin.

• Üst Dolgu: 150vh (Masaüstü), 250vh (Tablet ve Telefon)
• Alt Dolgu: 150vh (Masaüstü), 250vh (Tablet ve Telefon)

Sınır

Sol kenarlık da ekleyin.

• Sol Kenar Genişliği: 5px
• Sol Kenar Rengi: #bdffed
• Sol Kenarlık Stili: Kesikli

Sütun 2 Ayarları

Arka plan rengi

Ardından, sütun 2 ayarlarını açacağız ve bir arka plan rengi ekleyeceğiz.

• Arka Plan Rengi: #b5fff1

Sınır

Biz de bir sağ kenarlık kullanacağız.

• Sağ Kenar Genişliği: 4px
• Sağ Kenar Rengi: #bdffed
• Sağ Kenar Stili: Katı

Sütun 3 Ayarları

Sınır

Üçüncü sütunda, aşağıdaki ayarlarla bir sağ kenarlık kullanacağız:

• Sağ Kenar Genişliği: 4px
• Sağ Kenar Rengi: rgba(35,38,211,0.12)
• Sağ Kenarlık Stili: Kesikli

Sütun 4 Ayarları

Sınır

Ardından, sütun 4 ayarlarını açacağız ve kenarlık ayarlarını buna göre değiştireceğiz:

• Sağ Kenar Genişliği: 4px
• Sağ Kenar Rengi: #bdffed
• Sağ Kenar Stili: Katı

Sütun 5 Ayarları

Sınır

Sütun 5'e de bir sağ kenarlık ekleyerek sütun ayarlarını tamamlayacağız.

• Sağ Kenar Genişliği: 4px
• Sağ Kenar Rengi: rgba(35,38,211,0.12)
• Sağ Kenarlık Stili: Kesikli

Sütun 1 ve 2'ye Bölücü Modülü Ekleme

görünürlük

Bu gönderinin başındaki mobil önizlemede, masaüstünden biraz farklı bir sonuç fark edebildiniz. Bu belirli sütunlara bir Bölücü Modül ekleyerek yalnızca sütun 1 ve 2 sütun anahatlarının görünmesine izin veriyoruz. Görünürlük ayarlarında her iki ayırıcıyı da gizlediğinizden emin olun ve işiniz bitti!

• Bölücüyü Göster: Hayır

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin yerleşik sütunlarıyla nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, Divi tasarım ızgaranızı vurgulamak için sütun ana hatlarını nasıl kullanacağınızı gösterdik. Bu yaklaşım, ek görüntü düzenleme yazılımına ihtiyaç duymadan benzersiz bir tasarım oluşturmaya yardımcı olur. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

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.