Hover'da Genişleyen Bölüm İçeriği Oluşturmak için Divi'nin Dönüştürme Seçeneklerini Kullanma

Bugün, Divi'nin yeni dönüştürme seçenekleriyle birlikte gelen dönüştürme ölçeği tasarım seçeneğini vurgulayacağız. Dahası, bölümlerin vurgulu üzerinde zarif bir şekilde genişlemesine izin veren çarpıcı bir tasarımı yeniden yaratacağız.

Bu tasarımı, oluşturduğunuz her türlü web sitesi için kullanabilirsiniz. İlgili içeriği yapılandırılmış ve minimal bir şekilde paylaşmanıza yardımcı olur. Bu eğitimin sonunda, tüm sayfa düzenini ü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

Yeniden Yaratmaya Başlayalım!

1. Bölüm Ekle

aralık

Yeni bir sayfa oluşturarak başlayın. İlk normal bölümünüzü sayfaya ekleyin, bölüm ayarlarını açın ve boşluk ayarlarındaki tüm varsayılan üst ve alt dolguyu kaldırın.

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

Yeni 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.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın. Bunu satır ve bölümün kaplayacağı alanı sınırlamak için yapıyoruz.

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

Bölücü Modülü Ekle

görünürlük

Bu satırda ihtiyacımız olan tek modül bir Bölücü Modül. Bu öğreticinin sonunda, ayırıcıyı sonraki tüm bölümleri birbirine bağlayacak dikey bir parçaya dönüştüreceğiz. Bölücü Modülünü ekledikten sonra, 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Renk

Ardından tasarım sekmesine gidin ve ayırıcının rengini siyah olarak değiştirin.

• Renk: #000000

boyutlandırma

Boyutlandırma değerlerini de değiştirin.

• Bölücü Ağırlığı: 1px
• Yükseklik: 0 piksel

aralık

Ve bazı negatif sol ve sağ kenar boşlukları ekleyerek bölücünün uzunluğunu artırın.

• Sol Kenar Boşluğu: -135vw (Masaüstü), -300vw (Tablet), -340vw (Telefon)
• Sağ Kenar Boşluğu: -135vw (Masaüstü), -300vw (Tablet), -340vw (Telefon)

2. Bölüm Ekle

Arka plan rengi

Bir sonraki normal bölüme! Yeni bölümü ekledikten sonra bölüm ayarlarını açın ve tamamen beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 5vw
• Alt Dolgu: 5vw

Varsayılan Kenarlık

Bölüme de bir kenarlık ekleyin.

• Kenar Genişliği: 1px
• Kenar Rengi: #000000

fareyle üzerine gelin

Ve fareyle üzerine gelindiğinde kenarlık genişliğini kaldırın.

• Kenar Genişliği: 0px

Varsayılan Kutu Gölgesi

Ayrıca fareyle üzerine gelindiğinde bir kutu gölgesi ekliyoruz. Bunu yapmak için önce varsayılan bir tane eklememiz gerekecek. Kutu gölgesinin varsayılan olarak görünmediğinden emin olmak için tamamen şeffaf bir gölge rengi kullanıyoruz.

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

Vurgulu Kutu Gölgesi

Aşağıdaki renk kodunu kullanarak üzerine gelindiğinde gölge rengini değiştirin:

• Gölge Rengi: rgba(0,0,0,0.13)

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme 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 bölümün tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Metin Modülü Ekle

H2 İçeriği Ekle

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül, bazı H2 içeriğine sahip bir Metin Modülü.

H2 Metin Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını kendi tercihinize göre değiştirin.

• Başlık 2 Yazı Tipi: Abril Fatface
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 7vw

aralık

Bazı özel kenar boşluğu değerleri de ekleyin.

• Alt Marj: 5vw
• Sol Kenar Boşluğu: 5vw
• Sağ Marj: 5vw

Bölücü Modülü Ekle

görünürlük

Bu satırda ihtiyacımız olan sonraki ve son modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Renk

Ardından tasarım sekmesine gidin ve ayırıcı rengini siyah olarak değiştirin.

• Renk: #000000

2. Satır Ekle

Sütun Yapısı

İkinci sıraya! Aşağıdaki sütun yapısını kullanın:

boyutlandırma

Yine, tasarım sekmesindeki boyutlandırma ayarlarını değiştirerek satırın ekranın tüm genişliğini kapladığından emin oluyoruz.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ayrıca, boşluk ayarlarına bazı özel sol ve sağ dolgular ekleyerek satırın boyutunu biraz küçültüyoruz.

