Benzersiz Blurb Modül Düzenleri Oluşturmak için Divi'nin Dönüştürme Kontrollerini Kullanma

Divi'nin Dönüştürme kontrolleri, benzersiz düzenler oluşturmak için sayfanızın öğelerini konumlandırmayı ve biçimlendirmeyi gerçekten kolaylaştırır. Divi'nin tanıtım yazısı modülü, bir web sitesinde öğeleri öne çıkarmak için en yaygın öğelerden biridir. Bu yüzden, tanıtım yazısı modülünü içeren birkaç benzersiz düzen oluşturarak bu Dönüştürme efektlerini nasıl kullanacağımı göstereceğimi düşündüm. Elbette, kenar boşluklarını ve dolguyu kullanarak benzer konumlandırmayı başarabilirsiniz, ancak süreç çok daha karmaşık ve eğlenceli olmayacaktı. Ayrıca, dönüştürme kontrolleri, daha da benzersiz tasarımlar için tanıtım yazılarınızı ölçeklendirmek ve döndürmek için ek stiller eklemenize olanak tanır.

Bu eğitimde, Divi'nin dönüştürme kontrollerini kullanarak tanıtım yazılarını yaratıcı şekillerde nasıl konumlandıracağınızı ve döndüreceğinizi göstereceğim.

Başlayalım.

Başlarken

Bu eğitim için gerçekten ihtiyacınız olan tek şey Divi. İşleri ayarlamak için devam edin ve yeni bir sayfa oluşturun. Sayfanıza bir başlık verin ve sıfırdan bir sayfa oluşturmak için Divi oluşturucuyu ön uçta dağıtın.

Artık başlamaya hazırsınız.

Bulanık Düzen Tasarımı Oluşturma #1

Bu ilk mizanpaj tasarımında, iki farklı satır kullanarak tanıtım yazılarımızı yapılandıracağız. Ardından, benzersiz bir tanıtıcı modül düzeni oluşturmak için tanıtıcı modülleri ölçeklendirmek ve konumlandırmak için Divi Transform seçeneklerini kullanacağız.

İlk Satırı Oluşturun

Başlamak için normal bir bölüm oluşturun ve ardından satır için aşağıdaki sütun düzenini ekleyin: 1/2 1/6 1/6 1/6

Metin Modülünü Ekleyin ve Stillendirin

Soldaki 1/2 sütununa aşağıdaki içeriğe sahip bir metin modülü ekleyin:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Ardından aşağıdaki tasarım ayarlarını güncelleyin:

Arka Plan Rengi: #ffffff
Genişlik: 500 piksel
Özel Kenar Boşluğu (masaüstü): -70 piksel kaldı
Özel Kenar Boşluğu (tablet): 20 piksel kaldı
Özel Dolgu: 20 piksel üst, 20 piksel alt

Bölüm Dolgusunu Güncelle

Ardından, bölümümüze biraz dolgu eklememiz gerekiyor. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Dolgu: 20vw üst

İlk Satır İçin Ayarları Güncelle

Ardından, satır ayarlarını aşağıdaki gibi güncelleyin:

Oluk Genişliği: 1
Özel Dolgu: 10vw üst, 0px alt
Kenar Genişliği: 5px
Kenar Rengi: #eeeeee

İkinci Satırı Ekle

Ardından, özelleştirdiğiniz satırın altına başka bir satır ekleyin. Altı sütunlu bir düzen verin.

Blurb Modüllerini Oluşturun ve Stillendirin

Şimdi dönüşüm kontrollerini kullanarak sonunda konumlandıracağımız tanıtıcı modülleri oluşturmaya başlamanın zamanı geldi. Oluşturduğunuz ilk (üst) satırın 2. tanıtıcı modülü sütununu ekleyin.

Açıklama ayarlarında içeriği silin ve Başlık metnini "Hizmetler" kelimesiyle güncelleyin. Ardından, resim yerine bir simge kullanmak için tıklayın. Bu örnek için bulut simgesini kullanıyorum.

Tanımlama ayarlarının geri kalanını aşağıdaki gibi güncelleyin:

Simge Rengi: #ffffff
Daire Simgesi: EVET
Daire Rengi: #5e89fb
Başlık Yazı Tipi: Nunito
Başlık Metni Hizalama: Orta
Başlık Metin Boyutu: 16px
Özel Dolgu: 1vw üst, 1vw alt, 1vw sol, 1vw sağ

