Divi ile Kesintisiz Hover Izgarası Nasıl Oluşturulur

Kullanıcı etkileşimini göz önünde bulundurarak web siteleri oluşturmaktan hoşlanıyorsanız, bu Divi tasarım eğitimine bayılacaksınız. Bugün size sorunsuz bir vurgulu ızgaranın nasıl oluşturulacağını göstereceğiz. Tasarım başlangıçta sade ve temizdir. Birisi öğelerden birinin üzerine gelir gelmez arka plan görüntüsü ortaya çıkar ve modül stilleri onunla birlikte değişir. Bu, güzel bir vurgulu deneyimiyle sonuçlanır. Bu öğreticide, oluşturma sürecinde size adım adım rehberlik edeceğiz. Düzenin 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üzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak bunları 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!

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve beyaz bir arka plan rengi uygulayın.

• Arka Plan Rengi: #ffffff

1. 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 modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

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

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

Sınır

Ve bir üst ve alt kenarlık ekleyin.

• Üst ve Alt Kenar Genişliği: 1px
• Üst ve Alt Kenarlık Rengi: #d3d3d3

Sütun 1 Ayarları

Hover Gradyan Arka Planı

Sırada, sütun 1 ayarlarımız var. Fareyle üzerine gelindiğinde bir degrade arka planı uygulayın.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #000000
• Gradyan Türü: Doğrusal
• Başlangıç ​​Konumu: %30

Arka Plan Resmini Üzerine Getirin

Fareyle üzerine gelindiğinde de bir arka plan resmi yükleyin.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez

CSS Sınıfı

Ve gelişmiş sekmesinde aşağıdaki CSS sınıfını atayarak sütun ayarlarını tamamlayın:

• CSS Sınıfı: vurgulu sütun

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

H3 İçeriği Ekle

Sütun 1'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H3 içeriğini kullanın.

H3 Metin Ayarları

Modülün tasarım sekmesine gidin ve H3 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 3 Yazı Tipi: Oswald
• Başlık 3 Yazı Tipi Ağırlığı: Ultra Hafif
• Başlık 3 Yazı Tipi Stili: Büyük Harf
• Başlık 3 Metin Rengi: #0a0a0a
• Başlık 3 Metin Boyutu:
  • Masaüstü: 3vw
  • Tablet: 7vw
  • Telefon: 14vw
• Başlık 3 Harf Aralığı: -2px

boyutlandırma

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

• Genişlik:
  • Masaüstü: %44
  • Tablet: %48
  • Telefon: %50

aralık

Bazı özel kenar boşluğu ve dolgu değerleri de kullanıyoruz.

• Alt Kenar Boşluğu: 25vh
• Üst Dolgu: %5
• Alt Dolgu: 5%
• Sol Dolgu: %7
• Sağ Dolgu: %7

Sınır

Ardından, bazı sağ ve alt kenarlıklar ekleyeceğiz.

• Sağ ve Alt Kenar Genişliği: 1px
• Sağ ve Alt Kenar Genişliği: 1px
• Sağ ve Alt Kenarlık Rengi: #d3d3d3

CSS Sınıfı

Ve aşağıdaki CSS sınıfını Metin Modülüne atayarak modül ayarlarını tamamlayacağız:

• CSS Sınıfı: vurgulu başlık

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

İçerik Ekle

Seçtiğiniz bazı açıklama içeriğiyle bir öncekinin hemen altına başka bir Metin Modülü ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Karla
• Metin Rengi: #ffffff
• Yazı Boyutu:
  • Masaüstü: 0.8vw
  • Tablet: 2vw
  • Telefon: 3.6vw
• Metin Satırı Yüksekliği: 2.2em

aralık

Bazı özel dolgu değerleri de uygulayın.

• Alt Dolgu: %10
• Sol Dolgu: %9
• Sağ Dolgu: %9

CSS Sınıfı

Ve modül için aşağıdaki CSS sınıfını kullanarak modül ayarlarını tamamlayın:

• CSS Sınıfı: vurgulu metin

2. Sütun'a Düğme Modülü Ekle

Kopya Ekle

