Modüller, sütunlar ve satırlar için doğrudan imlecin aynı anda nasıl tetiklenir
Divi ile şantiyelerle ilgili en iyi şeylerden 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, varsayılan ve gelişim durumu için tasarım ayarları içerir. Bu elemanı bir araya getirirken bazı havada uçma efektlerini tetiklemek için kapıyı açar. Bu öğreticide, modüller, sütunlar ve satırlar için aynı anda havada uçma efektlerini nasıl tetikleyeceğinizi göstereceğim. İşin püf noktası, tüm öğelerin aynı vites boyutuna ve alana sahip olmasını sağlamaktır. Ancak öğelerden oluştuktan sonra, gelişim efektleriniz ve tasarımlarınızla çok yaratıcı olabilirsiniz.
Başlayalım. Aşağıdaki gizlice göz atma, farklı divi elemanlarından gelme etkilerinin aynı anda nasıl tetikleneceğinin kısa bir örneğidir.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye gittiğimiz YouTube kanalına abone olun? Durumu nasıl tetikleyeceğinizi anlayın, aynı anda birkaç divi öğesine işaret edin. Divi’deki (bölüm, çizgi veya modül) her elemanın temelde elementin büyüklüğü olan kendi vurgulu boşluğu vardır.
Bu öğelerin her biri, imleci öğeye veya içerdikleri türev elemanlara yönlendirirken etkinleştirilen varsayılan bir Hover seçeneğine sahiptir. Örneğin, imlecin seçeneğini bir bölüme eklediyseniz, opsiyon imleci o bölüme her yönlendirdiğinizde aktif olmaya yönlendirir. Ardından, imleci bölümdeki satır odasına yönlendirirseniz, satırdan ve bölümden işaret etme seçeneğini etkinleştireceksiniz. Bunun nedeni, çizginin o bölümün çocuğunun bir unsuru olmasıdır. İmleci sütuna her yönlendirdiğinizde, sütun, satır ve bölümdeki imlecin durumunu etkinleştirirsiniz. Ve son olarak, imleci modüle her yönlendirdiğinizde, modül ve tüm üst öğeler (sütunlar, satırlar ve parçalar) için imleç durumunu tetiklersiniz. Varsayılan olarak, bu öğelerin her biri, kullanıcıların her bir öğeyi seçici olarak yönlendirmesine izin veren bir boşluk oluşturan bir boşluk oluşturan bir boşluk (dolgu) olacaktır. Bununla birlikte, her bir eleman arasındaki mesafeyi ortadan kaldırırsanız, aynı anda tüm elemanlar için bir vuruş durumunu tetikleyebilirsiniz. Bu, her bir eleman için vuruş seçeneğini birleştirdiğinizde ve etkinleştirdiğinizde aynı anda ortaya çıkabilecek birçok havalı efekti için kapıyı açar. Birlikte vurgulu odası. Aşağıdaki imlecin etkilerini birleştirmenin örnekleri, bunun Divi ile nasıl çalıştığına dair bir örnektir. Aşağıdaki örnekte, arka plan görüntüsü olan bir satırımız var. Yüzerken, bir tür sınır tasarım öğesi olarak görünen bir kutunun gecikmeli gölgesine sahibiz. Satırın içinde, kara kutunun gölgesi ile doldurulmuş bir sütun var. İmleci yönlendirirken, satırın arka plan görüntüsünü görüntülemek için sütun kutusunun gölgesi yavaş yavaş azaltılır. Sütunda, mavi bir arka plana sahip bir açıklama modülümüz var. Yüzerken, mavi arka plan yarı saydam maviye dönüştürülür, böylece bir arka plan görüntüsü görebilirsiniz. Her bir eleman arasında bir mesafe olduğundan, imleci her bir havada havada uçma odasına yönlendirdiğimizde, her elemanın spesifik kayma etkisini görebiliriz. Bununla birlikte, boşlukları ortadan kaldırır ve çizgiye özel genişlik sağlarsak, tüm öğeler aynı yüzer alanı paylaşır. Veya başka bir deyişle, modül tüm sütunu ve satırı alır. Dolayısıyla imleci modüle yönlendirdiğimizde, modüller, sütunlar ve satırlar için sarkma efekti eşzamanlı olarak etkinleştirilir.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Yapmanız gereken ilk şeyin parçalarını ve satırlarını eklemek, bir sütun satırı ile düzenli bir rol yapmaktır.
Bir sonraki satır ve sütun ayarlarını güncelleyin, satır ayarlarını açın ve arka plan görüntü satırını verin.
Ardından, sıra ve sütun arasındaki kaydırma odasında boşluk olmayacak şekilde varsayılan dolguyu ortadan kaldırmamız gerekir.
Dolgu: 0px üst, 0px aşağıda Ardından, gelişimdeki satıra aşağıdaki kutu gölgesini ekleyin. Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölgesi Kutusu: 0px Gölge kutusunun dağılımının gücü: 0px (masaüstü), 10 piksel (imleci işaret)
Gölge Renk: #063C68
Sonraki Geçiş seçeneğini aşağıdaki süre ve gecikme ile güncelleyin:
Geçiş süresi: 500ms
Geçiş gecikmesi: 700ms Şimdi aşağıdaki sütunu ve güncelleme ayarlarını açın:
Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölge Kutusu: Gölge Kutularının Dağıtımının 0Px Mukavemeti: 200px (Masaüstü), 0px (nokta imleç) Gölge Renk: #000000
Geçiş süresi: 500ms
Geçiş gecikmesi: 200ms
Bulanıklık modülünü ekleyin, şimdi açıklama modülünü satıra ekleyin.
Ardından açıklamayı aşağıdaki gibi güncelleyin:
Resim: [Bulanıklık resmini girin]
Arka plan rengi: #0c71c3 Arka plan rengi (nokta imleci): RGBA (12,113,195.0.35) Hizalama Metni: Orta
Metin Rengi: Işık
Dolgu: 20 piksel üst, 20px dip, 20px sol, 20px sağ
Nihai sonuçlar nihai sonucu görür. Son düşünceler ve ipuçları, birkaç divi öğesi için yüzen bir durumun nasıl tetikleneceğini anlar, aynı anda olası tasarımlar olası tasarımları açar. Bu yazıdaki örnekler, modüllerden, sütunlardan ve satırlardan gelme durumunu birleştirdiğinizde ortaya çıkabilecek birçok havada etkisi kombinasyonunun bazılarını vurgular. Ayrıca, size daha fazla kaydırma seçeneği sunacak kayma seçeneklerini birleştirerek gelme olasılığını bile araştırmıyoruz. Bu vuruşun etkisini keşfettiğinizde, burada yardımcı olacak bazı ipuçları ve fikirler.
Sınırlar yerine bir kutu gölgesi kullanın – sınırlar aslında öğelere ek alan ekler, böylece bu istenmeyen yüzer boşluklara neden olabilir. Box Shadows, gerçek alana eklemeyen tasarım öğeleri ekler.
Hover Efektleri Arka Plan Geçişini Keşfedin – Her Divi elementinin yaratıcı Hover efekt katmanı için birleştirilebilen bir arka plan havada uçma seçeneği vardır. İmleci işaret etmek için Dönüşüm seçeneğini kullanın – İmleç Dönüşümü seçeneği, imleci yönlendirirken ölçeklendirme ve dönüş öğeleri gibi yaratıcı öğeler ekleyebilir.Bununla birlikte, yüzerken bazı elementleri oynamak zor olabilir, çünkü atlamalara neden olacaktır. Geçiş seçeneğini kullanın – farklı bir geçiş süresi ve her bir elementin durumuna gecikme eklemek benzersiz bir yüzer animasyon yapabilir. Umarım bu öğretici size Divi’deki bazı şaşırtıcı Hover efekt kombinasyonlarını keşfetmeniz için ilham verir.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye gittiğimiz YouTube kanalına abone olun? Durumu nasıl tetikleyeceğinizi anlayın, aynı anda birkaç divi öğesine işaret edin. Divi’deki (bölüm, çizgi veya modül) her elemanın temelde elementin büyüklüğü olan kendi vurgulu boşluğu vardır.
Bu öğelerin her biri, imleci öğeye veya içerdikleri türev elemanlara yönlendirirken etkinleştirilen varsayılan bir Hover seçeneğine sahiptir. Örneğin, imlecin seçeneğini bir bölüme eklediyseniz, opsiyon imleci o bölüme her yönlendirdiğinizde aktif olmaya yönlendirir. Ardından, imleci bölümdeki satır odasına yönlendirirseniz, satırdan ve bölümden işaret etme seçeneğini etkinleştireceksiniz. Bunun nedeni, çizginin o bölümün çocuğunun bir unsuru olmasıdır. İmleci sütuna her yönlendirdiğinizde, sütun, satır ve bölümdeki imlecin durumunu etkinleştirirsiniz. Ve son olarak, imleci modüle her yönlendirdiğinizde, modül ve tüm üst öğeler (sütunlar, satırlar ve parçalar) için imleç durumunu tetiklersiniz. Varsayılan olarak, bu öğelerin her biri, kullanıcıların her bir öğeyi seçici olarak yönlendirmesine izin veren bir boşluk oluşturan bir boşluk oluşturan bir boşluk (dolgu) olacaktır. Bununla birlikte, her bir eleman arasındaki mesafeyi ortadan kaldırırsanız, aynı anda tüm elemanlar için bir vuruş durumunu tetikleyebilirsiniz. Bu, her bir eleman için vuruş seçeneğini birleştirdiğinizde ve etkinleştirdiğinizde aynı anda ortaya çıkabilecek birçok havalı efekti için kapıyı açar. Birlikte vurgulu odası. Aşağıdaki imlecin etkilerini birleştirmenin örnekleri, bunun Divi ile nasıl çalıştığına dair bir örnektir. Aşağıdaki örnekte, arka plan görüntüsü olan bir satırımız var. Yüzerken, bir tür sınır tasarım öğesi olarak görünen bir kutunun gecikmeli gölgesine sahibiz. Satırın içinde, kara kutunun gölgesi ile doldurulmuş bir sütun var. İmleci yönlendirirken, satırın arka plan görüntüsünü görüntülemek için sütun kutusunun gölgesi yavaş yavaş azaltılır. Sütunda, mavi bir arka plana sahip bir açıklama modülümüz var. Yüzerken, mavi arka plan yarı saydam maviye dönüştürülür, böylece bir arka plan görüntüsü görebilirsiniz. Her bir eleman arasında bir mesafe olduğundan, imleci her bir havada havada uçma odasına yönlendirdiğimizde, her elemanın spesifik kayma etkisini görebiliriz. Bununla birlikte, boşlukları ortadan kaldırır ve çizgiye özel genişlik sağlarsak, tüm öğeler aynı yüzer alanı paylaşır. Veya başka bir deyişle, modül tüm sütunu ve satırı alır. Dolayısıyla imleci modüle yönlendirdiğimizde, modüller, sütunlar ve satırlar için sarkma efekti eşzamanlı olarak etkinleştirilir.
Geçiş gecikmesi bu düzenleme ile iyi işliyor, yukarıdaki örnekte, bu kavramın işlevselliğini iyi vurgulayan satırların ve sütunların kayma etkileri üzerinde bir geçiş gecikmesi olduğunu unutmayın. Modüle benzer havada benzerlik efektlerinin bir kombinasyonunu eklemeye çalışırsak, her bir vuruş etkisi için farklı gecikmeler ve geçiş süresinin uygulanmasından tek tek yararlanamayacağız. Divi’de bunun gerçek dünyada nasıl oynandığı hakkında bazı talimatlar vermek için bir tasarım örneği yapın, yukarıda açıklanan örnekleri yeniden yapalım. Başlamanız için gereken şey, aşağıdakilere sahip olmalısınız: Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı) Yapay içerik için kullanılacak görüntülerBundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Yapmanız gereken ilk şeyin parçalarını ve satırlarını eklemek, bir sütun satırı ile düzenli bir rol yapmaktır.
Bir sonraki satır ve sütun ayarlarını güncelleyin, satır ayarlarını açın ve arka plan görüntü satırını verin.
Ardından, sıra ve sütun arasındaki kaydırma odasında boşluk olmayacak şekilde varsayılan dolguyu ortadan kaldırmamız gerekir.
Dolgu: 0px üst, 0px aşağıda Ardından, gelişimdeki satıra aşağıdaki kutu gölgesini ekleyin. Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölgesi Kutusu: 0px Gölge kutusunun dağılımının gücü: 0px (masaüstü), 10 piksel (imleci işaret)
Gölge Renk: #063C68
Sonraki Geçiş seçeneğini aşağıdaki süre ve gecikme ile güncelleyin:
Geçiş süresi: 500ms
Geçiş gecikmesi: 700ms Şimdi aşağıdaki sütunu ve güncelleme ayarlarını açın:
Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölge Kutusu: Gölge Kutularının Dağıtımının 0Px Mukavemeti: 200px (Masaüstü), 0px (nokta imleç) Gölge Renk: #000000
Geçiş süresi: 500ms
Geçiş gecikmesi: 200ms
Bulanıklık modülünü ekleyin, şimdi açıklama modülünü satıra ekleyin.
Ardından açıklamayı aşağıdaki gibi güncelleyin:
Resim: [Bulanıklık resmini girin]
Arka plan rengi: #0c71c3 Arka plan rengi (nokta imleci): RGBA (12,113,195.0.35) Hizalama Metni: Orta
Metin Rengi: Işık
Dolgu: 20 piksel üst, 20px dip, 20px sol, 20px sağ
Nihai sonuçlar nihai sonucu görür. Son düşünceler ve ipuçları, birkaç divi öğesi için yüzen bir durumun nasıl tetikleneceğini anlar, aynı anda olası tasarımlar olası tasarımları açar. Bu yazıdaki örnekler, modüllerden, sütunlardan ve satırlardan gelme durumunu birleştirdiğinizde ortaya çıkabilecek birçok havada etkisi kombinasyonunun bazılarını vurgular. Ayrıca, size daha fazla kaydırma seçeneği sunacak kayma seçeneklerini birleştirerek gelme olasılığını bile araştırmıyoruz. Bu vuruşun etkisini keşfettiğinizde, burada yardımcı olacak bazı ipuçları ve fikirler.
Sınırlar yerine bir kutu gölgesi kullanın – sınırlar aslında öğelere ek alan ekler, böylece bu istenmeyen yüzer boşluklara neden olabilir. Box Shadows, gerçek alana eklemeyen tasarım öğeleri ekler.
Hover Efektleri Arka Plan Geçişini Keşfedin – Her Divi elementinin yaratıcı Hover efekt katmanı için birleştirilebilen bir arka plan havada uçma seçeneği vardır. İmleci işaret etmek için Dönüşüm seçeneğini kullanın – İmleç Dönüşümü seçeneği, imleci yönlendirirken ölçeklendirme ve dönüş öğeleri gibi yaratıcı öğeler ekleyebilir.Bununla birlikte, yüzerken bazı elementleri oynamak zor olabilir, çünkü atlamalara neden olacaktır. Geçiş seçeneğini kullanın – farklı bir geçiş süresi ve her bir elementin durumuna gecikme eklemek benzersiz bir yüzer animasyon yapabilir. Umarım bu öğretici size Divi’deki bazı şaşırtıcı Hover efekt kombinasyonlarını keşfetmeniz için ilham verir.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
