Divi’deki 3D odada çarpışan yüzen bir modül nasıl yapılır
Divi kullanabilecek yeni tasarımları keşfetmek her zaman eğlencelidir. Ve bugün, 3D alanı keşfetmek için Divi’yi kullanacağız! Teknik olarak, 3D alanda çarpışmaya benzeyen yüzen bir modülün nasıl tasarlanacağını keşfedeceğiz. Bu tasarım, web sitenizde bir “alan” hizmeti, ürün veya kaynağınız olduğunu göstererek ziyaretçileri şaşırtmanın yaratıcı bir yolu olarak iyi çalışacaktır. Açıkçası, bu öğretici gerçek hayatta alanın keşfi gibi hayal ettiğim şeyle karşılaştırılamaz. Ama umarım dışarıdaki kaşifler Divi yol boyunca birkaç şey öğrenebilir.
Aşağıdaki gizlice göz atma, birlikte yapacağımız tasarımdan gizlice bir bakış.
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ına abone olun Başlamak için önceden hazırlanmış düzen ile başladığımız, Divi temasını yüklediğinizden ve etkinleştirdiğinizden emin olun. Ardından yeni bir sayfa oluşturun, sayfa başlığını verin ve Divi Builder’ı (önde) kullanın. “Önceden Yapılmış Düzen Seç” seçeneğini seçin. Ardından yeni sayfanıza video oyunlarının düzenini seçin ve içe aktarın.
Tasarımımıza başlamak için, tasarımımız için kullanacağımız bir açıklama içeren “Oyun Özellikleri” başlıklı bir bölüm kullanacağız. Çünkü bu gerçekten ihtiyacımız olan tek kısımdır, iki açıklama satırı hariç her bir parçayı ve satırı da devam ettirir. Divi’de 3D oda tasarımında yüzen bir bulanıklık uygulamak, iki satır açıklama içeren, yeni bir sütun çizgisi oluşturan ve üste sürükleyen önceden hazırlanmış düzende ilk bulanıklık sırasını yapar. Şimdi çok seçmeli Divi özelliğini kullanın (her bir açıklamayı seçerken CTRL/CMD’yi basılı tutun), aşağıdaki iki sütundaki 5 açıklamayı seçin ve bölümün üst kısmındaki yeni sütun satırına sürükleyin. Artık aşağıdaki önceden hazırlanmış düzene dahil olan iki satırı silebilirsiniz. Bundan sonra, 5 açıklama içeren sadece bir sütunun bir satırına sahip olmalısınız. Bu tasarımda aradığımız 3D efekti almak için bölümümüze perspektif ekleyin, bizim tarafımıza bir CSS perspektif özelliği eklememiz gerekir. Bu, dönüşüm seçeneğini kullanarak hattı her çevirdiğimizde satırımıza bir 3D perspektif ekleyecektir. Bölüm ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: Perspektif: 1000 piksel; Daha sonra, ekranı görüntülerken 3D öğeleri (bu durumda, satırlar) kullanıcının bakış açısından daha yakın veya daha fazla getirmek için perspektif değerini eklemek veya azaltmak isteyebilirsiniz. Daha fazla bilgi için, perspektifin Divi’deki Dönüşüm seçeneği ile nasıl çalıştığına bakın. Açıklamamızı düzenlemeye başlamadan önce satırı ayarlayın, her şeyden önce satır ayarlarımızı yapılandıralım. Bu tasarım için satır seviyesinde değiştirmemiz gereken üç ana şey var:
“Ekran: Flex” i kullanarak açıklamamızı yatay olarak uyumlu hale getirmemiz gerekiyor. Bu, tasarımımızı tüm cihazlarda tutarlı ve duyarlı tutacaktır (karşısında tabletlerde ve cep telefonlarında hasar görecek 5 sütun düzeni kullanılarak). Oluk genişliğini 1 olarak ayarlayarak varsayılan sütun marjını ortadan kaldırmamız gerekir.
X ekseni üzerindeki 45 derecelik satırı döndürmek için bir dönme dönüşümü kullanmamız gerekiyor. Perspektif özelliği, ana (bölüm) eklenen perspektif özelliği ve tüm öğelerin aradığımız bir 3D efekti var.
Aşağıdaki satır ayarlarını açın ve güncelleme:
Talang genişliği: 1 genişlik:% 80 (masaüstü),% 100 (tablet),% 100 (cep telefonu) dönüşüm dönüş ekseni x: 45deg css ana eleman sütunu:
Ekran: Flex; haklı-içerik: merkez;
Bulanıklık ve uzay stilini ayarlamak, açıklamamızın içeriğini ve stilini biraz ayarlama zamanıdır. Tüm açıklamalarımıza aynı ayarlamayı uygulamak istediğimiz için, tüm açıklamaları seçmek ve sermaye düzenleme sermayesini uygulamak için çok seçici tekrar kullanın.
Çarpışan bir etki yaratmak için, kopyalanan çizgiyi ters yönde (-45deg) döndürebiliriz. Çift ve güncellenmiş çizgileri aç: x -ekseninin dönüşümü: -45deg ekseni Üst ve alt dolguyu artırın Bu noktada, ön açıklama parçanın dışına çıkabilir. Bunu düzeltmek için bölümünüze aşağıdaki dolguyu ekleyin: Özel Dolgu:% 15 Üst,% 15 daha düşük Dönüşüm seçeneğini boyuta kullanarak ve her bulanıklıkta ayrı ayrı konumlandırın, bu noktada, 3D alanda “yüzer” olduğunuz her açıklamanın nasıl olmasını istediğiniz konusunda yaratıcı olmaya hazırsınız. Bunu yapmak için, her bir açıklamayı tam olarak istediğiniz yere tek tek ölçmek ve konumlandırmak için Dönüşüm seçeneğini kullanabilirsiniz. Bunu yaparak, açıklamanız 3D alanda farklı derinliklere sahip gibi görünecektir. Daha kolay hale getirmek için, üst sıradaki en sol açıklamadan ( #1) başlayarak 1-10’dan bir açıklama numarası vereceğim ve İkinci sırada en sağdaki açıklama (Blurb #10). Blurb #1 Üst sıradaki ilk açıklamamızla başlayalım. Aşağıdaki açıklamayı açın ve güncelleme ayarları: Dönüşüm Ölçeği (X ve Y ekseni):% 90 Blurb #2 Blurb #2 için ayarları açın ve aşağıdakileri güncelleyin: Dönüşüm Ölçeği (X ve Y ekseni):% 80 Dönüşüm X -eksenini çevirin:% -10 Blurb #3 Dönüşüm Ölçeği (X ve Y ekseni):% 80 dönüşüm x -ekseni tercüme eder:% 20 bulanık #4 dönüşüm ölçeği (x ve y ekseni):% 85 dönüşüm x -eksenini çevirin: -30%
Çalışma #5 Dönüşüm Ölçeği (X ve Y ekseni):% 60 Bittiğinde, ilk satırınız böyle görünecektir. İkinci sıranın en solundaki 6. Açıklama ile başlayarak 6-10 Açıklama için Dönüşüm seçeneğini ayarlamaya devam edin. Bulanık #6 Dönüşüm Ölçeği (X ve Y ekseni):% 60 Dönüşüm X -ekseni çevirin: -40% Dönüşüm Y -eksenini çevirin: -20% Bulanıklık #7 Dönüşüm Ölçeği (X ve Y ekseni):% 90 Dönüşüm Çeviri Çeviri X -ekseni:% 20 bulanık #8 Dönüşüm Ölçeği (Eksen X ve Y):% 70 dönüşüm x -eksenini çevirir: -50% Bulanık #9 Dönüşüm Ölçeği (X ve Y ekseni):% 80 Dönüşüm Çeviri X Ekseni: -20% Bulanık #10 Dönüşüm Ölçeği (X ve Y ekseni):% 70 Dönüşüm X eksenini çevirin: -60 Şimdi 3D alandaki ilk satırımızla çarpışırken ikinci sıranın nasıl görüldüğüne bakalım. Tasarım, bölüme iyi bir 3D boşluk arka plan görüntüsü ekleyebiliriz. Bu öğretici için kullandığımız video oyunu yönelimlerinin düzenine dahil olan bir arka plan görüntüsü kullanıyorum. Son Tasarım Şimdi 3D yüzen modülümüzün son tasarımını kontrol edelim. Masaüstü Tablet Telefon
Çünkü çizgi boyunca uzanan 5 açıklama, görünüm alanının dışına çıkmadan 5 açıklamanın tümünü ayarlaması biraz daha zor. Bunu düzeltmek için, açıklamayı cep telefonundaki her satırda gizlemeniz yeterlidir. Veya cep telefonuna daha küçük boyutlarınızın her birini verebilirsiniz.
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ına abone olun Başlamak için önceden hazırlanmış düzen ile başladığımız, Divi temasını yüklediğinizden ve etkinleştirdiğinizden emin olun. Ardından yeni bir sayfa oluşturun, sayfa başlığını verin ve Divi Builder’ı (önde) kullanın. “Önceden Yapılmış Düzen Seç” seçeneğini seçin. Ardından yeni sayfanıza video oyunlarının düzenini seçin ve içe aktarın.
Tasarımımıza başlamak için, tasarımımız için kullanacağımız bir açıklama içeren “Oyun Özellikleri” başlıklı bir bölüm kullanacağız. Çünkü bu gerçekten ihtiyacımız olan tek kısımdır, iki açıklama satırı hariç her bir parçayı ve satırı da devam ettirir. Divi’de 3D oda tasarımında yüzen bir bulanıklık uygulamak, iki satır açıklama içeren, yeni bir sütun çizgisi oluşturan ve üste sürükleyen önceden hazırlanmış düzende ilk bulanıklık sırasını yapar. Şimdi çok seçmeli Divi özelliğini kullanın (her bir açıklamayı seçerken CTRL/CMD’yi basılı tutun), aşağıdaki iki sütundaki 5 açıklamayı seçin ve bölümün üst kısmındaki yeni sütun satırına sürükleyin. Artık aşağıdaki önceden hazırlanmış düzene dahil olan iki satırı silebilirsiniz. Bundan sonra, 5 açıklama içeren sadece bir sütunun bir satırına sahip olmalısınız. Bu tasarımda aradığımız 3D efekti almak için bölümümüze perspektif ekleyin, bizim tarafımıza bir CSS perspektif özelliği eklememiz gerekir. Bu, dönüşüm seçeneğini kullanarak hattı her çevirdiğimizde satırımıza bir 3D perspektif ekleyecektir. Bölüm ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: Perspektif: 1000 piksel; Daha sonra, ekranı görüntülerken 3D öğeleri (bu durumda, satırlar) kullanıcının bakış açısından daha yakın veya daha fazla getirmek için perspektif değerini eklemek veya azaltmak isteyebilirsiniz. Daha fazla bilgi için, perspektifin Divi’deki Dönüşüm seçeneği ile nasıl çalıştığına bakın. Açıklamamızı düzenlemeye başlamadan önce satırı ayarlayın, her şeyden önce satır ayarlarımızı yapılandıralım. Bu tasarım için satır seviyesinde değiştirmemiz gereken üç ana şey var:
“Ekran: Flex” i kullanarak açıklamamızı yatay olarak uyumlu hale getirmemiz gerekiyor. Bu, tasarımımızı tüm cihazlarda tutarlı ve duyarlı tutacaktır (karşısında tabletlerde ve cep telefonlarında hasar görecek 5 sütun düzeni kullanılarak). Oluk genişliğini 1 olarak ayarlayarak varsayılan sütun marjını ortadan kaldırmamız gerekir.
X ekseni üzerindeki 45 derecelik satırı döndürmek için bir dönme dönüşümü kullanmamız gerekiyor. Perspektif özelliği, ana (bölüm) eklenen perspektif özelliği ve tüm öğelerin aradığımız bir 3D efekti var.
Aşağıdaki satır ayarlarını açın ve güncelleme:
Talang genişliği: 1 genişlik:% 80 (masaüstü),% 100 (tablet),% 100 (cep telefonu) dönüşüm dönüş ekseni x: 45deg css ana eleman sütunu:
Ekran: Flex; haklı-içerik: merkez;
Bulanıklık ve uzay stilini ayarlamak, açıklamamızın içeriğini ve stilini biraz ayarlama zamanıdır. Tüm açıklamalarımıza aynı ayarlamayı uygulamak istediğimiz için, tüm açıklamaları seçmek ve sermaye düzenleme sermayesini uygulamak için çok seçici tekrar kullanın.
İlk olarak, içerik içeriği silin.
Ardından arka plan rengini ekleyin: arka plan rengi: RGBA (20.241.217.0.16)
Çarpışan bir etki yaratmak için, kopyalanan çizgiyi ters yönde (-45deg) döndürebiliriz. Çift ve güncellenmiş çizgileri aç: x -ekseninin dönüşümü: -45deg ekseni Üst ve alt dolguyu artırın Bu noktada, ön açıklama parçanın dışına çıkabilir. Bunu düzeltmek için bölümünüze aşağıdaki dolguyu ekleyin: Özel Dolgu:% 15 Üst,% 15 daha düşük Dönüşüm seçeneğini boyuta kullanarak ve her bulanıklıkta ayrı ayrı konumlandırın, bu noktada, 3D alanda “yüzer” olduğunuz her açıklamanın nasıl olmasını istediğiniz konusunda yaratıcı olmaya hazırsınız. Bunu yapmak için, her bir açıklamayı tam olarak istediğiniz yere tek tek ölçmek ve konumlandırmak için Dönüşüm seçeneğini kullanabilirsiniz. Bunu yaparak, açıklamanız 3D alanda farklı derinliklere sahip gibi görünecektir. Daha kolay hale getirmek için, üst sıradaki en sol açıklamadan ( #1) başlayarak 1-10’dan bir açıklama numarası vereceğim ve İkinci sırada en sağdaki açıklama (Blurb #10). Blurb #1 Üst sıradaki ilk açıklamamızla başlayalım. Aşağıdaki açıklamayı açın ve güncelleme ayarları: Dönüşüm Ölçeği (X ve Y ekseni):% 90 Blurb #2 Blurb #2 için ayarları açın ve aşağıdakileri güncelleyin: Dönüşüm Ölçeği (X ve Y ekseni):% 80 Dönüşüm X -eksenini çevirin:% -10 Blurb #3 Dönüşüm Ölçeği (X ve Y ekseni):% 80 dönüşüm x -ekseni tercüme eder:% 20 bulanık #4 dönüşüm ölçeği (x ve y ekseni):% 85 dönüşüm x -eksenini çevirin: -30%
Çalışma #5 Dönüşüm Ölçeği (X ve Y ekseni):% 60 Bittiğinde, ilk satırınız böyle görünecektir. İkinci sıranın en solundaki 6. Açıklama ile başlayarak 6-10 Açıklama için Dönüşüm seçeneğini ayarlamaya devam edin. Bulanık #6 Dönüşüm Ölçeği (X ve Y ekseni):% 60 Dönüşüm X -ekseni çevirin: -40% Dönüşüm Y -eksenini çevirin: -20% Bulanıklık #7 Dönüşüm Ölçeği (X ve Y ekseni):% 90 Dönüşüm Çeviri Çeviri X -ekseni:% 20 bulanık #8 Dönüşüm Ölçeği (Eksen X ve Y):% 70 dönüşüm x -eksenini çevirir: -50% Bulanık #9 Dönüşüm Ölçeği (X ve Y ekseni):% 80 Dönüşüm Çeviri X Ekseni: -20% Bulanık #10 Dönüşüm Ölçeği (X ve Y ekseni):% 70 Dönüşüm X eksenini çevirin: -60 Şimdi 3D alandaki ilk satırımızla çarpışırken ikinci sıranın nasıl görüldüğüne bakalım. Tasarım, bölüme iyi bir 3D boşluk arka plan görüntüsü ekleyebiliriz. Bu öğretici için kullandığımız video oyunu yönelimlerinin düzenine dahil olan bir arka plan görüntüsü kullanıyorum. Son Tasarım Şimdi 3D yüzen modülümüzün son tasarımını kontrol edelim. Masaüstü Tablet Telefon
Çünkü çizgi boyunca uzanan 5 açıklama, görünüm alanının dışına çıkmadan 5 açıklamanın tümünü ayarlaması biraz daha zor. Bunu düzeltmek için, açıklamayı cep telefonundaki her satırda gizlemeniz yeterlidir. Veya cep telefonuna daha küçük boyutlarınızın her birini verebilirsiniz.
