Bu yıl Ömür Boyu Üyeler ve yeni Black Friday müşterileri olarak size sunduğumuz özel açılış sayfalarından biri, çarpıcı UI Kit Açılış Sayfasıdır. Bu düzen, Divi'nin en iyi yerleşik tasarım kombinasyonlarından bazılarını ve web sitenizi bir sonraki seviyeye taşıyacak yüksek kaliteli maketleri içerir. Bu yazıda, onu nasıl elde edeceğinizi ve etkili bir şekilde nasıl kullanacağınızı göstereceğiz.

Mevcut bir Ömür Boyu müşteriyseniz veya Kara Cuma İndirimi sırasında yeni bir hesap satın aldıysanız veya yükseltme yaptıysanız, bu düzeni hemen şimdi indirebilirsiniz.

Özel Kara Cuma UI Kiti Açılış Sayfasını Alın

Bu kullanım senaryosuna girmeden önce, yeni bir Elegant Themes Üyesi olarak, mevcut hesabınızı yükselterek veya zaten bir Ömür Boyu Üye olarak alabileceğiniz özel Black Friday UI Kit Açılış Sayfasına el atmanız gerekecek. Zaten bir Ömür Boyu Üye iseniz, üye alanımıza giriş yapabilir ve tüm özel açılış sayfalarımızı buradan indirebilirsiniz. Diğer herkesin, eğitimimizin geri kalanını takip edebilmeleri için satın almak veya yükseltmek için aşağıdaki düğmeyi kullanması gerekecek.

Kaybolmadan Önce Anlaşmayı Talep Edin!

Ürünleri ve Özellikleri Güzel Bir Şekilde Listelemek için Divi'nin Sütun Yapılarını Kullanma

Bu gönderinin geri kalanında, Kara Cuma anlaşmamızdan yararlandığınızı veya zaten bir Ömür Boyu Üye olduğunuzu ve Kara Cuma Kullanıcı Arayüzü Kiti Açılış Sayfasına erişiminiz olduğunu varsayacağız.

Üye alanımızdan yeni UI Kit Açılış Sayfasını indirdikten sonra, kurulumun ne kadar kolay olduğunu görmek için aşağıdaki videoyu izleyebilirsiniz. Ayrıca, sitenizi daha fazla özelleştirmeye hazırlamak için bu eğiticiyi takip etmenizi öneririz.

Bu kullanım örneği gönderisinde, Divi'nin yeni sütun yapılarını kullanarak özelliklerinizi ve/veya ürünlerinizi nasıl şaşırtıcı bir şekilde listeleyeceğinizi göstereceğiz. Ele alacağımız tasarım, UI Kit Açılış Sayfası ile harika görünüyor ve sayfanızdaki alanı etkili ve güzel bir şekilde kullanmanıza izin veriyor.

Ön izleme

Farklı ekran boyutlarında sonuca bir göz atalım.

Fareyle üzerine gelme ve Animasyon

Ayrıca çeşitli tasarım öğelerine bazı ince vurgulu ve animasyon ayarları ekleyeceğiz. Bu, aşağıdaki etkileşimi verecektir:

Başlayalım!

UI Kit Açılış Sayfasını Kullanarak Yeni Sayfa Ekleme

Yapmanız gereken ilk şey, indirip yüklediğiniz UI Kit Açılış Sayfası'nı kullanarak yeni bir sayfa oluşturmak. Bunu nasıl yapacağınızdan emin değilseniz, bu yazının önceki bölümünde size adım adım rehberlik edecek videoyu kontrol ettiğinizden emin olun.

Sayfadaki Özellikler Bölümünü Bul

Düzeni yükledikten sonra, sayfadaki özellikler bölümüyle karşılaşana kadar aşağı kaydırın.

Mevcut Satırları Kaldır

Bu bölümde bulabileceğiniz son iki satırı kaldırın. Bu satırların içeriğini özellik/ürün listemizle değiştireceğiz.

Satır İçeren Satırın Altına Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden, tasarım sekmesinde satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: Evet
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Bu tasarımın tüm ekran boyutlarında harika görünmesini sağlamak için farklı özel kenar boşluğu ve dolgu değerleri kullanacağız:

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 100 piksel
• Üst Dolgu: 87px
• Sütun 1 Üst Dolgu: 100px (Masaüstü), 0px (Tablet ve Telefon)
• Sütun 2 Üst Dolgu: 100 piksel (Masaüstü), 0 piksel (Tablet ve Telefon)
• Sütun 3 Üst Dolgu: 100 piksel (Masaüstü). 0px (Tablet ve Telefon)
• Sütun 3 Alt Dolgu: 50 piksel (Tablet ve Telefon)
• Sütun 4 Sol Dolgu: 10 piksel (Yalnızca Telefon)
• Sütun 4 Sağ Dolgu: 10px
• Sütun 5 Sol Dolgu: 5px (Masaüstü ve Tablet), 10px (Telefon)
• Sütun 5 Sağ Dolgu: 5px (Masaüstü ve Tablet), 10px (Telefon)
• Sütun 6 Sol Dolgu: 10px
• Sütun 6 Sol Dolgu: 10 piksel (Yalnızca Telefon)

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! İlk sütuna bir sayı içeren bir Metin Modülü ekleyin.

