Renkli bir görüntü ve renkli dalga perspektifi ile çarpıcı olan divi ürün düzeni bölümü
Ürününüzü tanıtmak için bir ürün sayfası tasarlarken, temiz bir arka plan, özlü içerik ve net bir CTA ile birleştirilmiş çarpıcı bir görüntü eklemek daha iyidir. Sayfanızı benzersiz kılmak için, bazı yaratıcı unsurlar eklemek de yardımcı olabilir. Yani, yeni bir ürün düzeni ve bazı ilham verici tasarım ipuçları arıyorsanız, bu yazı sizin için uygundur. Bu öğreticide, birkaç basit tasarım tekniği (ancak güçlü) kullanarak güzel bir ürün düzeni tasarlamak için divi’yi nasıl kullanacağınızı göstereceğim. Bir düzen yaparken, özel bir CSS görüntüsüne sahip herhangi bir görüntüye üç boyutlu bir bakış açısının nasıl ekleneceğini tartışacağım. Sonra içeriğinizi bölmek için soyut çok renkli bir dalga yapmak için bölücüyü nasıl biriktireceğinizi göstereceğim. Ve çift CTA düğmenizi geniş tutmak için kolay bir ipucu bile vereceğim.
Aşağıdaki gizlice göz, bugün yapacağımız bir sinsi bir peek düzeni.
Başlayalım. Renkli Wetube kanallarında soyut bir görüntü ve dalga perspektifine sahip çarpıcı bir divi ürün düzeni tasarlayın, önce yeni bir sayfa için tam geniş bir başlık yapmak ve görsel bir yapımcı uyguluyoruz. Ardından, tam genişlikli bir başlık modülü ile yeni bir tam genişlik parçası ekleyin. Kanopi içeriğini eklemeden önce, tam ve güncellenmiş geniş bölüm ayarlarını açın: gradyan renk arka planı 1 (sol): rgba (23,20,57,0,95) gradyan renk arka planı 2 (23,20,57,0.95) sağda): rgba (136,52,253.0.98) Degradeyi arka planın üzerine yerleştirin. Arka plan gradyanının rengine dikkat edin, biraz opaklık eklenir ve arka plan görüntüsünün üzerine yerleştirilir. Bu, arka plan görüntüsünüz için iyi bir kaplama gradyanı oluşturmanıza olanak tanır.
Ardından arka plan görüntüsünü girin. Arka plan görüntüsü: [Resmi girin] Tasarım sekmesinin altına, sizin tarafınıza bazı özel pedler ekleyin. Pilding Custom: 0px üst, 0px sağ, 80px alt, 0px sol Ardından, kutunun gölgesini -200 piksel dikey konumla beyaza ekleyin. Bu, ürün görüntülerimizin (eklenmemiş) bir sonraki bölüme örtüşmesine izin verecektir. Bu yöntem, bir sonraki bölüme getirmek için görüntümüze negatif bir alt marj eklemekten biraz daha temizdir. Kutu Gölgesi: [Tarama Bkz. Dikey Konum Gölge Kutusu: -200px Renk Gölgesi: #FFFFFF POZİSYONLU: Bu iç görüntü, arka planınızın görsel incelemesinin şimdilik kaybolmasına neden olacak, ancak endişelenmeyin. İçeriğimizi eklediğimizde her şey dengelenecek.
Artık tam gölgelik modülü ayarlarına dönebilir ve aşağıdakileri güncelleyerek başlık içeriğini ekleyebilirsiniz: Başlık: Ürünlerimiz Altyazılar Metin: Nulla Quis Lorem UT Libero Malesada Feugiat. Düğme #1 Metin: ŞİMDİ İNDİR düğmesi #2 Metin: Bir Logo Çizim URL Lisans Alın: [Görüntüyü girin, 100px kez 100px] İpucu: Logo görüntüsünüzün beyaz (veya parlak renkli) olduğundan emin olun çünkü koyu bir arka plan kullanıyoruz. Tasarım sekmesini açın ve “Merkezi” olmak için Metin ve Logo Oryantasyon seçeneğini güncelleyin.
Ardından aşağıdakileri güncelleyin: Renkli Metin: Işık Yazı Tipi Başlık: Poppins Heavy Yazı Tipi Başlık: Light Light Başlık Metin Boyutu: 65px (Masaüstü), 40px (Akıllı Telefon) Yüksek Başlık: 1.5EM Sub -title Yazı Tipi: Altyazıların Poppins Ağırlığı: Normal Metin Boyutu Alt Bitkiler: 20 PX Yüksek Hat Altyazılar: 1.5EM İki düğme için özel bir stil kullanın: evet iki renk arka plan düğmesi: #1E69CB İki düğme genişliği sınır genişliği: 0px iki düğme yarıçapı limit: 50px iki aralık düğmesi: 1px iki yazı tipi düğmesi: Poppins Bir düğme için özel bir stil kullanın: evet bir arka plan renk düğmesi: #75d334 Bir düğme genişliği limiti: 0px bir yarıçap düğmesi sınırı: 50px bir aralık harf düğmesi: 1px bir yazı tipi düğmesi: Poppins Fullwidth başlığının benzersiz özelliklerinden biri, birbirine ek olarak iki düğme (çift CTA) ekleme yeteneğidir. Bu, ücretsiz indirmeler ve premium lisanslar sunan ürünler için mükemmeldir. Önceki başlıktaki çift düğmeyi kullandıysanız, iki düğmenin tam olarak aynı boyutta olmadığını fark edebilirsiniz, çünkü ayarlama düğmesinin genişliği düğmedeki metin sayısına bağlıdır. Metnin genişliği ne olursa olsun düğmeyi eşleştirmek için birkaç özel CSS satırı ekleyebilirsiniz. Özel bir CSS eklemek için devam eden sekmeyi açın ve tek düğme ve iki düğme için aşağıdaki CSS snippet’lerini girin: Genişlik:%100; Maksimum genişlik: 220px; Ayarları kaydedin. Kendi düğmenizin yazı tipine ve boyutuna ayarlamak için maksimum genişliği ayarlamanız gerekebilir. İmleci yönlendirirken yer gerektiren animasyonlu simgeyi dikkate aldığınızdan emin olun. Bu yapay ürün resmine tam geniş bir ürün resmi ekleyin, ürünün kullanıcı arayüzünün (UI) bir ekran görüntüsünü kullanacağım, bu durumda Divi Builder olan. Tam geniş bir resim yapmak için, tam geniş başlığın altına tam geniş bir görüntü modülü ekleyin.
Ardından resminizi yükleyin. Görüntü boyutu yaklaşık 1920px kez 1080px olmalıdır.
Ardından aşağıdaki tasarım ayarlarını güncelleyin. Genişlik:% 35 (masaüstü),% 60 (tablet),% 70 (akıllı telefon) Modül Hizalama: Modülün genişliğini bir yüzde kullanarak ayarlamak, tarayıcının genişliğini ve daha iyi hücresel görünümü ayarlarken daha pürüzsüz bir geçiş oluşturmaya yardımcı olacaktır. Gölge Kutusu: [Ekran yakalamaya bakın] Dikey Konum Gölge Kutusu: 29px Koşu Güç Gölge Kutusu: 72px Güç Gölgesi Yayıyor: -21px Gölge Renk: #27005Sow Bu serin 3D efekti vermek için resmimize perspektif ve rotasyon eklemeye hazırız . Bunu yapmak için, Gelişmiş sekmesini açın ve ana öğe giriş alanına aşağıdaki özel CSS hattını (uyumluluk çapraz tarayıcısına bir satıcı önekiyle) ekleyin. -Webkit-Transform: Perspektif (700 piksel) rotatex (45deg); -Moz-transform: perspektif (700 piksel) rotatex (45deg); -Ms-transform: perspektif (700 piksel) rotatex (45deg); -O-transform: perspektif (700 piksel) rotatex (45deg);
Dönüşüm: Perspektif (700 piksel) rotatex (45deg);
Bu CSS, CSS Transform özelliğini kullanarak resmimizde iki şey yapar. İlk olarak, 700 piksel bir perspektif ekledi. Bu temel olarak sayfayı görüntülerken görüntü ile kullanıcının bakış açısı arasında bir mesafe oluşturur. Şu anda kullanıcıdan mesafe 700 piksel. Daha az sayıda piksel daha fazla resim taşıyacaktır. Daha büyük piksel değeri daha da ileri götürecektir. Ancak, sadece bu perspektifin değeri, görüntüye rotasyon ekleyene kadar istediğimiz etkiyi üretmeyecektir. Dönüşüm özelliği değerinin bir sonraki kısmı budur. Rotatex (45deg) görüntünün x 45 derece ekseninde dönmesini söyler. Perspektif düzenlendiği için, görüntünün artık üç boyutlu bir ekranı var. İstediğiniz görünümü elde etmek için bu ayarla oynamaktan çekinmeyin.
Bir sonraki bölüm için soyut bir çok renkli dalga bölücü yaparak, bölücü ile biraz yaratıcı olacağım. Bilmiyorsanız, her bölüm içerik bölümleri arasında bazı güzel geçişler yapmak için üst ve/veya alt bölücüyü eklemenize izin verir. Bu tasarım için, birbirinin üstünde istiflenmiş dört parça kullanacağım (her biri üst ve alt böceklere sahip). Bu, benzersiz ve renkli soyut dalgalar oluşturmak için bölücülerin farklı renklerle örtüşmesini mümkün kılacaktır. İşin püf noktası, parçanızın içerik ve pedlerden arınmış olmasını sağlamaktır, böylece parçanın 0px yüksekliği vardır. Ardından, üst ve alt böcekleri (bağlı) yansıtmanız ve sayfa boyunca akan bir renk rengi oluşturmak için bunları aynı renkle eşleştirmeniz gerekir. Diğer parçaları ve böcekleri yığıldığınızda, sayfaların her yerinde iç içe geçmiş toplam 3 renk kirişiniz olacaktır. Oldukça havalı. Yapalım. İlk bölücü bölümünü ekleyin Mevcut içeriğin altına yeni bir düzenli bölüm ekleyin, ancak modülü eklemeyin. Ardından bölümdeki satırı silin. Unutmayın, bizim tarafımızdan bir yükseklik istemiyoruz.
Alt bariyeri ekleyerek bölümün tasarım ayarlarını güncelleyin. Bölme: Bölme kuvveti altında: [ekran görüntüsüne bakın] Bölme Rengi: RGBA (45,153,255,0.1) Bölme Yüksekliği: 157 piksel (masaüstü), 75 piksel (tablet ve akıllı telefonlar) Yatay bölücü tekrar: 2x daha sonra bazı özel boşluklar ekleyecektir Bazı kenar boşlukları parçanın üstünde ve sıfır dolgu gerekiyordu. Bu, parçanın yüksekliğini ortadan kaldırır, böylece bölücü birbirinin üstüne düzgün bir şekilde istiflenir. Özel kenar: 230px üst (masaüstü), 115 piksel (tablet ve akıllı telefon) dolgu özel: 0px üst, 0px sağ, 0px alt, 0px gönder Bu noktada bölücünün ikinci kısmını ekledi aynı işlemi tekrarlayacaksınız. Aşağıdaki diğer normal bölümleri ekleyin, ancak modülü eklemeyin. Ardından bölümdeki satırı silin. Üst ve alt bölücüyü ekleyerek bölümün tasarım ayarlarını güncelleyin. Bölücü: Bölü Kuvvetinin Üstü: [Ekran görüntüsü bkz. 0px sağ, 0px sağ, 0px dip, 0px soldan oluşan ilk dalgayı görebilirsiniz.
Bölme: Bölme Korumunun Altında: [Ekran görüntüsüne bakın] Bölme Renk: RGBA (117,211,52.0.08) Bölme Yüksekliği: 181 piksel (masaüstü), 90 piksel (tablet ve akıllı telefonlar) Flip bölücü: Bu yatay ikinci olarak işlev görecektir Bir sonraki bölümde tamamlanacak olan Wave Peak. Bölücünün üçüncü kısmını eklemek aynı işlemi tekrarlamaya devam eder. Aşağıdaki diğer normal bölümleri ekleyin. Bir modül eklemeyin. Ardından bölümdeki satırı silin. Ardından, üst ve alt bölücüyü ekleyerek bölümün tasarım ayarlarını güncelleyin. Bölme: Bölme Kuvvetinin Üstü: [Ekran görüntüsüne bakın] Bölücü Renk: RGBA (117,211,52.0.08) Bölme Yüksekliği: 119px (masaüstü), 60px (tablet ve akıllı telefon) Flip Diverier: yatay dolgu özel: 0px üst, 0px sağ , 0px aşağıda, 0px sol şimdi oluşan ikinci dalgayı görebilirsiniz. Bölme: bölücü kuvveti altında: [ekran görüntüsüne bakın] Bölme renk: RGBA (122.112.251.0.12) Bölücü yüksekliği: 72px (masaüstü), 40px (tablet ve tablet ve Akıllı telefon) Yatay bölücü Tekrar: 2x Flip Böcek: Yatay ve dikey Bu, bir sonraki bölümde tamamlanacak üçüncü dalganın zirvesi olarak işlev görecektir.
Dördüncü bölücünün eklenmesi, modül olmadan bir normal parça daha ekleyin. Ardından bölümdeki satırı silin. Ardından üst bölücüyü ekleyerek bölümün tasarım ayarlarını güncelleyin. Bölme: Bölme Stili Üstü: [Ekran görüntüsü] Bölücü Renk: RGBA (122.112.251.0.12) Bölücü Yüksekliği: 185px (masaüstü), 90px (tablet ve akıllı telefon) Yatay bölücü Tekrar: 2x Flip Sertifikası: yatay ve dikey Marj Özel: 500 piksel alt (masaüstü), 250px alt (tablet ve akıllı telefon) dolgu özel: 0px üst, 0px sağ, 0px alt, 0px Sol şimdi üçüncü dalga tamamlandı. 500 piksel alt marj, bölücü bölümü altındaki bir sonraki bölümünüzden önce gerekli alanlardan bazılarını yapmaktır.
Sonuçlar aşağıdadır.
Yazılım Pazarlama Pazarlama Sayfasının Düzeni İçe Aktarımı Tasarımı tamamlamak için, Ayarlar menünüzü girerek yazılım pazarlama sayfasının düzenini içe aktarın, kütüphaneden yük düğmesini tıklayın ve düzeni seçin. Bu, tasarımımızı tamamlamak için farklı öğeler kullanabilmemiz için mevcut içeriğinizin altındaki düzeni içerecektir. Renk ve yazı tipi de uygundur. Yeni düzen içe geçtikten sonra, düzenin ilk kısmını ve düzenin son dört kısmını silin. Bu sadece bu öğretici için tercihim. Elbette kendi ürün sayfanız için istediğiniz öğeleri kullanabilirsiniz. Bu şimdi sayfanızın görüntülenmesidir. Şimdi “Özellik” bölüm alt kısmını tam geniş parçanın hemen altına ve bölücünün üzerine sürükleyin. Büyük grafik çizimler içeren ilk bölümde amiral gemisi bölüm resminize perspektif ve rotasyon ekleyin, resimleri görüntüleyen resim modüllerini silin ve ürün arayüzünüzü görüntüleyen görüntülerle yeni görüntü modülleri ekleyin. Ardından, takip sekmesini açın ve ana öğe giriş alanına aşağıdaki özel CSS ekleyin. -Webkit-Transform: Perspektif (1000 piksel) rotatey (-45deg); -Moz-transform: perspektif (1000 piksel) rotatey (-45deg); -Ms-transform: perspektif (1000 piksel) rotatey (-45deg); -O-transform: perspektif (1000 piksel) rotatey (-45deg); Dönüşüm: Perspektif (1000 piksel) rotatey (-45deg); Bu CSS, başlıkta ilk kullandığımıza çok benziyor, ancak üç küçük fark var. Daha fazla mesafe oluşturmak için perspektif 1000 pikseldir. Görüntü şimdi y ekseni üzerinde dönüyor ve ben y ekseni üzerindeki saat yönünde görüntüsü döndürmek için 45 derecelik bir negatif değer kullanıyorum. Bu, doğru sütundaki görüntü için iyi çalışıyor. Önemli not: Eklemeden önce görüntü modülünü silmelisiniz. Yeni bir görüntü modülü, çünkü önceki modülde animasyon var. Bu animasyon, kullandığımız CSS koduna aykırıdır. Dolayısıyla CSS eklerseniz ve hiçbir şey değişmediyse, bunun nedeni animasyonlu bir etkiniz olabilir. Görüntünün yerindeki perspektifi ile tasarım sekmesini açın ve yeni bir konumda çalışan kutunun bir gölgesini aşağıdaki gibi ekleyin: Gölge Kutusu: [Ekran görüntülerine bakın] Yatay konum Gölge Kutusu: 39px bulanık Güç Gölgesi: 56px mukavemet Gölge kutularının dağılımı: -17px Renk Gölge Kutusu: RGBA (39,0,94,0.19) Hücresel görünüm için, görüntünün boyutunu orta seviye ile tablette% 60’a ayarlamak istersiniz. Şimdi aynı şeyi illüstrasyonlar içeren bir sonraki bölüm için yapacağız. Resim modülünü silin ve resim seçeneğinizle yeni bir modül ekleyin. Ardından, ana öğe giriş alanına aşağıdaki özel CSS ekleyin. -Webkit-Transform: Perspektif (1000 piksel) rotatey (45deg); -moz-transform: perspektif (1000 piksel) rotatey (45deg);-Ms-transform: perspektif (1000 piksel) rotatey (45deg);
-O-transform: perspektif (1000 piksel) rotatey (45deg);
Dönüşüm: Perspektif (1000 piksel) rotatey (45deg);
Buradaki tek fark rotasyon. Bu görüntü 45 derece olumlu dönecek şekilde ayarlandığından, görüntü artık saat yönünün tersine dönüyor. Bu, sol sütundaki görüntü için iyi çalışır. Son olarak, tasarım sekmesini açın ve aşağıdaki gölge ayarlarını ekleyin: Gölge Kutusu: [Ekran görüntüsüne bakın] Yatay konum Gölge Kutusu: -39px Bulanık Güç Gölge Kutusu: Gölge Kutularının Dağıtımının Mukavemeti 56px : -17px kutu gölgesi rengi: RGBA (39,0,94,0.19)
Hücresel görünüm için, görüntünün boyutunu orta seviye ile tablette% 60’a ayarlamak istersiniz. İşte burada! Sonuç sonucuna bakalım. Hücresel Yol boyunca yapılan hücresel ayarlarla duyarlı, düzeniniz tabletlerde ve akıllı telefonlarda iyi görünecektir. Önerdiğim tek değişiklik, sayfa ayarlarına aşağıdaki özel CSS eklemek veya temanızın ayarlanmasını eklemektir: @media (Max-Width: 757px) { .et_pb_button_two.et_pb_button {
Marj-sol: 0px! Önemli;
}
}
Bu, iki düğme arasındaki marjı ortadan kaldırır, böylece cep telefonuna istiflendiğinde ikisi mükemmel paraleldir. Tablet ve akıllı telefonda aşağıdaki görünüm.
