Divi'nin Çember Sayaç Modülüne Stil Vermenin 5 Yolu
Yayınlanan: 2023-07-19Divi'nin Çember Sayaç Modülü ile istatistikleri, becerileri ve daha fazlasını sergileyin. Bu modülün kullanılması, çok sayıda sayısal veri içeren sayfalarda bulunabilecek monotonluğun kırılmasına yardımcı olur. Circle Counter Modülü, tek bir veri noktasını görüntülemeniz için size güzel ve görsel açıdan ilgi çekici bir yol sunar. Sayfa yüklendiğinde modül, verileri heyecan verici bir şekilde sergileyen göz alıcı bir animasyona sahiptir. Web sayfalarınızdaki sıkıcı tablolara elveda deyin! Bugünün blog gönderisinde, Divi ile birlikte gelen bazı ücretsiz düzen paketlerinin yardımıyla Divi'nin Daire Sayaç Modülünün stilini nasıl oluşturacağımızı öğreneceğiz.
- 1 Divi'nin Çember Sayaç Modülüne Nasıl Stil Verilir Örnekleri
- 1.1 Birinci Seçenek: Divi Yayın Aracı
- 1.2 İkinci Stil: Divi Çikolatacı
- 1.3 Tasarım Üç: Divi Takı Tasarımcısı
- 1.4 Dördüncü Görünüm: Divi Hostel
- 1.5 Demo Beş: Divi Oyuncak Mağazası
- 2 Divi'nin Daire Sayaç Modülüne Stil Hazırlamak
- 2.1 Bölümünüzü Oluşturma
- 2.2 Sütunlarınızı Seçme
- 2.3 Çember Sayaç Modülleri Ekleme
- 3 Style One ft. the Divi Streamer Düzen Paketi
- 3.1 Bölümü Hazırlayın
- 3.2 Çember Sayaç Modülü Ekleme
- 3.3 İçeriğinizi Ekleme
- 3.4 Daire Sayacı Modülünü Stillendirin
- 3.5 Kopyalama ve Güncelleme Modülü
- 4 Divi Chocolatier Düzen Paketi ile İki Tasarım
- 4.1 Mevcut İçeriği Kaldır
- 4.2 Güncelleme Başlıkları
- 4.3 Çember Modülleri Ekleme
- 4.4 Çember Modüllerine Veri Ekleme
- 4.5 Daire Sayaç Modülünün Şekillendirilmesi
- 4.6 Çoğalt ve Bitir
- Divi Takı Tasarımcısı Düzen Paketi ile 5 Stil Üç
- 5.1 Modülleri Kaldır
- 5.2 Bölüm ve Sıra Tasarımını ve Yapısını Güncelleme
- 5.3 Çember Modülü Ekleme
- 5.4 Çember Sayaçlarınızı Stillendirin
- 5.5 Çalışmamızı Kaydetme ve Çoğaltma
- 6 Design Four ft. Divi Hostel
- 6.1 Bölümden Modülleri Kaldırma
- 6.2 Çember Modülü Ekleme
- 6.3 İçerik Ekleme
- 6.4 Daire Sayaç Modülünü Tasarlamaya Başlayın
- 6.5 Kenarlık ve Dolgu Ekleme
- 6.6 Modülünüzü Çoğaltın ve Güncelleyin
- 7 Son Örnek: Divi Oyuncak Mağazası
- 7.1 Bölüme Satır Ekleme
- 7.2 Sütun Yapısını Değiştirme ve Modül Ekleme
- 7.3 Çember Sayaç Modülüne İçerik Ekleyin
- 7.4 Daire Sayacı Modülünün Stilini Oluşturun
- 7.5 Daire Sayacı Modülüne Vurgu Ekleme
- 8 Son Düşünceler
Divi'nin Çember Sayaç Modülüne Stil Verme Örnekleri
Bu eğitim boyunca çeşitli düzen paketleri kullanacağız. Her düzen paketi farklı bir sektördendir. Bu, Daire Sayaç Modülünün kullanılabileceği birçok örnek olduğunu gösterecektir.
Birinci Seçenek: Divi Streamer
Bu düzen paketiyle, Divi Streamer'ın demografik istatistiklerini sergilemek için Daire Sayaç Modülünü kullandık.
İkinci Stil: Divi Çikolatacı
Bir çikolatacı için, işletmeye gelen siparişlerin sayısını göstermek için modülleri kullandık.
Tasarım Üç: Divi Takı Tasarımcısı
Bu durumda, izleyiciye bilgi sunmak için Circle Counter modülünü kullandık.
Dördüncü Görünüm: Divi Hostel
Animasyonlu bir modülle konuklar arasındaki "mutluluk katsayısını" ölçmek mantıklıdır.
Demo Beş: Divi Oyuncak Mağazası
Bir çevrimiçi mağazada bir satışı teşvik etmek için burada Çember Modüllerini kullanıyoruz.
Divi'nin Daire Sayaç Modülüne Stil Vermeye Hazırlanıyor
Divi'nin Çember Sayaç Modülünü tasarlamaya başlamadan önce, bu modülleri barındıracak ayrı bir bölüm oluşturmamız gerekiyor. Bu bölümü ister yeni bir sayfaya ekleyin, ister mevcut bir sayfaya ekleyin, aynı hazırlığı yapmanız gerekecektir. Şekillendirmeden önce Daire Sayacı Modülünde hangi veri noktalarını sergilemek istediğinize karar verin. Ardından, modülleriniz için bir bölüm oluşturmanız gerekecektir. Üçüncüsü, satırda kaç sütun olacağına karar vermeniz gerekecek. Bu nedenle, Daire Sayaç Modülünüz için verileri hangi veri noktalarının dolduracağını bilmeniz gerekecek. Veri noktalarınız, kullanacağınız sütun sayısını etkileyecektir. Bu ayarlandıktan sonra, Daire Sayaç Modülünüzü her bir sütuna ekleyeceksiniz.
Bölümünüzü Oluşturma
İlk önce mavi artı simgesine tıklayın . Bu, sayfanıza yeni bir bölüm ekleyecektir.
Sütunlarınızı Seçme
Ardından, kullanacağınız sütun sayısını içeren bir satır eklemek için yeşil artı simgesini kullanacaksınız . Her sütun bir Daire Sayaç Modülü içerecektir.
Çember Sayaç Modülleri Ekleyin
Sütunlarınızı oluşturduktan sonra gri artı simgesine tıklayın . Bu, Modüller Modunu açacaktır. Buradan Daire Sayaç Modülünü seçin .
Tutarlılık için, her seferinde bir Daire Sayaç Modülü tasarlamanızı tavsiye ederim. Ardından, her Daire Sayaç Modülünü çoğaltmak ve içindeki veri noktasını değiştirmek için Divi'nin sağ tıklama menüsünü kullanın.
Artık temel bilgilere sahip olduğumuza göre, modülü şekillendirmeye başlayalım.
Style One ve Divi Streamer Düzen Paketi
Divi Streamer Düzen Paketinden hangi düzenin ihtiyaçlarınıza en uygun olduğunu görmek için bu blog gönderisini takip edebilirsiniz. Bu eğitim için açılış sayfası düzeninde Hakkında Bölümünü değiştireceğiz.
Bölümü Hazırla
Öncelikle bu bölümde halihazırda bulunan Sayı Sayıcı Modüllerini silelim. Modülün üzerine gelin ve beliren gri açılır menüden çöp kutusu simgesine tıklayın .
Bölümdeki diğer Sayı Sayıcı Modülü için bunu tekrarlayın.
Çember Sayaç Modülü Ekle
Ardından, sıranızın ilk sütununa Daire Sayaç Modülü eklemek için gri artı simgesine tıklayın . Ardından, sütuna modüllerden birini eklemek için Daire Sayacı simgesine tıklayın .
İçeriğinizi Eklemek
İlk Daire Sayaç Modülünüz eklendikten sonra, artık veri noktanızı girmeniz gerekecektir. Modülün İçerik sekmesinde, veri noktanız için bir açıklama girin. Bizim durumumuzda, Toronto'dan olan kullanıcıların bir yüzdesini sergileyeceğiz. Metnimizi ve 78 sayısını giriyoruz (yüzde işareti olmadan!)
Çember Sayaç Modülünü Stillendirin
Şimdi Tasarım sekmesine geçeceğiz. Bölümümüz Divi Streamer Düzen Paketinin bir parçası olduğundan, modülümüzün stilini etkilemek için paketin parçası olan yazı tipini, metni ve renkleri kullanacağız.
Çember Grafiği Şekillendirme
Modülün daire kısmında kullanılacak renkleri belirlemek için öncelikle Daire sekmesine tıklayarak başlayalım.
Çember Tasarım Ayarları:
- Çember Rengi: #5200ff
- Daire Arka Plan Rengi: #ffffff
- Daire Arka Plan Opaklığı: 0.4
Başlık Metnini Şekillendirme
Daire grafiğini şekillendirdikten sonra modülün Başlık Metnine geçeceğiz. Başlık Metni sekmesine tıklayın , ardından Daire Sayaç Modülümüzün başlık metnine biraz hayat eklemek için aşağıdaki ayarları kullanın.
Başlık Metni Ayarları:
- Başlık Yazı Tipi: Poppins
- Başlık Yazı Tipi Ağırlığı: Kalın
- Başlık Yazı Tipi Rengi: #ffffff
Sayı Metnine Stil Ekleme
Son olarak, Çember Sayaç Modülü içindeki sayıları düzelteceğiz. Bunun için Number Text sekmesine tıklıyoruz . Ardından, stil vermek için aşağıdaki ayarları kullanacağız. Dikkat edin, yerleşim paketinden ve daha önce orada olan Sayı Sayaç Modüllerinden de ilham aldık.
Sayı Metin Ayarları:
- Sayı Yazı Tipi: Poppins
- Sayı Yazı Tipi Ağırlığı: Kalın
- Numara Metin Rengi: #ffffff
- Sayı Metin Boyutu: 72pt
Bu son düzenlemeleri bitirdikten sonra, modal kutunun altındaki yeşil onay işaretine tıklayın . Bu, değişikliklerinizi kaydedecektir.
Modülü Kopyala ve Güncelle
Stil tamamlandığında, artık bu modülü çoğaltabiliriz. Bunu diğer veri noktalarımız ve bunlara karşılık gelen başlıklarla değiştireceğiz. Bunu yapmak için modülün üzerine gelin. Bu, modül ayarları menüsü açılır penceresini getirecektir. Kopyala simgesine tıklayın . Ardından, modülü satırınızdaki diğer sütunlara taşıyın.
Bizim durumumuzda, modülün başlığını ve verilerini güncellemenin yanı sıra, düzen paketine uyması için renkleri de değiştirdik.
Divi Chocolatier Düzen Paketi ile İki Tasarım
Düzeni web sitenize nasıl yükleyeceğinizi öğrenmek için Divi Chocolatier Düzen Paketi blog gönderisini takip edin. Ana sayfa düzeninde etkinlikler bölümlerini değiştireceğiz. Kaç tane siparişin toplandığıyla ilgili verileri göstermek için bazı Daire Sayaç Modülleri ekleyelim.
Mevcut İçeriği Kaldır
Öncelikle mevcut modülleri kaldırmak istiyoruz. Buradaki Metin ve Görüntü Modülleri harika görünseler de oldukça durağandırlar. Daire Sayacı Modüllerini kullanarak bu bölüme biraz heyecan ve animasyon katacağız. Her bir modülün üzerine gelin ve çöp kutusu simgesini tıklayın . Simge, modül ayarları açılır menüsünde görünecektir.
3 sütunlu boş bir satırla bitireceğiz.
Başlıkları Güncelle
Başlıklar için metin modüllerini, bölüm için gelecek içerikle daha uyumlu bir şeye güncellemeyi de düşünebilirsiniz. Bunu yapmak için, metin modüllerinin üzerine gelin ve modül metnini düzenlemek için dişli simgesine tıklayın .
Çember Modülleri Ekle
Daire Sayaç Modüllerimizi eklemeden önce, sıramızın sütun numarasını değiştireceğiz. Satırın üzerine gelin ve ızgara simgesine tıklayın . Bu, ihtiyacımız olan sütun sayısını seçebileceğimiz bir açılır pencere getirecektir. Bu tasarım için dört parça veriyi görselleştireceğiz. Bu nedenle, bu satıra dört sütun eklemeyi seçeceğiz. Dört sütunlu simgeye tıklayın .
Şimdi gri artı işareti simgesine tıklayarak Circle Counter Modüllerini ilk sütuna ekleyeceğiz. Ardından modül açılır penceresi göründüğünde Circle Counter ikonuna tıklayarak ilk Circle Counter Modülümüzü ekliyoruz.
Çember Modüllerine Veri Ekleme
İlk modülümüzü yerleştirdikten sonra, onu biçimlendirmeye ve içerik eklemeye başlayabiliriz. Öncelikle bu modül için başlığımızı ekleyelim . Ardından, veri noktamızı ekleyeceğiz .
Bu tasarım için, varsayılan olarak modülle birlikte gelen yüzde işaretini kaldıracağız. Bunun için Elements sekmesine tıklıyoruz . Ardından, Yüzde İşareti seçeneğinin yanındaki geçişin işaretini kaldırıyoruz .
Artık bu modülü biçimlendirebiliriz.
Daire Sayaç Modülünün Şekillendirilmesi
Başlamak için modülün Tasarım sekmesine geçiyoruz .
Daire Grafiğine Marka Ekleme
Ardından, modülün daire grafiği yönü için tasarım ayarlarına erişmek üzere Daire geçişine tıklıyoruz . Stil vermek için aşağıdaki ayarları kullanacağız:
Çember Tasarım Ayarları:
- Daire Rengi: #ff6a28
- Çember Arka Plan Rengi: #000000
- Daire Arka Plan Opaklığı: 0.3
Başlık Metnini Stilize Etme
Başlık metni için, Başlık Metni sekmesine tıkladıktan sonra aşağıdaki ayarları kullanacağız:
Başlık Metni Ayarları:
- Başlık Yazı Tipi: Jost
- Başlık Yazı Tipi Ağırlığı: Normal
- Başlık Metin Rengi: #000000
Sayı Metninin Tasarlanması.
Sayı metni için aynı yazı tipini ve rengi kullanacağız. Ancak boyutunu değiştireceğiz. Yüzde işaretini kullanmadığımız için Daire Sayıcı Modülünde daha fazla yerimiz var. Bunu tasarımımızda lehimize kullanacağız. Sayı Metni sekmesine tıklayın ve aşağıdaki ayarları girin:
Sayı Metin Ayarları:
- Sayı Yazı Tipi: Jost
- Sayı Yazı Tipi Ağırlığı: Normal
- Numara Metin Rengi: #000000
- Sayı Metin Boyutu: 72px
Çoğalt ve Bitir
Artık ilk Daire Sayaç Modülümüzü tasarladığımıza göre, devam edip onu çoğaltabiliriz.
Kopyaları kendi satırlarına taşıyacağız ve bitmiş ürünümüzü ortaya çıkarmak için içindeki içeriği güncelleyeceğiz.
Divi Takı Tasarımcısı Düzen Paketi ile Üçüncü Stil
Bu tasarım için başlangıç noktamız olarak Divi Jewelry Designer Layout Pack'i kullandık. Bu düzenin ürün sayfasına bir eğitim bölümü eklemek istedik ve bu bilgiyi sergilemek için Daire Sayaç Modülünü kullanacağız. Sayfanın en altında bulunan referans bölümünü buna çevireceğiz.
Modülleri Kaldır
Daha önceki çalışmalarımızda olduğu gibi bu kısımda da mevcut modüllere girip silmemiz gerekiyor.
Kesit ve Satır Tasarımını ve Yapısını Güncelleme
Bu düzen paketi için, biraz ilgi katmak için bölümün arka planını da değiştirmek istiyoruz. Bölümün mavi ayarlar menüsünde dişli simgesine tıklayın .
Öncelikle arka plan resmini kaldıralım. Arka Plan sekmesine tıklayın . Ardından, resim simgesine tıklayın . Son olarak, arka plan resmini kaldırmak için çöp kutusu simgesine tıklayın .
Arka plan gradyanını ve rengini bırakmak istiyoruz. Şimdi bölüme bir arka plan deseni ekleyelim. Arka Plan Deseni simgesine tıklayın . Ardından, bir Arka Plan Deseni eklemek için artı simgesine tıklayın .
Aşağıdaki arka plan desenini kullanacağız.
Bölümle ilgili ayarlarınızı kaydetmek için yeşil onay simgesine tıklayın . Şimdi sıramızın sütun sayısını değiştireceğiz. Bu tasarım için Daire Sayaç Modüllerimiz için beş sütunumuz olacak.
Çember Modülü Ekle
Oluşturulan sütunlar ve bölümler ile Daire Sayaç Modülümüzü eklemek için gri artı simgesine tıklayın.
Kolona eklenen modül ile daha önce olduğu gibi içeriğimize ekliyoruz. Bu tasarımda yüzde işaretini kullanacağız.
Çember Sayaçlarınızı Stillendirin
Şimdi sayaçlarımızı şekillendirmeye başlayacağız.
Çember Grafiği Stilize Etme
Öncelikle tezgahımızın yuvarlak kısmından başlıyoruz. Aşağıdaki ayarlar kullanılacaktır:
Çember Tasarım Ayarları:
- Daire Rengi: #000000
- Daire Arka Plan Rengi: #ac8961
- Daire Arka Plan Opaklığı: 0,5
Bu tasarım için arka plan opaklığını nasıl değiştirdiğimize dikkat edin. Benzer bir bej rengi seçtik, ancak tasarımımıza lüks bir hava katmak için opaklığı artırdık.
Başlık Metnine Stil Ekleme
Başlık metni için, düzen paketi boyunca kullanılan aynı yazı tipi ailesini kullanacağız. Başlık Metni sekmesine tıklayarak ayarları bulabilirsiniz. Aşağıda, başlık metnine stil vermek için kullanılan ayarları bulun:
Başlık Metni Ayarları:
- Başlık Metni Yazı Tipi: GFS Didot
- Başlık Yazı Tipi Ağırlığı: Kalın
- Başlık Metin Rengi: #000000
Sayı Metnini Şekillendirme
Sayı metni için, bu düzen paketinin markasında kullanılan renkleri geri çağırmak için altın rengi kullanacağız. Number Text sekmesine tıklayarak aşağıda kullanacağımız ayarlara giriyoruz:
Numara Metin Stili:
- Sayı Yazı Tipi: GFS Didot
- Numara Metin Rengi: #ac8961
- Sayı Metin Boyutu: 48px
Çalışmamızı Kaydetme ve Çoğaltma
Tüm bu ayarları girdikten sonra artık ayarlar kutusunun en altında bulunan yeşil onay işaretine tıklıyoruz . Bu, tüm sıkı çalışmamızı kurtaracak. Artık, önceki stillerde yaptığımız gibi modülü çoğaltabilir ve kalan verilerle içeriği düzenleyebiliriz.
Veri noktalarımıza bağlam eklemek için Çember Modüllerimizin üzerindeki başka bir satıra bazı Metin Modülleri de ekledik.
Bir sonraki tasarıma geçin!
Design Four ft. Divi Hostel
Bu yazının dördüncü tasarımı için Divi Hostel Layout Pack'i kullanacağız. Özellikle, açılış sayfası şablonundaki olanaklar bölümünü değiştireceğiz.
Bölümden Modülleri Kaldır
Circle modülümüze hazırlanmak için bölüm içerisinde bulunan modülleri çıkarmamız gerekiyor.
Daire modüllerimiz için dört sütun olmasını istiyoruz, bu nedenle satır yapısını olduğu gibi bırakacağız.
Çember Modülü Ekle
Daire Sayaç Modülünü satırın ilk sütununa eklemek için gri artı simgesine tıklayın .
İçerik Ekle
Modül ayarlarının İçerik sekmesinde başlığınızı ve veri noktanızı ekleyin.
Daire Sayaç Modülünü Tasarlamaya Başlayın
Daire Sayaç Modülünüzü şekillendirmeye başlamak için Tasarım sekmesine geçin. Daire grafiği ile başlayacağız.
Daire Sayaç Modülünün Çemberini Şekillendirme
Modülün daire grafiğini biçimlendirmek için aşağıdaki ayarları kullanacağız:
Çember Tasarım Ayarları:
- Çember Rengi: #008186
- Daire Arkaplan Rengi: #d37643
- Daire Arka Plan Opaklığı: 0.2
Başlık Metin Stili
Ardından, modülün Başlık Metnini biçimlendirmeye geçeceğiz. Aşağıdaki ayarları kullanacağız:
Başlık Metni Ayarları:
- Başlık Metni Yazı Tipi: Manrope
- Başlık Yazı Tipi Ağırlığı: Ultra Kalın
- Başlık Metin Rengi: #000000
Sayı Metin Stilleri
Son olarak, Daire Sayaç Modülümüzde sayının stilini oluşturacağız. Kullanacağımız ayarlar burada:
Numara Metin Stili:
- Sayı Yazı Tipi: Manrope
- Sayı Yazı Tipi: Normal
- Numara Metin Rengi: #d37643
- Sayı Metin Boyutu: 54px
Kenarlık ve Dolgu Ekleme
Çember Sayaç Modülüne biraz ilgi katmak için modüle bir kenarlık ve biraz boşluk ekleyelim. Circle Counter Settings Design sekmesinde Border sekmesine tıklayın . Orada, işte kullanılacak ayarlar:
Kenarlık Ayarları:
- Kenarlıklar: Tüm kenarlıklar
- Kenarlık Genişliği: 4px
- Kenarlık Rengi: #008186
- Kenarlık Stili: Düz
Gördüğünüz gibi, kenarlıkların modüllere yapışmaması için modüle biraz dolgu eklememiz gerekiyor. Öncelikle Space sekmesine tıklıyoruz . Ardından, tüm kenarlar için 25 piksellik bir dolgu kullanacağız.
Modülünüzü Çoğaltın ve Güncelleyin
Zamandan tasarruf etmek için, tamamlanan çalışmamızı diğer sütunlar için çoğaltmak üzere sağ tıklama menüsünü kullanacağız. Bitmiş Daire Sayaç Modülüne sağ tıklayın ve kopyala simgesine tıklayın . İçeriği ihtiyaçlarınız için gerektiği şekilde güncelleyin.
Son Örnek: Divi Oyuncak Mağazası
Divi'nin Çember Sayaç Modülünü tasarlamaya yönelik son örneğimiz için Oyuncak Mağazası Düzen Paketini kullanacağız. Paket içindeki ana sayfa düzenini, özellikle de sayfanın altındaki harekete geçirici mesaj bölümünü değiştireceğiz.
Bölüme Satır Ekle
Önceki örneklerimizden farklı olarak bu bölüme iki satır ekleyeceğiz. Bu sıra Daire Sayaç Modüllerimizi ekleyeceğimiz yer olacaktır. Yeni bir satır eklemek için satırın üzerine gelin ve yeşil artı simgesine tıklayın . Bunu iki kez yapın.
Ardından, Düğme Modülünü birinci satırdan üçüncü satıra taşıyın . Yani, şimdi bu bölümde üç satırımız olacak: ilk satır harekete geçirici mesajı içerecek, bölüm boş kalacak (şimdilik) ve üçüncü satırda düğme olacak.
Sütun Yapısını Değiştirin ve Modül Ekleyin
Şimdi Daire Sayaç Modülümüzü barındıracak satırın yapısını değiştirelim. Bunu yapmak için yeşil satır menüsündeki ızgara simgesinin üzerine gelin . 3 sütunlu yapıyı seçin , bu satıra üç modül ekleyeceğiz.
İlk sütunlarda gri artı ikonuna tıklayıp ardından Circle Counter Module ikonuna tıklayarak Circle Sayaç Modülünü ekleyeceğiz.
Çember Sayaç Modülüne İçerik Ekleyin
Şimdi Çember Sayaç Modülümüze içeriklerimizi ve verilerimizi ekleyeceğiz.
Çember Sayaç Modülünü Stillendirin
Önceki örneklerimizde olduğu gibi, başlık metnine, sayı metnine ve daha fazlasına stil vermek için Tasarım sekmesine geçiyoruz. Ancak, bu öğreticiyi tamamlamak için biraz farklı bir şey yapacağız.
Daire Sayacı Şekillendirme
Daire sayacımızı aşağıdaki ayarlarla şekillendirerek başlayacağız:
Çember Tasarım Ayarları:
- Daire Rengi: #557068
- Daire Arka Plan Rengi: #ffffff
- Daire Arka Plan Opaklığı: 1
Çemberin arka plan opaklığı için nasıl şeffaflık kullanmadığımıza dikkat edin. Bu tasarım için Metin sekmesine tıklayıp metin rengi olarak Açık'ı seçeceğiz . Bu, başlığı ve numarayı beyaz veya sayfa için açık yazı tipi rengi olarak ayarladığınız renkte yapacaktır.
Metin Tasarım Ayarları:
- Metin Hizalama: Merkez
- Metin Rengi: Açık
Başlık Metnine Stil Ekleme
Başlık Metni stili için, Divi Oyuncak Mağazası Düzen Paketinde kullanılan aynı yazı tipini kullanacağız. İşte kullanılacak ayarlar:
Başlık Metni Ayarları:
- Başlık Fontu: Libre Baskerville
- Başlık Yazı Tipi Ağırlığı: Kalın
Sayı Metnini Şekillendirme
Sayı metni için aşağıdaki ayarları kullanacağız:
Sayı Metin Ayarları:
- Sayı Yazı Tipi: Libre Baskerville
- Sayı Yazı Tipi Ağırlığı: Kalın
- Numara Metin Rengi: #ffffff
- Sayı Metin Boyutu: 72 piksel
Daire Sayacı Modülüne Vurgular Ekleme
Bu öğreticiyi bitirmek için İçerik sekmesine geri döneceğiz. Daha sonra Daire Sayacı Modülümüze bazı vurgular eklemek için Arka Plan sekmesine tıklayacağız . Daha sonra Background Mask ikonuna geçeceğiz .
Daire Sayacı Modülü için Arka Plan Maskesini Şekillendirme
Arka Plan Maskesi için, Daire Sayacı Modülünüze bir vurgu eklemek için aşağıdaki ayarları kullanacağız
Arka Plan Maskesi Ayarları:
- Arka Plan Maskesi Tasarımı: Kaya Yığını
- Maske Rengi: #eac989
- Maske Dönüşümü: Döndür, Ters Çevir
- Maske En Boy Oranı: Kare
İkinci modül için aşağıdaki ayarları kullanıyoruz:
Arka Plan Maskesi Ayarları (Modül 2):
- Arka Plan Maskesi Tasarımı: Kaya Yığını
- Maske Rengi: #354e7c
- Maske Dönüşümü: Tersine Çevir
- Maske En Boy Oranı: Kare
Son modül için kullanılacak ayarlar şunlardır:
Arka Plan Maskesi Ayarları (Modül 3):
- Arka Plan Maskesi Tasarımı: Kaya Yığını
- Maske Rengi: #f6c6c5
- Maske Dönüşümü: Yatay Çevir, Döndür, Ters Çevir
- Maske En Boy Oranı: Kare
Tüm vurgular yerinde olduğunda, nihai ürün şöyle görünür:
Son düşünceler
Biraz rehberlik ve harika verilerle, kullanıcılarınızın sitenizdeki içerikle etkileşim kurma şeklini değiştirebilirsiniz. Daire Sayaç Modülünü kullanmak, ürün veya hizmetinizle ilgili bilgileri göz alıcı bir şekilde sergilerken sayfanıza biraz ilgi katmanıza yardımcı olur. Bu eğitimlerden bazılarını sitenizde uyguladığınızı görmek için sabırsızlanıyoruz. İlham aldıysanız, aşağıdaki yorumlar bölümünde bize bildirin!