Divi’deki web sayfalarının tasarımını gözden geçirmek için bir kaydırma efekti nasıl eklenir
İster portföy sayfasında ister resim galerisinde olsun, web tasarımcılarının tasarımlarını müşterilere işletmeleri teşvik etmenin önemli bir parçası olarak göstermeleri gerekir. Ve çoğu zaman, çalışmalarının örnekleri, çok fazla yer kaplayabilen tüm web sayfası tasarımlarından görüntüler içerir. Bu nedenle bu görüntülere bir kaydırma efekti eklemek portföyünüzü ayırt edebilir. Bu, kullanıcıların ilk başta kısa bir tasarım bölümünü görmelerini sağlar. Ancak kullanıcı imleci görüntüye yönlendirdiğinde, tasarımın geri kalanını web sayfasının altında kayıyormuş gibi yavaşça ifade etmek için görüntü yuvarlanacaktır. Kendi Divi Düzen Paketleri sayfamızda kullanılan bu tür etkiyi görebilirsiniz.
Bu öğreticide, kullanıcıların web sayfası tasarımının önizlemesini görmesini sağlayan görüntüye bir kaydırma efekti eklemek için divi’yi nasıl kullanacağınızı göstereceğim. Bu, seveceğinizi düşündüğüm zarif unsurların bir unsuru. Sneak Peek Here, bu öğreticide birlikte yapacağımız Scroll Down Hover efektinin bir önizlemesidir.
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.
Şimdi öğreticiye gidelim mi? Bu kullanım vaka öğreticisi için başlamanız gereken şey, tasarımımızı divi kullanarak baştan beri inşa edeceğiz. Portföy öğelerinde kullanım için bazı resimlere/ekran görüntülerine de ihtiyacınız var. En az 1080px olan bir görüntü kullanmanızı öneririm. Yapmadıysanız üç sütun satırı yapın, yeni bir sayfa oluşturun. Ardından sayfanızın başlığını verin ve ön uçta bir divi üreticisi kullanın. Ardından üç sütun satırı ile yeni bir rol yapın.
Hat ayarlarını aşağıdaki gibi güncelleyin: Özel genişlik:% 100 özel dolgu (masaüstü):% 5 sol,% 5 sağ özel dolgu (tablet):% 25 sol,% 25 sağ özel dolgu (telefon):% 15 sol,% 15 Doğru Ardından, sütunun her ana öğesine aşağıdaki özel CSS görüntüsünü eklememiz gerekir. Devam sekmesinin altında, aşağıdaki CSS’yi ekleyin: Sütun 1 Ana Element CSS: Taşma: Gizli;
Yükseklik: 400 piksel;
Sütun 2 Ana öğeler CSS: Taşma: gizli;
Yükseklik: 400 piksel;
Sütun 3 Ana öğeler CSS: Taşma: gizli;
Yükseklik: 400 piksel;
Her sütunun yüksekliğine 400 pikseldir. Bu sonunda imleci yönlendirilirken görüntünün görünüm alanının yüksekliği olarak işlev görecektir. “Taşma: Gizli” özelliği, görüntünün sütunun dışına (gönderildiğinde) taşınan kısmının gizli kalmasını sağlayacaktır. Bu, resme her bir dönüş dönüşü etkisini her eklediğimizde daha mantıklı olacaktır. Kaydırma aşağı kaydırma efekti ile görüntüler yapmak şimdi görüntülerimizi boğa efekti ile yapmaya başlamaya hazırız. Etkinin nasıl çalıştığını anlarsanız bu çok basittir. Temel olarak, yapacağımız her şey görüntü eklemek ve daha sonra İmleç’i yönlendirirken görüntüleri% 100 olarak yukarı taşımak için Transform özelliğini kullanmaktır. Ardından, görüntünün doğru konumda durduğundan emin olmak için, gönderildiğinde sütunun yüksekliği ile aynı üst kenar boşluğunu eklememiz gerekir. Bu, görüntünün görünür görüntünün altındaki sağ noktada yuvarlanmayı bırakmasını sağlayacaktır. İşte nasıl yapılacağı. Görüntü modülünü sütuna ekleyin. Ardından aşağıdaki zammı ekleyin: Özel kenar boşluğu (imleci işaretle): 400 piksel üst dönüşüme y -eksenini çevirin (imleci işaret et): -100% yönlendirirken özel kenar boşluğundan emin olun İmleç, yukarıdaki CSS Custom’daki sütununuza verilen yüksekliğe eşittir. Ayrıca, dönüşüm dönüşümünün dönüşümü bir piksel değil, bir yüzde (%-100) ‘dır, bu nedenle dönüşüm çeviri kontrolünün giriş kutusuna değeri yazarak bunu manuel olarak girmeniz gerekir.
Bu ayarın işlevselliğini bazı görsel çizimlerle açıklarsam, aşağı doğru aşağı doğru ilerlemeye yardımcı olabilir. Kullandığınız resmin yüksekliği 700 piksel olduğunu varsayalım. Sütun yüksekliği sadece 400 pikseldir. Bu, varsayılan olarak (imleci yönlendirmeden önce), görüntünün altındaki taşmanın gizleneceği anlamına gelir, çünkü sütunu uzatır. Kullanıcı imleci resme yönlendirdikten sonra iki şey olur. İlk olarak, Transform özelliği çevirisi görüntüyü y -100 eksen değeri ile yukarı taşır. Başka bir deyişle, görüntü yüksek görüntünün (700 piksel)% 100’ünü yükseltir.
Ardından, görüntüye, konumun hemen aşağıda olması için görüntüyü sütun görünümüne döndürmek için 400 piksel bir üst marj verilir. Bu, Dönüştürme Hover efekti ile birlikte olur, böylece sonuç mükemmel bir yerleşim ile biten ince bir kaydırma olur. Doğrudan örnekte görünen sonuçlar. Geçiş ve hız eğrisinin süresini bildiğiniz gibi ayarlayarak, imleç yönlendirirken görüntünün önizlemesini görmek için geçiş süresi çok hızlıdır. Yavaşlamak için geçiş süresini güncelleyebilirsiniz. Hız eğrisini, süre boyunca hız değiştirecek şekilde de ayarlayabilirsiniz.
Ardından, H2 başlığı ile içeriği şu şekilde güncelleyin:
Çizginin yüksekliği 2EM, başlık metninin 2 katı boyutunun 2 katıdır (20px). Bu, çizgimin yüksekliğinin 40 piksel olacağı anlamına geliyor. Gümrük üzerinden dolgu 10 piksel olarak ayarlanır. Ve Divi’de varsayılan olarak tüm başlıklar için zaten var olan 10 piksel gizli bir dolgu var. Üst ve alt dolgu, 20 piksel yüksekliği arttırmak için birleştirilir. Yani … 40px (hattın yüksekliğinden) + 20px (dolgudan) = 60px şimdi metin modülünün yüksekliğini biliyoruz. Tabii ki, elemanları her zaman sadece emin olmak için dev araçlar kullanarak kontrol edebilirsiniz. Modülün altındaki varsayılan kenar boşluğunu ortadan kaldırmak için özel kenar boşluğu altında 0px özelliğine ihtiyaç vardır (oluk genişliği ile eklenir). İmleçi yönlendirirken metin modülüyle örtüşen bazı görüntüler olacağından, metin modülünün resmin üstünde katmanlar olarak kaldığından emin olmalıyız. Bunu göreceli konum metin modülünü vererek ve dizin değer-z’yi aşağıdaki gibi değiştirerek yapabiliriz: Ana öğeye aşağıdaki özel CSS ekleyin: Pozisyon: Göreli; Ardından Z’yi güncelleyin: Dizin Z: 3 Dizin Metin modülünü kopyalayıp yapıştırın Metin başlığı tamamlandıktan sonra, 2 ve 3’teki görüntünün üzerine kopyalayıp ekleyebiliriz (Çerçeve Görüntü Ekran modunu kullanarak). Tek yapmanız gereken her birinin içeriğini güncellemektir.
Her görüntünün geçerli metin modülünün yüksekliğini karşılamak için yönü gösterirken üst kenar boşluğu değerini güncelleyin, 1, 2 ve 3 sütunlarındaki her görüntü, imleci yönlendirirken 400 piksel özel bir marj içerir. Bu, özel sütunun yüksekliğine uyacak şekilde düzenlenir. Ancak, metin modülü artık bazı sütun alanı (60px yükseklik) aldığından, üst kaydırma marj değerini ayarlamamız gerekir. Bunu yapmak için üç resim seçmek için çok seçici özelliği kullanın. Ardından öğe ayarlarını aşağıdaki gibi güncelleyin: Özel kenar boşluğu (imleci işaret): 340px üst. Buradaki nihai sonuç, tasarımın nihai sonucudur. Sıraları çoğaltmaktan ve diğer portföy ekranları için gerektiği şekilde başlığın başlığını ve metnini güncellemekten çekinmeyin.
Bu, tabletler ve cep telefonlarında görünümdür. Son zihin, web sayfası tasarımınızı özel altında şişmiş bir efektle görüntüler, sadece çok harika bir etkileşim katmakla kalmaz, aynı zamanda çok fazla alan da tasarruf sağlar. Bu, birçok görüntüyü özlü ve simetrik bir düzende görüntülemenizi sağlar. Bu tür bir işlevsellik genellikle bir eklenti ile alacağımız bir şeydir. Ancak, Divi ile, başka eklentiler eklemeden tasarım ve işlevsellik üzerinde tam kontrole sahipsiniz. Umarım bu size bir sonraki projeniz için güzel bir portföy galerisi oluşturmanıza 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.
Şimdi öğreticiye gidelim mi? Bu kullanım vaka öğreticisi için başlamanız gereken şey, tasarımımızı divi kullanarak baştan beri inşa edeceğiz. Portföy öğelerinde kullanım için bazı resimlere/ekran görüntülerine de ihtiyacınız var. En az 1080px olan bir görüntü kullanmanızı öneririm. Yapmadıysanız üç sütun satırı yapın, yeni bir sayfa oluşturun. Ardından sayfanızın başlığını verin ve ön uçta bir divi üreticisi kullanın. Ardından üç sütun satırı ile yeni bir rol yapın.
Hat ayarlarını aşağıdaki gibi güncelleyin: Özel genişlik:% 100 özel dolgu (masaüstü):% 5 sol,% 5 sağ özel dolgu (tablet):% 25 sol,% 25 sağ özel dolgu (telefon):% 15 sol,% 15 Doğru Ardından, sütunun her ana öğesine aşağıdaki özel CSS görüntüsünü eklememiz gerekir. Devam sekmesinin altında, aşağıdaki CSS’yi ekleyin: Sütun 1 Ana Element CSS: Taşma: Gizli;
Yükseklik: 400 piksel;
Sütun 2 Ana öğeler CSS: Taşma: gizli;
Yükseklik: 400 piksel;
Sütun 3 Ana öğeler CSS: Taşma: gizli;
Yükseklik: 400 piksel;
Her sütunun yüksekliğine 400 pikseldir. Bu sonunda imleci yönlendirilirken görüntünün görünüm alanının yüksekliği olarak işlev görecektir. “Taşma: Gizli” özelliği, görüntünün sütunun dışına (gönderildiğinde) taşınan kısmının gizli kalmasını sağlayacaktır. Bu, resme her bir dönüş dönüşü etkisini her eklediğimizde daha mantıklı olacaktır. Kaydırma aşağı kaydırma efekti ile görüntüler yapmak şimdi görüntülerimizi boğa efekti ile yapmaya başlamaya hazırız. Etkinin nasıl çalıştığını anlarsanız bu çok basittir. Temel olarak, yapacağımız her şey görüntü eklemek ve daha sonra İmleç’i yönlendirirken görüntüleri% 100 olarak yukarı taşımak için Transform özelliğini kullanmaktır. Ardından, görüntünün doğru konumda durduğundan emin olmak için, gönderildiğinde sütunun yüksekliği ile aynı üst kenar boşluğunu eklememiz gerekir. Bu, görüntünün görünür görüntünün altındaki sağ noktada yuvarlanmayı bırakmasını sağlayacaktır. İşte nasıl yapılacağı. Görüntü modülünü sütuna ekleyin. Ardından aşağıdaki zammı ekleyin: Özel kenar boşluğu (imleci işaretle): 400 piksel üst dönüşüme y -eksenini çevirin (imleci işaret et): -100% yönlendirirken özel kenar boşluğundan emin olun İmleç, yukarıdaki CSS Custom’daki sütununuza verilen yüksekliğe eşittir. Ayrıca, dönüşüm dönüşümünün dönüşümü bir piksel değil, bir yüzde (%-100) ‘dır, bu nedenle dönüşüm çeviri kontrolünün giriş kutusuna değeri yazarak bunu manuel olarak girmeniz gerekir.
Bu ayarın işlevselliğini bazı görsel çizimlerle açıklarsam, aşağı doğru aşağı doğru ilerlemeye yardımcı olabilir. Kullandığınız resmin yüksekliği 700 piksel olduğunu varsayalım. Sütun yüksekliği sadece 400 pikseldir. Bu, varsayılan olarak (imleci yönlendirmeden önce), görüntünün altındaki taşmanın gizleneceği anlamına gelir, çünkü sütunu uzatır. Kullanıcı imleci resme yönlendirdikten sonra iki şey olur. İlk olarak, Transform özelliği çevirisi görüntüyü y -100 eksen değeri ile yukarı taşır. Başka bir deyişle, görüntü yüksek görüntünün (700 piksel)% 100’ünü yükseltir.
Ardından, görüntüye, konumun hemen aşağıda olması için görüntüyü sütun görünümüne döndürmek için 400 piksel bir üst marj verilir. Bu, Dönüştürme Hover efekti ile birlikte olur, böylece sonuç mükemmel bir yerleşim ile biten ince bir kaydırma olur. Doğrudan örnekte görünen sonuçlar. Geçiş ve hız eğrisinin süresini bildiğiniz gibi ayarlayarak, imleç yönlendirirken görüntünün önizlemesini görmek için geçiş süresi çok hızlıdır. Yavaşlamak için geçiş süresini güncelleyebilirsiniz. Hız eğrisini, süre boyunca hız değiştirecek şekilde de ayarlayabilirsiniz.
Aşağıdakileri Güncelleyin: Geçiş Süresi: 4000ms Geçiş Hız Eğrisi: Kolay
Genel olarak, kullanıcılara haddeleme efekti meydana geldiğinde görüntüleri işlemek için zaman vermek için daha yüksek yüksekliğe sahip görüntüler için geçiş süresini artırmak isteyeceksiniz. Görüntü modülünü kopyalayıp kalan sütunlara yapıştırın Şimdi tek yapmanız gereken görüntü modülünü kopyalamak ve sütun 2 ve sütun 3’e eklemektir. Ardından istediğiniz her yeni görüntü için görüntüyü güncelleyin. İşte bu! Metin modülünü kullanarak her görüntünün yukarıdaki başlığı ekleyin, resimlerinizin her birine bir başlık eklemek istiyorsanız, metin modülünü kullanarak yapabilirsiniz. Ancak, işlevini yerine getirmek için metin modülü ve görüntü modülünde bazı ayarlamalar yapmamız gerekir. Sütun 1’deki resmin üzerine yeni bir metin modülü ekleyin. Sütununuz sütunun yüksekliğine ayarlandığı için görüntü çerçevesi görüntüleme modunu daha kolay kullanacaksınız.Ardından, H2 başlığı ile içeriği şu şekilde güncelleyin:
Ana sayfa
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Arka Plan Rengi: #FFFFFF Metin Oryantasyonu: Orta Başlık 2 Metin Boyutu: 20px Post 2 Satır Yüksekliği: 2EM Özel Marj: 0PX DAHA FAZLA AŞAĞIDAKİ GÜNLÜK: 10PX TOP Bu düzenleme keyfi görünebilir, ama aslında değil. Bu değerler, metin modülünün daha sonra ne kadar yüksek olduğunu tahmin edebilir. Örneğin, metin modülünün 60 piksel yüksekliğe sahip olacağını biliyorum. Sayalım …Çizginin yüksekliği 2EM, başlık metninin 2 katı boyutunun 2 katıdır (20px). Bu, çizgimin yüksekliğinin 40 piksel olacağı anlamına geliyor. Gümrük üzerinden dolgu 10 piksel olarak ayarlanır. Ve Divi’de varsayılan olarak tüm başlıklar için zaten var olan 10 piksel gizli bir dolgu var. Üst ve alt dolgu, 20 piksel yüksekliği arttırmak için birleştirilir. Yani … 40px (hattın yüksekliğinden) + 20px (dolgudan) = 60px şimdi metin modülünün yüksekliğini biliyoruz. Tabii ki, elemanları her zaman sadece emin olmak için dev araçlar kullanarak kontrol edebilirsiniz. Modülün altındaki varsayılan kenar boşluğunu ortadan kaldırmak için özel kenar boşluğu altında 0px özelliğine ihtiyaç vardır (oluk genişliği ile eklenir). İmleçi yönlendirirken metin modülüyle örtüşen bazı görüntüler olacağından, metin modülünün resmin üstünde katmanlar olarak kaldığından emin olmalıyız. Bunu göreceli konum metin modülünü vererek ve dizin değer-z’yi aşağıdaki gibi değiştirerek yapabiliriz: Ana öğeye aşağıdaki özel CSS ekleyin: Pozisyon: Göreli; Ardından Z’yi güncelleyin: Dizin Z: 3 Dizin Metin modülünü kopyalayıp yapıştırın Metin başlığı tamamlandıktan sonra, 2 ve 3’teki görüntünün üzerine kopyalayıp ekleyebiliriz (Çerçeve Görüntü Ekran modunu kullanarak). Tek yapmanız gereken her birinin içeriğini güncellemektir.
Her görüntünün geçerli metin modülünün yüksekliğini karşılamak için yönü gösterirken üst kenar boşluğu değerini güncelleyin, 1, 2 ve 3 sütunlarındaki her görüntü, imleci yönlendirirken 400 piksel özel bir marj içerir. Bu, özel sütunun yüksekliğine uyacak şekilde düzenlenir. Ancak, metin modülü artık bazı sütun alanı (60px yükseklik) aldığından, üst kaydırma marj değerini ayarlamamız gerekir. Bunu yapmak için üç resim seçmek için çok seçici özelliği kullanın. Ardından öğe ayarlarını aşağıdaki gibi güncelleyin: Özel kenar boşluğu (imleci işaret): 340px üst. Buradaki nihai sonuç, tasarımın nihai sonucudur. Sıraları çoğaltmaktan ve diğer portföy ekranları için gerektiği şekilde başlığın başlığını ve metnini güncellemekten çekinmeyin.
Bu, tabletler ve cep telefonlarında görünümdür. Son zihin, web sayfası tasarımınızı özel altında şişmiş bir efektle görüntüler, sadece çok harika bir etkileşim katmakla kalmaz, aynı zamanda çok fazla alan da tasarruf sağlar. Bu, birçok görüntüyü özlü ve simetrik bir düzende görüntülemenizi sağlar. Bu tür bir işlevsellik genellikle bir eklenti ile alacağımız bir şeydir. Ancak, Divi ile, başka eklentiler eklemeden tasarım ve işlevsellik üzerinde tam kontrole sahipsiniz. Umarım bu size bir sonraki projeniz için güzel bir portföy galerisi oluşturmanıza ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
