Görüntü Perspektifi ve Renkli Soyut Dalgalar ile Çarpıcı Bir Divi Ürün Düzeni Tasarlayın

Ürününüzü tanıtmak için bir ürün sayfası tasarlarken, temiz arka planlar, özlü içerik ve net CTA'lar ile birlikte çarpıcı resimler eklemek yardımcı olur. Sayfanızı benzersiz kılmak için birkaç yaratıcı öğe eklemek de yardımcı olabilir. Yani, yeni bir ürün düzeni ve birkaç ilham verici tasarım ipucu arıyorsanız, bu yazı tam size göre.

Bu öğreticide, birkaç basit (ancak güçlü) tasarım tekniğini kullanarak güzel bir ürün düzeni tasarlamak için Divi'yi nasıl kullanacağınızı göstereceğim. Düzeni oluştururken, herhangi bir görüntüye nasıl üç boyutlu perspektif ekleneceğini kısa bir özel CSS pasajı ile ele alacağım. Ardından, içeriğinizi bölmek için soyut çok renkli bir dalga oluşturmak için bölüm ayırıcıları nasıl yığacağınızı göstereceğim. Ayrıca, çift CTA düğmelerinizi aynı genişlikte tutmak için kolay bir ipucu bile vereceğim.

Gizlice Bakış

İşte bugün oluşturacağımız düzene bir göz atın.

Bu Eğitim için ihtiyacınız olan şey

Bu eğitim için ihtiyacınız olan tek tasarım aracı Divi'dir, bu nedenle Divi temanızın kurulu ve etkin olduğundan emin olun. Ardından, benzersiz bir kahraman bölümü ve dalga bölücü oluşturmak için Görsel Oluşturucu'yu kullanacağız. Düzen tasarımını tamamlamak için Divi oluşturucu içinden Yazılım Pazarlama Açılış sayfası düzeninden öğeleri içe aktarmanız gerekir. Bir modülün gelişmiş sekmesine kolayca yerleştirilebilecek bir veya iki özel CSS parçacığı eklemeniz gerekecek.

Başlayalım.

Görüntü Perspektifi ve Renkli Soyut Dalgalar ile Çarpıcı Bir Divi Ürün Düzeni Tasarlayın

Youtube Kanalımıza Abone Olun

Tam Genişlik Başlığı Oluşturma

Tam genişlikte başlık oluşturmak için önce yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Ardından, tam genişlikte başlık modülüyle yeni bir tam genişlik bölümü ekleyin.

Başlık içeriğini eklemeden önce tam genişlik bölümü ayarlarına gidin ve aşağıdakileri güncelleyin:

Arka Plan Degrade Rengi 1 (sol): rgba(23,20,57,0.95)
Arka Plan Gradyan Rengi 2 (sağ): rgba(136,52,253,0.98)
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Arka plan gradyan renklerine çok hafif bir opaklık eklendiğine ve arka plan görüntüsünün üzerine yerleştirildiğine dikkat edin. Bu, arka plan resminiz için güzel bir degrade kaplaması oluşturmanıza olanak tanır.

Ardından arka plan resmini girin.

Arka Plan Resmi: [resim ekle]

Tasarım sekmesinin altında, bölümünüze biraz özel dolgu ekleyin.

Özel Dolgu: 0px Üst, 0px Sağ, 80px Alt, 0px Sol

Ardından -200px dikey konuma sahip beyaz bir iç kutu gölgesi ekleyin. Bu, ürün resmimizin (henüz eklenmemiş) bir sonraki bölümde örtüşüyor gibi görünmesini sağlayacaktır. Bu yöntem, bir sonraki bölüme getirmek için görüntümüze negatif alt kenar boşluğu eklemekten biraz daha temizdir.

Kutu Gölgesi: [ekran görüntüsüne bakın] Kutu Gölgesi Dikey Konumu: -200px
Gölge Rengi: #ffffff
Kutu Gölge Konumu: İç Gölge

Bu, arka planın görsel önizlemesinin şimdilik kaybolmasına neden olur, ancak endişelenmeyin. İçeriğimizi eklediğimizde her şey dengelenecek.

Artık tam genişlikli başlık modülü ayarlarınıza geri dönebilir ve aşağıdakileri güncelleyerek başlık içeriğini ekleyebilirsiniz:

Başlık: Ürünümüz
Alt Başlık Metni: Nulla quis lorem ut libero mensuada feugiat.
Düğme #1 Metni: Şimdi İndirin
Düğme #2 Metni: Lisans Satın Alın
Logo Resmi URL'si: [resim ekleyin, 100 piksele 100 piksel]