İhtiyacımız olan sonraki ve son modül bir Düğme Modülü. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Modülün düğme ayarlarını aşağıdaki gibi değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu:
  • Masaüstü: 1vw
  • Tablet: 2.5vw
  • Telefon: 4vw
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Karla
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

aralık

Bazı özel boşluk değerleri de ekleyin.

• Alt Marj: %8
• Sol Kenar Boşluğu: %9
• Sağ Marj: %9
• Alt Dolgu: 5%
• Sağ Dolgu: %20

Kutu Gölge

Ardından, bir kutu gölgesi uygulayın.

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Gölge Rengi: #000000

CSS Sınıfı

Ve butona aşağıdaki CSS sınıfını atayarak modül ayarlarını tamamlayın:

• CSS Sınıfı: vurgulu düğme

Sütun 1'i Yeniden Kullan

Sütun 2, 3 ve 4'ü Sil

Artık ilk sütunu oluşturduğumuza göre, onu yeniden kullanabiliriz. İlk yapacağımız şey satırımızdaki boş sütunları kaldırmak.

Sütun 1'i Üç Kez Klonla

Sütun 1'i üç kez klonlayarak yeniden kullanacağız.

Yinelenen Sütun Vurgulu Arka Plan Resimlerini Değiştir

Her yinelenen sütundaki yinelenen sütun arka plan resimlerini değiştirin.

Yinelenen İçeriği Değiştir

Her yinelenen sütundaki modül içeriğiyle birlikte.

Benzersiz Sütun Kenarlıkları

Sütun 1

Sütun 1'den başlayarak her sütuna bazı benzersiz kenarlık ayarları uygulamamız gerekecek.

• Sağ Kenar Genişliği:
  • Masaüstü: 1 piksel
  • tablet: 1 piksel
  • Telefon: 0px
• Sağ Kenar Rengi: #d3d3d3
• Alt Kenar Genişliği:
  • Masaüstü: 0 piksel
  • tablet: 1 piksel
  • Telefon: 1 piksel
• Alt Kenarlık Rengi: #d3d3d3

2. sütun

Ardından, sütun 2'ye sahibiz.

• Sağ Kenar Genişliği:
  • Masaüstü: 1 piksel
  • tablet: 0 piksel
  • Telefon: 0px
• Sağ Kenar Rengi: #d3d3d3
• Alt Kenar Genişliği:
  • Masaüstü: 0 piksel
  • tablet: 1 piksel
  • Telefon: 1 piksel
• Alt Kenarlık Rengi: #d3d3d3

Sütun 3

Ve sütun 3 için aşağıdaki sınır ayarlarını kullanacağız:

• Sağ Kenar Genişliği:
  • Masaüstü: 1 piksel
  • tablet: 1 piksel
  • Telefon: 0px
• Sağ Kenar Rengi: #d3d3d3
• Alt Kenar Genişliği:
  • Masaüstü: 0 piksel
  • tablet: 0 piksel
  • Telefon: 1 piksel
• Alt Kenarlık Rengi: #d3d3d3

Sayfa Ayarlarına Özel CSS Kodu Ekle

Sayfa Ayarlarını Aç

Artık tasarımın tamamını yerine getirdiğimize göre, yapılacak tek şey, alt öğeler (modüller) üzerinde fareyle üzerine gelme efektlerini tetiklemeye yardımcı olacak bazı özel CSS kodları eklemek. Bunu yapmak için sayfa ayarlarını açın.

CSS Kodu Ekle

Ve aşağıdaki CSS kod satırlarını kopyalayıp yapıştırın:

.hover-column:hover .hover-title {
background-color: #000000;
}

.hover-column:hover .hover-title h3 {
color: white !important;
}

.hover-button {
color: black;
}

.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}

.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}

.hover-column:hover::before {
opacity: 0;
}

Ö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, size güzel bir vurgulu tasarımın nasıl oluşturulacağını gösterdik. Daha spesifik olarak, sade ve temiz ile başlayan bir sütun ızgarası oluşturduk. Ziyaretçiler ızgarada belirli bir öğenin üzerine gelir gelmez arka plan görüntüsü ortaya çıkar ve modül stilleri değişir. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

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.