Divi’de bir daire sayımı ile canlandırılan bir simgeyle benzersiz bir özellik bölümü tasarlayın
Çoğu web sitesi, ürün veya hizmet özelliklerini görüntülemek için iyi tasarlanmış bir özellik bölümü gerektirir. Bu nedenle, bu öğreticide, Divi’de nasıl benzersiz bir özellik oluşturacağınızı göstereceğim. Bunu yapmak için, açıklamanızın simgesine animasyon eklemek için Divi Circle sayma modülü ile biraz yaratıcı olacağız. Ve bazı özel alanları kullanarak, açıklamanızı bölücünün arka planına uyacak şekilde nasıl kolayca konumlandırabileceğinizi göstereceğim. Tasarım nihayet temiz ve benzersiz. Ve birkaç küçük dokunuşla, bu bir sonraki projenize iyi bir katkı olabilir.
Başlayalım! Aşağıdaki gizlice göz atma, animasyonlu öğeleri göstermeye yardımcı olmak için küçük bir tasarım ve GIF sızıntısıdır.
Bunu yapmak için, normal bölümünüze bir satır bir sütun ekleyin. Ardından metin modülünü satıra ekleyin ve ayarları aşağıdaki gibi güncelleyin: İçindekiler:
Özelliklerimiz
İhtiyacın olan her şey.
Metin Yazı Tipi: Montserrat Ağırlık Yazı Tipi Metin: Yarı Kalın Metin Boyutu: 22px Metin Yönlendirme: Orta Ağırlık Harfleri Başlık: Ultra Kalın Metin Boyutu Başlık: 6VW (Masaüstü), 50px (Tablet), 30px (akıllı telefon) Şimdi ayarlarınızı kaydedin ve parçanın ayarlarına atlayın ve kutunun gölgesini aşağıdaki gibi ekleyin: Gölge Kutusu: Ekrana bakın Dikey Konum Gölge Kutusu: 19px Bulanık Güç Gölge Kutusu: 80px Mukavemet Yayılan Gölge Kutusu: -16px Renk Gölgesi: RGBA (136.150,171.0, 13) Ayarları kaydedin. Oldukça basit şeyler. Şimdi hoş bir parçaya gidelim. Ana özellikleri ve arka plan tasarımını oluşturmak, özelliklerimizi karşılamak için yeni bir parça eklememiz gerekir. Genellikle, yalnızca önceki bölüme yeni çizgiler ekleyebilirsiniz, ancak bu durumda bölümün öğelerinde bulunan arka plan böcekleri eklememiz gerekir. Devam edin ve yeni bitirdiğiniz parçanın altına yeni bir parça ekleyin. Ardından sıraya dört sütun düzeni ekleyin. Bu sütuna bir açıklama ekleyeceğiz, ancak şimdilik bölüm ayarlarımızı güncelleyelim.Bu bölüm için, maksimum genişlik genişliği vermemiz gerekiyor. Bu, tasarımı daha büyük bir tarayıcı boyutunda tutmak için önemlidir. Ayrıca, açıklama ayarlarımıza uygun olarak arka plan olarak kullanılacak bir bölücü eklememiz gerekir (daha sonra bununla ilgili). Aşağıdaki bölümleri açın ve Güncelleme: Genişlik: 1080px Tesisat Bölümü: Orta Bölücü: Üst Bölücü Stil: Ekran Capper Renk Merkezi: RGBA (136,150,171,0,07) Bölme Yüksekliği:% 52 Ayarları kaydedin. Özel bir genişlik (veya maksimum genişlik) 1080px vermek temel olarak satırlarınızın varsayılan olarak bir parçada nasıl düzenlendiğidir. Yani, temel olarak, tüm parçalarımızı varsayılan satırın boyutu haline getiriyoruz.
Bu noktada dört sütuna bulanık ekleme ekleyebilir ve dört sütunun her birine açıklamamızı eklemeye başlayabiliriz. İlk açıklamanızı eklemek için ilk sütundaki gri simgeyi tıklayın. Kutudaki içeriği daha az metin (2 cümle) içerecek şekilde güncelleyin, ardından görüntüler yerine simgeler kullanmayı seçin (resim simgesini seçiyorum). Tasarım sekmesinin altında aşağıdakileri güncelleyin: Renk simgesi: #974450 daire simgesi: Evet Circle Renk: RGBA (255,255,255,0.5) Simge yazı tipi boyutunu kullanın Boyut: Evet Ikon Yazı Tipi Boyut: 48px Metin Oryantasyonu: Orta Ayarları kaydedin. Şimdi her sütunda bir açıklama yapmak için modülü kalan sütunlara kopyalayıp yapıştırın.
Şu anda isterseniz simgeyi döndürebilir ve güncelleyebilirsiniz, ancak bunu yapmak zorunda değilsiniz. Açıklama simgemize animasyon eklemek için üst üste binen bulanıklık simgesine bir daire sayısı ekleyin, her simgeyi farklı bir sayı değeri olan bir daire sayısıyla örtüşeceğiz. Bu, Circle Animation’ın her simgeyle gelişimi göstermesi için kademeli olarak artmasına neden olur. Ancak, her daire sayısında istediğiniz çıplak değeri kullanabilirsiniz. İlk sütundaki açıklama modülünün altındaki gri simgeyi “Yeni Modülü Ekledi” i tıklayın ve ardından hesaplama modülünü ekleyin.
Daire modülü ayarlarını düzenlemeye başlamadan önce, açıklama modülünün üst kısmını sürdürün ve sürükleyin. Şimdi içerik ayarlarını aşağıdaki gibi güncelleyebilirsiniz: Başlık kutusu numarasındaki metni silin: 25 Ardından tasarım sekmesi ayarlarını aşağıdaki gibi güncelleyin: arka plan renk çubuğu: #974450 (açıklama simgenizle aynı renk) Metin Renk Numarası: RGBA (0,0,0,0,0) (Bu gerçekten şeffaftır, böylece gizlenir Sayı) Numaralar: 0px (Dairedeki istenmeyen metin boşluğunu kaldırmak için) Genişlik: 109px (bu, iconun üst üste binme boyutuna göre ayarlanmıştır) Modül Hizalama: Marj Merkezi -Botom: -102px (Bu simgeyi mükemmel bir şekilde kaplayacak ) Ayarları kaydedin. Şimdi tek yapmanız gereken, kalan sütunların her birine daire sayma modülünü kopyalamak ve eklemek ve ardından her bir açıklamanın üstüne sürüklemektir. Yinelenen daire sayaçları yer aldıktan sonra, ikinci daire sayısını 50’ye güncelleyin, üçüncü sayı 75 olur ve dördüncü sayı 100 olur. Animasyon tamamlandıktan sonra sonuçlar böyle görünecektir. Bu tasarım için son adım bölücü ile çakışacak şekilde simgeyi konumlandırmak için dolgu satırlarını kullanın, simgeyi bölücünün arka plan eğrisine uyacak şekilde konumlandırmaktır. Bunu yapmak için çizgiye özel dolgu eklememiz gerekiyor. Aşağıdaki satır ayarlarını açın ve güncelleme: Bu çizgiyi tam genişlik yapın: Evet Sütun 2 Özel Dolgu:% 9 Üst (Masaüstü),% 0 Üst (Tablet) Sütun 3 Özel Dolgu:% 9 Üst (masaüstü),% 0 üst (tablet) İşte burada! Sonuç’a bakın.
Simgenin şimdi çeşitli sayısal değerlere sahip bir daire sayısıyla nasıl animasyona alındığına dikkat edin. Ve simge bölücünün arka planıyla çakışır. Özellik bölümünün hücresel aşağıda nasıl göründüğü, tablet ve akıllı telefon ekranındaki tasarım ekranıdır. Bu özellik bölümünün tasarımının benzersiz unsurunun son zihni hafif ve pürüzsüzdür, bu da bazı küçük ayarlarla kendi düzeninize eklemenizi kolaylaştırmalıdır.Daire sayma animasyonu sizin için uygun değilse, onu görmezden gelmekten çekinmeyin ve sadece açıklama modülündeki daire simgesini kullanın.Veya yalnızca istatistikleri görüntülemek için reklam materyalinin düzeni için görünen bir sayı değeri olan bir daire sayısı kullanmayı seçebilirsiniz.Eğer varsa, umarım bu size kendimi keşfetmeniz için bazı fikirler verecektir. Umarım yorumlarda sizden haber alırsınız.Kızarmış ekmek!
