Divi'nin Dönüştürme Seçenekleriyle Çapraz Tasarım Yapısı Oluşturma (Ücretsiz İndirin!)

Her zaman Divi ile sahip olduğunuz tasarım olanaklarını genişletmenin yollarını arıyoruz. Ve dönüştürme seçenekleri güncellemesi çıktığından beri, özel kodlama bilgisine ihtiyaç duymadan birçok yeni teknik mümkün hale geldi.

Bu yazıda, size çarpıcı bir diyagonal tasarım yapısının nasıl oluşturulacağını göstereceğiz. Yeniden oluşturacağımız tasarım, kahraman bölümü için harika çalışıyor ve kurmak istediğiniz her tür web sitesiyle eşleşiyor. Eğitimin sonunda, 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.

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Degrade Arka Plan

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve aşağıdaki ayarları kullanarak degrade bir arka plan ekleyin:

• Renk 1: #ffd633
• Renk 2: #efefe
• Gradyan Yönü: 217deg
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45

aralık

Ardından, tasarım sekmesine gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 4vw
• Alt Dolgu: 12vw

taşma

Dönüştürme seçeneklerinin bölüm kapsayıcısını aşmadığından emin olmamız gerekiyor. Bunu başarmak için, bölümün ana öğesine tek bir CSS kodu satırı ekleyeceğiz.

overflow: hidden;

1. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin. Bu gönderinin bir sonraki adımında, bir görüntü alanı birimi kullanarak bazı özel sol ve sağ dolgu değerleri ekleyerek az önce kaldırdığımız alanı değiştireceğiz. Bu, tasarımın tüm ekran boyutlarında duyarlı kalmasını sağlayacaktır.

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

aralık

Devam edin ve sonraki boşluk ayarlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 25vw (Masaüstü), 16vw (Tablet), 7vw (Telefon)
• Sağ Dolgu: 25vw (Masaüstü ve Tablet), 27vw (Telefon)

Görüntülemek

Ayrıca, satırın ana öğesine tek bir CSS kodu satırı ekleyerek, daha küçük ekran boyutlarında sütunların yan yana görünmesini sağlıyoruz.

display: flex;

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

Başlık ekle

Modül eklemeye başlama zamanı! 1. sütuna bir Blurb Modülü ekleyin ve istediğiniz bir başlığı girin.

İllüstrasyon Yükle

Seçtiğiniz bir çizimi yükleyerek devam edin. Bu eğitim boyunca kullanacağımız uygulamalar, Uygulama Geliştirici Düzen Paketinin bir parçasıdır. Çizimleri yazıya giderek ve sonunda indirerek ücretsiz olarak indirebilirsiniz.

Arka plan

Ardından, Blurb Module'e tamamen beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Başlık Metni Ayarları

Tasarım sekmesine geçin ve başlık metni ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 0,5vw (Masaüstü), 1,6vw (Tablet), 2,4vw (Telefon)
• Başlık Harf Aralığı: 1px
• Başlık Satırı Yüksekliği: 1,6em

aralık

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

• Üst Dolgu: 1.3vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Alt Dolgu: 1.3vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Sol Dolgu: 1vw (Masaüstü), 7vw (Tablet ve Telefon)
• Sağ Doldurma: 1vw (Masaüstü), 7vw (Tablet ve Telefon)

Sınır

Blurb Module'ün sol üst ve sağ üst köşelerine '1vw' ekleyerek devam edin.

Kutu Gölge

Son olarak, aşağıdaki ayarları kullanarak modüle bir kutu gölgesi ekleyin:

• Kutu Gölge Dikey Konumu: 10px
• Kutu Gölge Bulanıklığı Gücü: 60px
• Gölge Rengi: rgba(39,39,52,0.37)

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

Blurb Module'ü özelleştirdikten sonra, devam edip iki kez klonlayabilirsiniz. Kopyaları satırın kalan iki sütununa yerleştirin.

Kopyalama #1'i Değiştir

Kopyalama ve Çizimi Değiştir

İlk kopyanın kopyasını ve resmini değiştirin.

Aralığı Değiştir

Boşluk ayarları ile birlikte.

• Üst Marj: -3vw
• Üst Dolgu: 2.7vw (Masaüstü), 8vw (Tablet), 11vw (Telefon)
• Alt Dolgu: 2.7vw (Masaüstü), 8vw (Tablet), 11vw (Telefon)

2. Kopyaları Değiştir

Kopyalama ve Çizimi Değiştir

İkinci kopyanın kopyasını ve resmini de değiştirin.

2. Satır Ekle

Sütun Yapısı

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

Degrade Arka Plan

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve buna degrade bir arka plan ekleyin.

