Divi'de 3B Uzayda Çarpışan Yüzen Modüller Nasıl Oluşturulur

Divi'yi kullanarak mümkün olan yeni tasarımları keşfetmek her zaman eğlencelidir. Ve bugün, 3B uzayı keşfetmek için Divi'yi kullanacağız! Teknik olarak, 3B uzayda çarpışıyormuş gibi görünen kayan modüllerin nasıl tasarlanacağını keşfedeceğiz. Bu tasarım, web sitenizde çok sayıda hizmet, ürün veya kaynak olduğunu göstererek ziyaretçileri şaşırtmanın yaratıcı bir yolu olarak işe yarayacaktır.

Açıkçası, bu eğitim, gerçek hayattaki uzay keşfinin nasıl olacağını hayal ettiğim şeyle karşılaştırılmayacak. Ama umarım siz Divi kaşifleri yol boyunca birkaç şey öğrenebilirsiniz.

Gizlice Bakış

İşte birlikte inşa edeceğimiz tasarımın bir ön gösterimi.

3B Uzay Düzeninde Çarpışan Yüzer Modülleri ÜCRETSİZ İndirin

Ellerinizi bu eğitimde oluşturulan tasarıma koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Youtube Kanalımıza Abone Olun

Hazır Düzene Başlarken

Başlamak için Divi temasının kurulu ve etkin olduğundan emin olun. Ardından yeni bir sayfa oluşturun, sayfaya bir başlık verin ve Divi Builder'ı (ön uçta) dağıtın. “Önceden hazırlanmış bir düzen seçin” seçeneğini seçin. Ardından Video Oyunu Açılış Sayfası düzenini seçin ve yeni sayfanıza aktarın.

Tasarımımıza bir adım önde başlamak için tasarımımız için kullanacağımız tanıtım yazılarını içeren “Oyun Özellikleri” başlıklı bölümü kullanacağız. Bu gerçekten ihtiyacımız olan tek bölüm olduğundan, devam edin ve iki sıra tanıtım yazısı dışında her bölümü ve satırı silin.

Divi'de 3B Uzay Tasarımında Kayan Bulanıklıkları Uygulama

İlk Satır Bulanıklığı Oluşturma

İki sıra tanıtım yazısı içeren önceden hazırlanmış düzen bölümünün içinde, yeni bir tek sütunlu satır oluşturun ve onu bölümün en üstüne sürükleyin.

Şimdi Divi'nin çoklu seçim özelliğini kullanarak (her bir tanıtım yazısı seçerken ctrl/cmd tuşunu basılı tutun), aşağıdaki iki sütundaki tanıtım yazılarından 5'ini seçin ve bunları bölümün üst kısmındaki yeni bir sütun satırına sürükleyin.

Şimdi aşağıdaki hazır düzen ile gelen iki satırı silebilirsiniz. Bundan sonra, 5 tanıtım yazısı içeren yalnızca tek bir sütunlu satırınız olmalıdır.

Bölümümüze Perspektif Eklemek

Bu tasarımda aradığımız 3D efekti elde etmek için bölümümüze perspektif css özelliğini eklememiz gerekiyor. Bu, dönüştürme seçeneklerini kullanarak satırı her döndürdüğümüzde satırımıza 3B perspektifi ekleyecektir.

Bölüm ayarlarını açın ve aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

perspective: 1000px;

Daha sonra, ekrana bakarken 3B öğeleri (bu durumda satırları) kullanıcının bakış açısına yaklaştırmak veya uzaklaştırmak için perspektif değerini artırmak veya azaltmak isteyebilirsiniz.

Daha fazla bilgi için, Divi'deki dönüştürme seçenekleriyle perspektifin nasıl çalıştığına bakın.

Satırı Özelleştirme

Tanıtım yazılarımızı şekillendirmeye başlamadan önce, satır ayarlarımızı yapılandıralım. Bu tasarım için satır düzeyinde değiştirmemiz gereken üç ana şey var:

1. Tanıtım yazılarımızı “display:flex” kullanarak yatay olarak hizalamamız gerekiyor. Bu, tasarımımızı tüm cihazlarda tutarlı ve duyarlı tutacaktır (tablet ve telefonda bozulacak 5 sütunlu bir düzen kullanmanın aksine).
2. Oluk genişliğini 1'e ayarlayarak varsayılan sütun kenar boşluklarından kurtulmamız gerekiyor.
3. Satırı X ekseninde 45 derece döndürmek için dönüştürme döndürmeyi kullanmamız gerekiyor. Üst öğeye (bölüm) eklenen perspektif özelliği ile satır ve tüm öğeleri aradığımız 3B efektine sahiptir.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Oluk Genişliği: 1
Genişlik: %80 (masaüstü), %100 (tablet), %100 (telefon)
Dönüştür X eksenini döndür: 45deg

Sütun Ana Öğe CSS'si:

display: flex;
justify-content: center;

Blurb Stilini ve Aralığını Ayarlama

Şimdi tanıtım yazılarımızın içeriğini ve stilini biraz ayarlamanın zamanı geldi.

Tüm tanıtım yazılarımıza aynı özelleştirmeleri uygulamak istediğimizden, tüm tanıtım yazılarını seçmek için tekrar çoklu seçimi kullanın ve öğe ayarları modunu dağıtın.

İlk olarak, gövde içeriğini silin.

Ardından bir arka plan rengi ekleyin:

Arka Plan Rengi: rgba(20,241,217,0.16)

Ardından aşağıdaki aralığı güncelleyin:

Özel Kenar Boşluğu (masaüstü): 2vw sağ
Özel Kenar Boşluğu (tablet ve telefon): 0vw sağ

Özel Dolgu: %2 üst, %2 alt, %3 sol, %3 sağ

