Bir Modül, Sütun ve Satır için Vurgulu Efektleri Eşzamanlı Olarak Tetikleme
Yayınlanan: 2019-08-11Divi ile bir site oluşturmanın en iyi yanlarından biri, her yapı taşının tasarım seçenekleriyle dolu olmasıdır. Her modül, sütun, satır ve bölüm, hem varsayılan hem de fareyle üzerine gelme durumu için tasarım ayarlarını içerir. Bu, bu öğeleri bir araya getirirken birden fazla vurgulu efekti tetiklemek için kapıyı açar.
Bu öğreticide, bir modül, sütun ve satır için fareyle üzerine gelme efektlerini aynı anda nasıl tetikleyeceğinizi göstereceğim. İşin püf noktası, tüm öğelerin aynı boyutu ve gezinme alanını paylaştığından emin olmaktır. Ancak öğeleri bir kez yerleştirdikten sonra, vurgulu efektleriniz ve tasarımlarınızla son derece yaratıcı olabilirsiniz.
Başlayalım.
Gizlice Bakış
Farklı Divi öğelerinin fareyle üzerine gelme etkilerinin aynı anda nasıl göründüğüne dair hızlı bir örnek.
Tasarım Örneği'ni ÜCRETSİZ olarak indirin
Bu eğitimdeki tasarıma el koymak için önce aşağıdaki düğmeyi kullanarak onu indirmeniz gerekecek. İ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.
Ü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.
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!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Youtube Kanalımıza Abone Olun
Hadi öğreticiye geçelim, olur mu?
Aynı Anda Birden Fazla Divi Öğesinde Vurgulu Durumlarının Nasıl Tetikleneceğini Anlama.
Divi'deki (bölüm, satır veya modül) her öğenin, temelde öğenin kendisinin boyutu olan kendi vurgulu alanı vardır.
Bu öğelerin her biri, o öğenin veya içerdiği alt öğelerden herhangi birinin üzerine gelindiğinde etkinleştirilen yerleşik fareyle üzerine gelme seçeneklerine sahiptir.
Örneğin, bir bölüme fareyle üzerine gelme seçenekleri eklediyseniz, fareyle bölümün üzerine geldiğinizde bu fareyle üzerine gelme seçenekleri etkin hale gelecektir.
Daha sonra bölüm içindeki satır vurgulu alanı üzerine gelirseniz, hem satırın hem de bölümün vurgulu seçeneklerini etkinleştirirsiniz. Bunun nedeni, satırın bölümün alt öğesi olmasıdır.
Fareyle bir sütunun üzerine geldiğinizde, sütunun, satırın ve bölümün üzerine gelme durumunu etkinleştirirsiniz.
Son olarak, bir modülün üzerine geldiğinizde, modül ve tüm üst öğeleri (sütun, satır ve bölüm) için fareyle üzerine gelme durumlarını tetiklersiniz.
Varsayılan olarak, bu öğelerin her biri, kullanıcının her öğeyi seçici olarak üzerine getirmesine olanak tanıyan, vurgulu alanda boşluklar oluşturan boşluklara (dolgu) sahip olacaktır. Ancak, her öğe arasındaki boşluğu kaldırırsanız, tüm öğeler için aynı anda vurgulu durumlarını tetikleyebilirsiniz.
Bu, her öğe için vurgulu seçeneklerini birleştirirken ve bunları paylaşılan bir vurgulu alanda etkinleştirirken aynı anda gerçekleşebilecek birçok vurgulu efekti kombinasyonunun kapısını açar.
Hover Efektlerini Birleştirme Örneği
İşte bunun Divi ile nasıl çalıştığına bir örnek.
Aşağıdaki örnekte, arka plan resmi olan bir satırımız var. Fareyle üzerine gelindiğinde, bir tür sınır tasarım öğesi olarak görünen gecikmeli bir kutu gölgemiz var.
Satırın içinde, kara kutu gölgesiyle doldurulmuş bir sütunumuz var. Fareyle üzerine gelindiğinde, satır arka plan görüntüsünü ortaya çıkarmak için sütunun kutu gölgesi kademeli olarak azaltılır.
Sütunun içinde mavi bir arka plana sahip bir tanıtım modülümüz var. Fareyle üzerine gelindiğinde, arka plan görüntüsünü görebilmeniz için mavi arka plan yarı saydam mavi renge değiştirilir.
Her öğe arasında boşluk olduğundan, her bir vurgulu alanın üzerine geldiğimizde her öğenin belirli vurgulu etkisini görebiliriz.
Ancak, aralığı çıkarır ve satıra özel bir genişlik verirsek, tüm öğeler aynı vurgulu alanı paylaşacaktır. Veya başka bir deyişle, modül sütun ve satırın tüm alanını kaplar. Yani modülün üzerine geldiğimizde, modül, sütun ve satır için fareyle üzerine gelme efektleri aynı anda aktif hale geliyor.
Geçiş Gecikmeleri Bu Kurulumla Harika Çalışıyor
Yukarıdaki örnekte, bu kavramın işlevselliğini gerçekten iyi vurgulayan satır ve sütun vurgulu efektlerinde geçiş gecikmeleri olduğunu unutmayın. Yalnızca modüle benzer bir vurgulu efekt kombinasyonu eklemeye çalışıyor olsaydık, her bir vurgulu efektine ayrı ayrı farklı geçiş gecikmeleri ve süreleri uygulama avantajından yararlanamazdık.
Divi'de Tasarım Örneğinin Yeniden Oluşturulması
Bunun Divi'nin gerçek dünyasında nasıl oynandığına dair size biraz talimat vermek için, yukarıda açıklanan örneği yeniden oluşturalım.
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Sahte içerik için kullanılacak resimler
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Bölüm ve Satır Ekleme
Yapmanız gereken ilk şey, tek sütunlu bir satır içeren normal bir bölüm oluşturmaktır.
Satır ve Sütun Ayarlarını Güncelle
Ardından, satır ayarlarını açın ve satıra bir arka plan görüntüsü verin.
Ardından, satır ve sütun arasındaki vurgulu boşlukta boşluk kalmaması için varsayılan dolguyu çıkarmamız gerekir.
- Dolgu: 0 piksel üst, 0 piksel alt
Ardından, fareyle üzerine gelindiğinde satıra aşağıdaki kutu gölgesini ekleyin.
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölge Bulanıklığı Gücü: 0px
- Kutu gölgesi Yayılma Gücü: 0px (masaüstü), 10px (vurgulu)
- Gölge Rengi: #063c68
Daha sonra geçiş seçeneklerini bir süre ve gecikmeyle aşağıdaki gibi güncelleyin:
- Geçiş Süresi: 500ms
- Geçiş Gecikmesi: 700ms
Şimdi sütun ayarlarını açın ve aşağıdakileri güncelleyin:
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölge Bulanıklığı Gücü: 0px
- Kutu gölgesi Yayılma Gücü: 200 piksel (masaüstü), 0 piksel (fareyle üzerine gelme)
- Gölge Rengi: #000000
- Geçiş Süresi: 500ms
- Geçiş Gecikmesi: 200ms
Blurb Modülünü ekleyin
Şimdi satıra bir tanıtıcı modül ekleyin.
Ardından, tanıtıcı metni aşağıdaki gibi güncelleyin:
- Resim: [tanıtıcı resim ekleyin]
- Arka Plan Rengi: #0c71c3
- Arka Plan Rengi (vurgulu): rgba(12,113,195,0.35)
- Metin Hizalama: orta
- Metin Rengi: Açık
- Dolgu: 20 piksel üst, 20 piksel alt, 20 piksel sol, 20 piksel sağ
Son sonuç
Nihai sonucu kontrol edin.
Son Düşünceler ve İpuçları
Birden fazla Divi öğesi için fareyle üzerine gelme durumlarının aynı anda nasıl tetikleneceğini anlamak, bazı heyecan verici tasarım olasılıklarını açar. Bu gönderideki örnek, bir modülün, sütunun ve satırın üzerine gelme durumlarını birleştirdiğinizde mümkün olan birçok vurgulu efekt kombinasyonundan yalnızca birkaçını vurgular. Ayrıca, daha fazla fareyle üzerine gelme seçeneği sunacak olan bölüm üzerine gelme seçeneklerini birleştirmenin getirdiği olasılıkları bile keşfetmedik. Bu vurgulu efektleri kendi başınıza keşfederken, yol boyunca yardımcı olacak birkaç ipucu ve fikir burada.
- Kenarlıklar yerine Kutu Gölgesi kullanın – Kenarlıklar aslında bir öğeye ek alan ekler, bu nedenle bu istenmeyen vurgulu boşluklara neden olabilir. Kutu Gölgeleri, gerçek alan eklemeyen bir tasarım öğesi ekler.
- Arka Plan Geçişi Vurgulu Efektleri Keşfedin – Her Divi öğesi, yaratıcı vurgulu efekt katmanları için birleştirilebilen arka plan üzerine gelme seçeneklerine sahiptir.
- Vurguluyu Dönüştürme Seçeneklerini Kullan - Vurguluyu dönüştür seçenekleri, fareyle üzerine gelindiğinde öğeleri ölçekleme ve döndürme gibi bir yaratıcı öğe ekleyebilir. Bununla birlikte, zıplamaya neden olacağından, fareyle üzerine gelindiğinde birden fazla öğeyi döndürmek zor olabilir.
- Geçiş seçeneklerinden yararlanın – Her öğenin üzerine gelme durumuna farklı geçiş süreleri ve gecikmeler eklemek, benzersiz vurgulu animasyonlar oluşturabilir.
Umarım bu eğitim size Divi'deki bazı harika vurgulu efekt kombinasyonlarını keşfetmeniz için ilham verir.
Yorumlarda sizden haber bekliyorum.
Şerefe!