Divi'de Döndürme Kaydırma Efektlerini Dairesel Öğelerle Birleştirmenin Yaratıcı Yolları

Yeni bir web sitesi tasarlarken öne çıkan öğeleri (ürünler ve hizmetler gibi) sergilemek için her zaman yeni ve yaratıcı yollar arıyoruz. Ve Divi'nin kaydırma efektleriyle, tanıtım yazısı düzenlerinizi tamamen yeni bir düzeye çıkarmak için yeni kapılar açıldı. Bu öğreticide, kaydırma üzerinde dönen dairesel öğelerle bir tanıtıcı modül düzeninin nasıl oluşturulacağını göstereceğiz. Bu benzersiz düzen, kullanıcı sayfayı aşağı kaydırdığında tanıtım yazılarının arkasında dönen birden çok dairesel öğeyle renk kombinasyonlarının akıllıca kullanılmasını sağlar. Hiç şüphe yok ki bu tasarımın hemen hemen her içerik için birçok uygulaması olacaktır.

Eğlence!

Gizlice Bakış

İşte bu öğreticide oluşturduğumuz dönen dairesel öğeler içeren tanıtım yazısı düzenine hızlı bir bakış.

Dönen Dairesel Öğeler Bulanık Düzenini ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Scroll'da Dönen Dairesel Öğelerle Blurb Düzeni Oluşturma

Satır Ekleme

İlk olarak, bölüme üç sütun satırı ekleyin.

Geçici Bölüm Marjı

Ardından, kaydırılacak biraz alan oluşturmak için bölüme biraz üst ve alt kenar boşluğu ekleyin.

Dönen Dairesel Öğe Blurb Tasarım #1 Oluşturma

İlk tasarımımız için, tanıtım yazısının arkasına oturacak ve kullanıcı kaydırdıkça dönecek üç renkli ayırıcı modüle sahip bir tanıtım yazısı modülü oluşturacağız. Bu ilk tasarım, diğer sütunlara ekleyeceğimiz sonraki iki tasarım için iyi bir şablon görevi görecek.

İşte nasıl inşa edileceği.

Blurb modülü ekle

1. sütuna bir tanıtım yazısı modülü ekleyin.

1 İçeriği Bulanıklaştır

Tanımlama modülü için ayarları açın ve gövde içeriğini aşağıdakilerle güncelleyin:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Ardından, varsayılan resmi değiştirmek için istediğiniz bir simgeyi ekleyin.

Blurb 1 Tasarım Ayarları

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Arka Plan Rengi: #121212
• Simge Rengi: #41828d
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 75px
• Metin Hizalama: orta
• Başlık Yazı Tipi: Oswald
• Başlık Yazı Tipi Stili: TT
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 22px
• Gövde Metni Rengi: #ffffff

Açıklamayı dairesel yapmak için boyutu ve yuvarlatılmış köşeleri aşağıdaki gibi güncelleyin:

• Genişlik: 300 piksel
• Maksimum Genişlik: 300 piksel
• Dolgu: 25 piksel üst, 25 piksel alt, 25 piksel sol, 25 piksel sağ
• Yuvarlatılmış Köşeler: %50

Yuvarlak köşelerle birleştirilmiş eşit genişlik ve yüksekliğin birleşimi, tanıtıcıyı dairesel yapan şeydir.

Ardından konumu bir ofset ile güncelleyin.

• pozisyon: akraba
• Dikey Ofset: 25 piksel
• Yatay Ofset: 25 piksel
• Z İndeksi: 1

Bu, tanıtım yazısını daha sonra ekleyeceğimiz ayırıcılar içinde ortalayacaktır. Z İndeksi, tanıtım yazısının diğer bölücülerin üzerinde de oturmasını sağlayacaktır.

Ardından, tanıtım yazısına dönen bir kaydırma efekti ekleyin.

Dönen Efektler sekmesi altında…

• Döndürmeyi Etkinleştir: EVET
• Döndürmeyi Başlatma: 45deg (%0 görünüm alanında)
• Orta Dönme: 0deg (%40-60 görünüm alanında)
• Bitiş Dönüşü: -45deg (%100 görünüm alanında)

Bu, tanıtıcı metni sayfanın ortasına doğru hafifçe döndürecek ve ardından sayfanın üst kısmından çıkarken 45 derece daha döndürecektir.

Dairesel Bölücü #1 Ekle

Şimdi dönen dairesel eleman tasarımımızı oluşturacak üç bölücü modülden ilkini ekleyeceğiz.

Tanımlama modülünün altına bir ayırıcı modül ekleyin.

Bölücü 1 Ayarları

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

• Bölücüyü Göster: HAYIR
• Arka Plan Gradyanı Sol Renk: #311847
• Arka Plan Gradyanı Sağ Renk: #ec4067
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Ve şimdi bunu aşağıdaki gibi dairesel hale getiriyoruz:

• Genişlik: 350 piksel
• Maksimum Genişlik: 350 piksel
• Yükseklik: 350 piksel
• Yuvarlatılmış Köşeler: %50

Ayırıcının tanıtım yazısı modülünden biraz daha büyük olduğuna dikkat edin, böylece tanıtım yazısının arkasına yerleştirildiğinde ayırıcının dış kenarını görebiliriz.
Şimdi bölücünün konumunu mutlak olarak güncelliyoruz ve tanıtım yazısının arkasına mükemmel bir şekilde oturacak.

• Pozisyon: Mutlak

Ayırıcınız tanıtım yazısının üzerindeyse, tanıtım yazısı z dizinini 1 olarak güncellediğinizden emin olun.

Ardından, ayırıcıya aşağıdaki kaydırma efektlerini ekleyin:

Dönen efekt sekmesi altında…

• Döndürmeyi Etkinleştir: EVET
• Döndürmeyi Başlatma: 0deg (%0 görünüm alanında)
• Orta Dönüş: 45deg (%50 görünüm alanında)
• Bitiş Dönüşü: -180deg (%100 görünüm alanında)

Dairesel Bölücü 2 Ekle

İkinci dairesel bölücüyü oluşturmak için, ayarlar menüsündeki katmanlar simgesine tıklayarak katmanlar kutusunu açın. Ardından, yeni bir tane oluşturmak için bölücü modülü çoğaltın.

Bölücü 2 Tasarım Ayarlarını güncelle

Bu bölücü için aşağıdaki gibi farklı bir degrade arka plan rengi verelim:

• Arka Plan Gradyanı Sol Renk: rgba(160,26,125,0.5)
• Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)

NOT: Arka planı ortaya çıkarmak için burada yarı saydam renkler kullanmak önemlidir. Bu, güzel bir renk kombinasyonu yaratır.

Ardından, kaydırma efektlerini aşağıdaki gibi güncelleyin:

Dönen efektler sekmesi altında…

• Orta Dönüş: 90deg (%50 görünüm alanında)
• Döndürmeyi Bitirme: 180 derece (%100 görünüm alanında)

Dairesel Bölücü 3 Ekle

Bölücü 2'yi çoğaltarak üçüncü ve son bölücüyü oluşturmak için aynı işleme devam edin.

Bölücü 3 Tasarım Ayarlarını güncelle

Bu bölücü için aşağıdaki gibi farklı bir degrade arka plan rengi de verelim:

• Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
• Arka Plan Gradyanı Sağ Renk: rgba(41,196.169,0.5)

Ardından Kaydırma Efektlerini aşağıdaki gibi güncelleyin:

Dönen efektler sekmesi altında…

• Orta Dönüş: 180deg (%50 görünüm alanında)
• Döndürmeyi Bitirme: 360deg (%100 görünüm alanında)

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %110 (%0 görünüm alanında)
• Orta Ölçek: %110 (%50 görünüm alanında)
• Bitiş Ölçeği: %100 (%100 görünüm alanında)

Dönen Dairesel Öğe Blurb Tasarım #2 Oluşturma

1. sütunda zaten tamamlanmış bir tasarımımız olduğundan, ilk sütunun tamamını çoğaltarak ikinci tasarıma hemen başlayalım. Bu aynı zamanda dört modülü de taşıyacaktır. Üç sütun düzenini korumak için boş sütunlardan birini silmeniz gerekecektir.

Blurb Modül Tasarımını Güncelleyin

Bu tasarım için beyaz bir tanıtım yazısı arka planı ile gideceğiz, böylece tanıtım yazısı metninin arkasındaki hareketli renkleri göstermek için ekran filtresi efektini kullanabiliriz. Ayrıca arka bölücüyü büyütmek için bir ölçekleme kaydırma efekti ekleyeceğiz.

İşte nasıl yapılacağı.

2. sütundaki tanıtım yazısı modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

• Arkaplan: #ffffff

Ardından Başlık ve Gövde Metni Rengini siyah olarak değiştirin.

• Başlık Metin rengi: #000000
• Gövde Metni Rengi: #000000

Ardından aşağıdaki karışım modunu ekleyin:

• Karışım Modu: Ekran

Bölücü 1 Kaydırma Efektlerini Güncelle

Ayırıcı modül ayarlarını doğrudan sütun 2'deki tanıtım modülünün altında açın ve aşağıdaki kaydırma efektlerini güncelleyin:
Yukarı ve Aşağı Ölçekleme efektleri sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %100 (%0 görünüm alanında)
• Orta Ölçek: %120 (%40-60 görünüm alanında)
• Bitiş Ölçeği: %100 (%100 görünüm alanında)

Bu, kullanıcı sayfayı aşağı kaydırdıkça ayırıcının orijinal boyutunun ortasında %20 oranında büyümesine neden olur.

Dönen Dairesel Öğe Blurb Tasarımı Oluşturma #3

Bu son tasarım için, 1. sütundakine benzer dönen dairesel bir tanıtım yazısı oluşturacağız. Ancak, koyu bir arka plan üzerinde beyaz metin aracılığıyla renkleri göstermek için farklı bir karışım modu ekleyeceğiz.

İşte nasıl yapılacağı.

Sütun 1'i Çoğalt

Sütun 1'de zaten tamamlanmış bir tasarımımız olduğundan, ilk sütunun tamamını çoğaltarak üçüncü tasarımı hemen başlatalım ve katmanlar kutusunu kullanarak onu üçüncü sütun yerleşimine taşıyalım. Ardından fazladan boş sütunu silin.

Blurb Modül Ayarlarını Güncelle

İlk olarak, bölücü renkleri beyaz metin üzerinden göstermek için çarpma karıştırma modunu aşağıdaki gibi ekleyelim:

• Karışım Modu: çoklu

Ardından simge rengini de beyaza güncelleyin.

• Simge Rengi: #ffffff

Bölücü 3 Ayarlarını Güncelle

Şimdi 3. sütundaki son (üçüncü) bölücüdeki ölçekleme kaydırma efektini çıkaralım.
Üçüncü bölücünün ayarlarını açın ve aşağıdakileri güncelleyin:

Büyütme ve Azaltma Efektleri sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: HAYIR

Mobil Cihazda 2. Sütun Konumunu Ayarla

Şu anda üç tanıtım yazısı tasarımı, tablet ve telefon ekranlarında ekranın soluna hizalanacak. Tasarımı dengelemek için dönüştürme ölçeğini kullanarak orta sütunu kolayca sağa taşıyabiliriz.

2. sütun için ayarları açın ve aşağıdakileri güncelleyin:

Ölçeği X Eksenini Dönüştür: %40 (tablette), %15 (telefonda)

Son sonuç

Bu kadar! Canlı bir sayfada nihai sonucu kontrol edelim.

Kullanıcı düzeni kaydırırken masaüstündeki tasarım buradadır.

İşte tabletteki tasarım.

Ve işte telefonda.

Son düşünceler

Bu düzenin en iyi özelliklerinden biri, her biri Divi'nin yerleşik seçenekleri kullanılarak kolayca ayarlanabilen kaydırma efektleri ve renk kombinasyonlarıyla ne kadar yaratıcı olabileceğinizdir. Ve filtre efektlerinin nasıl dahil edileceğini daha iyi anladığınızda, işler gerçekten patlamaya başlar. Umarım bu, oluşturacağınız bir sonraki tanıtım yazısı düzeni için size biraz ilham verecektir.

Yorumlarda sizden haber bekliyorum.

Şerefe!