• Sol Dolgu: 10vw
• Sağ Dolgu: 10vw

Görüntülemek

Daha küçük ekran boyutlarında üç sütunun hepsinin yan yana görünmesini sağlamak için satırın ana öğesine tek bir CSS kodu satırı ekleyeceğiz.

display: flex;

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

İçerik Ekle

Satırın ilk sütununa bir Blurb Modülü ekleyerek devam edin. Seçtiğiniz bazı içeriği girin.

Simge Seç

Sonraki bir simge seçin.

Simge Ayarları

Ardından tasarım sekmesine gidin ve simge rengini değiştirin.

• Simge Rengi: #000000

Başlık Metni Ayarları

Başlık metni ayarlarına geçin ve ayarları kendi tercihinize göre değiştirin.

• Başlık Yazı Tipi: Abril Fatface
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)
• Başlık Satırı Yüksekliği: 2em

Gövde Metni Ayarları

Gövde metni ayarları için de aynı şeyi yapın.

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

aralık

Son olarak, Blurb Module'e bazı özel sol ve sağ kenar boşlukları ekleyin.

• Sol Kenar Boşluğu: 2vw
• Sağ Kenar Boşluğu: 2vw

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

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

3. Satır Ekle

Sütun Yapısı

Bir sonraki ve son satıra. Bunun 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 boyutlandırma ayarlarını değiştirerek satırın bölümün tüm genişliğini almasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Düğme Modülü Ekle

İçerik Ekle

Burada ihtiyacımız olan tek modül bir Düğme Modülü. Seçtiğiniz bir kopyayı ekleyin.

hizalama

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

• Düğme Hizalama: Merkez

Düğme Ayarları

Sonraki düğme ayarlarını değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1.5vw (Masaüstü), 2.5vw (Tablet ve 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: Sans'ı Aç
• Yazı Tipi Ağırlığı: Ultra Kalın

aralık

Ve bazı özel kenar boşluğu ve dolgu değerleri kullanarak düğme için bir şekil oluşturun.

• Üst Marj: 5vw
• Üst Dolgu: 2vw
• Alt Dolgu: 2vw
• Sol Dolgu: 10vw
• Sağ Dolgu: 10vw

Bölüm #2'ye Dönüştürme Ayarları Ekle

Bölüm #2'ye Varsayılan Dönüştürme Ölçeğini Ekle

Sayfamıza eklediğimiz iki bölümü oluşturmayı ve değiştirmeyi bitirdiğimize göre, dönüştürme seçeneklerini uygulamaya başlayabiliriz. 2. bölümü açın ve bazı özel dönüşüm ölçek değerleri ekleyin.

• Alt: %60 (Masaüstü), %90 (Tablet ve Telefon)
• Sağ: %60 (Masaüstü), %90 (Tablet ve Telefon)

Ölçeği Bölüm #2'ye Çevirin

Fareyle üzerine gelindiğinde bu değerleri değiştirin. Daha küçük ekran boyutları için kullandığımız değeri nasıl kullandığımıza dikkat edin. Bunu yapmak, fareyle üzerine gelme efektinin yalnızca daha büyük ekran boyutlarında gerçekleşmesini sağlayacaktır.

• Alt: %90
• Sağ: %90

Bölümü İki Kez Klonla

Ardından, ikinci bölümü iki kez (veya istediğiniz kadar çoğaltın) klonlayın.

Bölüm #1'de Bölücü Modülüne Dönüştürme Döndürme Ekle

Ve ilk bölüme eklediğiniz bölücüyü, dönüştürme döndürme değeriyle oynayarak dönüştürün.

• sol: 90 derece

Genişleyen Bölüm Düzenini ÜCRETSİZ İndirin

Genişleyen bölüm düzenine el 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!

Ö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 öğreticide, Divi'nin yeni dönüştürme seçenekleriyle birlikte gelen dönüştürme ölçeği seçeneğini vurguladık. Bunun da ötesinde, fareyle üzerine gelme efektinin anlamlı olmasını sağlayan ve insanların sayfayı ziyaret ederken sahip oldukları genel kullanıcı deneyimini iyileştiren çarpıcı bir tasarım yarattık. Eğitimin sonunda, tüm düzeni ücretsiz olarak da indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!