ile bir ızgara oluşturmak ister misiniz? Divi vurgulu sıvı olmak?
Kullanıcı etkileşimini göz önünde bulundurarak web siteleri oluşturmayı seviyorsanız, bu öğreticiyi seveceksiniz.
Bugün size, biri öğelerden birinin üzerine gelir gelmez arka plan görüntüsü ortaya çıkan şeffaf bir ızgarayı nasıl oluşturacağınızı göstereceğiz. Tasarım başlangıçta basit ve temiz. Bu, güzel bir gezinme deneyimi ile sonuçlanır.
Bu öğreticide, oluşturma sürecinde size adım adım yol göstereceğiz.
Gidelim.
anket
Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
ofis
Telefon
Divi'de yaratma sürecine başlayalım
Yeni bölüm ekle
Arka plan rengi
Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyin.
Ayrıca bakınız: Divi: Özel bir altbilgi nasıl oluşturulur
Önce bölüm ayarlarını açın ve beyaz bir arka plan rengi uygulayın.
- Arkaplan: #ffffff
1. satırı ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
boyutlandırma
Henüz herhangi bir modül eklemeden hat ayarlarını açın sekmesine gidin Dizayn, seçeneği aşağı çekin Boyutlandırma ve boyutlandırma parametrelerini aşağıdaki gibi değiştirin:
- Özel Oluk Genişliğini Kullan: EVET
- Oluk : 1
- Genişlik: %100
- Maksimum Genişlik: %100
aralık
Ardından seçeneği aşağı çekin aralık ve aşağıdaki ayarları değiştirin:
- Dolgu (Üst ve Alt): 0 piksel
sınır
Kenarlık seçeneğinde ayrıca aşağıdaki değişiklikleri yapın:
- Kenarlık Stilleri (Üst ve Alt): 1 piksel
- Kenar Rengi (Üst ve Alt): #d3d3d3
Sütun 1 ayarları
Arka plan üzerine gelin
Ardından, 1. sütun için ayarları özelleştirelim. Vurguya bir degrade dolgu uygulayın.
- Renk 1: rgba(255,255,255,0)
- Renk 2: #000000
- Gradyan Türü: Doğrusal
- Konum Rengi 1: %30
- Gradyanı Gradyan Görüntünün Üstüne Yerleştir: EVET
Fareyle üzerine gelindiğinde arka plan resmi
Ayrıca fareyle üzerine gelindiğinde görünecek bir arka plan resmi yükleyin.
- Arka Plan Resmi Boyutu : Kapak
- Arka Plan Resmi Konumu: Merkez
CSS sınıfı
Ve sekmede aşağıdaki CSS sınıfını atayarak sütun ayarını tamamlayın gelişmiş :
- CSS Sınıfı: vurgulu sütun
1. sütuna Metin #1 modülünü ekleyin
H3 boyutunda metin ekleyin (Başlık 3)
Sütun 1'deki ilk Metin modülünden başlayarak modülleri eklemenin zamanı geldi. İstediğiniz bir metni ekleyin.
H3 metin ayarları
Ardından sekmeye geçin Dizayn modülü seçin ve H3 metin parametrelerini aşağıdaki gibi değiştirin:
- Yazı Tipi: Oswald
- Yazı Tipi Ağırlığı Yazı tipi ağırlığı: ultra hafif
- Başlık 3 Yazı Tipi Stili: TT
- 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ındaki genişliği değiştirin.
- Genişlik:
- Masaüstü: %44
- Tabletler: %48
- Telefon: %50
aralık
Seçenekte aşağıdaki parametreleri de değiştirelim aralık.
- Kenar Boşluğu (Alt): 25vh
- Dolgu (Üst ve Alt): %5
- Dolgu (Sol ve Sağ): %4
sınır
Ardından, sağa ve aşağıya kenarlıklar ekleyeceğiz.
- Kenar Genişliği (Sağ ve Alt): 1px
- Kenar Rengi (Sağ ve Alt): #d3d3d3
CSS sınıfı
Ayrıca Text modülüne aşağıdaki CSS sınıfını atayarak modül ayarlarını tamamlayacağız:
- CSS Sınıfı: vurgulu başlık
2. sütuna Metin #1 modülünü ekleyin
İçerik ekle
Bir öncekinin hemen altına başka bir Metin modülü ekleyin. içindekiler seçtiğiniz açıklama.
Metin ayarları
Sekmeye geç Dizayn modülün ve buna göre metin parametrelerini değiştirin:
- Yazı Tipi : Karla
- Metin Rengi: #ffffff
- Alan:
- Masaüstü: 0,8 vw
- Tablet: 2vw
- Telefon: 3.6vw
- Satır Yüksekliği: 2,2 em
aralık
Ayrıca özel kenar boşluğu değerleri uygulayın.
- Dolgu (Alt): %10
- Dolgu (Sol ve Sağ): %9
CSS sınıfı
Ve modül için aşağıdaki CSS sınıfını kullanarak modül parametrelerini tamamlayın:
- CSS Sınıfı: vurgulu metin
1. sütuna bir "Düğme" modülü ekleyin
Bir açıklama ekle
İhtiyacımız olan sonraki ve son modül bir modül düğme. Seçtiğiniz bir açıklama girin.
Düğme ayarları
Modül parametrelerini aşağıdaki gibi değiştirin:
- Düğme İçin Özel Stilleri Kullan: EVET
- Düğme Metin Boyutu:
- Masaüstü: 1vw
- Tablet: 2,5 vw
- Telefon: 4vw
- Düğme Kenar Genişliği: 0px
- Sınır Yarıçapı: 0px
- Düğme Yazı Tipi: Karla
- Düğme Simgesini Göster: EVET
- Düğme Simge Yerleşimi: Sağ
- Düğme için Yalnızca Üstünde Simgeyi Göster: HAYIR
aralık
Ayrıca özel aralık değerleri ekleyin.
- Marj (Alt): %8
- Marj (Sol ve Sağ): %9
- Dolgu (Alt): %5
- Dolgu (Sağ): %20
kutu gölgesi
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
1. sütunu yeniden kullan
2., 3. ve 4. sütunları sil
Artık ilk sütunu oluşturduğumuza göre, onu yeniden kullanabiliriz. Yapacağımız ilk şey, boş sütunları satırımızdan kaldırmak.
Sütun 1'i üç kez klonla
Sütun 1'i üç kez klonlayarak yeniden kullanacağız.
Yinelenen sütunların üzerine gelindiğinde arka plan resimlerini değiştirin
Ardından, yinelenen her sütundaki yinelenen sütun arka plan resimlerini değiştirin.
Yinelenen içeriği düzenle
Ayrıca değiştir içindekiler her yinelenen sütundaki modülün.
Benzersiz sütun kenarlıkları
Sütun 1
Sütun 1'den başlayarak her sütuna benzersiz kenarlık ayarları uygulamamız gerekecek.
- Kenar Genişliği (Sağ):
- Masaüstü: 1 piksel
- tablet: 1 piksel
- Telefon: 0 piksel
- Renk (Sağ): #d3d3d3
- Kenar Genişliği (Alt):
- Masaüstü: 0 piksel
- tablet: 1 piksel
- Telefon: 1 piksel
- Kenar Rengi (Alt): #d3d3d3
Sütun 2
Sonra 2. sütunumuz var.
Kenar Genişliği (Sağ):
- Masaüstü: 1 piksel
- tablet: 1 piksel
- Telefon: 0 piksel
Renk (Sağ): #d3d3d3Border Genişliği (Alt):
- Masaüstü: 0 piksel
- tablet: 1 piksel
- Telefon: 1 piksel
Kenar Rengi (Alt): #d3d3d3
Sütun 3
Ve sütun 3 için aşağıdaki sınır ayarlarını kullanacağız:
- Kenar Genişliği (Sağ):
- Masaüstü: 1 piksel
- tablet: 1 piksel
- Telefon: 0 piksel
- Renk (Sağ): #d3d3d3
- Kenar Genişliği (Alt):
- Masaüstü: 0 piksel
- tablet: 1 piksel
- Telefon: 1 piksel
- Kenar Rengi (Alt): #d3d3d3
Sayfa ayarlarına özel CSS ekleyin
Sayfa ayarlarını aç
Artık tüm tasarım yerinde olduğuna göre, geriye kalan tek şey, 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.
Ayrıca şu kılavuzumuzu okuyun: Divi: "Göster" efektiyle yapışkan bir alt bilgi nasıl oluşturulur
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;
}
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
ofis
Telefon
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu yazıda size güzel bir vurgulu tasarımın nasıl oluşturulacağını gösterdik.
Özellikle, basit ve temiz başlayan bir sütun ızgarası oluşturduk. En kısa sürede ziyaretçi belirli bir ızgara öğesinin üzerine gelin, arka plan görüntüsü ortaya çıkar ve modül stilleri değişir.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