İpucu: Koyu bir arka plan kullandığımız için logo resminizin beyaz (veya açık renkli) olduğundan emin olun.

Tasarım sekmesine gidin ve Metin ve Logo Yönlendirme seçeneğini “ortalanmış” olarak güncelleyin.

Ardından aşağıdakileri güncelleyin:

Metin Rengi: Açık
Başlık Yazı Tipi: Poppins
Başlık Yazı Tipi Ağırlığı: Hafif
Başlık Metin Boyutu : 65px (masaüstü), 40px (akıllı telefon)
Başlık Satırı Yüksekliği: 1.5em

Alt Başlık Yazı Tipi: Poppins
Alt Başlık Yazı Tipi Ağırlığı: Normal
Alt Başlık Metin Boyutu: 20px
Alt Başlık Çizgi Yüksekliği: 1.5em

İkinci Düğme için Özel Stilleri Kullan: EVET
Düğme İki Arka Plan Rengi: #1e69cb
Düğme İki Kenar Genişliği: 0px
Düğme İki Kenar Yarıçapı: 50 piksel
Düğme İki Harf Aralığı: 1px
Düğme İki Yazı Tipi: Poppins

Düğme Bir için Özel Stilleri Kullan: EVET
Düğme Bir Arka Plan Rengi: #75d334
Düğme Bir Kenar Genişliği: 0px
Düğme Bir Kenar Yarıçapı: 50 piksel
Düğme Bir Harf Aralığı: 1px
Düğme Bir Yazı Tipi: Poppins

Tam genişlikli başlığın benzersiz özelliklerinden biri, yan yana iki düğme (çift CTA) ekleyebilme yeteneğidir. Bu, hem ücretsiz indirme hem de premium lisans sunan ürünler için mükemmeldir.

Başlığınızdaki ikili düğmeyi daha önce kullandıysanız, düğme genişliği düğmedeki metin miktarına bağlı olarak ayarlandığından iki düğmenin boyut olarak tam olarak eşleşmediğinin farkında olabilirsiniz. Metin miktarı ne olursa olsun düğmelerin genişlik açısından eşleşmesini sağlamak için birkaç satır özel CSS ekleyebilirsiniz.

Özel CSS'yi eklemek için gelişmiş sekmesine gidin ve hem Birinci Düğme hem de İkinci Düğme için giriş alanına aşağıdaki CSS parçacığını girin:

width: 100%;
max-width: 220px;

Ayarları kaydet.

Kendi düğme yazı tipinize ve boyutunuza göre ayarlamak için maksimum genişliği ayarlamanız gerekebilir. Fareyle üzerine gelindiğinde odaya ihtiyaç duyacak animasyonlu simgeyi hesaba kattığınızdan emin olun.

Tam genişlikte Ürün Resmini Ekleme

Bu sahte ürün resmi için, bu durumda Divi Builder olan ürünün kullanıcı arayüzünün (UI) ekran görüntüsünü kullanacağım. Tam genişlikte görüntü oluşturmak için tam genişlikte başlığın altına tam genişlikte bir görüntü modülü ekleyin.

Ardından resminizi yükleyin. Resmin boyutu 1920 piksele 1080 piksel civarında 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 Hizalaması: merkez

Yüzdeleri kullanarak modülün genişliğini ayarlamak, tarayıcı genişliklerini ve daha iyi mobil ekranları ayarlarken daha yumuşak bir geçiş oluşturmaya yardımcı olacaktır.

Kutu Gölgesi: [ekran görüntüsüne bakın] Kutu Gölge Dikey Konumu: 29px
Kutu Gölge Bulanıklığı Gücü: 72px
Kutu Gölge Yayılma Gücü: -21px
Gölge Rengi: #27005e

Şimdi, o harika 3d efektini vermek için görüntümüze perspektifimizi ve rotasyonumuzu eklemeye hazırız. Bunu yapmak için, gelişmiş sekmeye gidin ve aşağıdaki özel CSS satırını (tarayıcılar arası uyumluluk için satıcı önekleriyle birlikte) Ana Öğe giriş alanına ekleyin.

-webkit-transform: perspective(700px) rotateX(45deg);
-moz-transform: perspective(700px) rotateX(45deg);
-ms-transform: perspective(700px) rotateX(45deg);
-o-transform: perspective(700px) rotateX(45deg);
transform: perspective(700px) rotateX(45deg);

