Divi Futbol Kulübü Düzen Paketi ile Gameboard Oyunu Nasıl Yapılır
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, bir Divi Futbol Kulübü Düzen Paketi kullanarak nasıl havalı bir oyun tahtası yapacağınızı göstereceğiz. Bu son oyun tahtasını yalnızca varsayılan Divi seçeneğini kullanarak yapacağız, bu yüzden başlayalım! Önizleme Öğreticiyi girmeden önce, farklı ekran boyutlarında nihai sonuçlara bakalım.
Futbol Kulübü Düzen Paketi Düzeni Paketini Yükle Bu öğreticiyi oluşturmak için, Futbol Kulübü Düzeni Paketi Pack sayfasını kullanacağız, devam edip bu düzeni kullanarak yeni bir sayfa ekleyeceğiz. Daha sonra yeni bir parça ekleyin, buraya yeni bir parça ekleyin: Arka Plan Rengi Bölüm ayarlarını açın ve bir sonraki arka plan rengini ekleyin.Arka plan rengi: #f4f4f4 Uzay değerleriyle de mesafe.
Üst dolgu: 55px
Dolgu Alt: 140 piksel Klon Row & Arama bölümüne yerleştirin ve zaman kazanmak için bir klon yapın, bir sonraki bölümdeki başlık satırını klonlayacağız. Yeni bölüme yerleştirin
Yinelenen satırı yeni bölüme yerleştirin. Metni Değiştir Yeni bölüme uyacak şekilde satırdaki metin modülünün kopyasını değiştirin. Bir önceki satırın hemen altındaki satır #2 sütun yapısı ekleyin, 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 Rengi Sütun 1 Sütun 1’in arka plan rengini de ekleyin.
Sütun 1 Arka Plan Rengi: #FCFCCCCHEAR Sütun 3 Sütun 3 için aynı adımı tekrarlayın. Sütun Renk Sütunu 3: #FCFCFC
Yapıştırıcı değişim de boyutu ayarlayın. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek Eşitle Sütun: Evet
Mesafe Bir sonraki varsayılan dolguyu silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Düzen paketine uyacak şekilde sınır, üst ve alt sınırları satıra ekleyin. Alt sınır genişliği: 8px
Alt Sınır Rengi: #00AAFF
Son kutu gölgesi, sayfada derinlik oluşturmak için pürüzsüz bir kutu gölgesi ekleyin. Dikey Konum Gölge Kutusu: 20px
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -20px
Gölge Rengi: RGBA (0.0,0,0,56)
1 numaralı metin modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! Sütun 1’deki metin modülüyle başlayın ve bazı içerik ekleyin. Arka plan rengi bir sonraki arka plan rengini değiştirin. Arka plan rengi: #e8e8e8
Metin ayarlarıyla oynatarak metin ayarlarına devam edin. Metin Yazı Tipi: Squada One
Metin yazı tipi stili: büyük harf
Metin rengi: #333333
Metin Boyutu: 20 piksel
Metin Oryantasyonu: Orta
Mesafe o zaman, bazı özel alan değerleri ekleyin. Üst dolgu: 10 piksel
Dolgu Alt: 10 piksel
Sol dolgu: 10 piksel
Doğru dolgu: 10 piksel
Sütun 1’e Metin Modülü #2 ekleyin Dolgu Ekle Doldurma Ekle Yeni bir metin modülü ekleyin Sütun 1’deki önceki metin modülünün hemen altına ekleyin. Bunu yaptıktan sonra içeriği içerik kutusuna ekleyin. Metin Ayarları Sonraki metin ayarlarını değiştirir. Metin yazı tipi: SANS’ı aç
Metin yazı tipi ağırlığı: kalınlık
Metin rengi: #333333
Metin Boyutu: 18px
Metin Oryantasyonu: Orta
Uzay değerleriyle de mesafe. Üst dolgu: 20px
Dolgu Alt: 20 piksel
Resim Modülünü Sütun 1’e Ekleyin Kulüp logosunu Yükle Sütun 1’de gereken son modül, rekabet eden takımlardan birinin kulüp logosunu içeren bir görüntü modülüdür. Kulüp logosu görüntüsünü yükledikten, boyut ayarlarını açtıktan ve yaptıktan sonra görünün bazı değişiklikler. Genişlik:% 45 (masaüstü),% 16 (tablet),% 28 (cep telefonu) Modül hizalaması: merkez
Uzay ayarlarına özel marj değerleri ekleyerek daha fazla mesafe.
Üst kenar boşluğu: 20px Alt kenar boşluğu: 50 piksel
Klon Modülü ve Çoğaltma Sütun 3’e yerleştirin Sütun 1’deki üç modülle de bitirildikten sonra klonlayabilir ve kopyayı üçüncü sütuna yerleştirebilirsiniz.
İçeriği değiştirin, elbette, her klonlama modülünün içeriğini değiştirmeniz gerekir. #1 metin modülünü Sütun 2’ye ekleyin İkinci sütunda içeriği ekleyin, son tarihi ve puanı yerleştireceğiz. Tarihi içeren bir metin modülü ekleyerek başlayın. Arka plan rengi Bir sonraki düzen paketiyle eşleşen arka plan rengini ekleyin. Arka plan rengi: #00aaff Metin ayarları ayrıca metin ayarlarını da değiştirir.
Metin Yazı Tipi: Squada One Metin yazı tipi stili: büyük harf
Metin rengi: #ffffff
Metin Boyutu: 42px
Metin Oryantasyonu: Orta
Mesafe Ardından, boşluk ayarlarını açın ve birkaç rulman modülü verin.
Üst dolgu: 30px Dolgu Alt: 30 piksel
Son görünürlük, cep telefonları ve tabletler üzerindeki modülleri devre dışı bırakın.
Sütun 2’ye Metin Modülü #2 ekleyin Sütun 2’deki ikinci metin modülünün içeriğini ekleyin Bir oyun puanı içermelidir. Metin Ayarları İçerik ekledikten sonra metin ayarlarını değiştirin. Metin Yazı Tipi: Squada One Metin rengi: #333333
Metin Boyutu: 150 piksel
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Alan değerini değiştirerek gelişmiş mesafe.
Üst kenar: 40 piksel (masaüstü), 20px (tablet ve cep telefonu) Alt kenar boşluğu: 20 piksel (tablet ve cep telefonu) Sol dolgu: 10 piksel
Doğru dolgu: 10 piksel
Bu modülü cep telefonları ve tabletlerde de gizlemek için görünürlük. Bir sonraki bölümde, daha küçük ekran boyutları için alternatifler yapacağız.
İkinci modülü klonlamak ve sütun 2’de bulabileceğiniz ikinci klonlama modülünün 1 sütununa yerleştirin ve kopyayı diğer modüllerin üzerindeki ilk sütuna yerleştirin.
Tabletlerde ve cep telefonlarında daha iyi sonuçlar elde etmek için bu iki modülü kullanarak görünürlüğümüzü değiştirin. Bu modülün yalnızca daha küçük ekran boyutlarında göründüğünden emin olmak için masaüstünde devre dışı bırakın.
Satırlar #3 sütun yapısı ekleyin Bir sonraki satırda, masaüstünde çeşitli amaçlar görüntüleyeceğiz. Aşağıdaki sütun yapısını kullanın:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini değiştirin. Arka plan rengi: #ffffff Üniversite Renk Sütunu 2 Değişiklik Ayrıca Arka Plan Sütunu Sütun 2. Sütun 2 arka plan rengi: #f7f7f7Yapıştırıcılar, sonraki boyut ayarlarında sütunlar arasındaki tüm alanı silin. Özel Talang genişliği kullanın: evet
Talang genişliği: 0 Yüksek Eşitle Sütun: Evet
Mesafe ayrıca özel bir alan değeri ekler.
Üst dolgu: 0px
Aşağıda dolgu: 0px Sütun 1 Pilding Alt: 100 piksel
Sütun 1 Dolgu Sağ: 10 piksel
Sütun 3 Solda Sol: 10 Piksel
Sınırda, satıra düzgün bir alt sınır ekleyin.
Alt sınır genişliği: 8px
Alt Sınır Rengi: #00AAFF Kutunun Gölgesi Sayfa derinliğini yapmak için satır kutusunun gölgesini ekleyin.
Dikey Konum Gölge Kutusu: 20px
Bulanık Güç Gölgesi Kutusu: 80px Kutunun gölgesinin dağılımının 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ı masaüstünde görüntülemek için kullanırız, bu nedenle cep telefonlarında ve tabletlerde satırları devam ettirin ve devre dışı bırakın. Gönderinin ilerleyen saatlerinde alternatif bir tablet ve cep telefonu yapacağız. Sütun 1’e metin modülü #1 ekleyin Dolgu ekle ilk hedef ayrıntılarını içeren ilk sütuna yeni bir metin modülü ekleyin.
Metin Ayarları Sonraki metin ayarlarını değiştirir.
Metin Yazı Tipi: Squada One Metin yazı tipi stili: büyük harf Metin rengi: #333333 Metin Boyutu: 27px
Metin Oryantasyonu: Doğru
Uzay değerleriyle de mesafe.
Üst kenar boşluğu: 100 piksel
Dolgu Alt: 20 piksel
Sınır, ince bir alt sınır ekleyerek devam eder. Alt sınır genişliği: 1 piksel
Alt sınır rengi: #333333
Klon metin modülü iki kez iki kez yaptığınız yinelenen aralık klonlama metin modülünü değiştirin ve iki kopyanın boşluk değerini değiştirin. Üst kenar boşluğu: 200px
Dolgu Alt: 20 piksel
Klon Metin Modülü #1 ve Yer Placate Sütun 3’teki ilk metin klonlama ayarlarını Sütun 1’deki tekrar değiştirin ve kopyayı sütun 3’e yerleştirin. Metin yönünü değiştirerek devam edin. Metin Oryantasyonu: Sol
Üst kenar boşluğunun değiştirilmesinin de geliştirilmesi gerekir.
Üst kenar boşluğu: 200px Sütun 3’teki klon metin modülü artık bu metin modülünü bir kez daha klonlayabilirsiniz.
4 numaralı satır ekleyin Sütun yapısı son satırı ekleme zamanıdır! Aşağıdaki sütun yapısını seçin: Arka Plan Rengi Sırının arka plan rengini değiştirin.
Arka plan rengi: #ffffff Yapışkan Bir sonraki sütun arasındaki tüm boşlukları silin. Özel Talang genişliği kullanın: evet Talang genişliği: 1
Mesafe Ekstra pedler yukarı ve aşağı ekleyin. Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel
Sınırımız bu sıra için de ince bir alt sınır gerektirecektir. Alt sınır: 8 piksel Alt Sınır Rengi: #00AAFF
Bir sonraki kutu gölgesi, kutunun gölgesini satıra ekleyin.
Dikey Konum Gölge Kutusu: 20px Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -20px
Gölge Rengi: RGBA (0.0,0,0,56) Son görünürlük, masaüstündeki çizgileri gizleyin.
Metin Modülü Ekle #1 Dolgu ekle, satır sütununa yeni bir metin modülü ekleyin ve hedef ayrıntılarını ekleyin.
Metin Ayarları Sonraki metin ayarlarını değiştirir.
Metin Yazı Tipi: Squada One
Metin yazı tipi stili: büyük harf Metin Boyutu: 27px Metin Oryantasyonu: Doğru Mesafe Bir sonraki özel alan değerini kullanın.
Sağ kenar boşluğu: 150 piksel
Dolgu Alt: 20 piksel
Sınırımız da ince bir alt sınır ekler.
Alt sınır genişliği: 1 piksel Alt sınır rengi: #333333
Klon Metin Modülü Metin ayarlarını değiştirdiniz ve yinelenen metin yönünü değiştirdiğiniz klonlama metin modülü.
Metin Oryantasyonu: Sol Mesafe ayrıca boşluk değerini değiştirir.
Üst kenar boşluğu: 200px
Sol kenar boşluğu: 150 piksel İki metin modülünü ihtiyacınız olduğu kadar sık olarak klonlayarak, bu modülü tüm farklı hedefleri görüntülemek istediğiniz kadar klonlayabilirsiniz.
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Bu yazıdaki son zihin, bir Divi Futbol Kulübü Düzen Paketi kullanarak nasıl bir Gamoard yapacağınızı gösterdik. Bu, web sitenize daha fazla teşvik eklemenin ve kitlenizle bağlantı kurmanın iyi bir yoludur. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
