Daire Sayaçları tarafından Hareketlendirilen Simgelerle Divi'de Benzersiz Bir Özellik Bölümü Tasarlayın

Çoğu web sitesi, ürün veya hizmetlerin özelliklerini görüntülemek için iyi tasarlanmış bir özellik bölümüne ihtiyaç duyar. Bu derste size Divi'de benzersiz bir özellik bölümünün nasıl oluşturulacağını göstereceğim. Bunu yapmak için, tanıtım yazısı simgelerinize animasyon eklemek için Divi's Circle Counter modülü ile biraz yaratıcı olacağız. Ve bazı özel boşluklar kullanarak, tanıtım yazılarınızı ayırıcı bir arka planla güzel bir şekilde örtüşecek şekilde nasıl kolayca konumlandırabileceğinizi göstereceğim. Nihai tasarım hem temiz hem de benzersizdir. Ve birkaç küçük dokunuşla bir sonraki projenize harika bir katkı olabilir.

Başlayalım!

Gizlice Bakış

Animasyon öğesinin gösterilmesine yardımcı olacak tasarımın ve gif'in küçük bir özeti.

Yeni Sayfa Oluşturma ve Visual Builder'ı Dağıtma

Başlamak için WordPress Kontrol Panelinize gidin ve Sayfalar > Yeni Ekle'ye gidin. Ardından sayfanıza bir başlık verin ve Divi Builder'ı kullanmak için tıklayın. Ardından Visual Builder'ı kullanmak için tıklayın. Sizden üç seçenek istenecektir. “Sıfırdan Oluştur” seçeneğini seçin.

Boş tuvaliniz sizi bekliyor!

Unsur Bölümü Başlığını Oluşturma

Özellik bölümünüzün üst başlığı oldukça basittir. Eşsiz unsur, tasarıma biraz derinlik kazandırmak için altında görüntülenen ince kutu gölgesidir.

Oluşturmak için normal bölümünüze tek sütunlu bir satır ekleyin.

Ardından satıra bir metin modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:

İçerik:

<h1>Our Features</h2>
Everything you need.

Metin Yazı Tipi: Montserrat
Metin Yazı Tipi Ağırlığı: Yarı Kalın
Metin Metin Boyutu: 22px
Metin Yönü: Merkez
Başlık Yazı Tipi Ağırlığı: Ultra Kalın
Başlık Metni Boyutu: 6vw(masaüstü), 50px(tablet), 30px(akıllı telefon)

Şimdi ayarlarınızı kaydedin ve bölüm ayarlarına geçin ve aşağıdaki gibi bir kutu gölgesi ekleyin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 19px
Kutu Gölge Bulanıklığı Gücü: 80px
Kutu Gölge Yayılma Gücü: -16px
Gölge Rengi: rgba(136,150,171,0.13)

Ayarları kaydet.

Oldukça basit şeyler. Şimdi eğlenceli kısma geçelim.

Ana Özellik Bölümünü ve Arka Plan Tasarımını Oluşturma

Özelliklerimizi tutmak için yeni bir bölüm eklememiz gerekiyor. Normalde, önceki bölüme basitçe yeni bir satır ekleyebileceksiniz, ancak bu durumda Bölüm öğesinde bulunan bir Bölücü arka planı eklememiz gerekiyor.

Devam edin ve yeni bitirdiğiniz bölümün hemen altına yeni bir bölüm ekleyin. Ardından satıra dört sütunlu bir düzen ekleyin.

Bu sütunlara tanıtım yazısı ekleyeceğiz, ancak şimdilik bölüm ayarlarımızı güncelleyelim.

Bu bölüm için, ona özel bir maksimum genişlik vermemiz gerekiyor. Bu, tasarımı daha büyük tarayıcı boyutlarında yerinde tutmak için önemlidir. Ayrıca tanıtım yazılarımızın düzenlenmesiyle örtüşen arka plan görevi görmesi için bir bölüm Bölücü eklememiz gerekiyor (bununla ilgili daha fazla bilgi ileride).

Bölüm ayarlarına gidin ve aşağıdakileri güncelleyin:

Genişlik: 1080 piksel
Bölüm Hizalama: Merkez
Bölücüler: Üst
Bölücü Stili: ekran görüntüsüne bakın
Bölücü Rengi: rgba(136,150,171,0.07)
Bölücü Yüksekliği: %52

Ayarları kaydet.

Bölüme 1080 piksellik özel bir genişlik (veya maksimum genişlik) vermek, temelde satırlarınızın bir bölüm içinde varsayılan olarak nasıl ayarlandığıdır. Yani, aslında, tüm bölümümüzü varsayılan bir satırın boyutunda yapıyoruz.

