Divi ile Kopyanıza Dönüştürülmüş Gölgeler Ekleme

Divi'nin yeni dönüştürme seçenekleriyle, gerçek zamanlı olarak gerçekleşen tüm dönüştürme ayarlarını görüntülerken güzel web tasarımı oluşturabilirsiniz. Ve farklı modülleri birbiriyle birleştirerek, üzerinde çalıştığınız bölümün görünümünü ve hissini yükseltmeye yardımcı olacak bazı benzersiz ve kusursuz efektler elde edebilirsiniz. Bu özel gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak kopyanız için dönüştürülmüş gölgeler oluşturmaya odaklanacağız. Örnek 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

Dönüştürülmüş Gölgeler Kahraman Bölüm Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz dönüştürülmüş gölgeler kahraman bölümü 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!

Youtube Kanalımıza Abone Olun

Kahraman Bölümünü Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

aralık

Yapmanız gereken ilk şey, yeni veya mevcut bir sayfaya yeni bir normal bölüm eklemek. Bölüm ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

taşma

Gelişmiş sekmesine geçin ve bölüm taşmalarının gizlendiğinden emin olun. Bu gönderide daha sonra, bazı dönüştürme seçeneklerini kullanacağız ve taşmayı gizlemek, hiçbir şeyin bölüm kapsayıcısını aşmamasını sağlayacaktır.

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

Yeni 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 aşağıdaki ayarları uygulayarak satırın tüm ekran genişliğini kaplamasına izin verin:

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

aralık

Boşluk ayarlarına geçin, varsayılan alt dolguyu kaldırın ve satırın sol ve sağ tarafına biraz özel alan ekleyin.

• Alt Dolgu: 0px
• Sol Dolgu: 4vw
• Sağ Dolgu: 4vw

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

İçerik Ekle

Bir Metin Modülü ile başlayarak farklı modülleri eklemeye başlama zamanı. Seçtiğiniz kopyayı girin.

Metin Ayarları

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

• Metin Yazı Tipi: Playfair Ekranı
• Metin Hizalama: Sağ
• Metin Rengi: #ffffff
• Metin Boyutu: 11vw
• Metin Satırı Yüksekliği: 1em

• Metin Gölgesi Dikey Uzunluğu: 0.02em
• Metin Gölge Bulanıklığı Gücü: 0.16em
• Metin Gölge Rengi: rgba(0,0,0,0.44)

Klon Metin Modülü #1

İçeriği Değiştir

İlk Metin Modülünü tamamladığınızda, onu klonlayabilir ve kopyanın kopyasını değiştirebilirsiniz.

Metin Modülü #1 Üstüne Yeni Metin Modülü Ekle

İçerik Ekle

Başka bir Metin Modülü olan bir sonraki modüle geçin. Bu sefer modülü sütunun en üstüne yerleştiriyoruz. Sonraki adımlarda, bu Metin Modülünü bir sonraki modülün dönüştürülmüş metin gölgesine dönüştüreceğiz. Aynı kopyayı kullandığınızdan emin olun.

Metin Ayarları

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

• Metin Yazı Tipi: Playfair Ekranı
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Hizalama: Sağ
• Metin Rengi: rgba(94,150,187,0.28)
• Metin Boyutu: 11vw
• Metin Harf Aralığı: 4.5px
• Metin Satırı Yüksekliği: 1em

Dönüştür Çeviri

Bir sonraki modülün dönüştürülmüş metin gölgesi gibi görünmesi için modülü dönüştürme zamanı! Aralık ayarlarına gidin ve transform translate değerlerini değiştirin.

• Sağ: 13.9vw
• Alt: -2.1vw

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

Modülü de döndürün.

• Merkez: 291deg

Eğriliği Dönüştür

Ve alt çarpıklık değerini artırın.

• alt: 30 derece

Dönüştürülmüş Metin Modülünü Klonla ve Metin Modülünün Üstüne Yerleştir #2

İçeriği Değiştir

Dönüştürülen metin gölge modülünü oluşturmayı tamamladığınızda, onu klonlayabilir ve sütundaki üçüncü Metin Modülünün üzerine yerleştirebilirsiniz. Kopyayı değiştirdiğinizden emin olun.

