Arka Plan Görüntüleriyle Eşsiz Bir Üst üste Binen Efekt Nasıl Oluşturulur

Bir web sitesi tasarlarken bazen doğru yaratıcılık dengesini bulmak zordur. Tasarımınızın çok “üstün” olmasını istemiyorsunuz ama aynı zamanda izleyicilerinizi de bunaltmak istemiyorsunuz. Tasarımınıza ince ama yaratıcı bir yön eklemenin harika bir yolu, görüntü örtüşme efekti (bildiğim yaratıcı bir isim) dediğim şeydir.

Bu örtüşme efekti, sayfadaki başka bir öğeyi, örneğin bir kağıdı duvara tutan bir çıkartma veya bir zarfı mühürlemek gibi üst üste bindirirken görüntü simgelerinin yükseltilmiş gibi görünmesini sağlar. İşin püf noktası, arka plan görüntülerini farklı katmanlara (bölümler, satırlar ve modüller gibi) yerleştirip bir kutu gölgesinin görüntüyü ikiye bölmesine ve merkezde yükseltilmiş gibi görünmesine izin vermektir.

Bu tasarım, tanıtıcı resim simgeleri için gerçekten iyi çalışır ve ayrıca metin modülünün yanına bir resim eklemek için de çalışır.

Başlayalım.

Bu Eğitim İçin İhtiyacınız Olan Şeyler

Bu eğitim için aşağıdakilere ihtiyacınız olacak:

• Divi Teması (yüklü ve aktif)
• Yazılım Pazarlama Özellikleri Sayfa Düzeni yeni bir sayfaya yüklendi
• Görüntüleri kırpmak için basit bir fotoğraf düzenleyici (Önizleme gibi)

Gizlice Bakış

İşte bu eğitimde inşa edeceğimiz tasarıma bir göz atalım.

Yeni Bir Sayfa Oluşturun ve Düzeni Yükleyin

Bu tasarım için, işleri ilerletmek için Yazılım Pazarlama Özellikleri Sayfası düzenini kullanacağım. Devam edin ve yeni bir sayfa oluşturun ve Visual Builder'ı kullanarak mizanpajı sayfaya yükleyin.

Görüntü Simgelerinizi Kırpın

Düzeni özelleştirmeye geçmeden önce, arka plan görüntüsü olarak kullanabilmemiz için görüntü simgelerini kırpmamız gerekir.

Sayfanın canlı sürümünü görüntüleyerek ve görüntü simgelerinden birini masaüstünüze sürükleyerek mizanpajdaki simgelerden birini kolayca alabilirsiniz. Ardından görüntüyü Önizleme'de (Mac kullanıyorsanız) veya herhangi bir görüntü düzenleme yazılımında açın. Bu düzendeki simgeler 128 piksele 128 piksel olduğundan, görüntüyü sağ tarafta tam olarak 64 pikselde kırparak görüntüyü yarıya indirmeniz gerekecektir.

Bu, görüntü simgesinin sağ yarısını oluşturacaktır.

Görüntü simgesinin sol yarısını kırpmak için görüntüyü kaydedin ve orijinal dosyayı yeniden açın.

Son olarak, görüntü simgesinin alt yarısını kırpın.

Tasarımınız boyunca farklı görseller kullanacaksanız, onları da kırpmanız gerekecektir.

Artık tasarımın üstesinden gelmek için ihtiyacınız olan şeye sahipsiniz.

Çakışan Bulanık Görüntü Simgeleri Oluşturun

Bölüme Arka Plan Gradyanı Ekle

Düzenin ikinci bölümünde, ayarları degrade bir arka plan içerecek şekilde güncelleyin.

Arka Plan Gradyanı Sol Renk: #f8f8f8
Arka Plan Gradyanı Sağ Renk: #efeffc
Gradyan Yönü: 90deg

Sütunlara Arka Plan Resimleri Ekleme

Çakışan efekti oluşturmak için, her bir tanıtım yazısı için üç sütunun her birinde arka plan görüntüsü olarak görüntü simgesinin tam sürümünün olması gerekir. Her sütun için aşağıdaki ayarlarla bir arka plan resmi ekleyin:

Arka Plan Resmi Boyutu: Gerçek Boyut (bu önemlidir)
Arka Plan Resmi Konumu: Üst Merkez
Arka Plan Resmi Tekrarı: Tekrar Yok

Bir sütuna eklenen bir arka planınız varsa, arka plan görüntüsünü kopyalayabilir ve diğer iki sütuna yapıştırabilirsiniz.

Blurb Modüllerini Özelleştirin

Şu anda arka plan resimlerini gerçekten göremiyorsunuz çünkü tanıtım yazısı üst üste biniyor ama bu düzeltilecek.

İlk tanıtım yazısı için tanıtım yazısı modülü ayarlarını açın ve tanıtım yazısı simgesi olarak resim simgemizin alt yarısını ekleyin.

Ardından #ffffff arka plan rengini de ekleyin.

Şimdi tanıtıcı tasarım ayarlarını aşağıdaki gibi güncelleyin:

Görüntü Yuvarlatılmış Köşeler: 0px
Resim Kenarlığı genişliği: 0px

Boşluk için, sütun arka plan görüntüsünü ortaya çıkarmak için tanıtım yazımıza tam olarak 64 piksel üst kenar boşluğu eklememiz gerekiyor. Bu, simgenin tanıtım yazısının üst kısmından yarıya kesilmesini sağlayacaktır. Ayrıca metnimiz için biraz dolguya ihtiyacımız var.

Özel Kenar Boşluğu: 64 piksel Üst
Özel Dolgu: %8 Alt, %8 Sol, %8 Sağ

