Ana İçeriğe Geç

Yatay rollover ızgaraları ve Divi ile gizli taşma kullanarak görüntüler nasıl ortaya çıkarılır

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Yeni Divi boyutlandırma seçenekleri piyasaya sürüldüğünden bu yana, fareyle üzerine gelme gösterilerinin nasıl oluşturulacağını gösteren birkaç öğretici var. Bu eğitimlerde gizli içerik dikey olarak yerleştirildi. Ancak, bazı durumlarda yatay bir görünüm oluşturmak isteyebilirsiniz. Bu eğitimde, Divi'nin gezinme ızgaralarını ve 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. Bir sütundan oluşan bir satır kullanacağız ve tüm modülleri birbirinin altına yerleştireceğiz. Fareyle üzerine gelindiğinde, sütunu yatay bir ızgaraya dönüştüreceğiz. Ayrıca JSON dosyasını ücretsiz olarak indirebileceksiniz!

Gidelim.

anket

Eğiticiye girmeden önce, farklı ekran boyutlarına nasıl baktığımıza hızlıca göz atalım.

Divi görüntü geçiş önizlemesiRekreasyona başlayalım!

Yeni bölüm ekle

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

Bir divi bölümünün seçimiYeni bir satır ekle

Sütun yapısı

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

Bir divi bölümü ekleVarsayılan degrade arka plan

Daha fazla modül eklemeden satır parametrelerini açın ve aşağıdaki gradyan arka planını ekleyin:

  • 1 renk: #b1ffc4
  • 2 renk: #ffffff
  • Gradyan türü: Radyal
  • Radyal Yön: Merkez
  • Başlama Konumu:% 28
  • Bitiş Pozisyonu:% 28

Divi satır arka plan yapılandırması

Degrade arka plan üzerinde uçan

Gezinerek degrade arka planını değiştirin.

  • 1 renk: #b1ffc4
  • 2 renk: #ffffff
  • Gradyan türü: Radyal
  • Radyal yön: sol
  • Başlama Konumu:% 5
  • Bitiş Pozisyonu:% 5

Divi hattı radyal ayarıaralık

Aralık ayarlarına gidin ve ardından dolgu ve kenar boşluğu değerlerini değiştirin.

  • Üst Dolgu: 0px
  • Alt doldurma: 0px
  • Üst kenar boşluğu: 50px
  • Alt kenar boşluğu: 50px

Divi satırı parametre aralığı ayarı

Varsayılan kenarlık

Sağ üst ve sağ alt köşelere 50 piksel sınır yarıçapı ekleyin.

Çizgi sınırı deezer ayarı

Vurgulu Sınır

Köşeleri "0px" üzerine getirin.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

aşırı uçuş ızgaraları

Varsayılan gölge

Sonra aşağıdaki parametreleri kullanarak ince bir kutu gölge ekleyin:

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

Divi çizgi gölge ayarları

Vurgulu Kutusu Gölge

Üzerine uçarken gölgeyi kutudan çıkarın, gölgenin rengini tamamen saydam bir renkle değiştirin.

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

Yüzen gölge çizgisi divi

Bir sütuna bir metin modülü ekleme

H2 içeriği ekle

Bir metin modülünden başlayarak modül eklemeye başlama zamanı. Seçtiğiniz H2 içeriğini girin.

Divi metin modülü makale başlığı

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

Üstbilgi yazı tipi yapılandırması divi

aralık

Ardından özel dolgu değerleri ekleyin.

  • En iyi dolgu malzemesi: 6vw
  • Alt doldurma: 7vw
  • Sol Dolgu: 2vw

Divi kenar boşluğu yapılandırması

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 resim yükleyin.

Bir divi görüntüsü yükleIşık kutusu

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Görüntüleyicide aç: evet

Divi görüntüleyicide açboyutlandırma

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

  • Tam Genişliği Zorla: Evet

Divi görüntü boyutu değişikliğiGörüntü Modülünü iki kez klonla

İlk görüntü modülünü tamamladıktan sonra, iki kez kopyalayabilirsiniz.

Görüntü modülünü iki kez klonlayın

Görüntüleri Değiştir

İki kopyadaki görüntüleri değiştirin. Yüklediğiniz görsellerin ilk görsel ile aynı boyutta olduğundan emin olun.

Divi görüntüsünü düzenleyinRollover efektini satıra ekleyin

boyutlandırma

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

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Genişlik:% 20
  • Maksimum genişlik:% 100
  • Yükseklik: 15.9vw

Divi hat modülü ayarlarıgezinip

Gezinirken genişliği "% 100" olacak şekilde azaltın. Bu, çizgi üzerine gelindiğinde görüntülerin görüntülenmesine izin verecektir.

  • Genişlik:% 100

Gezinirken genişliği değiştiringörünürlük

Sonraki gelişmiş sekmeye gidin ve taşmaları gizleyin. Bu, ziyaretçiler metin modülünün üzerine gelmeden (masaüstü) veya tıklamadan (tablet / mobil) önce resimlerin gizlenmesini sağlayacaktır.

  • Yatay taşma: gizli
  • Dikey taşma: gizli

Divi taşma yapılandırmasıGeçişler

Ayrıca geçiş parametrelerindeki geçiş süresini de değiştiriyoruz.

  • Geçişin Süresi: 0ms

Divi animasyonları arasında geçiş

Ana sütun rollover öğesi

Bir vurgulu ızgara oluşturmak için sütun ayarlarını açacağız, Gelişmiş seçenekler sekmesine gidip aşağıdaki CSS kodu satırlarını ana vurgulu öğeye yerleştireceğiz:

ekran: ızgara; ızgara-şablon sütunları:% 20% 25% 25% 25%; ızgara aralığı: 10px;

Divi sütun ayarıaşırı uçuş ızgaraları

Satırı iki kez klonla

İlk satırı tamamladıktan sonra, onu istediğiniz kadar çoğaltabilirsiniz. Bu özel tasarım örneği için satırı iki kez klonladık.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Satır modülünü birden çok kez klonlayın

1 hattının degrade arka planını değiştirin

İkinci çizginin degrade arka planındaki ilk degradenin rengini değiştirin.

  • 1 renk: # ffdc96

Divi satır çoğaltma değişikliği2 hattının degrade arka planını değiştirme

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

  • 1 renk: # b7c7ff

Metin modülünün kopyasını ve iki kopyadaki altı çizili rengi değiştirin

Metin modülünün kopyalarının altı çizili rengini kopya ile değiştirerek devam edin!

  • Altı çizili renk # 1: # ffaa00
  • Altı çizili renk # 2: # 0037ff

Son düşünceler

Bu eğitimde, Divi'nin taşma seçeneklerini kullanarak görüntüleri yatay rollover ızgaralarında nasıl görüntüleyeceğinizi gösterdik. Görüntüler masaüstünden geçirildiğinde ve bir tablete / telefona tıklandığında ortaya çıktı. Görüntüleri göstermemize rağmen, oluşturucudaki ayarları değiştirerek seçtiğiniz içeriği açığa çıkarabilirsiniz. Umarız bu eğitimde sizi kendi alternatif köprü ızgara tasarımlarınızı yaratmaya teşvik edersiniz! Sorularınız veya önerileriniz varsa, lütfen aşağıdaki yorumlar bölümüne bir yorum bırakın!

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse2
cıvıltı
Enregistrer