Divi's Soccer Club Düzen Paketi ile Oyun Skor Tahtası Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz. Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, size Divi's Soccer Club Layout Pack'i kullanarak harika bir oyun skorbordunun nasıl oluşturulacağını göstereceğiz. Bu en son oyun skorbordunu Divi'nin yerleşik seçeneklerini kullanarak oluşturacağız, o yüzden başlayalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Soccer Club Düzen Paketi'nin Düzen Paketini Yükleyin

Bu öğreticiyi oluşturmak için Soccer Club Layout Pack'in açılış sayfasını kullanacağız, bu yüzden devam edin ve bu düzeni kullanarak yeni bir sayfa ekleyin.

Yeni Bölüm Ekle

Ardından, buraya yeni bir bölüm ekleyin:

Arka plan rengi

Bölüm ayarlarını açın ve ardından bir arka plan rengi ekleyin.

• Arka Plan Rengi: #f4f4f4

aralık

Boşluk değerleriyle de oynayın.

• Üst Dolgu: 55px
• Alt Dolgu: 140px

Bölümde Satırı ve Yeri Klonla

Satırı Bul ve Klon Oluştur

Zaman kazanmak için bir sonraki bölümde başlık satırını klonlayacağız.

Yeni Bölümde Yer

Metni Değiştir

Yeni bölümle eşleşmesi için satırdaki Metin Modülünün kopyasını değiştirin.

2. Satır Ekle

Sütun Yapısı

Bir önceki satırın hemen altında devam edin ve aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

Arka plan rengi

Satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Sütun 1 Arka Plan Rengi

Sütun 1 arka plan rengini de ekleyin.

• Sütun 1 Arka Plan Rengi: #fcfcfc

Sütun 3 Arka Plan Rengi

Sütun 3 için aynı adımı tekrarlayın.

• 3. Sütun Arka Plan Rengi: #fcfcfc

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliğini Eşitle: Evet

aralık

Sonraki tüm varsayılan dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sınır

Düzen paketini eşleştirmek için satıra bir üst ve alt kenarlık ekleyin.

• Alt Kenar Genişliği: 8px
• Alt Kenar Rengi: #00aaff

Kutu Gölge

Son olarak, sayfada derinlik oluşturmak için ince bir kutu gölgesi ekleyin.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -20px
• Gölge Rengi: rgba(0,0,0,0.56)

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Modül eklemeye başlama zamanı! 1. sütunda bir Metin Modülü ile başlayın ve biraz içerik ekleyin.

Arka plan rengi

Sonraki arka plan rengini değiştirin.

• Arka Plan Rengi: #E8E8E8

Metin Ayarları

Metin ayarlarıyla oynayarak devam edin.

• Metin Yazı Tipi: Squada One
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #333333
• Metin Boyutu: 20px
• Metin Yönü: Merkez

aralık

Ardından, bazı özel boşluk değerleri ekleyin.

• Üst Dolgu: 10px
• Alt Dolgu: 10px
• Sol Dolgu: 10px
• Sağ Dolgu: 10px

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Sütun 1'deki önceki Metin Modülünün hemen altına yeni bir Metin Modülü ekleyin. Bunu yaptıktan sonra içerik kutusuna içerik ekleyin.

Metin Ayarları

Sonraki metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #333333
• Metin Boyutu: 18px
• Metin Yönü: Merkez

aralık

Boşluk değerleriyle de oynayın.

• Üst Dolgu: 20px
• Alt Dolgu: 20px

Sütun 1'e Görüntü Modülü Ekle

Kulüp Logosu Yükle

1. sütunda gerekli olan son modül, yarışan takımlardan birinin kulüp logosunu içeren bir Görüntü Modülüdür.

boyutlandırma

Kulüp logosu resmini yükledikten sonra, boyutlandırma ayarlarına gidin ve bazı değişiklikler yapın.

• Genişlik: %45 (Masaüstü), %16 (Tablet), %28 (Telefon)
• Modül Hizalaması: Merkez

aralık

Aralık ayarlarına özel kenar boşluğu değerleri ekleyerek devam edin.

