Divi’de 3D fotoğraf duvarları tasarlamak için dönüşüm seçenekleriyle perspektif nasıl kullanılır
3D fotoğraf duvarları tasarlamak, yalnızca Photoshop veya Sketch gibi fotoğraf editörlerini kullanmak mümkün olan bir şey gibi görünüyor. Ama değil! Şu anda sadece CSS ile web’de yapabileceğiniz imkansız görünen birçok tasarım var. Ve Divi gibi sayfa yapımcılarıyla, bu tür bir tasarım yapmak için CSS hakkında çok şey bilmenize bile gerek yok. Bu yüzden bugün size Divi’de 3D fotoğraf duvarlarının nasıl tasarlanacağını göstereceğim. İşin perspektifi CSS özelliğini kullanmaktır. Üst öğeye yalnızca bir CSS hattı eklendiğinde, öğeyi gerçek bir 3D tasarımda oynamak için Divi Varsayılan Dönüşüm seçeneğini kullanabilirsiniz.
Başlayalım! Aşağıdaki gizlice göz, bugün tasarlayacağımız bir 3D fotoğraf duvar gizlice.
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 mi gidiyorsunuz? YouTube kanalımıza abone olun Bu öğreticiye başlamaya başlayın, ihtiyacınız olan tek şey yüklü ve aktif olan divi temasıdır. Yapmanız gereken bazı resimlere ihtiyacınız olacak, bu yüzden lütfen seyahat aracısı düzeni paketinden kullandığım resmi kullanın. Bundan sonra, yeni bir sayfa oluşturmanız, sayfalar ve başlıklar sağlamanız ve önde oluşturmak için Divi Builder’ı kullanmanız gerekir. Ardından “Bina Ochief” seçeneğini seçin. İşte burada. Tasarım tuvaliniz bekliyor! Dönüşüm seçenekleriyle nasıl perspektifi anlamak Temel sanat sınıfında bulunuyorsanız, perspektife aşina olabilirsiniz. Bu, sanatçıların bir kağıt veya 2D tuval parçası üzerinde olmasına rağmen 3D görünen nesneleri çizmek için kullanılan bir tekniktir. Web tasarımında, dönüşüm özelliğini kullanarak öğeleri 3D konumdaki konumlandırabilirsiniz. Divi’de bu dönüşüm seçeneği Divi’nin üreticisindedir. Elemanı 3D konuma yerleştiren ana dönüşüm özelliği, Z, X veya Y ekseni boyunca öğeleri oynatmanızı sağlayan dönüşüm dönüşüdür. Ancak, öğeyi bir Rotate dönüşümü kullanarak oynatırsanız, perspektif özelliği uygulanmadıkça öğe 3D olarak görünmeyecektir. Örneğin, sütunun bir satırına eklenen bir görüntü içeren bir resim modülünüz olduğunu varsayalım.
Ardından, X ekseni boyunca görüntüleri çalmak için Dönüşüm Rotate özelliğini kullanırsınız. Görüntü dönecek, ancak yine de 2D, görüntünün sadece üst ve alttan daha kısa olması gibi görünmesi için.
Şimdi, hattın ana öğesine küçük bir CSS parçası kullanarak bir perspektif eklerseniz (resmin ana öğesidir), görüntüye perspektif eklersiniz. Perspektif değerine bağlı olarak, ekranı gören kullanıcıdan görünen nesnenin mesafesini artırabilir veya azaltabilirsiniz. İşte “Perspektif: 600 piksel” eklerseniz, görüntünün üst kısmının daha küçük olduğunu ve görüntünün altının daha büyük olduğunu ve 3D perspektif efekti oluşturduğunu görebilirsiniz. Temel olarak görüntü, sayfayı görüntüleyen kullanıcılardan 900 piksel olarak görülebilir. Bu öğreticide, görüntünün tüm satırını döndürmek için aynı tekniği kullanacağım ve daha sonra 3D fotoğraf duvarı yapmak için ana bölüme perspektif ekleyeceğim. 3D fotoğraf duvarları üst ve alt tasarlama Bu ilk tasarımda, başlık olarak kullanılabilecek bir tür metnin üstüne ve altına 3D fotoğraf duvarları ekleyeceğiz. İşte nasıl yapılacağı. Yeni sayfanızda bir şey başlatmak için üst 3D fotoğraf duvarını yapın, dört sütun satırı ile düzenli bir bölüm oluşturun. Sütun 1’de, ilk resminizle görüntü modülünü ekleyin. Bu örnekte kullandığım tüm görüntüler 600px kat 800 piksel. Görüntülerinizi görüntü modülüne yükledikten sonra, dolguyu aşağıdaki gibi güncelleyin: Özel dolgu:% 3 üst,% 3 daha düşük,% 3 sol,% 3 sağ çiftleşme (veya kopyala ve yapıştırın) görüntüsüne ekleyin ve dört sütunun her birine ekleyin Böylece bunun gibi dört sütunun her birinde üç görüntünüz var. Bu, 3D duvar tasarımları yapmak için dönüp perspektifler ekleyeceğimiz üst duvar (veya tavan) olarak işlev görecektir. Perspektif eklemek için bölümü ayarlayın ve taşmayı gizle, satır modülünü (ayrı görüntüler değil) oynatacağımız için, üst çizgiye bir parça olan perspektif özellikleri eklememiz gerekir. Ve görüntünün kaptan çıkmasını önlemek için, dikey ve yatay taşmaya gizlenmiş taşma eklemeliyiz. Bunu yapmak için, aşağıdaki bölümleri güncelleyin ve aşağıdakileri güncelleyin: Arka plan rengi: #000000 Pilding Custom: 0px üst, 0px Aşağıda perspektif özelliği eklemek için, ana öğeye aşağıdaki özel CSS ekleyin: CSS Ana Element: Perspektif: 400px; Taşma özelliğine şu şekilde bakın: Yatay taşma: Gizli Dikey Taşma: Gizli Satır Ayarlarını Güncelle: Olukların Genişliği ve Genişliği Şimdi, satırı çalınan 3D tasarıma hazırlamak için ayarlamanın zamanı geldi. Bunu yapmak için, olukların genişliğini güncelleyerek genişliği küçülteceğiz ve görüntü arasındaki marjı ortadan kaldıracağız. Aşağıdaki satır ve güncelleme ayarlarını açın: Talang genişliği: 1 genişlik: 300 piksel (masaüstü, tablet ve mobil)
Sıralı Ayarları Güncelle: Dönüşü ve Origin Değiştir Hattı aşağıdaki gibi döndürmek için Dönme Dönüşüm seçeneğini kullanın: Y ekseninin dönüşümü: -58deg
Origin dönüşünü aşağıdaki gibi değiştirin: Dönüşüm Kökeni: Alt Orta (veya% 100% 50) Sıra Ayarlarını Güncelle Ayarları: Özel sütunun genişliği, dört sütunun düzeninin tablet ve cep telefonu ekranında olmasını istediğimiz için CSS’yi kırık noktadaki sütunun genişliği için değiştirmemiz gerekir. Bunu yapmak için, her sütuna geniş bir CSS özelliği eklememiz gerekir. Devam sekmesinin altında, her sütunun ana öğelerine aşağıdaki gibi aşağıdaki özel CSS görüntüsünü ekleyin: (Not: Oluk genişliğinin 1 olarak ayarlandığından emin olun veya işlev görmeyecek) Sütun 1 Ana Eleman: Genişlik:%25! Önemli! ;
Sütun 2 Ana Öğeler: Genişlik:%25! Önemli; Sütun 3 Ana Öğeler: Genişlik:%25! Önemli; Sütun 4 Ana Öğeler: Genişlik:%25! Önemli; İşte burada. İlk 3D fotoğraf duvarımız yapıldı. Başlık bölümünü oluştur bir tasarım başlığı oluşturmak için, geçerli parçanın hemen altında bir sütun satırı ile yeni bir normal bölüm oluşturmamız gerekir.
Hover Effect Bonus: Hatta görmek için duvarı sallayın! Kullanıcıların yüzerken ekrana sallayarak görüntü duvarını görmesini sağlayan dönme Hover Transform efektini kolayca ekleyebilirsiniz. Bunu yapmak için aşağıdaki sola açın ve satır ayarlarını güncelleyin: Dönüşüm Kökeni: Sol Orta Dönüşüm Döndürme X Ekseni (Nokta İmleç): 0deg Ardından, sağ sıra ayarlarında, aşağıdakileri güncelleyin: Dönüşüm Kökeni: Sağ Dönüşüm Döndürme X Eksenini (Nokta İmleç): 0deg Şimdi sonuçlara bakın. Bonus Tasarım Efektleri: Görüntülerin uzaya bölünmesini sağlamak, görüntü satırı perspektifle döndürüldüğünden, dönüşüm çevirisini kullanarak görüntüleri satırınızda taşıyabilirsiniz. Bu konuda havalı olan, hareketlerin 3D alanı boyunca kalacağıdır. Bunu yapmak için, görüntü ayarlarını açın ve görüntülerin dışına yerleştirmek için Dönüşüm seçeneğini kullanın! Aşağıda, resme bazı dönüşüm çevirisi değerleri ekleyerek görünüşünün bir örneğidir.
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 mi gidiyorsunuz? YouTube kanalımıza abone olun Bu öğreticiye başlamaya başlayın, ihtiyacınız olan tek şey yüklü ve aktif olan divi temasıdır. Yapmanız gereken bazı resimlere ihtiyacınız olacak, bu yüzden lütfen seyahat aracısı düzeni paketinden kullandığım resmi kullanın. Bundan sonra, yeni bir sayfa oluşturmanız, sayfalar ve başlıklar sağlamanız ve önde oluşturmak için Divi Builder’ı kullanmanız gerekir. Ardından “Bina Ochief” seçeneğini seçin. İşte burada. Tasarım tuvaliniz bekliyor! Dönüşüm seçenekleriyle nasıl perspektifi anlamak Temel sanat sınıfında bulunuyorsanız, perspektife aşina olabilirsiniz. Bu, sanatçıların bir kağıt veya 2D tuval parçası üzerinde olmasına rağmen 3D görünen nesneleri çizmek için kullanılan bir tekniktir. Web tasarımında, dönüşüm özelliğini kullanarak öğeleri 3D konumdaki konumlandırabilirsiniz. Divi’de bu dönüşüm seçeneği Divi’nin üreticisindedir. Elemanı 3D konuma yerleştiren ana dönüşüm özelliği, Z, X veya Y ekseni boyunca öğeleri oynatmanızı sağlayan dönüşüm dönüşüdür. Ancak, öğeyi bir Rotate dönüşümü kullanarak oynatırsanız, perspektif özelliği uygulanmadıkça öğe 3D olarak görünmeyecektir. Örneğin, sütunun bir satırına eklenen bir görüntü içeren bir resim modülünüz olduğunu varsayalım.
Ardından, X ekseni boyunca görüntüleri çalmak için Dönüşüm Rotate özelliğini kullanırsınız. Görüntü dönecek, ancak yine de 2D, görüntünün sadece üst ve alttan daha kısa olması gibi görünmesi için.
Şimdi, hattın ana öğesine küçük bir CSS parçası kullanarak bir perspektif eklerseniz (resmin ana öğesidir), görüntüye perspektif eklersiniz. Perspektif değerine bağlı olarak, ekranı gören kullanıcıdan görünen nesnenin mesafesini artırabilir veya azaltabilirsiniz. İşte “Perspektif: 600 piksel” eklerseniz, görüntünün üst kısmının daha küçük olduğunu ve görüntünün altının daha büyük olduğunu ve 3D perspektif efekti oluşturduğunu görebilirsiniz. Temel olarak görüntü, sayfayı görüntüleyen kullanıcılardan 900 piksel olarak görülebilir. Bu öğreticide, görüntünün tüm satırını döndürmek için aynı tekniği kullanacağım ve daha sonra 3D fotoğraf duvarı yapmak için ana bölüme perspektif ekleyeceğim. 3D fotoğraf duvarları üst ve alt tasarlama Bu ilk tasarımda, başlık olarak kullanılabilecek bir tür metnin üstüne ve altına 3D fotoğraf duvarları ekleyeceğiz. İşte nasıl yapılacağı. Yeni sayfanızda bir şey başlatmak için üst 3D fotoğraf duvarını yapın, dört sütun satırı ile düzenli bir bölüm oluşturun. Sütun 1’de, ilk resminizle görüntü modülünü ekleyin. Bu örnekte kullandığım tüm görüntüler 600px kat 800 piksel. Görüntülerinizi görüntü modülüne yükledikten sonra, dolguyu aşağıdaki gibi güncelleyin: Özel dolgu:% 3 üst,% 3 daha düşük,% 3 sol,% 3 sağ çiftleşme (veya kopyala ve yapıştırın) görüntüsüne ekleyin ve dört sütunun her birine ekleyin Böylece bunun gibi dört sütunun her birinde üç görüntünüz var. Bu, 3D duvar tasarımları yapmak için dönüp perspektifler ekleyeceğimiz üst duvar (veya tavan) olarak işlev görecektir. Perspektif eklemek için bölümü ayarlayın ve taşmayı gizle, satır modülünü (ayrı görüntüler değil) oynatacağımız için, üst çizgiye bir parça olan perspektif özellikleri eklememiz gerekir. Ve görüntünün kaptan çıkmasını önlemek için, dikey ve yatay taşmaya gizlenmiş taşma eklemeliyiz. Bunu yapmak için, aşağıdaki bölümleri güncelleyin ve aşağıdakileri güncelleyin: Arka plan rengi: #000000 Pilding Custom: 0px üst, 0px Aşağıda perspektif özelliği eklemek için, ana öğeye aşağıdaki özel CSS ekleyin: CSS Ana Element: Perspektif: 400px; Taşma özelliğine şu şekilde bakın: Yatay taşma: Gizli Dikey Taşma: Gizli Satır Ayarlarını Güncelle: Olukların Genişliği ve Genişliği Şimdi, satırı çalınan 3D tasarıma hazırlamak için ayarlamanın zamanı geldi. Bunu yapmak için, olukların genişliğini güncelleyerek genişliği küçülteceğiz ve görüntü arasındaki marjı ortadan kaldıracağız. Aşağıdaki satır ve güncelleme ayarlarını açın: Talang genişliği: 1 genişlik: 300 piksel (masaüstü, tablet ve mobil)
Sıralı Ayarları Güncelle: Dönüşü ve Origin Değiştir Hattı aşağıdaki gibi döndürmek için Dönme Dönüşüm seçeneğini kullanın: Y ekseninin dönüşümü: -58deg
Origin dönüşünü aşağıdaki gibi değiştirin: Dönüşüm Kökeni: Alt Orta (veya% 100% 50) Sıra Ayarlarını Güncelle Ayarları: Özel sütunun genişliği, dört sütunun düzeninin tablet ve cep telefonu ekranında olmasını istediğimiz için CSS’yi kırık noktadaki sütunun genişliği için değiştirmemiz gerekir. Bunu yapmak için, her sütuna geniş bir CSS özelliği eklememiz gerekir. Devam sekmesinin altında, her sütunun ana öğelerine aşağıdaki gibi aşağıdaki özel CSS görüntüsünü ekleyin: (Not: Oluk genişliğinin 1 olarak ayarlandığından emin olun veya işlev görmeyecek) Sütun 1 Ana Eleman: Genişlik:%25! Önemli! ;
Sütun 2 Ana Öğeler: Genişlik:%25! Önemli; Sütun 3 Ana Öğeler: Genişlik:%25! Önemli; Sütun 4 Ana Öğeler: Genişlik:%25! Önemli; İşte burada. İlk 3D fotoğraf duvarımız yapıldı. Başlık bölümünü oluştur bir tasarım başlığı oluşturmak için, geçerli parçanın hemen altında bir sütun satırı ile yeni bir normal bölüm oluşturmamız gerekir.
Bir modül eklemeden önce, parçayı siyah arka planla güncelleyin: arka plan rengi: #000000
Ardından, bölümün ana öğelerine aynı perspektif özelliğini daha önce yaptığımız gibi ekleyin:
Ardından metin modülünü aşağıdaki satıra ekleyin: İçerik: Fotoğraf Yazı Tipi Metin: Titillium Web Yazı Tipi Stili Metin: TT Metin Renk Metin: #FFFFF Metin Boyutu Metin: 5VW Uzay Metin Harfleri: 6px Satır Metin Yüksekliği: Orta Yönlendirme: Orta Yönlendirme:
Şimdi, metin modülüne dönüşüm dönüşü ekleyebiliriz. Ebeveyn (veya kısım) üzerindeki perspektifle 3D efekti metni döndürdükten sonra görünecektir. Dönüşün dönüşüm değerini aşağıdaki gibi ekleyin: x -ekseninin dönüşümü: -12deg dönüşüm ekseni y: 32deg
Hover Effect Bonus: Hatta görmek için duvarı sallayın! Kullanıcıların yüzerken ekrana sallayarak görüntü duvarını görmesini sağlayan dönme Hover Transform efektini kolayca ekleyebilirsiniz. Bunu yapmak için aşağıdaki sola açın ve satır ayarlarını güncelleyin: Dönüşüm Kökeni: Sol Orta Dönüşüm Döndürme X Ekseni (Nokta İmleç): 0deg Ardından, sağ sıra ayarlarında, aşağıdakileri güncelleyin: Dönüşüm Kökeni: Sağ Dönüşüm Döndürme X Eksenini (Nokta İmleç): 0deg Şimdi sonuçlara bakın. Bonus Tasarım Efektleri: Görüntülerin uzaya bölünmesini sağlamak, görüntü satırı perspektifle döndürüldüğünden, dönüşüm çevirisini kullanarak görüntüleri satırınızda taşıyabilirsiniz. Bu konuda havalı olan, hareketlerin 3D alanı boyunca kalacağıdır. Bunu yapmak için, görüntü ayarlarını açın ve görüntülerin dışına yerleştirmek için Dönüşüm seçeneğini kullanın! Aşağıda, resme bazı dönüşüm çevirisi değerleri ekleyerek görünüşünün bir örneğidir.