Varsayılan Arka Plan Rengi

Bu modüle bir arka plan rengi ekleyin.

• Arka Plan Rengi: #0f0f0f

Vurgulu Arka Plan Rengi

Ve fareyle üzerine gelindiğinde arka plan rengini değiştirin.

• Arka Plan Rengi: #ff5400

Arka plan görüntüsü

Medya Kitaplığınızda bulabileceğiniz simge görüntülerinden birini de arka plana ekleyebilirsiniz:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok

Varsayılan Metin Ayarları

Metin ayarlarını değiştirerek devam edin.

• Metin Yazı Tipi: Muli
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #ffffff
• Metin Boyutu: 80px (Masaüstü ve Telefon), 40px (Telefon)
• Metin Satır Yüksekliği: 1em

• Metin Gölge Rengi: ##ffffff
• Metin Yönü: Sol

Varsayılan Aralık

Bir kare oluşturmak için biraz özel dolgu ekleyin.

• Üst Dolgu: 200 piksel
• Sol Dolgu: 50px (Yalnızca Telefon)
• Sağ Dolgu: 50px (Yalnızca Telefon)

Vurgu Aralığı

Fareyle üzerine gelindiğinde boşluk ayarlarını değiştirin.

• Sol Dolgu: 100 piksel

Sınır

UI Kit Açılış Sayfasına uyması için bazı ince yuvarlak köşeler de ekliyoruz. Köşelerin her birine '20px' ekleyin.

Kutu Gölge

Modüle de biraz renk eklemek için aşağıdaki kutu gölgesini kullanın:

• Kutu Gölgesi Yatay Konum: 20px
• Kutu Gölgesi Dikey Konumu: -50px
• Kutu Gölge Yayılma Gücü: 17px
• Gölge Rengi: #593aff

Animasyon

Son olarak, Metin Modülüne çok ince bir slayt animasyonu ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Yoğunluğu: %3

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. Devam edin ve ikinci sütuna bir tane ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

Sonraki ayırıcı rengini değiştirin.

• Renk: #ffffff

aralık

İlk sütundaki Metin Modülünü çakıştırmak için farklı ekran boyutlarına göre ayarlayacağımız bazı özel kenar boşluk değerleri kullanacağız.

• Üst Kenar Boşluğu: 30 piksel
• Sol Kenar Boşluğu: -200px (Masaüstü ve Tablet), 0px (Telefon)
• Sağ Kenar Boşluğu: 200px (Masaüstü ve Tablet), 0px (Telefon)

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

İçerik Ekle

Bir sonraki sütuna! Burada ihtiyacımız olan ilk modül, bir Metin Modülü başlığıdır. Devam edin ve ilk özelliğinizin veya ürününüzün başlığını ekleyin.

Başlık Metni Ayarları

Ardından, başlık metni ayarlarına gidin ve UI Kit Layout Pack ile eşleşmesi için bazı değişiklikler yapın.

• Başlık 3 Yazı Tipi: Muli
• Başlık 3 Yazı Tipi Ağırlığı: Hafif
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 30px (Masaüstü ve Tablet), 18px (Telefon)

aralık

Bu modülü sola itmek için bazı özel boşluk değerleri kullanacağız.

• Üst Kenar Boşluğu: 20px
• Alt Kenar Boşluğu: 20px
• Sol Kenar Boşluğu: -180px (Masaüstü ve Tablet), 0px (Telefon)
• Sol Dolgu: 20px (Masaüstü ve Tablet), 50px (Telefon)
• Sağ Doldurma: 20px (Masaüstü ve Tablet), 50px (Telefon)

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

İçerik Ekle

İhtiyacımız olan bir sonraki modül bir açıklama Metin Modülü. Devam edin ve özelliğinizin veya ürününüzün açıklamasını girin.

Metin Ayarları

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

• Metin Rengi: rgba(255,255,255,0.5)
• Metin Satırı Yüksekliği: 2.2em

aralık

Bazı özel boşluk değerleri kullanarak bu modülü de sola doğru itin.

• Sol Kenar Boşluğu: -180px (Masaüstü ve Tablet), 0px (Telefon)
• Sol Dolgu: 20px (Masaüstü ve Tablet), 50px (Telefon)
• Sağ Doldurma: 20px (Masaüstü ve Tablet), 50px (Telefon)

Düğme Modülünü Sütun 3'e Klonla ve Yerleştir

3. sütunda ihtiyaç duyacağımız son modül bir Düğme Modülüdür. Zaman kazanmak için sayfadaki mevcut bir düğmeyi klonlayacağız ve kopyayı eklediğimiz diğer iki modülün hemen altına yerleştireceğiz.

İçeriği Değiştir

Düğme modülünün içeriğini değiştirin.

Aralığı Değiştir