Bu css, Transform CSS Özelliğini kullanarak resmimize iki şey yapıyor. İlk olarak, 700 piksellik bir perspektif ekler. Bu, temel olarak, sayfayı görüntülerken görüntü ile kullanıcının bakış açısı arasındaki mesafeyi oluşturmaktır. Şu anda kullanıcıdan 700 piksel uzakta oturuyor. Daha küçük piksel miktarı, görüntüyü daha yakına getirecektir. Daha büyük bir piksel değeri onu daha uzağa götürür. Ancak bu perspektif değeri tek başına görüntüye döndürme ekleyene kadar istediğimiz efekti üretmeyecektir. Bu, transform özelliği değerinin sonraki kısmıdır. döndürmeX(45deg), görüntünün X ekseninde 45 derece dönmesini söyler. Ve perspektif ayarlandığından, görüntü artık üç boyutlu bir görünüme sahip. İstediğiniz görünümü elde etmek için bu ayarlarla oynamaktan çekinmeyin.

Soyut Çok Renkli Dalga Bölücüyü Oluşturma

Bu sonraki bölüm için, bölüm ayırıcılar konusunda biraz yaratıcı olacağım. Henüz bilmiyorsanız, her bölüm, içerik bölümleri arasında güzel geçişler oluşturmak için bir üst ve/veya alt ayırıcı eklemenize olanak tanır. Bu tasarım için üst üste yığılmış dört bölüm kullanacağım (her biri üst ve alt bölücülerle). Bu, benzersiz ve renkli bir soyut dalga oluşturmak için ayırıcıları farklı renklerle üst üste getirmeyi mümkün kılacaktır. İşin püf noktası, bölümün 0 piksel yüksekliğe sahip olması için bölümlerinizi içerikten ve dolgudan arındırmaktır. Ardından, sayfa boyunca akan tek bir renk ışını oluşturmak için üst ve alt ayırıcıları (bağlı olanlar) yansıtmanız ve bunları aynı renkle eşleştirmeniz gerekir. Diğer bölümleri ve bölücüleri istiflediğinizde, sayfa boyunca iç içe geçen toplam 3 renk ışınına sahip olacaksınız. Oldukça havalı.

Hadi hadi bakalım.

Bölücülerin ilk Bölümünü Ekleme

Mevcut içeriğinizin altına yeni bir normal bölüm ekleyin, ancak modül eklemeyin. Ardından, bölüm içindeki satırı silin. Unutma, bölümlerimizde yükseklik istemiyoruz.

Bir alt ayırıcı ekleyerek bölüm tasarım ayarlarını güncelleyin.

Bölücü: Alt
Bölücü Stili: [ekran görüntüsüne bakın] Bölücü Rengi: rgba(45,153,255,0.1)
Bölücü Yüksekliği: 157px (masaüstü), 75px (tablet ve akıllı telefon)
Bölücü Yatay Tekrar: 2x

Ardından, bölümün üzerinde gerekli bir miktar kenar boşluğunu ve sıfır dolguyu oluşturacak bazı özel boşluklar ekleyin. Bu, bölüm yüksekliğinden kurtulur, böylece bölücüler sorunsuz bir şekilde birbirinin üzerine yığılır.

Özel Kenar Boşluğu: 230 piksel Üst (masaüstü), 115 piksel (tablet ve akıllı telefon)
Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

Bölücülerin İkinci Bölümünü Ekleme

Bu noktada aynı işlemi tekrar edeceksiniz. Aşağıya başka bir normal bölüm ekleyin, ancak modül eklemeyin. Ardından, bölüm içindeki satırı silin.

Bir üst ve alt ayırıcı ekleyerek bölüm tasarım ayarlarını güncelleyin.

Bölücü: Üst
Bölücü Stili: [ekran görüntüsüne bakın] Bölücü Rengi: rgba(45,153,255,0.1)
Bölücü Yüksekliği: 127px (masaüstü), 60px (tablet ve akıllı telefon)
Bölücü Yatay Tekrar: 2x

Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

İlk dalganın şekillendiğini zaten görebilirsiniz.

Bölücü: Alt
Bölücü Stili: [ekran görüntüsüne bakın] Bölücü Rengi: rgba(117,211,52,0,08)
Bölücü Yüksekliği: 181px (masaüstü), 90px (tablet ve akıllı telefon)
Bölücü Çevirme: Yatay