• Üst Kenar Boşluğu: 20px
• Alt Kenar Boşluğu: 50px

Modülleri Klonla ve Kopyaları Sütun 3'e Yerleştir

Sütun 1'deki üç modülün tümü ile işiniz bittiğinde, bunları klonlayabilir ve kopyaları üçüncü sütuna yerleştirebilirsiniz.

İçeriği Değiştir

Elbette, klonlanmış her modülün içeriğini değiştirmeniz gerekecek.

Metin Modülü #1'i Sütun 2'ye ekleyin

İçerik Ekle

İkinci sütuna tarih ve bitiş puanını yerleştireceğiz. Tarih içeren bir Metin Modülü ekleyerek başlayın.

Arka plan rengi

Sonraki düzen paketiyle eşleşen bir arka plan rengi ekleyin.

• Arka Plan Rengi: #00aaff

Metin Ayarları

Metin ayarlarını da değiştirin.

• Metin Yazı Tipi: Squada One
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #FFFFFF
• Metin Boyutu: 42px
• Metin Yönü: Merkez

aralık

Ardından, boşluk ayarlarına gidin ve modüle biraz daha dolgu verin.

• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px

görünürlük

Son olarak, modülü telefonda ve tablette devre dışı bırakın.

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

2. sütundaki ikinci Metin Modülünün oyun puanını içermesi gerekir.

Metin Ayarları

İçeriği ekledikten sonra metin ayarlarını değiştirin.

• Metin Yazı Tipi: Squada One
• Metin Rengi: #333333
• Metin Boyutu: 150px
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Aralık değerlerini değiştirerek devam edin.

• Üst Kenar Boşluğu: 40px (Masaüstü), 20px (Tablet ve Telefon)
• Alt Kenar Boşluğu: 20px (Tablet ve Telefon)
• Sol Dolgu: 10px
• Sağ Dolgu: 10px

görünürlük

Bu modülü telefonda ve tablette de gizleyin. Bir sonraki bölümde, daha küçük ekran boyutları için alternatif oluşturacağız.

Her İki Modülü de Klonla ve Sütun 1'e Yerleştir

2. sütunda bulabileceğiniz her iki modülü de klonlayın ve kopyaları diğer modüllerin üzerindeki ilk sütuna yerleştirin.

Görünürlüğü Değiştir

Tablet ve telefonda daha iyi bir sonuç elde etmek için bu modüllerin her ikisini de kullanıyoruz. Bu modüllerin yalnızca daha küçük ekran boyutlarında göründüğünden emin olmak için bunları masaüstünde devre dışı bırakın.

3. Satır Ekle

Sütun Yapısı

Bir sonraki satırda, farklı hedefleri masaüstünde görüntüleyeceğiz. Aşağıdaki sütun yapısını kullanın:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #FFFFFF

Sütun 2 Arka Plan Rengi

Sütun 2'nin arka plan rengini de değiştirin.

• 2. Sütun Arka Plan Rengi: #f7f7f7

boyutlandırma

Sonraki boyutlandırma ayarlarında sütunlar arasındaki tüm boşluğu kaldırın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 0
• Sütun Yüksekliğini Eşitle: Evet

aralık

Özel boşluk değerleri de ekleyin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 1 Alt Dolgu: 100 piksel
• Sütun 1 Sağ Dolgu: 10px
• Sütun 3 Sol Dolgu: 10px

Sınır

Ardından, satıra ince bir alt kenarlık ekleyin.

• Alt Kenar Genişliği: 8px
• Alt Kenar Rengi: #00aaff

Kutu Gölge

Sayfaya derinlik oluşturmak için bir satır kutusu gölgesi ekleyin.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -20px
• Gölge Rengi: rgba(0,0,0,0.56)

görünürlük

Daha önce de belirtildiği gibi, bu satırı yalnızca masaüstünde hedefleri görüntülemek için kullanıyoruz, bu nedenle devam edin ve satırı telefonda ve tablette devre dışı bırakın. Yazının ilerleyen bölümlerinde tablet ve telefon alternatifi oluşturacağız.

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