Bu modülü de sola doğru itiyoruz. Fark edebileceğiniz gibi, 3. sütundaki tüm modüller iki sütunluk yer kaplıyor. Bu tür bir yaklaşım, istediğimiz sonuca uyan başka bir sütun yapısı oluşturmamızı sağlar.

• Üst Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: -160px (Masaüstü ve Tablet), 50px (Telefon)
• Sağ Kenar Boşluğu: 50px (Yalnızca Telefon)

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

Fotoğraf yükleniyor

Bir sonraki sütuna! 4. sütuna bir Resim Modülü ekleyin ve istediğiniz bir resmi yükleyin. Bu örnek için 500×500 resim boyutları kullandık ancak diğer resim boyutlarıyla da oynamaktan çekinmeyin.

Kutu Gölge

Bu modüle ince bir kutu gölgesi ekleyin.

• Gölge Rengi: #ffffff

Animasyon

Üstüne üstlük, görüntüye de bir slayt animasyonu ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 100ms
• Animasyon Yoğunluğu: %3

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

İçerik Ekle

Görüntü Modülünün hemen altında, devam edin ve bazı içeriğe sahip bir Metin Modülü başlığı ekleyin.

Varsayılan Arka Plan Rengi

Bu modülün arka plan rengini değiştirin.

• Arka Plan Rengi: #0f0f0f

Vurgulu Arka Plan Rengi

Ve fareyle üzerine gelindiğinde başka bir arka plan rengi kullanın.

• Arka Plan Rengi: #593aff

Başlık Metni Ayarları

Başlık metni ayarlarını UI Kit Açılış Sayfasıyla eşleşecek şekilde değiştirerek devam edin.

• Başlık 4 Yazı Tipi: Muli
• Başlık 4 Yazı Tipi Ağırlığı: Hafif
• Başlık 4 Metin Rengi: #ffffff
• Başlık 4 Metin Boyutu: 23px (Masaüstü ve Tablet), 18px (Telefon)

Varsayılan Aralık

Daha sonra bazı özel boşluk değerleri ekleyin.

• Üst Dolgu: 50px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Vurgu Aralığı

Ve güzel bir geçiş oluşturmak için fareyle üzerine gelindiğinde bu değerleri değiştirin.

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

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

İçerik Ekle

4. sütunda ihtiyaç duyacağımız ikinci ve son modül, bir açıklama Metin Modülüdür. Seçtiğiniz bazı içeriği girin.

Arka plan rengi

Sonraki arka plan rengini değiştirin.

• Arka Plan Rengi: #0f0f0f

Metin Ayarları

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

• Metin Rengi: rgba(255,255,255,0.5)
• Metin Satırı Yüksekliği: 2.2em

aralık

Temiz bir görünüm ve his yaratmak için bu modüle bazı özel dolgular ekleyin.

• Alt Dolgu: 50px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Sınır

Son olarak, modülün alt iki köşesine '20px' ekleyin.

4. Sütundaki Tüm Modülleri İki Kez Klonla ve Kalan Sütunlara Yerleştir

Resmi ve İçeriği Değiştir

Artık 4. sütunda ihtiyacınız olan tüm modüllere sahip olduğunuza göre, devam edip tüm bu modülleri iki kez klonlayabilir ve kopyaları kalan iki sütuna yerleştirebilirsiniz. Çeşitlilik yaratmak için içeriği ve görüntüleri değiştirin.

Satırı İstediğiniz Kadar Klonlama (Liste Öğe Sayısına Göre)

İlk liste öğemizi bitirdik! Şimdi, sergilemek istediğiniz özellik ve/veya ürün sayısına bağlı olarak bu satırı istediğiniz kadar çoğaltabilirsiniz.

Klon İçeriğini Değiştir

Yinelenenlerin her biri için içeriği değiştirmeniz gerekir.

Rengi Bul ve Değiştir

Bir liste öğesinin renk paletini hızla değiştirmek için Divi'nin Bul ve Değiştir özelliğini de kullanabilirsiniz.

Vurgulu Arka Plan Rengini Değiştir

Renk paletini değiştirdiğinizde, Metin Modülü sayısının üzerine gelme arka plan rengini de değiştirdiğinizden emin olun.

• Arka Plan Rengi: #593aff

Arka Plan Resmini Değiştir

Son olarak, gösterilmesine izin verdiğiniz özellik ve/veya ürüne bağlı olarak listeden başka bir simge de seçebilirsiniz.

Son düşünceler

Bu kullanım örneği, Kara Cuma müşterileri ve ömür boyu üyelerle 6 ÜCRETSİZ sınırlı sürüm açılış sayfasını paylaştığımız Kara Cuma Anlaşmamızın bir parçasıdır. Bu günlerde güçlendirilmiş topluluğumuza katılarak ve üye olarak şunları elde edeceksiniz:

• HER ŞEYDE %25 İNDİRİM
• 6 açılış sayfasının tümü ücretsiz
• Harika temalarımıza ve eklentilerimize erişim
• Bonus Ödüller

Fırsatı yakalayın ve bugün üye olun!