Ardından, tanıtım yazısına bir kutu gölgesi ekleyin. Bu örtüşen efektin benzersiz görünmesini sağlamanın anahtarı budur.

Şimdi, sıradaki diğer iki tanıtıcı metni değiştirmek için modülü kopyalayıp yapıştırın ve aşağıdaki eski tanıtıcı metinlerin bulunduğu satırı silin.

İşte satırın nihai sonucu.

Metin Modüllerinin Kenarlarında Örtüşen Görüntü Simgeleri Oluşturun

Mizanpajımızın bir sonraki bölümü için, metin modülümüzün sağ sütundaki yanına aynı türde görüntü örtüşme efekti ekleyeceğiz.

Modüllerin yanlarında üst üste binme efekti oluşturmak için arka plan resimleri eklemek, mobil cihazları da hesaba katmamız gerektiğinden biraz daha zor. Bu nedenle, görüntüyü akıllı telefonlarda da gösterebilmeniz için yaklaşık 128 piksel genişliğinde görüntüler kullanmanızı öneririm.

Bu tasarımın püf noktası, biri bölümün ortasında ve diğeri sütun 2'nin sol ortasında olmak üzere birden fazla arka plan görüntüsüne sahip olmaktır.

Bölüme Arka Plan Resmi Simgesi Ekle

İlk olarak, önceki bölümdeki bölüm stillerini kopyalayın ve eşleşen arka plan gradyanlarına sahip olabilmemiz için bunları doğrudan aşağıdaki bölüme yapıştırın. Ardından resminizi aşağıdaki ayarlarla bölüme ekleyin:

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

Sütun 2'ye Arka Plan Resmi Simgesi Ekle

Bölüm arka plan resmimiz ortalandığından mobilde metin modülümüzün solunda görünmeyecektir. Bu yüzden 2. sütunun soluna başka bir arka plan resmi eklememiz gerekiyor. Bu şekilde, modülün solundaki arka plan resmini ortaya çıkarmak için mobilde aralığı ayarlayabiliriz.

Devam edin ve bölümdeki arka plan resmini kopyalayın ve 2. sütunun arka planına yapıştırın. Ardından 2. sütunun arka plan resmi konumunu Orta Sol olarak güncelleyin.

Satır Ayarlarını Özelleştir

Arka plan resmi için daha fazla yerimiz olması için satırın sonunda mobilde %100 genişliğe yayılmasını isteyeceğiz. Aşağıdaki Satır Ayarlarını güncelleyin:

Özel Genişlik Kullan: EVET
Birim: %
Özel Genişlik: %100
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1

Şimdi mobil için ayarlamanız gereken bazı dolgu sihirleri var.

Özel Dolgu (masaüstü): %10 sol, %10 Sağ
Özel Dolgu (tablet): %5 sol, %5 Sağ
Özel Dolgu (akıllı telefon): %0 sol, %0 Sağ

Sütun 2 Özel Dolgu (tablet): 64 piksel sol, 64 piksel Sağ
Sütun 2 Özel Dolgu (akıllı telefon): 64 piksel sol, 0 piksel Sağ

2. sütunun mobil cihazlarda 64 piksellik bir sol dolguya sahip olduğuna dikkat edin. Bu, modülün solundaki arka plan görüntüsünün tam olarak yarısını göstermek içindir.

Ayarları kaydet.

Şimdi sağ sütundaki metin modülünün altındaki resmi silin. Arka plan resimleriniz henüz hizalanmadı, ancak resim ve metin modülümüzü özelleştirdiğimizde bu düzeltilecek. İşin püf noktası, sağdaki metin modülünüzün her zaman sol sütundaki görüntüden daha yüksek olduğundan emin olmaktır. Bu, arka plan resimlerini mükemmel bir şekilde hizalı tutacaktır.

Görüntü Modülünü Küçült

Arka plan görüntüsüne yer bırakmak için sol sütundaki görüntü modülünü biraz küçültelim. Aşağıdaki ayarları güncelleyin:

Genişlik: %75 (masaüstü ve tablette)
Modül Hizalaması: Merkez

Metin Modülüne Arka Plan ve Aralık Ekleme

Ardından, metin modülümüze bir arka plan rengi eklememiz gerekiyor.

Arka Plan Rengi: #ffffff

Arka plan resmimiz için resmimizin sağ yarısını kullanmamız ve ardından sola ortalandığından emin olmamız gerekiyor.

Arka Plan Resmi Boyutu: Gerçek Boyut
Arka Plan Resmi Konumu: Orta sol
Arka Plan Resmi Tekrarı: Tekrar Yok

Ayarların geri kalanını aşağıdaki gibi güncelleyin:

Genişlik: %100
Özel Dolgu: %15 Üst, %15 Alt, %15 Sol, %15 Sağ
Kutu Gölgesini Seç

Şimdi nihai sonucu kontrol edelim.

2. sütunun soluna ikinci bir arka plan resmi eklediğimiz için tablet ve mobil cihazlarda da harika görünen bir sonuç elde ettik.

Ve işte tamamlanmış tasarım.

Son düşünceler

Bu görüntü örtüşen tasarım, düzeninizi farklı kılmak için ince bir yol olabilir. Daha da benzersiz tasarımlar oluşturmak için farklı arka plan renkleri ve filtre efektleriyle denemeler yapmaktan çekinmeyin. Ayrıca normal görüntüleri de kullanabilirsiniz. Bu tasarımın arka plan resimleriniz gerçek boyutlarına ayarlandığında çalıştığını unutmayın, bu nedenle küçük resimler (yaklaşık 128 piksel genişliğinde) kullanmaya çalışın.

Yorumlarda sizden haber bekliyorum.

Şerefe!