Ardından, gelişmiş sekmesi altındaki Blurb Image CSS kutusuna aşağıdaki CSS'yi ekleyerek, tanıtıcı simgesinin altındaki varsayılan kenar boşluğunu güncelleyin:

margin-bottom: 5px

Ardından, az önce oluşturduğunuz tanıtım modülünü kopyalayın ve üst satırın 3. sütununda iki tanıtım modülünüz olduğundan ve ikinci satırda 5. ve 6. sütunları boş bıraktığınızdan emin olarak sütunların her birine yapıştırın.

Bulanıklıkları Ölçeklendirmek ve Konumlandırmak için Dönüştürme Efektleri Ekleyin

Artık, tanıtım yazılarını benzersiz bir tasarıma yerleştirmek ve ölçeklendirmek için dönüştürme kontrollerini kullanmaya hazırız.

İlk olarak, en üst satırın 2. sütunundaki tanıtıcı tanıtım ayarını açın ve dönüştürme kontrollerini aşağıdaki gibi güncelleyin:

Dönüştürme Ölçeği X ekseni: %242
Dönüşüm Ölçeği Y ekseni: %242

Dönüştür X eksenini çevir: -96px
Y eksenini dönüştür: -44px

Ardından, ilk satırın 3. sütunundaki en üstteki Blurb modülünün ayarlarını aşağıdaki gibi güncelleyin:

Dönüşüm Ölçeği X ekseni: %192
Dönüşüm Ölçeği Y ekseni: %192

Dönüştür X eksenini çevir: -70px
Y eksenini dönüştür: -13px

Ardından, üst satırın 4. sütunundaki tanıtım modülünü aşağıdaki gibi güncelleyin:

Dönüştürme Ölçeği X ekseni: %158
Dönüşüm Ölçeği Y ekseni: %158

Dönüştür X eksenini çevir: 33 piksel
Y eksenini dönüştür: -13px

Ardından, üst satırın 3. sütunundaki alt tanıtım modülünü aşağıdaki gibi güncelleyin:

Dönüştürme Ölçeği X ekseni: %132
Dönüşüm Ölçeği Y ekseni: %132

Dönüştür X eksenini çevir: 89 piksel
Y eksenini dönüştür: 39 piksel

Ardından, ince bir tasarım öğesi için satır kenarlığında bir boşluk oluşturmak için aşağıdaki arka plan rengini verin:

Arka Plan Rengi: #ffffff

Bu kadar!

Ek bir tasarım öğesi için, düzen boyunca kullanılan simgelerin her birinde daire renginin opaklığını kademeli olarak artırabilirsiniz.

Mobil Düzenlemeler

Tablet ve telefon ekranları için tanıtım yazısı modülü düzenini ayarlamak için, tanıtım yazılarının orijinal boyutlarına dönmesi ve sütunların içine güzel bir şekilde yerleştirilmesi için dönüştürme efektlerini orijinal durumuna geri ayarlayabiliriz. Bunu yapmak için Divi'nin çoklu seçim özelliğini kullanabiliriz. transform özelliği ile konumlandırılmış modüllere tıklamak zor olabileceğinden, oluşturucu ayarlarınızda ızgara modunu etkinleştirmek için iyi bir zaman. Bu, tanıtım yazısı modüllerini orijinal konumlarında görmenizi sağlar. Izgara modundayken, devam edin ve ctrl veya cmd'yi basılı tutun ve ardından dönüştürme etkisi olan modüllerin her birine tıklayın. Ardından, öğe ayarları modunu açmak için seçilen modüllerden herhangi birinin dişli simgesine tıklayın.

Öğe Ayarları modunda aşağıdakileri güncelleyin:

Ölçeği X eksenini dönüştür: %100
Ölçek Y eksenini dönüştür: %100

Dönüştür X eksenini çevir: 0px
Dönüştür Y eksenini çevir: 0px

Bu, tablet ve telefon ekranlarındaki tanıtım yazılarının orijinal konumunu ve ölçeğini geri yükleyecektir.

Son sonuç

İşte son tasarım.

Blurb Modül Düzeni #2 Oluşturma