Bu, bir sonraki bölümde tamamlanacak olan ikinci dalganın zirvesi olarak görev yapacak.

Bölücülerin Üçüncü Bölümünü Ekleme

Aynı işlemi tekrarlamaya devam edin. Aşağıya başka bir normal bölüm ekleyin. Modül eklemeyin. Ardından, bölüm içindeki satırı silin.

Ardından, bir üst ve alt ayırıcı ekleyerek bölüm tasarım ayarlarını güncelleyin.

Bölücü: Üst
Bölücü Stili: [ekran görüntüsüne bakın] Bölücü Rengi: rgba(117,211,52,0,08)
Bölücü Yüksekliği: 119px (masaüstü), 60px (tablet ve akıllı telefon)
Bölücü Çevirme: Yatay

Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

Artık ikinci dalganın şekillendiğini görebilirsiniz.

Bölücü: Alt
Bölücü Stili: [ekran görüntüsüne bakın] Bölücü Rengi: rgba(122,112,251,0.12)
Bölücü Yüksekliği: 72px (Masaüstü), 40px (tablet ve akıllı telefon)
Bölücü Yatay Tekrar: 2x
Bölücü Çevirme: Yatay ve Dikey

Bu, bir sonraki bölümde tamamlanacak olan üçüncü dalganın zirvesi olarak hizmet edecek.

Dördüncü Bölüm Bölücüyü Ekleme

Modül içermeyen bir normal bölüm daha ekleyin. Ardından, bölüm içindeki satırı silin.

Ardından, bir üst ayırıcı ekleyerek bölüm tasarım ayarlarını güncelleyin.

Bölücü: Üst
Bölücü Stili: [ekran görüntüsüne bakın] Bölücü Rengi: rgba(122,112,251,0.12)
Bölücü Yüksekliği: 185px (Masaüstü), 90px (tablet ve akıllı telefon)
Bölücü Yatay Tekrar: 2x
Bölücü Çevirme: Yatay ve Dikey

Özel Kenar Boşluğu: 500 piksel alt (Masaüstü), 250 piksel alt (tablet ve akıllı telefon)
Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

Şimdi üçüncü dalga tamamlandı. 500px alt kenar boşluğu, bölüm bölücülerin altındaki bir sonraki bölümünüzden önce gerekli bir miktar boşluk yaratmaktır.

İşte nihai sonuç.

Yazılım Pazarlama Açılış Sayfası Düzenini İçe Aktarın

Tasarımı tamamlamak için, ayarlar menünüze gidip Kitaplıktan Yükle düğmesini tıklatarak ve düzeni seçerek Yazılım Pazarlama Açılış Sayfası düzenini içe aktarın. Bu, tasarımımızı tamamlamak için farklı öğeleri kullanabilmemiz için düzeni mevcut içeriğinizin altına yükleyecektir. Renkler ve yazı tipleri de oldukça uyumlu.

Yeni düzen içe aktarıldığında, düzendeki ilk bölümü ve düzenin son dört bölümünü silin. Bu sadece bu eğitim için tercihim. Elbette kendi ürün sayfanız için istediğiniz öğeleri kullanabilirsiniz.

İşte sayfanızın şimdi nasıl görünmesi gerektiği.

Şimdi alttaki "Özellikler" bölümünü tam genişlik bölümünün hemen altına ve bölücülerin üzerine sürükleyin.

Öne Çıkan Bölüm Resimlerinize Perspektif ve Döndürme Ekleme

Büyük grafik resmi içeren ilk bölümde, resmi gösteren resim modülünü silin ve ürün arayüzünüzü gösteren bir resim içeren yeni bir resim modülü ekleyin.

Ardından gelişmiş sekmeye gidin ve aşağıdaki Özel CSS'yi Ana Öğe giriş alanına ekleyin.

-webkit-transform: perspective(1000px) rotateY(-45deg);
-moz-transform: perspective(1000px) rotateY(-45deg);
-ms-transform: perspective(1000px) rotateY(-45deg);
-o-transform: perspective(1000px) rotateY(-45deg);
transform: perspective(1000px) rotateY(-45deg);

Bu CSS, başlıkta kullandığımız ilk CSS'ye çok benziyor, ancak üç küçük fark var. Daha fazla mesafe oluşturmak için perspektif 1000 pikseldir. Görüntü şimdi Y ekseninde dönüyor ve görüntüyü Y ekseninde saat yönünde döndürmek için negatif 45 derece değerini kullandım. Bu, sağ sütundaki resimler için iyi çalışır.

