Düşük Z İndeks Modülü Kenarlarını Divi ile Arka Plan Olarak Kullanma

Web siteniz için benzersiz bir tasarım oluşturmaya çalışırken, kutunun dışında düşünmek oraya ulaşmanıza yardımcı olabilir. Geçmiş eğitimlerde, yerleşik seçenekleri için sıklıkla bir tasarım öğesi kullandık. Yalnızca yarattığınız tasarımın gerçek zamanlı görünümünü korumanıza yardımcı olmakla kalmaz, aynı zamanda farklı ekran boyutlarında tam olarak istediğiniz şekilde görünmesini sağlamanıza da yardımcı olur. Bugünün Divi eğitiminde, bir modülün düşük z indeksli kenarlıklarını kullanarak çarpıcı bir tasarım yaratmayı ve çok amaçlı kullanılabilen bir tasarımı nasıl kullanacağınızı göstereceğ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

Düşük Z İndeks Modülü Kenar Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz düşük z indeks modülü sınırları 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

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve varsayılan üst ve alt dolguyu kaldırın.

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

taşmalar

Gelişmiş sekmeye geçin ve taşmaları değiştirin.

• 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:

Arka plan rengi

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

• Arka Plan Rengi: #f3f3e6

boyutlandırma

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

• Ö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

Sonraki satırın varsayılan üst ve alt dolgusunu kaldırın.

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

Sütun 1 Ayarları

Satır ayarlarını tamamladıktan sonra ilk sütunun ayarlarını açabilir ve bazı değişiklikler yapabilirsiniz.

Degrade Arka Plan

Aşağıdaki ayarları kullanarak bir degrade arka planı ekleyin:

• Renk 1: rgba(0,0,0,0)
• Renk 2: #2e2d3c
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %54
• Bitiş Konumu: %54

Kutu Gölge

Bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.3)

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

İçerik Kutusunu Boş Bırak

Modül eklemeye başlama zamanı! İlk sütuna bir Metin Modülü ekleyin ve içerik kutusunu boş bırakın. Bu modülü yalnızca yerleşik ayarları için kullanacağız. Konumu nedeniyle (ilk sütundaki ilk modül), modül düşük bir z indeksine sahiptir ve takip eden her şeyin altında görünecektir.

boyutlandırma

Tasarım sekmesinde hareket edin ve farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: 24vw (Masaüstü), 50vw (Tablet ve Telefon)

aralık

Sonraki boşluk ayarlarına gidin ve değerleri aşağıdaki gibi değiştirin:

• Üst Marj: 15vw
• Sol Kenar Boşluğu: 12vw (Masaüstü), 30vw (Tablet ve Telefon)
• Üst Dolgu: 32vw (Masaüstü), 67vw (Tablet), 60vw (Telefon)

Sınır

Bir kenarlık ekleyerek modül tasarımını tamamlayın.

• Kenar Genişliği: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Kenar Rengi: #00ffb2

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

İçerik Ekle

1. sütuna başka bir Metin Modülü ekleyin ve istediğiniz içeriği girin.

Arka plan rengi

Arka plan rengini sütunun ikinci degrade rengiyle eşleştirin.

• Arka Plan Rengi: #2e2d3c

Metin Ayarları

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

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Hizalama: Merkez
• Metin Rengi: #f3f3e6
• Metin Boyutu: 4vw
• Metin Harf Aralığı: -0.2vw

boyutlandırma

Genişliği de değiştirin.

• Genişlik: 27vw

aralık

Ardından, boşluk ayarlarına gidin ve farklı ekran boyutlarındaki değerlerle oynayın.

• Üst Marj: -23.2vw (Masaüstü), -46vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 21.5vw (Masaüstü), 64.5vw (Tablet), 64vw (Telefon)
• Üst Dolgu: 4vw
• Alt Dolgu: 4vw
• Sol Dolgu: 2vw
• Sağ Dolgu: 2vw

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

Modülü dönüştürme ayarlarında döndürerek modülün ayarlarını tamamlayın.

• Sol: 270 derece

Sütuna Resim Modülü Ekle

Fotoğraf yükleniyor

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Görüntü Modülüdür. Seçtiğiniz yarı şeffaf bir resmi yükleyin.

boyutlandırma

Tasarım sekmesine gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin. Bu, görüntüyü farklı ekran boyutlarında duyarlı hale getirmemize yardımcı olacaktır.

• Tam Genişliği Zorla: Evet

aralık

Ardından boşluk ayarlarını açın ve değerleri aşağıdaki gibi değiştirin:

• Resmin Altındaki Boşluğu Göster: Hayır
• Üst Marj: -6vw
• Sol Kenar Boşluğu: 3vw
• Sağ Dolgu: 22vw (Masaüstü), 47vw (Tablet ve Telefon)

Filtreler

Ayrıca filtre ayarlarında görüntünün doygunluğunu da azaltıyoruz.

• Doygunluk: %43

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

İçerik Ekle

Bir sonraki sütuna! Seçtiğiniz bazı içeriği girin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Hizalama: Yasla
• Metin Rengi: #2e2d3c
• Metin Boyutu: 0.9vw (Masaüstü), 2.2vw (Tablet), 2.5vw (Telefon)
• Metin Satır Yüksekliği: 2.5em

aralık

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

• Üst Marj: 10vw (Masaüstü), 15vw (Tablet ve Telefon)
• Sol Dolgu: 8vw
• Sağ Dolgu: 8vw

Klon Metin Modülü

Metin Modülünü tamamladıktan sonra bir kez klonlayın.

Üst Kenar Boşluğunu Kaldır

Kopyanın üst kenar boşluğunu kaldırın.

Sütun 2'deki Her İki Metin Modülü Arasına Yeni Metin Modülü Yerleştirin

İçerik Ekle

Sütundaki mevcut her iki Metin Modülü arasına başka bir Metin Modülü ekleyin ve istediğiniz içeriği girin.

Metin Ayarları

Metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Rengi: #2e2d3c
• Metin Boyutu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
• Metin Satırı Yüksekliği: 1.4em

aralık

Doldurma değerlerini de değiştirin.

• Üst Dolgu: 4vw (Masaüstü), 8vw (Tablet), 10vw (Telefon)
• Alt Dolgu: 4vw (Masaüstü), 8vw (Tablet), 10vw (Telefon)
• Sol Dolgu: 4vw
• Sağ Dolgu: 4vw

Sütun 2'ye Düğme Modülü Ekle

Kopya Ekle

Bir sonraki ve son Düğme Modülüne. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

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

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.9vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #f3f3e6
• Düğme Arka Plan Rengi: #2e2d3c
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Montserrat

aralık

Bazı özel boşluk değerleri ekleyerek Düğme Modülü tasarımını tamamlayın ve işiniz bitti!

• Üst Marj: 2vw (Masaüstü), 8vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 10vw (Masaüstü), 15vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 8vw
• Üst Dolgu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 4vw (Masaüstü), 8vw (Tablet), 10vw (Telefon)
• Sağ Doldurma: 4vw (Masaüstü), 8vw (Tablet), 10vw (Telefon)

Ö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, çarpıcı bir sonuç oluşturmak için boş bir modülün düşük z dizini kenarlık ayarlarını yaratıcı bir şekilde nasıl kullanacağınızı gösterdik. Ayrıca tasarımımıza bazı döndürülmüş kopyalar da ekledik. Bu eğitim, Divi'nin yerleşik seçeneklerinin ne kadar çok yönlü olduğunu ve farklı ekran boyutlarıyla eşleştirmek için her bir öğenin ayarlarını nasıl değiştirebileceğinizi gösterir. 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.