Bu sonraki örnekte, size Divi'nin ölçekleme, çevirme ve döndürme dönüştürme seçeneklerini kullanarak benzersiz bir tanıtıcı modül düzeni göstereceğim. Ayrıca, tanıtım yazılarının her birine perspektif ekleyen bonus bir CSS pasajı da ekleyeceğim. İşte nasıl yapılacağı.

Başlığı Oluştur

İlk olarak, tek sütunlu bir satıra sahip yeni bir normal bölüm ekleyin. Ardından, aşağıdaki içeriğe sahip satıra bir metin modülü ekleyin:

<h2>Our Process</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Ardından metin modülü ayarlarının geri kalanını aşağıdaki gibi güncelleyin:

Başlık 2 Yazı Tipi: Nunito
Başlık 2 Yazı Ağırlığı: Yarı Kalın
Başlık 2 Metin Boyutu: 50px
Başlık 2 Harf Aralığı: 7px
Genişlik: 500 piksel

Altı Sütunlu Bir Satırla Bulanıklık Düzeni Oluşturma

Bu başlığı halleder. Şimdi, tanıtıcı modül düzenimiz için satırı ekleme zamanı. Devam edin ve doğrudan geçerli satırın altında altı sütunlu bir düzen ile yeni bir satır oluşturun.

Blurb Modülünü Şekillendirme

İlk sütunda, yeni bir tanıtım yazısı modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:

İçerik kutusundaki gövde metnini silin ve başlık metnini “Adım” kelimesiyle güncelleyin.

Ardından bir simge kullanmak için tıklayın ve daire kontrol simgesini seçin.

Blurb'a aşağıdaki gibi beyaz bir arka plan rengi verin:

Arka Plan Rengi: #ffffff

Ardından tasarım ayarlarını güncelleyin:

Simge Rengi: #ffffff
Daire Simgesi: EVET
Daire Rengi: #3d0dad
Başlık Yazı Tipi: Nunito
Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Yazı Tipi Stili: TT
Başlık Metni Hizalama: Orta
Başlık Harf Aralığı: 4px

Ardından, tanıtım yazısına aşağıdaki gibi bir kutu gölgesi verin:

Kutu Gölgesi: Ekran Görüntüsüne bakın
Gölge Rengi: rgba(0,0,0,0.12)

Ve son olarak, tanıtım yazısı modülüne döndürme dönüştürme efektini ekleyin:

Dönüştür X eksenini döndür: -3 derece
Dönüştür Y eksenini döndür: -10deg
Dönüştür Döndür Z ekseni: 31deg

Bu, ilk tanıtım modülümüzle ilgilenir.

Satır Ayarlarını Güncelle

Şimdi tanıtıcı modülümüzü kopyalamaya başlamadan önce satır ayarlarını aşağıdaki gibi güncellememiz gerekiyor:

Oluk Genişliği: 2
Özel Dolgu: 11vw üst, 0px alt

Bu, mizanpajdaki tanıtım yazılarını boşluk bırakarak kullanılmasına yardımcı olacaktır.

Blurbs'ın Geri Kalanını Kopyalama ve Şekillendirme

Artık tanıtım yazılarının geri kalanını çoğaltmaya ve özelleştirmeye hazırız. Devam edin ve 1. sütundaki tanıtım modülünü kopyalayın ve son sütun (sütun 6) hariç kalan tüm sütunlara yapıştırın. Tanıtım yazılarının sağa taşınması için daha fazla alan bırakmak için sütun 6'yı boş bırakacağız.

Şimdi 2. sütundaki tanıtıcı modül ayarını açın ve aşağıdakileri güncelleyin:

Daire Rengi: #62de9d

Dönüştürme Ölçeği X ekseni: %120
Ölçek Y eksenini dönüştür: %120

Dönüştür Y eksenini çevir: -%10 (buraya yüzde değerini yazdığınızdan emin olun)

Ardından, sütun 3'teki tanıtım modülünü aşağıdaki gibi güncelleyin:

Daire Rengi: #5e89fb

Dönüştürme Ölçeği X ekseni: %140
Dönüşüm Ölçeği Y ekseni: %140

Y eksenini dönüştür: -%20
Dönüştür X eksenini çevir: %10

4. sütundaki tanıtıcı modülünü aşağıdaki gibi güncelleyin:

Daire Rengi: #2a3fc9

Dönüştürme Ölçeği X ekseni: %160
Ölçeği Y eksenini dönüştür: %160

Y eksenini dönüştür: -%30
Dönüştür X eksenini çevir: %30

Ve son olarak, 5. sütundaki tanıtım modülünü aşağıdaki gibi güncelleyin:

Daire Rengi: #62de9d

Ölçeği X eksenini dönüştür: %180
Ölçek Y eksenini dönüştür: %180

Dönüştür Y eksenini çevir: -%40
Dönüştür X eksenini çevir: %55

Gördüğünüz gibi, tanıtım yazılarının her biri, soldan sağa doğru %20 oranında büyüyecek. Ve Dönüştür çevirme yüzdesi değerleri, tanıtım yazılarının güzel bir şekilde hizalanmasını sağlar.

Tasarım son sütuna (sütun 6) taştığı için onu boş bırakacağız. Ancak, satırın boyutunu artırırsanız, 6. sütuna her zaman başka bir tanıtım yazısı ekleyebilirsiniz.

Her Sütuna Perspektif Özelliği Ekleme

CSS'de perspektif özelliği, 3B konumlu bir öğeye Z-Uzayında bir miktar perspektif vermek için kullanılır. Temel olarak, nesnenin ekrana bakarken kullanıcıdan ne kadar uzakta göründüğünü tanımlar. Perspektif özelliği, bu durumda bizim tanıtıcı modülümüz olan 3B konumuna sahip olanın ana kabına uygulanmalıdır. Bu nedenle, aşağıdaki gibi küçük bir CSS parçacığı kullanarak her sütuna perspektif eklemeliyiz.

5 Sütunun her biri için Sütun Ana Öğesi CSS kutusuna aşağıdaki CSS'yi ekleyin:

Sütun 1 Ana Öğe:

perspective: 1000px

Sütun 2 Ana Öğe:

perspective: 1000px

Sütun 3 Ana Öğe:

perspective: 1000px

Sütun 4 Ana Öğe:

perspective: 1000px

Sütun 5 Ana Öğe:

perspective: 1000px

Bu durumda, değişiklik çok ince ama bence ek çabaya değer.

İşte perspektifsiz tanıtım yazısı modülü düzeni tasarımı.

Ve işte perspektif yerinde.

Tanıtım yazılarının kullanıcıya daha yakın görünmesini istiyorsanız perspektif değerini azaltabilirsiniz. Örneğin, her sütuna "perspektif: 400 piksel" eklendiğinde tanıtım yazıları böyle görünecektir.

Bölüme Bölücü Arka Plan Ekleme

Tanıtım yazılarının bir yüzeyde duruyormuş gibi görünmesini sağlamak için bölüme ayırıcı bir arka plan ekleyebiliriz. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Alt Bölücü Stili: ekran görüntüsüne bakın
Alt Bölücü Rengi: #dddddd
Alt Bölücü Yüksekliği: 27vw
Alt Bölücü Yatay Tekrar: 0.8x
Alt Bölücü Çevirme: yatay

Tablet ve telefon ekranlarının düzenini ayarlamak için, tanıtıcı modüllerin her birini çoklu olarak seçmeniz ve tablet ekranı için Öğe ayarlarında aşağıdaki dönüştürme seçeneklerini güncellemeniz gerekir:

Ölçeği X eksenini dönüştür: %100
Ölçek Y eksenini dönüştür: %100

Dönüştür Y eksenini çevir: %0
Dönüştür X eksenini çevir: %0

Son sonuç

Şimdi, tanıtıcı modül düzeninin nihai sonucunu kontrol edelim.

Son düşünceler

Divi'nin dönüştürme kontrolleriyle, tanıtım modüllerinizi sayfanızın belirli alanlarına kolaylıkla yerleştirme olanağına sahipsiniz. Bu, hizmetleri, işlem adımlarını ve sayısız diğer kullanımları öne çıkarmak için yeni tanıtıcı modül düzenlerini denemeyi ve oluşturmayı eğlenceli hale getirir. Umarım bu eğitim, bu tasarım tekniklerini kendiniz test etmeniz için size biraz ilham verir.

Daha fazla ilham almak için bu 5 yaratıcı tanıtım modülü tasarımına göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!