Benzersiz bir Blurb modül düzeni oluşturmak için divi dönüşüm kontrolünü kullanın
Divi’nin dönüşüm kontrolü, benzersiz bir düzen oluşturmak için sayfa öğelerinizi konumlandırmayı ve düzenlemeyi çok kolaylaştırır. Divi’nin açıklama modülü, web sitesinde öğeleri görüntülemek için en yaygın unsurlardan biridir. Bu yüzden, açıklama modülünü görüntüleyen bazı benzersiz düzenler oluşturarak dönüşüm efekti nasıl kullanılacağını göstereceğim. Tabii ki, marj ve dolgu kullanarak benzer pozisyonlar elde edebilirsiniz, ancak süreç çok daha ilgili olacak ve çok hoş olmayacak. Ayrıca, Dönüşüm Kontrolü, daha benzersiz bir tasarım için açıklamanızı taramak ve oynamak için ek stiller eklemenizi sağlar.
Bu öğreticide, divi dönüşüm kontrolünü kullanarak bulanıklığı yaratıcı bir şekilde nasıl konumlandıracağınızı ve çevireceğinizi göstereceğim. Başlayalım. Bu öğretici için başlayarak, ihtiyacınız olan tek şey divi. Her şeyi yönetmek için devam edin ve yeni bir sayfa oluşturun. Sayfanızda bir başlık verin ve sıfırdan bir sayfa oluşturmak için ön tarafta bir divi üreticisi kullanın.
Başlamak için ilk satırı oluşturun, normal bölümü yapın, ardından satır için aşağıdaki sütun düzenini ekleyin: 1/2 1/6 1/6 1/6 1/6 Ekle ve Metin Modülünün Kuvvetleri Soldaki 1/2 sütundaki metin modülünü aşağıdaki içerikle ekleyin:
Hizmetlerimiz
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında stilize edebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz. (Masaüstü): -70px sol özel kenar boşluğu (tablet): kalan 20 piksel özel dolgu: 20px üst , 20 piksel aşağıda
Bir sonraki dolgu bölümünü güncelleyin, bizim tarafımıza biraz dolgu eklememiz gerekiyor. Aşağıdaki bölüm ayarlarını açın: Özel dolgu: 20vw yukarıdaki İlk satır için ayarları güncelleyin Sonraki satır ayarlarını şu şekilde güncelleyin: Talang genişliği: 1 dolgu özel: 10vw üst, 0px alt sınır genişliği: 5px renk sınır: #eeeeeeee İkinci satırı ekleyin, ardından ayarladığınız satırın altına başka bir satır ekleyin. Altı sütun düzeni verin. Oluştur ve Blurb Modülünün Stili Şimdi, Dönüşüm Kontrolünü kullanarak konumlandıracağımız bir açıklama modülü oluşturmaya başlamanın zamanıdır. Oluşturduğunuz ilk satırdan (yukarıda) modül sütunu açıklamasını 2 ekleyin. Açıklamayı ayarlarken, içeriği silin ve başlık metnini “hizmet” kelimesiyle güncelleyin. Ardından görüntü simgesini kullanmak için tıklayın. Bu örnek için bulut simgesini kullanıyorum. Açıklamanın geri kalan ayarlarını şu şekilde güncelleyin: Renk simgesi: #fffffffir çemberi simgesi: evet daire renk: #5e89fb yazı tipi başlık: nunito lelahan metin başlığı: orta metin boyutu başlık: 16px dolgu özel: 1vw üst, 1VW daha düşük, 1vw sol, 1VW Sağ, 1VW Sağdan sonra Gelişmiş sekmenin altındaki CSS kutusu bulanık görüntüsüne aşağıdaki CSS ekleyerek açıklama simgesinin altındaki varsayılan marjı güncelleyin: Marj-Alt: 5px Sonraki, yeni oluşturduğunuz modül açıklamasını kopyalayın ve her sütuna koyun 3 sıra yukarıda ve ikinci sırada 5 ve 6 sütunlarını boş bırakırsınız. Dönüşüm efekti ölçeğe ekleyin ve karışımı konumlandırın Şimdi, açıklamayı benzersiz bir tasarıma konumlandırmak ve çığlık atmak için dönüşüm kontrolünü kullanmaya hazırız. İlk olarak, Sütun 2 Üst Sıra’daki Açıklama Ayarlarını Açın ve Dönüşüm Kontrolünü şu şekilde güncelleyin: X-Number Ölçeği Dönüşüm: Y ekseni ölçeğinin% 242 Dönüşümü:% 242 Dönüşüm X Ekseni Çevirir: -96px Dönüşüm Y eksenini çevirin: -44px Ardından, ilk 3 satır sütundaki üst bulanık modül ayarlarını aşağıdaki gibi güncelleyin: x -summble ölçek dönüşümü: y ekseninin% 192 dönüşümü:% 192 dönüşüm x ekseni çevirir: -70px dönüşüm Y eksenini çevirin: -13px Ardından, üst satırın 4. sütunundaki açıklama modülünü şu şekilde güncelleyin: x -sayı ölçek dönüşümü: y ekseninin% 158 dönüşümü:% 158 dönüşüm x -eksenini çevirin: 33px dönüşüm Y eksenini çevirin: -13px Ayrıca, üst 3 sıra sütundaki alt bulanık modülü aşağıdaki gibi güncelleyin: X-Number ölçeğinin dönüşümü: Eksen ölçeğinin% 132 dönüşümü Y:% 132 dönüşüm X eksenini çevirin: 89px dönüşüm Y eksenini çevirin: 39px Ardından, pürüzsüz bir tasarım öğesi için sıra kenarında bir duraklama yapmak için aşağıdaki arka plan rengini verin: Arka plan rengi: #ffffff! Ek tasarım öğeleri için, düzen boyunca kullanılan her simgede dairesel renk opaklığını kademeli olarak artırabilirsiniz. Tablet ve cep telefonunun görüntülenmesi için modülün düzenini ayarlamak için hücresel ayar, dönüşüm etkisini orijinaline geri ayarlarız. Açıklamanın orijinal boyuta geri dönmesi ve sütuna düzgün bir şekilde konumlandırılması için belirtin. Bunu yapmak için çok seçici divi özellikleri kullanabiliriz. Dönüşüm özellikleri ile konumlandırılmış modülleri tıklamak zor olabileceğinden, inşaatçı ayarlarınızdaki ızgara modunu etkinleştirmek için doğru zamandır. Bu, açıklama modülünü orijinal konumunda görmenizi sağlar. Izgara modundayız, devam edin ve CTRL veya CMD’yi basılı tutun, ardından bir dönüşüm etkisi olan her modüle tıklayın. Ardından sermaye belirleme sermayesini açmak için seçilen modüllerden birinden dişli simgesini tıklayın. Öğenin sermaye düzenlemesinde aşağıdakileri güncelleyin: X-Number Ölçeği Dönüşüm:% 100 Dönüşümü Y ekseninin Dönüşümü:% 100 Dönüşüm X Eksenini Çevir: 0px Dönüşüm Y: 0PX Bu Geri Yükleme Tablet ve cep telefonu ekranındaki açıklamanın orijinal konumu ve ölçeği. Buradaki nihai sonuç son tasarım. Blurb Modülünün Düzenini Oluşturma #2 Aşağıdaki örnekte, ölçek seçeneğini kullanarak, Divi dönüşümünü çevirerek ve çevirmeyi kullanarak benzersiz bir açıklama modülü düzeni göstereceğim. Ayrıca her bir açıklamaya perspektif katan bir CSS bonus parçası vereceğim. Bunu nasıl yapacağınız. İlk başlığı yapın, bir satır bir sütunu içeren yeni bir düzenli bölüm ekleyin. Ardından metin modülünü aşağıdaki satıra ekleyin:İşlemimiz
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında şekillendirebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz. Ardından metnin kalan metin ayarlarını aşağıdaki gibi güncelleyin: Başlık 2 Yazı Tipi: Nunito Başlık 2 Yazı Tipi Ağırlık: Yarı Kalın Başlık 2 Metin Boyutu: 50px Aralık Başlık 2 harf: 7px genişlik: 500 piksel Altı sütun satırı ile bulanıklığın düzenini yapmak başlığı halleder. Şimdi modülümüzün düzeni için çizgiler ekleme zamanı. Devam edin ve doğrudan geçerli satırın altındaki altı sütun düzeni ile yeni bir satır yapın.Blurb modülünü ilk sütunda düzenleme, yeni açıklama modülünü ekleyin ve aşağıdaki ayarları güncelleyin: İçerik metnini içerik kutusundaki silin ve başlık metnini “Adım” kelimesiyle güncelleyin. Ardından simgeyi kullanmak için tıklayın ve Circle Check simgesini seçin.
Beyaz Arka Plan Renk Bulanıklığı Aşağıdaki gibi verin: Arka Plan Rengi: #FFFFFF Sonra Güncelleme Tasarım Ayarları: Icon Rengi: #FFFFFF FIRCH CIRCH SCON: EVET ÇAĞRI RENK: #3D0DAD YAZI TITLANIMI Başlık: Nunito Başlık Font Heavy: Kalınlık Yazı Tipi Başlık: TT Metin Başlığı: Orta Aralık Mektubu Başlığı: 4px
Çoğaltma ve Stil Kalan Blurb şimdi kalan açıklamayı çoğaltmaya ve ayarlamaya hazırız. Açıklama modülünü Sütun 1’de devam ettirin ve son sütun (sütun 6) hariç kalan tüm sütunlara yapıştırın. Açıklamanın sağa taşınması için daha fazla alan vermek için 6. sütunun boş bırakılmasına izin vereceğiz. Şimdi Sütun 2’deki modül ayarlarını açın ve aşağıdakileri güncelleyin: Daire Renk: #62DE9D X-Number Ölçeği Dönüşümü:% 120 Y-Sumber Ölçek Dönüşüm:% 120 Dönüşüm Y eksenini çevirin: -10 (yazdığınızdan emin olun ( burada yüzde değeri) Ayrıca, sütun 3’teki bulanıklık modülü güncellemesi aşağıdaki gibi: Daire Renk: #5E89FB X -SUMAN Ölçek Dönüşüm: Y ekseninin% 140 Dönüşümü:% 140 Dönüşüm Y -ekseni tercüme eder: -20% Dönüşüm X Eksenini Çevirir :% 10 Sütun 4’teki modül açıklamasını şu şekilde güncelleyin: Daire Renk: #2A3FC9 Dönüşüm X -SADECE ÖLÇEME: Eksen Ölçeği% 160 Dönüşümü Y:% 160 Dönüşüm Eksen Y: -30 Dönüşüm Tercümanı Çevir:% 30 Ve son olarak, sütun 5’teki bulanıklık modülü güncellemesi aşağıdaki gibidir: Daire Renk: #62DE9D X -Number Ölçeğinin Dönüşümü: Y ekseninin% 180 Dönüşümü:% 180 Dönüşüm Y eksenini çevirin: -40% Dönüşüm Çeviri X ekseni:% 55 Gördüğünüz gibi, her açıklama soldan sağa% 20 oranında artacaktır. Ve dönüşüm çeviri yüzdesinin değeri, açıklamanın iyi kalmasını sağlar. Tasarım son sütuna (sütun 6) taşlandığından, boş bırakacağız. Ancak satırın boyutunu artırırsanız, sütun 6’ya her zaman başka bir açıklama ekleyebilirsiniz. CSS’deki her sütuna perspektif özellikleri ekleyerek, perspektif özellikleri, z-uzayda çeşitli perspektiflerde 3D konum elemanları sağlamak için kullanılır. Temel olarak bu, ekranı gördüklerinde nesnenin kullanıcıdan ne kadar ortaya çıktığını belirler. Perspektif özelliği, bu durumda açıklama modülümüz olan 3D konumuna sahip ana konteynere uygulanmalıdır. Bu nedenle, aşağıdaki gibi küçük bir CSS parçası kullanarak her sütuna perspektif eklemeliyiz. 5 sütunun her biri için aşağıdaki CSS kutusuna aşağıdaki CSS ekleyin: Sütun 1 Ana Eleman: Perspektif: 1000 PX Sütun 2 Ana Öğeler: Perspektif: 1000 piksel Sütun 3 Ana Öğeler: Perspektif: 1000 piksel Sütun 4 Ana Öğeler: Perspektif: 1000 piksel Sütun 5 Ana Öğeler: Perspektif: 1000 piksel Bu durumda, değişiklikler çok ince ama bence ek çabalarla orantılı. Aşağıda, perspektif olmadan bulanıklık modülünün düzeninin tasarımıdır. Ve burada onun yerine perspektif.
Bir bulanıklık kullanıcıya daha yakın görünmesini sağlamak istiyorsanız, perspektif değerini azaltabilirsiniz. Örneğin, her sütuna eklenen “Perspektif: 400 piksel” ile açıklamanın görüntülenmesidir. Açıklamanın yüzeyde durmasını sağlamak için bölücünün arka planını bölüme ekleyin, bölücünün arka planını ekleyebiliriz bölüme. Aşağıdaki bölümleri açın ve Güncelleme: Alt Bölü Kuvvetleri: Bkz. Alt Bölme Renk Ekran Görüntüleri: #DDDDD Alt Böcek Yüksekliği: 27VW Yatay Tekrar Alt Bölme: 0.8x Alt Bölücü Geri: Yatay: Yatay
Tablet ve cep telefonu ekran düzenini ayarlamak için, bir dizi açıklama modülü seçmeniz ve tablet ekranı için öğeyi ayarlamak için aşağıdaki dönüşüm seçeneklerini güncellemeniz gerekir: X-Number Ölçeği Dönüşüm: Y ekseni ölçeğinin% 100 Dönüşümü: % 100 dönüşüm Y eksenini çevirir:% 0 dönüşüm X eksenini çevirin:% 0
Nihai sonuç şimdi bulanık modül düzeninin nihai sonucuna bakalım.
Son zihin Divi dönüşüm kontrolü ile, açıklama modülünüzü sayfanızın doğru alanına çok kolay yerleştirme yeteneğine sahipsiniz. Bu, hizmetleri, işlem adımlarını ve sayısız diğer kullanımları görüntülemek için yeni bir açıklama modülü düzeni denemeyi ve oluşturmayı eğlenceli hale getirir. Umarım bu öğretici size bu tasarım tekniğini kendiniz test etmek için biraz ilham verir. Daha fazla ilham için, bu yaratıcı açıklama modülünün 5 tasarımına bakın. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
