Divi ile Yatay Vurgulu Izgaralar ve Gizli Taşma Kullanılarak Görüntüler Nasıl Ortaya Çıkarılır

Divi'nin yeni boyutlandırma seçenekleri çıktığından, vurgulu açıklamaları nasıl oluşturacağınızı gösteren birkaç öğretici oluşturduk. Bu eğitimlerde, gizli içerik dikey olarak yerleştirildi. Ancak bazı durumlarda bunun yerine yatay bir ifşa oluşturmak isteyebilirsiniz. Bu yazıda, vurgulu ızgaraları ve Divi'nin taşma seçeneklerini kullanarak görüntüleri nasıl ortaya çıkaracağınızı göstereceğiz. Bu işi yapmak biraz farklı bir yaklaşım gerektirir. Tek sütunlu bir satır kullanacağız ve tüm modülleri birbirinin altına yerleştireceğiz ve üzerine gelindiğinde sütunu yatay bir ızgaraya dönüştüreceğ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

Hover Grids Layout'u ÜCRETSİZ İndirin

Ellerinizi ücretsiz vurgulu ızgara 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!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın.

Yeni Satır Ekle

Sütun Yapısı

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

Varsayılan Degrade Arka Planı

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:

• Renk 1: #b1ffc4
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %28
• Bitiş Konumu: %28

Hover Gradyan Arka Planı

Fareyle üzerine gelindiğinde degrade arka planını değiştirin.

• Renk 1: #b1ffc4
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Sol
• Başlangıç ​​Konumu: %5
• Bitiş Konumu: %5

aralık

Aralık ayarlarına geçin ve sonraki dolgu ve kenar boşluğu değerlerini değiştirin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 50px

Varsayılan Kenarlık

Sonraki sağ üst ve sağ alt köşelere '50px' kenarlık yarıçapı ekleyin.

fareyle üzerine gelin

Fareyle üzerine gelindiğinde köşeleri '0px' değerine getirin.

Varsayılan Kutu Gölgesi

Aşağıdaki ayarları kullanarak daha sonra ince bir kutu gölgesi ekleyin:

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

Vurgulu Kutu Gölgesi

Gölge rengini tamamen şeffaf olanla değiştirerek fareyle üzerine gelindiğinde kutu gölgesini kaldırın.

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

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Bir Metin Modülü ile başlayarak modül eklemeye başlama zamanı. Seçtiğiniz bazı H2 içeriğini girin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Acme
• Başlık 2 Yazı Tipi Stili: Altı Çizili
• Başlık 2 Alt Çizgi Rengi: #00ff3f
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 3vw

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 6vw
• Alt Dolgu: 7vw
• Sol Dolgu: 2vw

Sütuna Resim Modülü Ekle

Fotoğraf yükleniyor

Bu sütunda ihtiyacımız olan ikinci modül bir Görüntü Modülüdür. Seçtiğiniz bir yatay resmi yükleyin.

Hafif kutu

Sonraki bağlantı ayarlarında ışık kutusu seçeneğini etkinleştirin.

• Lightbox'ta Aç: Evet

boyutlandırma

Ve boyutlandırma ayarlarında resmin tam genişliğini zorlayın. Bu, görüntünün tüm ekran boyutlarında duyarlı kalmasını sağlayacaktır.

• Tam Genişliği Zorla: Evet

Görüntü Modülünü İki Kez Klonla

İlk Görüntü Modülünü tamamladığınızda, devam edip iki kez klonlayabilirsiniz.

Resimleri Değiştir

Her iki kopyadaki görüntüleri değiştirin. Yüklediğiniz resimlerin ilk resimle aynı boyuta sahip olduğundan emin olun.

Satıra Hover Efekti Ekle

boyutlandırma

Artık temel satır ve modül ayarlarını tamamladığımıza göre, fareyle üzerine gelme efektini gerçekleştirme zamanı! Satırın yüksekliğini ve genişliğini değiştirerek ve taşmaları gizleyerek başlayacağız. Satırın boyutlandırma ayarlarını açın ve aşağıdaki değişiklikleri yapın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: 20%
• Maksimum Genişlik: %100
• Yükseklik: 15.9vw

Hover Boyutlandırma

Fareyle üzerine gelindiğinde genişliği '%100'e getirin. Bu, satır üzerine gelindiğinde görüntülerin görünmesini sağlar.

• Genişlik: %100

görünürlük

Sonraki gelişmiş sekmeye geçin ve taşmaları gizleyin. Bu, ziyaretçiler Metin Modülü üzerine gelmeden (masaüstü) veya tıklamadan (tablet/mobil) önce görüntülerin gizlenmesini sağlayacaktır.

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

geçişler

Geçiş ayarlarında geçiş süresini de değiştiriyoruz.

• Geçiş Süresi: 0ms

Sütun Vurgulu Ana Öğe

Fareyle üzerine gelindiğinde bir ızgara oluşturmak için, sütun ayarlarını açacağız, gelişmiş sekmeye gideceğiz ve aşağıdaki CSS kod satırlarını vurgulu ana öğeye yerleştireceğiz:

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

Satırı İki Kez Klonla

İlk satırı tamamladıktan sonra, istediğiniz kadar klonlayabilirsiniz. Bu özel tasarım örneği için satırı iki kez klonluyoruz.

Yinelenen Satır #1 Gradyan Arka Planını Değiştir

İkinci satırın degrade arka planının ilk degrade rengini değiştirin.

• Renk 1: #ffdc96

Yinelenen Satır #2 Gradyan Arka Planını Değiştir

Üçüncü sıra için de aynısını yapın.

• Renk 1: #b7c7ff

Her İki Çoğaltmanın Metin Modülü Kopyalama ve Alt Çizgi Rengini Değiştir

Her iki Metin Modülü kopyasının alt çizgi rengini kopyayla birlikte değiştirerek devam edin ve işiniz bitti!

• Alt Çizgi Rengi #1: #ffaa00
• Alt Çizgi Rengi #2: #0037ff

Ö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 yazıda, Divi'nin taşma seçeneklerini kullanarak yatay vurgulu ızgaralardaki görüntüleri nasıl ortaya çıkaracağınızı gösterdik. Görüntüler masaüstüne getirildiğinde ve tablete/telefona tıklandığında ortaya çıktı. Görüntüleri ortaya çıkarmamıza rağmen, oluşturucu içindeki ayarları değiştirerek istediğiniz her türlü içeriği ortaya çıkarabilirsiniz. Bu öğreticinin, kendi alternatif vurgulu ızgara tasarımlarınızı da oluşturmanız için size ilham vermesini umuyoruz! 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.