Ardından, aşağıdaki gibi bir kenarlık ekleyin:

Kenar Genişliği: 2px
Kenar Rengi: rgba(20,241,217,0.66)

Bu noktada, tüm tanıtım yazıları yerinde stile sahiptir. Her bir tanıtıcı metnin ölçeğini ve konumunu ayrı ayrı değiştirmek için dönüştürme seçeneklerini kullanmamız gerekiyor, bu da tanıtıcı metinlerin 3B kayan efektine eklenecek. Ama bunu yapmadan önce, ikinci tanıtım yazımızı oluşturmak için satırı çoğaltalım.

İkinci Tanıtım Satırını Oluşturma

İkinci tanıtım yazıları sırasını oluşturmak için, az önce özelleştirdiğiniz 5 tanıtım yazısı satırını kopyalamanız yeterlidir.

Çarpışma efekti oluşturmak için, kopyalanan satırı ters yönde (-45deg) döndürebiliriz.

Çoğaltılan satırı açın ve aşağıdakileri güncelleyin:

Dönüştür X eksenini döndür: -45deg

Üst ve Alt Bölüm Dolgusunu Artırın

Bu noktada ön tanıtım yazıları bölümün dışına doğru uzanıyor olabilir. Bunu düzeltmek için bölümünüze aşağıdaki dolguyu ekleyin:

Özel Dolgu: %15 üst, %15 alt

Her Bir Bulanıklığı Ayrı Ayrı Boyutlandırmak ve Konumlandırmak için Dönüştürme Seçeneklerini Kullanma

Bu noktada, tanıtım yazılarınızın her birinin 3B alanda nasıl "yüzmesini" istediğiniz konusunda yaratıcı olmaya hazırsınız. Bunu yapmak için, her bir tanıtıcı resmi tam olarak istediğiniz yere tek tek boyutlandırmak ve konumlandırmak için dönüştürme seçeneklerini kullanabilirsiniz. Bunu yaparak, tanıtım yazılarınız 3B uzayda farklı derinliklere sahip gibi görünecektir.

İşleri kolaylaştırmak için, tanıtım yazılarını en üst sıradaki en soldaki tanıtım yazısıyla başlayarak (Bulanıklık #1) ve ikinci satırdaki en sağdaki tanıtım yazısıyla biten tanıtım yazılarını 1-10 arasında numaralandıracağım (Açıklık #10).

1 numaralı bulanıklık

En üst sıradaki ilk tanıtım yazımızla başlayalım. Tanımlayıcı ayarlarını açın ve aşağıdakileri güncelleyin:

Dönüştürme Ölçeği (x ve y ekseni): %90

2 numaralı bulanıklık

Blurb #2 ayarlarını açın ve aşağıdakileri güncelleyin:

Dönüştürme Ölçeği (x ve y ekseni): %80
Dönüştür X eksenini çevir: -%10

3 numaralı bulanıklık

Dönüştürme Ölçeği (x ve y ekseni): %80
Dönüştür X eksenini çevir: %20

bulanıklık #4

Dönüştürme Ölçeği (x ve y ekseni): %85
Dönüştür X eksenini çevir: -%30

bulanıklık #5

Dönüştürme Ölçeği (x ve y ekseni): %60

Bir kez bittiğinde, ilk satırınız şöyle görünmelidir.

İkinci satırın en solundaki tanıtım yazısı #6 ile başlayarak, 6-10 arası tanıtım yazıları için dönüştürme seçeneklerini özelleştirmeye devam edin.

bulanıklık #6

Dönüştürme Ölçeği (x ve y ekseni): %60
Dönüştür X eksenini çevir: -%40
Dönüştür Y eksenini çevir: -%20

bulanık #7

Dönüştürme Ölçeği (x ve y ekseni): %90
Dönüştür X eksenini çevir: %20

bulanıklık #8

Dönüştürme Ölçeği (x ve y ekseni): %70
Dönüştür X eksenini çevir: -%50

bulanık #9

Dönüştürme Ölçeği (x ve y ekseni): %80
Dönüştür X eksenini çevir: -%20

bulanık #10

Dönüştürme Ölçeği (x ve y ekseni): %70
Dönüştür X eksenini çevir: -%60

Şimdi ikinci sıranın 3B uzayda ilk sıramızla çarpışırken nasıl göründüğüne bakalım.

Tasarımı tamamlamak için bölüme güzel bir 3D uzay arka plan görüntüsü ekleyebiliriz. Bu eğitim için kullandığımız Video Oyunu Açılış Sayfası düzeniyle birlikte gelen üst bölüm arka plan resmini kullanıyorum.

Son tasarım

Şimdi 3B yüzer modüllerimizin son tasarımını kontrol edelim.

masaüstü

Tablet

Telefon

Sıra boyunca uzanan 5 tanıtım yazısı nedeniyle, 5 tanıtım yazısının tümünü görüntü alanının dışına taşmadan sığdırmak biraz daha zor. Bunu düzeltmek için, telefondaki her satırda uzaktaki açıklamayı gizleyebilirsiniz. Ya da her bir tanıtıcı resminize telefonda daha küçük bir boyut verebilirsiniz.

Son düşünceler

Umarım bu eğitim size 3D Uzayda kendi yüzen modüllerinizi nasıl oluşturacağınız konusunda biraz ilham verir. Tüm modül sıranızın perspektif ve dönüştürme seçeneklerini kullanarak 3B olarak döndürülmesini sağlamak için gereken tek şey birkaç adımdır. Bundan sonra, modüllerin her birini istediğiniz yerde yüzdürmek için konumlandırabilirsiniz.

Keşfetmek için iyi eğlenceler.

Yorumlarda sizden haber bekliyorum.

Şerefe!