Ürünü içerecek şekilde özel Kara Cuma Divi UI kitinin düzenini kullanma & amp;Güzel özellikler
Sonunda burada! Kara Cuma
Bu özel bir şey. Bu her yıl bir kez tüm zamanların en büyük indirimini sunuyoruz. Ama bu sadece başlangıçtı, çünkü 500.000 dolarlık ücretsiz bir ödül verdik! Bugün Black Friday satışımızı kullanan herkes, bazıları yüzlerce dolar değerinde ücretsiz ödüller alacak. Ama hepsi bu değil … aynı zamanda sadece bu fırsat için yapılmış özel bir Divi düzen paketi sunuyoruz ve bugün sadece Black Friday müşterileri ve ömür boyu üyelerimiz için kullanılabilir.
Anlaşmayı bitmeden önce alın!
Bu yıl ömür boyu bir üye ve yeni Black Friday müşterisi olarak size sunduğumuz özel yön sayfalarından biri inanılmaz bir UI kitinin yön sayfasıdır. Bu düzen, web sitenizi bir sonraki seviyeye taşıyacak yüksek kaliteli varsayılan tasarım kombinasyonlarından ve yüksek kaliteli maketleri içerir. Bu yazıda size nasıl alacağınızı ve etkili bir şekilde kullanacağınızı göstereceğiz. Bugün ömür boyu bir müşteriyseniz veya Black Friday satışlarımız sırasında yeni bir hesap satın aldıysanız veya iyileştirdiyseniz, bu düzeni şimdi indirebilirsiniz.
Sonuçlara farklı ekran boyutlarında bakalım.
Doğrudan ve animasyonumuz ayrıca çeşitli tasarım öğelerine bazı ince uçukluk ve animasyon ayarları ekleyecektir. Bu aşağıdaki etkileşimi verecektir: Hadi! UI kitinin yön sayfasını kullanarak yeni bir sayfa ekleyin İlk yapmanız gereken, indirdiğiniz ve yüklediğiniz UI kitinin yön sayfasını kullanarak yeni bir sayfa oluşturmaktır. Nasıl yapacağınızdan emin değilseniz, bu yazının bir önceki bölümünde size adım adım rehberlik edecek videoyu kontrol ettiğinizden emin olun. Düzeni yükledikten sonra sayfadaki özellik bölümünü bulun, sayfadaki özellik bölümünü bulana kadar aşağı kaydırın. Bu bölümde bulabileceğiniz son iki satırı silen satırları silin. Bu satır içeriğini ürün özelliklerimiz/listemizle değiştireceğiz. Sütun yapısı satırını içeren bir satır altına yeni bir satır ekleyin Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve tasarım sekmesindeki boyut ayarlarını değiştirin. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: evet
Yüksek sütunu eşitleyin: evet
Bu tasarımın tüm ekran boyutlarında iyi görünmesini sağlamak için mesafe, özel marj ve farklı 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 Dolgu: 100 piksel (masaüstü), 0px (tablet ve cep telefonu)
Üst Dolgu 2 Dolgu: 100px (masaüstü), 0px (tablet ve cep telefonu)
Üst Dolgu 3 Dolgu: 100 piksel (masaüstü). 0px (tablet ve cep telefonu)
Sütun 3 Dolgu Alt: 50px (Tablet ve Cep Telefonu)
Sol dolgu 4 sütun: 10px (sadece cep telefonu)
Sütun 4 Doğru: 10 piksel
Sütun 5 Solda Sol: 5px (masaüstü ve tablet), 10px (Telefon) Sağ dolum: 5px (masaüstü ve tablet), 10px (telefon)
Sütun 6 Dolgu Sol: 10 Piksel
Sütun 6 Solda Sol: 10 Piksel (Yalnızca Cep Telefonu)
Metin modülünü sütun 1’e ekleyin, içerikleri ekleyin Modül eklemeye başlamanın zamanı geldi! Metin modülünü bir sayı ile ilk sütuna ekleyin.
Varsayılan arka plan rengi, bu modüle arka plan rengini ekler.
Arka plan rengi: #0f0f0f Arka plan rengini yönlendirin ve yüzerken arka plan rengini değiştirin. Arka plan rengi: #ff5400
Arka plan resminiz, medya kütüphanesinde bulabileceğiniz simge görüntülerinden birini arka plana da ekleyebilir: Arka Plan Görüntü Boyutu: Gerçek Boyut
Arka Plan Görüntü Pozisyonu: Orta Arka plan görüntüsünün tekrarlanması: Tekrar yok
Metin ayarlarını değiştirerek varsayılan metin ayarları devam eder.
Metin yazı tipi: Muli
Metin yazı tipi ağırlığı: ışık Metin rengi: #ffffff
Metin boyutu: 80px (masaüstü ve telefon), 40 piksel (telefon)
Hat yüksekliği metni: 1em
Metin Gölgesi Renk: ## FFFFFF
Metin Oryantasyonu: Sol
Varsayılan alanlar, kareler yapmak için bazı özel rulmanlar ekler. Üst dolgu: 200px
Sol dolgu: 50 piksel (sadece cep telefonu) Sağ dolgu: 50 piksel (sadece cep telefonu)
Aralık İmleci yönlendirirken değişen boşluk ayarlarını yönlendirin.
Sol dolgu: 100 piksel
UI kitinin yön sayfasına uyacak şekilde sınırlanan birkaç pürüzsüz yuvarlak açı ekledik. Her köşeye ’20px’ ekleyin. Kutunun gölgesi, modülün birkaç rengini de eklemek için aşağıdaki kutu gölgesini kullanın:
Yatay konum gölge kutusu: 20px Kutu gölgesinin dikey konumu: -50px Gölge kutularının dağılımının gücü: 17 piksel
Gölge Renk: #593Aff
Son fakat en az değil animasyon, metin modülüne çok ince bir slayt animasyonu ekleyin. Gaya animasyonu: slayt
Animasyonlu yön: doğru
Animasyon yoğunluğu:% 3 Bölücü modülünü, ihtiyacımız olan bir sonraki modülün Sütun 2 görünürlüğüne ekleyin. Lütfen ve ikinci sütuna bir tane ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
Renk bir sonraki bölücü rengini değiştirir.
Renk: #ffffff İlk sütundaki metin modülünün üst üste binmesi için mesafe, farklı ekran boyutlarına göre ayarlayacağımız bazı özel marj değerlerini kullanacağız.
Üst kenar boşluğu: 30 piksel Sol kenar boşluğu: -200 piksel (masaüstü ve tablet), 0px (telefon)
Sağ kenar boşluğu: 200px (masaüstü ve tablet), 0px (telefon) Sütun 3’e Metin Modülü #1 ekleyin Bir sonraki sütuna dolgu ekleyin! Burada, ihtiyacımız olan ilk modül başlık metin modülü. Lütfen ve ilk özelliğinizi veya ürün başlığınızı ekleyin.
Başlık Metin Ayarları Ardından, başlık metni ayarlarını açın ve UI kiti düzeni paketine uyacak şekilde bazı değişiklikler yapın.
Başlık 3 Yazı Tipi: Muli
Başlık 3 Yazı Tipi Ağırlığı: Işık Başlık 3 Renk Metni: #ffffff
Başlık 3 Metin Boyutu: 30px (Masaüstü ve Tablet), 18px (Telefon)
Bu modülü sola itmek için mesafe, bazı özel alan değerlerini kullanacağız.
Üst kenar boşluğu: 20px
Alt kenar boşluğu: 20 piksel
Sol kenar boşluğu: -180px (masaüstü ve tablet), 0px (telefon)
Sağ dolgu: 20 piksel (masaüstü ve tablet), 50 piksel (cep telefonu)
Metin Modülünü Ekle 2 Sütun 3’e Ekle İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Metin modülünün bir açıklamasıdır. Lütfen ve özelliklerinizi veya ürün açıklamalarınızı girin.
Metin Ayarları Sonraki metin ayarlarını değiştirir.
Metin Rengi: RGBA (255,255,255.0.5) Yüksek metin satırı: 2.2em
Bu modülün sola doğru itilmesinin mesafesi de birkaç özel alan değeri kullanır. Sol kenar boşluğu: -180px (masaüstü ve tablet), 0px (telefon) Sol dolgu: 20 piksel (masaüstü ve tablet), 50 piksel (telefon)
Sağ dolgu: 20 piksel (masaüstü ve tablet), 50 piksel (cep telefonu)
Klon Düğmesi Modülü ve Sütun 3’te ihtiyacımız olan son modülün 3. sütununa yerleştirin Düğme Modülü. Zamandan tasarruf etmek için, sayfadaki düğmeleri klonlayacağız ve kopyayı eklediğimiz diğer iki modülün hemen altına yerleştireceğiz. İçeriği Değiştirin İçerik modülü içeriğini değiştirin.
Bu modülü sola doğru iterek alanımızı değiştirin. Gördüğünüz gibi, Sütun 3’teki tüm modüller iki sütun kaplar. Bu tür bir yaklaşım, istediğimiz sonuçlarla eşleşen başka bir sütun yapısı yapmamızı sağlar.
Üst kenar boşluğu: 50 piksel
Sol kenar boşluğu: -160px (masaüstü ve tablet), 50px (telefon) Sağ kenar boşluğu: 50 piksel (sadece cep telefonu) Resim modülünü sütun 4’e ekleyin Görüntüleri bir sonraki sütuna yükleyin! Görüntü modülünü sütun 4’e ekleyin ve resmi yükleyin. Bu örnek için, 500 × 500 görüntü boyutunu kullandık, ancak diğer resimlerle de oynamaktan çekinmeyin. Kutunun gölgesi bu modüle pürüzsüz kutunun gölgesini ekleyin.
Gölge rengi: #ffffff
Animasyon ve tamamlamak için resme de slayt animasyonu ekleyin.
Animasyon Stili: Slayt Animasyonlu Yön: Sol Animasyon gecikmesi: 100ms
Animasyon yoğunluğu:% 3 #1 metin modülünü sütun 4’e ekleyin İçeriği görüntü modülünün hemen altına ekleyin, devam edin ve metin modülünün başlığını çeşitli içerik seçenekleriyle ekleyin.
Varsayılan arka plan rengi, bu modülün arka plan rengini değiştirir.
Arka plan rengi: #0f0f0f
Arka plan rengini işaret edin ve yüzerken başka bir arka plan rengi kullanın. Arka plan rengi: #593Aff
Başlık metni ayarları, UI kitinin yön sayfasına uyacak şekilde başlık metni ayarlarını değiştirerek devam edin. Başlık 4 Yazı Tipi: Muli Başlık 4 Yazı Tipi Ağırlığı: Işık
Başlık 4 Renk Metni: #ffffff Başlık 4 Metin Boyutu: 23px (Masaüstü ve Tablet), 18px (Telefon)
Varsayılan boşluklar bir sonraki özel alan değerleri ekler. Üst dolgu: 50 piksel
Sol dolgu: 30px
Sağ dolgu: 30px
İmleci iyi bir geçiş yapmaya yönlendirirken bu değerleri aralık ve değiştirin.
Alt kenar boşluğu: 50 piksel Üst dolgu: 20px
Dolgu Alt: 20 piksel
Sütun 4’e Metin Modülü #2 ekleyin, Sütun 4’te ihtiyacımız olan ikinci ve son olarak modülün içeriğini ekleyin Açıklama metin modülüdür. Seçilen bazı içerikler girin.
Arka plan rengi bir 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)
Yüksek çizgi metin: 2.2em Temiz bir görünüm ve his yaratmak için mesafe, bu modüle bazı özel rulmanlar ekleyin. Dolgu Alt: 50 piksel
Sol dolgu: 30px Sağ dolgu: 30px
Son fakat en az değil, modülün iki köşesine ’20px’ ekleyin.
Sütun 4’teki tüm modülleri iki kez klonlama ve kalan sütuna yerleştirme Görüntü ve İçeriği Değiştirin Sütun 4’te ihtiyacınız olan tüm modülleri aldıktan sonra, tüm bu modülleri iki kez klonlayabilir ve kalan iki sütun içine kopyalar yerleştirebilirsiniz. . Varyasyon yapmak için içeriği ve görüntüleri değiştirin. İstenen klon satırı (liste öğelerinin sayısına göre) ilk liste öğemizi bitiriyoruz! Artık görüntülemek istediğiniz özellik ve/veya ürün sayısına bağlı olarak bu satırı istediğiniz kadar devam edip klonlamaya devam edebilirsiniz. Her kopya için klon içeriğini değiştirin, içeriği değiştirmeniz gerekir.
Rengi Bul ve Değiştir, liste için liste renk paletini hızlı bir şekilde değiştirmek için Bulgu ve Değiştir Divi özelliklerini de kullanabilirsiniz.
Arka plan rengini değiştirin, imleç, renk paletini değiştirdikten sonra metin modülü numarasının kaydırma arka plan rengini de değiştirdiğinizden emin olun.
Arka plan rengi: #593Aff Son ancak en az değil arka plan görüntülerini değiştirin, görünmesine izin verdiğiniz özelliklere ve/veya ürünlere bağlı olarak listedeki diğer simgeleri de seçebilirsiniz. Bu kullanım durumunun son zihni, Black Friday’i Black Friday müşterileri ve ömür boyu üyelerle ücretsiz baskı ile 6 sayfalık ücretsiz baskıyı paylaştığımız Black Friday teklifimizin bir parçasıdır. Bu günlerde güçlü topluluğumuza katılarak ve üye olarak: % 25 indirim 6 ücretsiz sayfanın tümü Olağanüstü temalarımıza ve eklentilerimize erişim Bonus Ödülü
Fırsatı elde edin ve bugün üye olun! Sonunda burada! Kara Cuma Kara Cuma sadece yılda bir kez geliyor ve bu olduğunda çok özel bir şey yapmak istiyoruz. Bu yıl Black Friday satışları 23 Kasım Cuma günü tam olarak 12:00 UTC-6’da başladı ve kesinlikle kaçırmak istemiyorsunuz! Binlerce ücretsiz ödül, ücretsiz bonus ödüller ve en büyük indirimlerimiz olacak.
Anlaşmayı bitmeden önce alın!
