Divi'nin Çember Sayaç Modülüne Stil Vermenin 5 Yolu

Yayınlanan: 2023-07-19

Divi'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.

İçindekiler
  • 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.

Style Divi's Circle Sayaç Modülü - Divi Streamer

İkinci Stil: Divi Çikolatacı

Bir çikolatacı için, işletmeye gelen siparişlerin sayısını göstermek için modülleri kullandık.

Style Divi's Circle Sayaç Modülü - Divi Chocolatier

Tasarım Üç: Divi Takı Tasarımcısı

Bu durumda, izleyiciye bilgi sunmak için Circle Counter modülünü kullandık.

Style Divi's Circle Sayaç Modülü - Divi Takı Tasarımcısı

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.

Style Divi's Circle Sayaç Modülü - Divi Hostel

Demo Beş: Divi Oyuncak Mağazası

Bir çevrimiçi mağazada bir satışı teşvik etmek için burada Çember Modüllerini kullanıyoruz.

Style Divi's Circle Sayaç Modülü - Divi Oyuncak Mağazası

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.

Sayfanıza yeni bir bölüm ekleyin.

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.

Sayfanıza sütunlu yeni bir satır ekleyin.

Ç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 .

Çember Sayaç Modülünü Ekleyin

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.

Divi Streamer Açılış Sayfası Düzeninin Hakkında bölümü

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 .

Sayı Sayacı Modüllerini Kaldır

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 .

Daire Sayaç Modülünü Satıra Ekleme

İç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!)

İçeriğinizi ve verilerinizi girin

Ç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

Çember Sekmesi için Tasarım Sekmesi Ayarları

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

Daire Sayacı Modülü için Başlık Metnini Şekillendirme

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

Daire Sayaç Numarası Metin Ayarları

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.

Divi Streamer Sayfasında Yinelenen Daire Sayacı

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.

Bitmiş Divi Streamer Circle Counter örneği

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.

Divi Chocolatier ana sayfa düzeninde değiştireceğimiz bölüm

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.

Sırayı Daire Sayaç Modüllerine hazırlamak için eski modülleri çıkarın

3 sütunlu boş bir satırla bitireceğiz.

Yeni modüllerimiz için hazırlık aşamasındaki boş sıra

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 .

Başlığı düzenle Metin Modülleri

Ç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 .

Daire Sayaç Modülleri için sütun numarasını değiştirin

Ş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.

Satırın ilk sütununa Daire Sayaç Modülü ekleyin

Ç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 .

Verilerinizi ve içeriğinizi ekleyin

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 .

Çember Sayaç Modülünden yüzde işaretini kaldırın

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 .

Tasarım sekmesine geçin

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

Daire Arka Plan Renk Ayarları

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

Başlık Metni Ayarları

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

Sayı Metin Ayarları

Çoğalt ve Bitir

Artık ilk Daire Sayaç Modülümüzü tasarladığımıza göre, devam edip onu çoğaltabiliriz.

Çember Sayaç Modülümüzü çoğaltın

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.

Yuvarlak Sayaçlarla Tamamlanmış Divi Çikolata Düzeni

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.

Divi Takı Tasarımcısı Ürün Sayfası Düzeninin referans bölümü

Modülleri Kaldır

Daha önceki çalışmalarımızda olduğu gibi bu kısımda da mevcut modüllere girip silmemiz gerekiyor.

Bölümden eski modülleri kaldır

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 .

Bölüm ayarlarını düzenle

Ö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 görüntüsünü bölümden kaldırma

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 .

Arka plan deseni ekle

Aşağıdaki arka plan desenini kullanacağız.

Arka plan deseninin seçilmesi

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.

Sütun numarasını beş sütun olarak değiştir

Ç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.

Takı Tasarımcısına Çember Sayaç Modülü Ekleme

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ç Modülüne içerik ekleyin

Ç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

Daire Sayaç Modülünün Daire tasarımı

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

Divi Takı Tasarımcısı Düzen Paketi için Stil

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

Circle Sayaç Modülleri içeren Divi Takı Tasarımcısı Düzen Paketindeki numara için tasarım

Ç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.

Düzen paketi için tamamlanmış Daire Modülleri

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.

Açılış sayfası şablonundaki Divi Hostel olanakları bölümü

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.

Divi Hostel sayfa şablonundan eski modülleri kaldırın

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 .

İlk sütununuza Daire Sayacı ekleyin

İçerik Ekle

Modül ayarlarının İçerik sekmesinde başlığınızı ve veri noktanızı ekleyin.

Çember Sayaç Modülüne içerik 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

Divi Hostel Yerleşim Paketi ile birlikte Daire Sayacı Modülü için Başlık Metni ayarları

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

Daire Sayaç Modülü Divi Hostel için sayı yazı tipi tasarımı

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

Daire Sayaç Modülüne kenarlık ekleme

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.

Daire Sayaç Modülüne boşluk ekleme

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.

Çember Sayaç Modüllerinin son görünümü

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.

Varsayılan Divi Oyuncak Mağazası Altbilgisi

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.

bölüme iki satır ekleme

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ıralı bölümün ayarlanması

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.

Satır için sütun yapısını değiştir

İ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ü Ekleme

Çember Sayaç Modülüne İçerik Ekleyin

Şimdi Çember Sayaç Modülümüze içeriklerimizi ve verilerimizi ekleyeceğiz.

Çember Sayaç Modülüne metin ekleme

Ç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

Şekillendirme Daire Grafik Daire Sayaç Modülü

Ç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

Metin rengini ayarlama

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

Daire Sayacı Modülü için Başlık Metni Ayarları

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

Oyuncak Mağazası Düzen Paketi için Sayı Metin Ayarları

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üne bir vurgu olarak arka plan maskesi

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

Arka Plan Maskelerini vurgu olarak şekillendirme

İ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

Arka Plan Maskelerini ikinci modül için vurgu olarak tasarlama

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

Arka Plan Maskelerini son modül için vurgu olarak tasarlama

Tüm vurgular yerinde olduğunda, nihai ürün şöyle görünür:

Divi Oyuncak Mağazası ile Circle Sayaç Modüllerinin son görünümü

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!