Metin Ayarlarını Değiştir

Tasarım sekmesine gidin ve metin rengini değiştirin.

• Metin Rengi: #f3e4df

Boşluk Ekle

Dönüştürülen metin gölge modülü tarafından yaratılan fazladan boşluğu telafi etmek için bir miktar negatif üst kenar boşluğu ekleyeceğiz.

• Üst Marj: -12vw

Sütun 1'e Açıklama Metni Modülü Ekle

İçerik Ekle

Sütun 1'de ihtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz bir açıklama girin.

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Hizalama: Sağ
• Metin Satırı Yüksekliği: 2.3em

boyutlandırma

Boyutlandırma ayarlarında modülün genişliğini farklı ekran boyutlarında değiştirin.

• Genişlik: %53 (Masaüstü), %70 (Tablet), %90 (Telefon)
• Modül Hizalaması: Sağ

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

Kopya Ekle

Bir Düğme Modülü olan sütun 1'deki sonraki ve son modüle geçin. Seçtiğiniz bir kopyayı girin.

hizalama

Tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Sağ

Düğme Ayarları

Düğme ayarlarını da değiştirin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Arka Plan Rengi: #5e96bb
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 50px
• Düğme Yazı Tipi: Playfair Ekranı

aralık

Ve düğmenin stilini tamamlamak için boşluk ayarlarıyla oynayın.

• Üst Marj: 2vw
• Alt Marj: 3vw
• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

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

1:1 Resim Yükle

İkinci sütuna geç! Burada iki Görüntü Modülüne ihtiyacımız olacak. İlk Görüntü Modülü ile başlayın ve 1:1 oranında bir görüntü yükleyin. Bu, hem genişliğin hem de yüksekliğin aynı piksel değerine sahip olması gerektiği anlamına gelir. Resminizin kare olduğundan emin olmak, sonraki adımlarda onu bir daireye dönüştürmeye yardımcı olacaktır.

boyutlandırma

Görüntü Modülünün boyutlandırma ayarlarına gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

aralık

Ayrıca bir miktar üst marj ekliyoruz.

• Üst Marj: 2vw

Sınır

Görüntü Modülünü bir daireye dönüştürmek için köşelerin her birine '50vw' ekleyeceğiz. Gerçekten yüksek bir değer kullanmak, farklı ekran boyutlarında dairesel bir şekil tutmamıza yardımcı olur.

Kutu Gölge

Son olarak, aşağıdaki ayarları kullanarak Görüntü Modülüne bir kutu gölgesi de ekleyeceğiz:

• Kutu Gölgesi Yatay Konumu: -300px
• Kutu Gölgesi Dikey Konumu: -300px
• Gölge Rengi: rgba(94,150,187,0.28)

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

1:1 Resim Yükle

2. sütundaki ikinci Görüntü Modülüne geçiyoruz. Yine, yüklediğimiz görüntünün 1:1 oranında olduğundan emin oluyoruz.

boyutlandırma

Tasarım sekmesine gidin ve genişliği değiştirin.

• Genişlik: %62

Sınır

Bu Görüntü Modülünün her bir köşesine de '50vw' ekleyin.

Kutu Gölge

Ayrıca özel bir kutu gölgesi ekleyeceğiz.

• Kutu Gölgesi Yatay Konumu: -200px
• Kutu Gölgesi Dikey Konumu: 150 piksel
• Gölge Rengi: #d4c1bd

Dönüştür Çeviri

Son olarak, dönüştürme çevirme seçeneğini kullanarak Görüntü Modülünün konumunu değiştirin ve işiniz bitti!

• Sağ: -13vw
• Alt: 19vw

Ö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, dönüştürülmüş metin gölgeleri oluşturmak için yinelenen Metin Modüllerini yaratıcı bir şekilde nasıl kullanacağınızı gösterdik. Bu, kopyanızı ön plana çıkarmanın ve Divi'nin yerleşik seçeneklerini başka bir perspektiften kullanmanın ilginç bir yoludur. Umarız bu öğreticiyi beğenmişsinizdir ve 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.