Dört Sütun Satırına Bulanıklıklar Ekleme

Bu noktada, dört sütunun her birine tanıtım yazılarımızı eklemeye başlayabiliriz. İlk tanıtım yazınızı eklemek için ilk sütundaki gri simgeye tıklayın. Kutudaki içeriği daha az metin içerecek şekilde güncelleyin (2 cümle), ardından resim yerine bir simge kullanmayı seçin (resim simgesini seçtim).

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

Simge Rengi: #974450
Daire Simgesi: EVET
Daire Rengi: rgba(255,255,255,0.5)
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 48px
Metin Yönü: Merkez

Ayarları kaydet.

Şimdi tanıtıcı modülünü kopyalayıp kalan sütunların her birine yapıştırın, böylece her sütunda bir tanıtıcı metniniz olur.

Bu noktada isterseniz geri dönüp simgeleri güncelleyebilirsiniz, ancak buna gerek yok.

Blurb Simgelerini Örtüşmek için Daire Sayaçları Ekleyin

Animasyonu tanıtıcı simgelerimize eklemek için, her simgeyi farklı bir sayı değerine sahip bir daire sayacıyla örtüştüreceğiz. Bu, ilerlemeyi göstermek için daire animasyonunun her simgeyle kademeli olarak artmasına neden olur. Ancak, her daire sayacında istediğiniz sayı değerini kullanabilirsiniz.

İlk sütundaki tanıtım modülünün altındaki gri “Yeni Modül Ekle” simgesine tıklayın ve ardından sayaç modülünü ekleyin.

Daire modülü ayarlarını düzenlemeye başlamadan önce devam edin ve onu tanıtım modülünün üzerine sürükleyin. Artık içerik ayarlarını aşağıdaki gibi güncelleyebilirsiniz:

Başlık kutusundaki metni silin
Sayı: 25

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

Çubuk Arka Plan Rengi: #974450 (tanıtım simgelerinizle aynı renk)
Sayı Metin Rengi: rgba(0,0,0,0) (sayıyı gizleyecek şekilde tamamen şeffaftır)
Sayı Metin Boyutu: 0px (daire içindeki istenmeyen metin alanlarından kurtulmak için)
Genişlik: 109 piksel (bu, üst üste geleceği simgenin boyutuna göre ayarlanmıştır)
Modül Hizalaması: Merkez
Kenar boşluğu: -102 piksel (bu, simgeyle mükemmel bir şekilde örtüşecektir)

Ayarları kaydet.

Şimdi tek yapmanız gereken daire sayaç modülünü kopyalayıp kalan sütunların her birine yapıştırmak ve ardından onu her bir tanıtım yazısının en üstüne sürüklemektir. Çoğaltılan daire sayaçları yerleştirildikten sonra ikinci daire sayaç numarasını 50, üçüncü sayaç numarasını 75 ve dördüncü sayaç numarasını 100 olarak güncelleyin. Animasyon tamamlandıktan sonra sonuç böyle görünmelidir.

Simgeleri Bölücüyle Eşleşecek Şekilde Konumlandırmak için Satır Doldurma Kullanın

Bu tasarımın son adımı, simgeleri ayırıcı arka planın yayı ile çakışacak şekilde konumlamaktır. Bunu yapmak için satıra bazı özel dolgu eklememiz gerekiyor. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Bu Satırı Tam Genişlikte 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)

Bu kadar!

Nihai sonucu kontrol edin.

Simgelerin şimdi değişen sayı değerleriyle daire sayacı tarafından nasıl canlandırıldığına dikkat edin. Ve simgeler, ayırıcı arka planla örtüşüyor.

Özellik Bölümü Mobilde Nasıl Görünüyor?

İşte tasarımın tablet ve akıllı telefon ekranlarında nasıl göründüğüne bir bakış.

Son düşünceler

Bu özellik bölümü tasarımının benzersiz öğeleri, hafif ve incedir; bu, bazı küçük ayarlamalarla kendi düzenlerinize dahil etmenizi kolaylaştıracaktır. Ve daire sayacı animasyonları sizin için bir fincan çay değilse, bunları dışarıda bırakmaktan çekinmeyin ve sadece tanıtım modülünün daire simgesini kullanın. Veya istatistikleri öne çıkarmak için bir reklam düzeni için yalnızca sayı değerlerinin göründüğü daire sayaçlarını kullanmayı seçebilirsiniz. Bir şey olursa, umarım bu size kendi başınıza keşfetmeniz için birkaç fikir verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!