ÖNEMLİ NOT: Bir önceki modülde animasyon olduğundan yeni resim modülünü eklemeden önce resim modülünü silmeniz önemlidir. Bu animasyon, kullandığımız CSS koduyla çakışıyor. Dolayısıyla, CSS'yi eklediyseniz ve hiçbir şey değişmediyse, bunun nedeni muhtemelen yerinde bir animasyon efektine sahip olmanızdır.

Görüntü perspektifi yerindeyken, tasarım sekmesine gidin ve görüntünün yeni konumuyla aşağıdaki gibi çalışan bir kutu gölgesi ekleyin:

Kutu Gölgesi: [ekran görüntüsüne bakın] Kutu Gölgesi Yatay Konum: 39px
Kutu Gölge Bulanıklığı Gücü: 56px
Kutu Gölge Yayılma Gücü: -17px
Kutu Gölge Rengi: rgba(39,0,94,0.19)

Mobil görüntüleme için, ortalanmış bir hizalama ile görüntünün boyutunu tablette %60'a ayarlamak isteyeceksiniz.

Şimdi aynısını illüstrasyon içeren bir sonraki bölüm için yapacağız. Görüntü modülünü silin ve seçtiğiniz görüntüyle yeni bir tane ekleyin. Ardından, Ana Öğe giriş alanına aşağıdaki Özel CSS'yi ekleyin.

-webkit-transform: perspective(1000px) rotateY(45deg);
-moz-transform: perspective(1000px) rotateY(45deg);
-ms-transform: perspective(1000px) rotateY(45deg);
-o-transform: perspective(1000px) rotateY(45deg);
transform: perspective(1000px) rotateY(45deg);

Buradaki tek fark rotasyondur. Bu görüntü pozitif 45 derece döndürülecek şekilde ayarlandığından, görüntü artık saat yönünün tersine dönüyor. Bu, sol sütundaki resimler için iyi çalışır.

Son olarak, tasarım sekmesine gidin ve aşağıdaki kutu gölge ayarlarını ekleyin:

Kutu Gölgesi: [ekran görüntüsüne bakın] Kutu Gölgesi Yatay Konumu: -39px
Kutu Gölge Bulanıklığı Gücü: 56px
Kutu Gölge Yayılma Gücü: -17px
Kutu Gölge Rengi: rgba(39,0,94,0.19)

Mobil görüntüleme için, ortalanmış bir hizalama ile görüntünün boyutunu tablette %60'a ayarlamak isteyeceksiniz.

Bu kadar! Nihai sonucu kontrol edelim.

Mobil Duyarlı

Yol boyunca yapılan mobil ayarlamalar ile düzeniniz tablet ve akıllı telefonda harika görünecek.

Önereceğim tek değişiklik, Sayfa Ayarlarınıza veya Tema Özelleştiricinize aşağıdaki Özel CSS'yi eklemektir:

@media (max-width: 757px) {
.et_pb_button_two.et_pb_button {
  margin-left: 0px !important;
  } 
}

Bu, iki düğme arasındaki boşluğu ortadan kaldırır, böylece mobil cihazlarda istiflendiğinde mükemmel şekilde hizalanırlar.

İşte tablet ve akıllı telefonda nasıl göründüğü.

Son düşünceler

Dönüştürme özelliği değerinin nasıl çalıştığını ve bu CSS parçacığını nereye ekleyeceğinizi öğrendikten sonra, resimlerinize perspektif ve döndürme eklemek gerçekten çok kolay. Ve etkisi oldukça etkileyici. Bu görüntüler gerçekten “öne çıkıyor”. Elbette bu tasarım ürün görselleriyle sınırlı değil. Dilediğiniz sayfada istediğiniz görsele perspektif ekleyebilirsiniz.

Soyut dalga tasarımı herkes için olmayacak. Anladım. Ancak, bölüm bölücüleri birden çok renkle istifleme yöntemini kullanarak yapabileceğiniz tüm farklı tasarımları düşünün. Pek çok ayırıcı stil, yükseklik ve renkle, günün geri kalanını eğlence için yaratarak geçirebilirsiniz. Bu yığılmış bölücüler ayrıca belirli içerikler için benzersiz bir arka plan görevi görür.

Her neyse, umarım bu tasarım tekniklerinden bazılarını kendi sitenize eklemek için ilham alırsınız ve her zaman olduğu gibi yorumlarda sizden haber almayı dört gözle bekliyorum.

Şerefe!