• Renk 1: #fff20a
• Renk 2: #ffb200
• Gradyan Yönü: 165deg

boyutlandırma

Ardından, tasarım sekmesine gidin ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

• Bu Satırı Tam Genişlikte Yap: Evet

Kutu Gölge

Son olarak, satıra bir kutu gölgesi ekleyin.

• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 100 piksel
• Gölge Rengi: rgba(0,0,0,0.39)

Bölücü Modülü Ekle

görünürlük

Bu satırı yalnızca tasarım amacıyla kullanıyoruz, herhangi bir modülü sergilemek için değil. Ancak satırın tam olarak nasıl göründüğünü bildiğimizden emin olmak için ona bir Bölücü Modül eklememiz gerekecek. Modülün görünmesini istemiyoruz, bu nedenle 'Show Divider' seçeneğinin devre dışı olduğundan emin olun.

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

Satırlara Dönüştürme Seçeneklerini Uygula

1. sıra

Dönüştür Çeviri

Şimdi ilk iki sırayı tamamladığımıza göre, onları oluşturmayı hedeflediğimiz diyagonal tasarım yapısına uyacak şekilde dönüştüreceğiz. İlk satırın ayarlarını açarak başlayın ve transform translate değerlerini değiştirin.

• Alt: 30vw
• Sağ: 6vw

Dönüştür Döndür

Ardından, sol dönüşüm döndürme değerini değiştirin.

• Sol: 37 derece

2. sıra

Ölçeği Dönüştür

İkinci satırın ayarını açarak devam edin ve dönüştürme ölçeği değerlerini değiştirin.

• Alt: %133 (Masaüstü), %171 (Tablet), %176 (Telefon)
• Sağ: %133 (Masaüstü), %171 (Tablet), %176 (Telefon)

Dönüştür Çeviri

Dönüştürme değerleriyle birlikte.

• Alt: 12vw (Masaüstü), 1vw (Tablet), 3vw (Telefon)
• Sağ: -2vw (Masaüstü), -6vw (Tablet), -4vw (Telefon)

Dönüştür Döndür

Ve dönüştürme döndürme ayarlarındaki satırı da döndürün.

• Sol: 37 derece

3. Satır Ekle

Sütun Yapısı

Bir sonraki ve son sıraya! Bu satırı ve sütunlarını kullanarak istediğiniz her türlü bilgiyi paylaşabilirsiniz. Bu gönderinin önizlemesinde gördüğünüz tasarımın aynısını yeniden oluşturmak için aşağıdaki sütun yapısını seçin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

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

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

H1 İçeriği Ekle

Modül eklemeye başlama zamanı! Metin Modülü başlığıyla başlayacağız. Seçtiğiniz bazı H1 içeriğini girin.

H1 Metin Ayarları

Ardından tasarım sekmesine gidin ve H1 metin ayarlarını değiştirin.

• Başlık Yazı Tipi: Poppins
• Başlık Metni Boyutu: 3vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)
• Başlık Harf Aralığı: -2px

aralık

Daha sonra bazı özel boşluk değerleri ekleyin.

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

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

İhtiyacımız olan ikinci modül başka bir Metin Modülü. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.8vw (Masaüstü), 1.5vw (Tablet), 2.2vw (Telefon)
• Metin Satır Yüksekliği: 2.6em

aralık

Boşluk değerlerini de değiştirin.

• Üst Marj: 3vw (Telefon), 5vw (Telefon)
• Sol Kenar Boşluğu: 10vw
• Sağ Kenar Boşluğu: 28vw (Tablet), 20vw (Telefon)

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

Kopya Ekle

İhtiyacımız olan sonraki ve son modül bir Düğme Modülü. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Ardından tasarım sekmesine gidin ve düğme ayarlarını değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 0.9vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Kenar Genişliği: 1px
• Düğme Kenar Rengi: #000000
• Düğme Sınır Yarıçapı: 1 piksel
• Düğme Yazı Tipi: Poppins
• Yazı Tipi Ağırlığı: Hafif

aralık

Son olarak, bazı özel boşluk değerleri kullanarak modülünüzü şekillendirin ve işiniz bitti!

• Üst Marj: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 10vw
• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

Diyagonal Tasarım Bölümünü ÜCRETSİZ İndirin

Ücretsiz diyagonal tasarım bölümüne el atmak için öncelikle aşağıdaki butondan indirmeniz gerekecek. İ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!

Ö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, yalnızca Divi'nin yerleşik seçeneklerini kullanarak çarpıcı bir diyagonal tasarım yapısının nasıl oluşturulacağını gösterdik. Bu öğreticinin, yeni Divi dönüştürme seçeneklerine aşina olmanıza yardımcı olacağını umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!