Elementor ile Apple’ın IWD2020 sayfasını nasıl (yeniden inşa ediyoruz)
Pro Elementor ile neler yapabileceğinizi görmek her zaman ilginç. Bu çok güçlü bir araç ve bu en iyi web tasarım platformlarından bazılarına uygun. Bu haftanın başlarında, Facebook Elementor grubundaki biri Apple’ın yön sayfasını yeniden oluşturmanın mümkün olup olmadığını sordu. Apple, web tasarımlarıyla ünlüdür ve sayfalarının çoğu, marka erişimini genişletmek ve daha fazla satış teşvik etmek için kullanıcılara benzersiz deneyimler sunar. Elma versiyonu
Bu sayfaya bir bağlantı. Söz konusu sayfa, reklam kampanyaları için Apple tarafından yapılan 2020 Uluslararası Kadınlar Günü Direktifi sayfasıdır. Bu sayfa, kahraman metninin ortada olduğu çok benzersiz bir etki görüntüler, ancak fareyi sayfanın etrafında hareket ettirdiğinizde, altındaki görüntü ters yönde hareket eder. İmleci her resme yönlendirdiğinizde, etkili bir kadının biyografisini gösterecektir.
Kontrol etmenizi tavsiye ediyoruz. Bu etkinin Pro Elementor kullanarak yeniden yapılıp yeniden yapıldığını veya yalnızca zor kodlanıp kodlanamayacağını görmek istiyoruz. Apple’ın sayfası gerçekten özeldir, HTML, CSS konumlandırma ve JavaScript’in benzersiz bir karışımını kullanır. Her görüntünün kendisine uygulanan bir kayma etkisi vardır. İşte temel kodlardan bazıları:
Kontrol etmenizi tavsiye ediyoruz. Bu etkinin Pro Elementor kullanarak yeniden yapılıp yeniden yapıldığını veya yalnızca zor kodlanıp kodlanamayacağını görmek istiyoruz. Apple’ın sayfası gerçekten özeldir, HTML, CSS konumlandırma ve JavaScript’in benzersiz bir karışımını kullanır. Her görüntünün kendisine uygulanan bir kayma etkisi vardır. İşte temel kodlardan bazıları:
Unutmayın, bu sadece sayfanın bir kahramanı. Sayfanın geri kalanı hareket etmek için bilgi ve davetiyeler içerir, ancak bunu yapmak nispeten kolaydır. Zorluğumuz, Pro Elementor’ı kullanarak bir Apple Uluslararası Kadınlar Günü 2020’nin yön sayfalarını yeniden oluşturmak ve başka bir şey yok. JavaScript bile eklemeyeceğiz.
Element sürümü Pro Elementor ile birkaç saat oynadıktan sonra, yalnızca orijinal Elementor ve Effect kullanarak Apple yön sayfasına neredeyse aynı olan bir sayfa oluşturduk. Takip etmek için şablonu alın, bu sayfa için şablon dosyasını indirmenizi ve Elementor kurulumunuza yüklemenizi öneririz. Bu, bu etkiyi tam olarak nasıl elde ettiğimizi anlamanıza yardımcı olacaktır. JSON şablonunun kendi Elementor kurulumunuza yüklenmesini istiyor musunuz? Buraya götür. [Patient_link text = “Şimdi Get” Color = “Devir” Direct = “Doğru”]
Element sürümü Pro Elementor ile birkaç saat oynadıktan sonra, yalnızca orijinal Elementor ve Effect kullanarak Apple yön sayfasına neredeyse aynı olan bir sayfa oluşturduk. Takip etmek için şablonu alın, bu sayfa için şablon dosyasını indirmenizi ve Elementor kurulumunuza yüklemenizi öneririz. Bu, bu etkiyi tam olarak nasıl elde ettiğimizi anlamanıza yardımcı olacaktır. JSON şablonunun kendi Elementor kurulumunuza yüklenmesini istiyor musunuz? Buraya götür. [Patient_link text = “Şimdi Get” Color = “Devir” Direct = “Doğru”]
*Profesyonel ipuçları: Ücretsiz almak için 0,00 $ girin. Ama kimseye söyleme?
Elementor Sınırları Gerçek sayfayı nasıl oluşturduğumuzu tartışırken, kahramanlara atıfta bulunacağız, çünkü bu yapının karmaşık bir parçasıdır. Elementor Pro, bu tür web tasarımı açısından çeşitli sınırlamalara sahiptir. Ana sorunun içeriği sayfadan kaldırmak çok zordur ve ardından görünümüne götürmek çok zordur. Apple veya şablon sürümümüze giderseniz, fareyi hareket ettirdiğinizde, görüntüleme alanının dışındaki içeriğin görünüm alanına taşındığını göreceksiniz. Derinliği arttırmak için, bu hareket imleç farenizin hareketine hemen reaktiftir.
Kısacası, “ekran dışındaki içerik” sınırlarının üstesinden gelmenin yollarını bulmamız gerekiyor. Şimdi kahramanların yaratılışını nasıl inşa ederiz, bu sayfanın nasıl yapıldığını adım adım yönlendirelim. İlk metinden başlayıp görüntü ekleyerek ortadan çalışıyoruz.
Bir ekran yapısı elde etmek için, Elementor Canvas’taki her 5 sütunla iç sütunun 5 parçasını sürükliyoruz. Bu tam yükseklikte bulunur. Orta sütun metin içerirken, görüntü ondan yayılır. Görüntü görüntünün öğesi veya öğesi kullanılarak eklenir ve varsayılan opaklığı 0.5’e ayarlayarak daha koyu hale getirilir. Yüzerken, opaklık 0.8’e yükselir. Resim, yüzde ve dolgu ve piksel marjının genişliği kullanılarak ekranda konumlandırılır. Ayrıca, tuvalin etrafında görüntüleri içeren tüm sütunu hareket ettirmek için marj kullanıyoruz. Gördüğünüz gibi, tüm görüntüler yatay satırda, ancak bahçe tuvaline dikkatsizce yerleştirilmiş gibi görünmek için dengeleniyorlar.
Elementor Sınırları Gerçek sayfayı nasıl oluşturduğumuzu tartışırken, kahramanlara atıfta bulunacağız, çünkü bu yapının karmaşık bir parçasıdır. Elementor Pro, bu tür web tasarımı açısından çeşitli sınırlamalara sahiptir. Ana sorunun içeriği sayfadan kaldırmak çok zordur ve ardından görünümüne götürmek çok zordur. Apple veya şablon sürümümüze giderseniz, fareyi hareket ettirdiğinizde, görüntüleme alanının dışındaki içeriğin görünüm alanına taşındığını göreceksiniz. Derinliği arttırmak için, bu hareket imleç farenizin hareketine hemen reaktiftir.
Kısacası, “ekran dışındaki içerik” sınırlarının üstesinden gelmenin yollarını bulmamız gerekiyor. Şimdi kahramanların yaratılışını nasıl inşa ederiz, bu sayfanın nasıl yapıldığını adım adım yönlendirelim. İlk metinden başlayıp görüntü ekleyerek ortadan çalışıyoruz.
Bir ekran yapısı elde etmek için, Elementor Canvas’taki her 5 sütunla iç sütunun 5 parçasını sürükliyoruz. Bu tam yükseklikte bulunur. Orta sütun metin içerirken, görüntü ondan yayılır. Görüntü görüntünün öğesi veya öğesi kullanılarak eklenir ve varsayılan opaklığı 0.5’e ayarlayarak daha koyu hale getirilir. Yüzerken, opaklık 0.8’e yükselir. Resim, yüzde ve dolgu ve piksel marjının genişliği kullanılarak ekranda konumlandırılır. Ayrıca, tuvalin etrafında görüntüleri içeren tüm sütunu hareket ettirmek için marj kullanıyoruz. Gördüğünüz gibi, tüm görüntüler yatay satırda, ancak bahçe tuvaline dikkatsizce yerleştirilmiş gibi görünmek için dengeleniyorlar.
Bio, bu sayfanın önemli etkisinin kaydırma görüntüsünü göstermektedir. Her resmin üzerinde yüzerken kadının biyografisini göstermektir. Bunu yapmak için önce metin öğelerini kullanarak içerik ekleriz ve kesinlikle sütuna konumlandırırız.
Özel bir CSS kullanarak, her metin öğesinin genişliğini de ayarladık. Genişliğin çoğu% 50’dir (sütuna göre), diğerleri ise% 60 ila 80 genişliktir. Bir dizin kullanarak resmin üzerine yerleştirilirler. Biyografiyi yayınlanan görüntüye göre görüntülemek ve gizlemek için özel bir CSS kullanmalıyız. Bunu yapmak oldukça basittir ve CSS özel sınıfının görüntünün ve metninin öğelerini değiştirmek için ihtiyacımız olan her şey. Daha sonra, metnin opaklığı varsayılan olarak sıfır hale getirmek için çok basit CSS kullanırız ve bir kez imleci görüntüye işaret ederiz.
Özel bir CSS kullanarak, her metin öğesinin genişliğini de ayarladık. Genişliğin çoğu% 50’dir (sütuna göre), diğerleri ise% 60 ila 80 genişliktir. Bir dizin kullanarak resmin üzerine yerleştirilirler. Biyografiyi yayınlanan görüntüye göre görüntülemek ve gizlemek için özel bir CSS kullanmalıyız. Bunu yapmak oldukça basittir ve CSS özel sınıfının görüntünün ve metninin öğelerini değiştirmek için ihtiyacımız olan her şey. Daha sonra, metnin opaklığı varsayılan olarak sıfır hale getirmek için çok basit CSS kullanırız ve bir kez imleci görüntüye işaret ederiz.
.des {opaklık: 0; } .cat-img: hover + .des {opaklık: 1; Geçiş süresi: Bu, kahramanların yapısının çoğunu içerir, şimdi hareket ve taşan etkilerin etkilerini girme zamanıdır. Gördüğünüz gibi, mevcut ekranımız olası tüm görüntüleri içerir. İşletmenin ilk sırası, bu görüntülerin görünümden ayrılmasını sağlamaktır. Bunu yapmak için CSS Dönüşüm Ölçeği özelliğini kullanıyoruz. Gördüğünüz gibi, her şey temelde bu tuval üzerindeki boyutun yarısıdır (çok fazla metin .7em). Bu içeriği iki kez taramayı/büyütmeyi beklediğimiz için bu bir nedenden dolayı yapılır.
Özel bir CSS üzerinde çalışmanın tam yolunu görmek için avlu şablonunu alın. Yapılan şey, çoğu içeriği görünümden teşvik etmektir ve bize orijinal Apple yön sayfası gibi Kahramanlar sayfasında hareket etmek için orijinal Pro Elementor hareketinin etkisi olan fare efektimizi kullanma yeteneğini sunar. Bu CSS kodunu, tüm kavşaklarımızı tam ekranda içeren bir sütuna uyguluyoruz. seçici {dönüşüm: ölçek (2); } Yapılan şey, sütundaki tüm içeriği büyütmek ve boyutunu ikiye çıkarmaktır.
Özel bir CSS üzerinde çalışmanın tam yolunu görmek için avlu şablonunu alın. Yapılan şey, çoğu içeriği görünümden teşvik etmektir ve bize orijinal Apple yön sayfası gibi Kahramanlar sayfasında hareket etmek için orijinal Pro Elementor hareketinin etkisi olan fare efektimizi kullanma yeteneğini sunar. Bu CSS kodunu, tüm kavşaklarımızı tam ekranda içeren bir sütuna uyguluyoruz. seçici {dönüşüm: ölçek (2); } Yapılan şey, sütundaki tüm içeriği büyütmek ve boyutunu ikiye çıkarmaktır.
Burada ölçek çoğaltma boyutlarını dönüştürün. Şimdi sayfa orijinal Apple yön sayfasına çok daha benziyor. Eğer imleci şu anda herhangi bir resme yönlendirirseniz, biyografi ilgili kişi için kaybolacaktır.
Gördüğünüz gibi “tam boy” üzerindeki biyografi etkisi, bu özel CSS aynı zamanda sütundaki her şey için Elementor kullanıcı arayüzünü iki katına çıkarır. Bu yüzden bu kahramanın sonunda uygulanır. Son etki “fare hareketimizi” birleştirmektir. Bu, projenin daha kolay bir parçasıdır, çünkü bu Elementor’a dahil edilen orijinal etkidir. Sütun için gelişmiş ayarların altında, hareket etkisini açın, ardından fare efektini değiştirin. Fare izimizi ters yönde hareket ettirmek için ayarladık ve beşinci hızı ayarladık. Sayfanın farenizin hareketine ne kadar hızlı tepki vereceği üzerindeki hız etkisini değiştirme ve ayrıca Sol ve Sağ, Üst veya Alt veya Alt, İçerik Görünüm Pekansının ne kadar hareket edeceğini belirleyin.
Deneyebileceğiniz sorun, sayfanın ikinci bölümünde görüntülenen ve aşağıda tartışılacak olan içeriktir. Başka bir sorun, dikey ve yatay tarayıcı kaydırma boşluklarının hareket etmesine neden olan içeriktir. Bunu düzeltmek için, taşma x’i ayarlayın ve bu CSS’yi kullanarak Y taşmayı gizli hale getirin:
Deneyebileceğiniz sorun, sayfanın ikinci bölümünde görüntülenen ve aşağıda tartışılacak olan içeriktir. Başka bir sorun, dikey ve yatay tarayıcı kaydırma boşluklarının hareket etmesine neden olan içeriktir. Bunu düzeltmek için, taşma x’i ayarlayın ve bu CSS’yi kullanarak Y taşmayı gizli hale getirin:
CSS özel taşıyor, ikinci parçanın birinci bölümden daha yüksek bir Z indeeksine sahip olduğundan emin olun. Ve elementleri kullanarak Apple IWC2020’nin tüm kahramanlarını böyle inşa ediyoruz ve başka bir şey yok (bazı basit özel CSS dışında). Bu, birçok farklı web sitesinde kullanabileceğiniz çok benzersiz bir etkidir. Apple’ı tamamen kopyalamak zorunda değilsiniz, ancak bu yöntemi ve tekniği anlamak web sitenizi kesinlikle daha ilginç hale getirecektir. Bu efekti beğendiyseniz, çok katmanlı paralaks öğretici makalemizi de okumanızı öneririz. İkinci bölüm ama bekleyin, bitirmedik bile. Sayfaların ikinci kısmı, hareket etmek için birkaç davet ve yukarıdaki benzersiz kahramanlara bağlam sunan ek bilgiler içerir. Pro Elementor ile bunu yapmak çok kolay, yaptığımız tek şey parçalar, H2 öğeleri, iki sütunlu iç, bazı fotoğraflar, metin blokları ve düğmeler eklemek ve bir gün demek. Elimizdeki şey bu:
