ev borcu WordPress sitesi
Blurbs Bloom yapmak için Divi's Fold Animasyonunu Kullanma
Harika sayfa bölümleri tasarlamak için Divi'nin yeni Animasyon seçeneklerini nasıl kullanacağınızı öğretecek olan bu 6 bölümlük dizinin 4. bölümüne hoş geldiniz. Size web sitenize animasyon ekleme tekniklerini göstermek için canlı demo sayfamızın farklı bölümlerini nasıl oluşturacağınız konusunda size yol göstereceğim. Animasyon özellikleri gerçekten eğlenceli ve kullanımı kolaydır. Ve Visual Builder ile yaratımınızın yolun her aşamasında hayat bulduğunu görebilirsiniz. Divi animasyonlarının gücünü keşfederken gelin ve bana katılın.
Son yazımızda, adım adım süreç için düzenlenen 4 tanıtıcı modül tasarlamanın ve canlandırmanın birkaç yaratıcı yolunu gösterdim.
Bugün, animasyon demo sayfamızın 6. Bölümünü oluşturacağız. Bu bölüm, öne çıkan ürünleri veya indirmeleri görüntülemek için bazı harika tasarım ve animasyonları sergiliyor. Bu tanıtım modülleri üzerinde renk kullanımı ve animasyonun çiçek açma etkisi, bölümü gerçekten öne çıkarıyor.
Hadi dalalım!
Bugünün Yazısında Ne İnşa Edeceğimize Kısa Bir Bakış
Blurbs Bloom yapmak için Divi's Fold Animasyonunu Kullanma
Youtube Kanalımıza Abone Olun
Bina Bölüm 6
Bölümünüzü Ekleyin ve Özelleştirin
Visual Builder'ı kullanarak, düzenimize başka bir normal bölüm ekleyerek başlayalım. Ardından, bölümünüze üç sütun (yarım dörtte bir dörtte bir) satır ekleyin.
İlk modülümüzü eklemeden önce bölüm ayarlarına gidin ve aşağıdakileri güncelleyin:
İçerik sekmesi altında…
Arka Plan Rengi: #00252d
Tasarım sekmesi altında…
Özel Dolgu: 80px Üst, 80px Alt
Ayarları kaydet
Metin Modülünü Kullanarak Başlık Ekleme
Şimdi üç sütunlu satırımıza geri dönelim ve sol sütuna bir Metin Modülü ekleyelim. Metin Ayarlarını aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
İçerik kutusunun metin sekmesine aşağıdaki h1 başlığını ekleyin:
<h1>Build Like You Mean It</h1>
Tasarım sekmesi altında…
Başlık Yazı Tipi: Lato, Kalın (B)
Başlık Yazı Tipi Boyutu: 38px
Başlık Metni Rengi: #ffffff
Başlık Çizgisi Yüksekliği: 1.3em
NOT: İçeriğimizin bir h1 başlığı olduğundan, onu biçimlendirmek için yalnızca başlık metni seçenekleri çalışır.
Özel Kenar Boşluğu: 20 piksel Alt
Animasyon Stili: Slayt
Animasyon Yönü: Sol
Animasyon Yoğunluğu: %16
NOT: Bu animasyon, başlığa hafif bir sola kayma sağlar. Buradaki anahtar, slaytın çok fazla yer kaplamaması veya tamamlanması çok uzun sürmemesi için daha düşük bir yoğunluk vermektir.
Ayarları kaydet
Başka Bir Metin Modülü Kullanarak Metin Ekleme
Normalde, muhtemelen devam edip metninizin kalanını aynı metin modülünde h1 başlığının altına eklersiniz. Ancak h1 başlığına ve altındaki metne farklı bir animasyon efekti eklemek istediğimiz için başka bir metin modülü oluşturmamız gerekecek. Devam edin ve az önce oluşturduğunuz modülün altına bir metin modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
İçerik: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.”
Tasarım sekmesi altında…
Metin Rengi: Açık
Metin Yazı Tipi Boyutu: 18px
Metin Metin Rengi: rgba(255,255,255,0.66)
Metin Satır Yüksekliği: 1.9em
Özel Kenar Boşluğu: 40 piksel Alt
Animasyon Stili: Slayt
Animasyon Yönü: Sol
Animasyon Yoğunluğu: %8
NOT: Bu metnin animasyon ayarlarının, üstündeki başlık metninden (%16) biraz daha düşük bir yoğunluğa (%8) sahip olduğuna dikkat edin. Bu, aynı sürede daha az mesafe kat ettiği için daha hızlı hareket ediyor gibi görüneceği anlamına gelir. Her iki metin modülü de animasyonu tamamlamak için aynı miktarda zaman (süre) alsa da, farklı yoğunluk seviyelerinde başladıkları için farklı hızlarda hareket edeceklerdir. Bu, yarışa aynı anda başlayan ve biten iki yarışçıdan birinin önemli bir önde başlaması gibidir.
Ayarları kaydet
Düğme Ekle
Şimdi sol sütundaki iki metin modülünün altına bir Düğme Modülü ekleyelim. Ardından ayarları aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
Alt Metin: Tümünü İndir
Düğme URL'si [url'yi girin]
Tasarım sekmesi altında…
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 15px
Düğme Metin Rengi: #01254c
Düğme Arkaplan rengi: #ffcd1c
Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 65px
Düğme Harf Aralığı: 1px
Düğme Yazı Tipi: Kalın (B), Büyük Harf (TT)
Özel Dolgu: 10px Üst, 30px Sağ, 10px Alt, 30px Sol
Animasyon Stili: Slayt
Animasyon Yönü: Sol
Animasyon Yoğunluğu: %16
NOT: Bu animasyon efekti, ilk metin modülü animasyonuyla eşleşir.
<Under the Advanced tab…
Bu harika ışıma efektini box shadow css özelliğini kullanarak eklemeyi unutmayalım. Özel CSS altındaki Ana Öğe kutusunu bulun ve aşağıdakileri ekleyin:
box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);
Ayarları kaydet
İlk Blurb Modülünü Ekleyin
Sol sütunumuz için bu kadar. Şimdi ortadaki sütuna (ilk dördüncü sütun olan) bir Blurb Modülü ekleyelim.
Ayarları aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
Başlık: Divi
Simgeyi Kullan: EVET
Simge: [simge seçin]
Arka Plan Degrade Renkleri: #8b56ff, #5d3dff
Gradyan Türü: Doğrusal
Gradyan Yönü: 140deg
Tasarım sekmesi altında…
Simge Rengi: #ffffff
Metin Rengi: Açık
Metin Yönü: Merkez
Başlık Yazı Tipi: Kalın (B), Büyük Harf (TT)
Başlık Harf Aralığı: 10px
Özel Marj: %12 Alt
Özel Dolgu: 40 piksel Üst, 30 piksel Sağ, 30 piksel Alt, 30 piksel sol
Animasyon Stili: Katlama
Animasyon Yönü: Sol
Animasyon Gecikmesi: 200ms
NOT: Tanımlama modüllerinin her birinin animasyon yönü farklı olacaktır. Bu ilki sola doğru açılır.
Gelişmiş sekmesi altında…
İşte bu parlama efektini modülümüze ekleyebileceğimiz ve başlığa biraz girinti yapabileceğimiz yer.
Ana Öğe kutusuna aşağıdaki CSS'yi ekleyin:
border-radius: 6px; box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);
Blurb Title kutusuna aşağıdaki CSS'yi ekleyin:
text-indent: 10px;
Ayarları kaydet
Sonraki Üç Blurb'u Oluşturmak için Blurb Modülünü çoğaltın
Artık tasarlanan ve canlandırılan ilk Blurb Modülümüze sahip olduğumuza göre, kalan tanıtımları oluşturmak için modülü çoğaltabiliriz.
Blurb Module'ün üzerine gelin ve yinelenen modül simgesine tıklayın. Aşağıda görünen yeni çoğaltılmış modülde ayarları aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
Başlık: Bloom
Simge: [yeni simge seçin] Arka Plan Degrade Renkleri: #ff56f9, #c43dff
Tasarım sekmesi altında…
Animasyon Yönü: Aşağı
NOT: Katlama animasyonunun bu tanıtım yazısı üzerinde aşağı yönü vardır.
Gelişmiş sekmesi altında…
Ana Öğe kutusundaki CSS'yi aşağıdakiyle değiştirin:
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);
Ayarları kaydet
Tanımlama modülünün başka bir kopyasını oluşturun ve bu kopyayı en sağdaki sütuna sürükleyin. Ardından, Blurb Modülünü aşağıdaki ayarlarla güncelleyin:
İçerik sekmesi altında…
Başlık: Ekstra
Simge: [yeni simge seçin] Arka Plan Degrade Renkleri: #56ffda, #38d5ea
Tasarım sekmesi altında…
Animasyon Yönü: Yukarı
NOT: Bu tanıtım yazısı üzerinde katlama animasyonu yukarı yönlüdür.
Gelişmiş sekmesi altında…
Ana Öğe kutusundaki CSS'yi aşağıdakiyle değiştirin:
border-radius: 6px; box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);
Sağ sütunda yeni güncellediğiniz tanıtım yazısı modülünün başka bir kopyasını oluşturun, böylece doğrudan altında görünecek. Ardından, Blurb Modülünü aşağıdaki ayarlarla güncelleyin:
İçerik sekmesi altında…
Başlık: Hükümdar
Simge: [yeni simge seçin] Arka Plan Degrade Renkleri: #f2743a, #ff5656
Tasarım sekmesi altında…
Animasyon Yönü: Sağ
NOT: Bu tanıtım yazısı üzerinde animasyon sağa doğru açılır.
Gelişmiş sekmesi altında…
Ana Öğe kutusundaki CSS'yi aşağıdakiyle değiştirin:
border-radius: 6px; box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
NOT: Bu 4 tanıtım yazısının tümü aynı stili ve gecikmeyi paylaşacağından, bu, 4 modülün tümü farklı yönlerde katlanacağı için ters çiçek açma etkisi yaratır.
Ayarları kaydet
Şimdi satır ayarlarınızı aşağıdaki gibi güncelleyerek boşlukları düzeltelim:
Tasarım sekmesi altında…
Özel Genişlik Kullan: EVET
Özel Genişlik: 1366 piksel
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 2
Özel Dolgu: 80px Üst, 0px Sağ, 160px Alt, 0px Sol
Counn 1 Özel Dolgu: 140px Üst
İkinci Satırı Oluşturun
Artık bölümümüz için bir sonraki satırı oluşturmaya hazırız. İşleri hızlandırmak için, önceden tasarlanmış satır ve modüllerimizden tasarım öğelerini çoğaltacağız ve kopyalayacağız.
İlk önce bölümümüze tek sütunlu yeni bir satır ekleyelim. Ardından satır ayarlarını aşağıdakilerle güncelleyin:
Özel Genişlik Kullan: EVET
Özel Genişlik: 1366 piksel
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 2
Ayarları kaydet
Ardından, oluşturduğunuz ilk satırdaki h1 başlığını içeren ilk metin modülünü kopyalayın. Ardından ayarları aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
Geçerli h1 etiketini aşağıdakiyle değiştirin:
<h1>Don't Settle for Less</h1>
Tasarım sekmesi altında…
Metin Yönü: Merkez
Animasyon Stili: Çevir
Animasyon Yoğunluğu: %70
Ayarları kaydet
Ardından, önceki satırdan düğme modülünü kopyalayın ve ikinci satırda güncellemeyi yeni bitirdiğiniz metin modülünün altına yapıştırın. Ardından düğme modülünü aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
Düğme Metni: Bugün Katılın
Tasarım sekmesi altında…
Düğme Hizalama: Merkez
Animasyon Stili: Çevir
Animasyon Yoğunluğu: %70
NOT: Düğme ve üstündeki başlık aynı animasyona sahiptir.
Ayarları kaydet
Şimdi son sıramız için. Bir buçuk sütun yapısına sahip yeni bir satır oluşturun. Modüllerinizi eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:
Tasarım sekmesi altında…
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 2
Ayarları kaydet
Ardından, önceki satırınızdan mor “Divi” Blurb modülünü kopyalayın ve yeni satırınızın sol sütununa yapıştırın. Ardından aşağıdaki ayarları güncelleyin:
İçerik sekmesi altında…
Başlık: İnşaatçı
Simge: [yeni simge seçin] Arka Plan Degrade Renkleri: #ff568e, #ff3d5d
NOT: Doğru tanıtım modülünü kopyaladıysanız, animasyon yönü zaten "sol" olmalıdır. Değilse, olduğundan emin olun.
Gelişmiş sekmesi altında…
Ana Öğe kutusundaki CSS'yi aşağıdakiyle değiştirin:
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);
Ayarları kaydet
Ardından, oluşturduğunuz ilk satırda en sağdaki sütunun en üstündeki mavi yeşil “Ekstra” tanıtım modülünü kopyalayın. Ardından, yeni üçüncü sıranızın sağ sütununa yapıştırın.
Ardından, bulanıklık ayarlarını aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
Başlık: Sakin
Simge: [yeni simge seçin] Arka Plan Degrade Renkleri: #3da4ff, #385eea
NOT: Doğru tanıtım modülünü kopyaladıysanız, animasyon yönü zaten "yukarı" olmalıdır. Değilse, olduğundan emin olun.
Gelişmiş sekmesi altında…
Ana Öğe kutusundaki CSS'yi aşağıdakiyle değiştirin:
border-radius: 6px; box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);
Ayarları kaydet
Bu kadar.
Bonus: Kolay İçe Aktarma için Bu Bölümleri İndirin
Bir bonus avantaj olarak, bugünün eğitiminde yerleşik bölümleri, aşağıdaki e-posta katılım formunu kullanarak alabileceğiniz ücretsiz bir indirme şeklinde paketledik. Sadece e-postanızı girin ve indirme düğmesi görünecektir. Divi Bültenimizin bir parçasıysanız, "yeniden abone olma" konusunda endişelenmeyin. E-postanızı yeniden girin, daha fazla e-postaya veya kopyaya neden olmaz. Sadece indirmeyi ortaya çıkaracaktır.
Eğlence!
Düzen Paketini İ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.
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!
Bu indirmeleri kullanmak için, indirilenler klasörümüzde Animation_Effects_Part_4.zip adlı sıkıştırılmış dosyayı bularak başlayın. Aşağıdaki içe aktarmaları ortaya çıkarmak için sıkıştırın.
Animasyon Efektleri Bölüm 4 (bölüm 1).json
Animasyon Efektleri Bölüm 4 (bölüm 2).json
WordPress Yöneticinizde Divi > Divi Kitaplığı > İçe ve Dışa Aktar'a gidin. Taşınabilirlik modu açıldığında, içe aktar sekmesini ve dosya seç etiketli düğmeyi tıklayın.
Tercih ettiğiniz json dosyasını seçin ve “Divi Builder Düzenlerini İçe Aktar” seçeneğine tıklayın. İçe aktarma işlemi tamamlandıktan sonra, yukarıdaki bölümlerden birini eklemek istediğiniz gönderiye veya sayfaya gidin.
Görsel oluşturucuyu etkinleştirin. Sayfanın yukarıdaki bölümlerden birini eklemek istediğiniz bölümüne gidin. Yeni bölüm ekle simgesine tıkladığınızda karşınıza “Kütüphaneden Ekle” seçeneği çıkacaktır. Bu seçeneği seçin ve istediğiniz düzeni seçin.
Toplama
Umarım bu çarpıcı bölümü birlikte oluşturmaktan keyif almışsınızdır. Renk, parlayan gölgeler ve yaratıcı animasyonun birleşimi, bunu kendi indirdiklerinizi veya ürünlerinizi sergilemek için olağanüstü bir düzen haline getirir.
geliyor
Bölüm 5'te, Roll animasyon stilini bölümlerinizdeki cep telefonlarına nasıl başarılı bir şekilde dahil edeceğinizi göstereceğim.
Aşağıdaki yorumlarda sizden haber bekliyorum.
Şerefe!