İlk hedef ayrıntılarını içeren ilk sütuna yeni bir Metin Modülü ekleyin.

Metin Ayarları

Sonraki metin ayarlarını değiştirin.

• Metin Yazı Tipi: Squada One
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #333333
• Metin Boyutu: 27px
• Metin Yönü: Sağ

aralık

Boşluk değerleriyle de oynayın.

• Üst Kenar Boşluğu: 100 piksel
• Alt Dolgu: 20px

Sınır

İnce bir alt kenarlık ekleyerek devam edin.

• Alt Kenar Genişliği: 1px
• Alt Kenarlık Rengi: #333333

Metin Modülünü İki Kez Klonla

Yinelenenlerin Aralığını Değiştirin

Yeni oluşturduğunuz Metin Modülünü iki kez klonlayın ve her iki kopyanın boşluk değerlerini değiştirin.

• Üst Kenar Boşluğu: 200 piksel
• Alt Dolgu: 20px

Metin Modülü #1'i Klonla ve Çoğaltmayı Sütun 3'e Yerleştir

Metin Ayarlarını Değiştir

Sütun 1'deki ilk Metin Modülünü bir kez daha klonlayın ve kopyayı sütun 3'e yerleştirin. Metin yönünü değiştirerek devam edin.

• Metin Yönü: Sol

Aralığı Değiştir

Üst marjın da artırılması gerekiyor.

• Üst Kenar Boşluğu: 200 piksel

Sütun 3'teki Metin Modülünü Klonla

Artık bu Metin Modülünü bir kez daha klonlayabilirsiniz.

4. Satırı Ekle

Sütun Yapısı

Son satırı ekleme zamanı! Aşağıdaki sütun yapısını seçin:

Arka plan rengi

Satırın arka plan rengini değiştirin.

• Arka Plan Rengi: #FFFFFF

boyutlandırma

Sonraki sütunlar arasındaki tüm boşluğu kaldırın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Biraz ekstra üst ve alt dolgu ekleyin.

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

Sınır

Bu sıra için de ince bir alt kenarlığa ihtiyacımız olacak.

• Alt Kenar Genişliği: 8px
• Alt Kenar Rengi: #00aaff

Kutu Gölge

Ardından, satıra bir kutu gölgesi ekleyin.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -20px
• Gölge Rengi: rgba(0,0,0,0.56)

görünürlük

Son olarak, satırı masaüstünde gizleyin.

Metin Modülü #1 Ekle

İçerik Ekle

Satırın sütununa yeni bir Metin Modülü ekleyin ve hedef ayrıntılarını ekleyin.

Metin Ayarları

Sonraki metin ayarlarını değiştirin.

• Metin Yazı Tipi: Squada One
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 27px
• Metin Yönü: Sağ

aralık

Sonraki özel boşluk değerlerini kullanın.

• Sağ Kenar Boşluğu: 150 piksel
• Alt Dolgu: 20px

Sınır

Ayrıca ince bir alt kenarlık ekliyoruz.

• Alt Kenar Genişliği: 1px
• Alt Kenarlık Rengi: #333333

Klon Metin Modülü

Metin Ayarlarını Değiştir

Oluşturduğunuz Metin Modülünü klonlayın ve kopyanın metin yönünü değiştirin.

• Metin Yönü: Sol

aralık

Boşluk değerlerini de değiştirin.

• Üst Kenar Boşluğu: 200 piksel
• Sol Kenar Boşluğu: 150 piksel

Her İki Metin Modülünü Gerektiği Kadar Kez Klonlayın

Artık tüm farklı hedefleri göstermek için bu modülleri istediğiniz kadar çoğaltabilirsiniz.

Ön izleme

Artık tüm adımlardan geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Bu gönderide, Divi's Soccer Club Layout Pack'i kullanarak bir oyun skorbordunun nasıl oluşturulacağını gösterdik. Bu, web sitenize daha fazla teşvik eklemenin ve hedef kitlenizle bağlantı kurmanın harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!