Divi'de Soyut Yerlerdeki Görüntülere Nasıl Stil Verilir ve Konumlandırılır

Görseller, web tasarımının önemli bir yönüdür. Ve modern web tasarımı, web sitenizde görüntüleri görüntülemenin yeni ve soyut yollarını arıyor gibi görünüyor. Divi'nin dönüştürme seçenekleri, sayfanızda hemen hemen istediğiniz herhangi bir yerde resimlerin stilini ve konumlandırmasını kolaylaştırır. Bu, web sitenizi bir sonraki seviyeye taşıyacak benzersiz düzenler oluşturmanın kapısını açar.

Bu eğitimde, size web sitenizdeki soyut yerlerdeki resimleri stillendirmenin ve konumlandırmanın birkaç yolunu göstereceğim. Bu, yalnızca Photoshop veya Sketch gibi bir fotoğraf düzenleyicide mümkün olduğunu düşündüğünüz görüntüler için sayısız tasarım varyasyonu oluşturmanıza olanak tanır.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde inşa edeceğimiz tasarımlara bir göz atın.

Bu Eğitimdeki Tasarım Örneklerini ÜCRETSİZ olarak indirin

Bu örnek tasarımlara göz atmak için öncelikle aşağıdaki butondan indirmeniz gerekmektedir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Şimdi öğreticiye geçelim mi?

Başlarken

Başlamak için Divi Temasının kurulu ve etkin olduğundan emin olun. Ardından yeni bir sayfa oluşturun ve Divi Builder'ı ön uçta dağıtın. “Sıfırdan Oluştur” seçeneğini seçin.

Artık tasarlamaya hazırsınız!

Görüntüleri Kısmen Görünüm Alanının Dışına Konumlandırma (sağa veya sola)

Bu ilk örnekte, görüntüleri kısmen görünüm alanının dışına nasıl konumlandıracağınızı göstereceğim. Bu, resimleriniz için içeriğiniz için özel bir arka plan resmi gibi çalışacak daha fazla soyut görüntü eklemenin güzel bir yoludur. Ardından, daha da benzersiz tasarımlar için görüntüyü şekillendirebilirsiniz.

İşte nasıl yapılacağı.

Metin Modülünü Oluşturun ve Stillendirin

İlk önce bölümümüzün ana içeriği olacak bir metin modülü oluşturacağız.

Henüz yapmadıysanız, tek sütunlu bir satır içeren normal bir bölüm oluşturun. Ardından metin modülünü satıra ekleyin.

İçeriği aşağıdakileri içerecek şekilde güncelleyin:

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Metin Yazı Tipi: Raleway
Başlık 2 Yazı Tipi: Raleway
başlık 2 Yazı Tipi Ağırlığı: Kalın
Başlık 2 Metin Boyutu: 44px (masaüstü), 24px (telefon)
Genişlik: 680 piksel (masaüstü), %60 (tablet), %80 (telefon)
Özel Dolgu: %10 üst, %10 alt, %10 sol, %5 sağ

1. Resim Ekle

Şimdi ilk resmi eklemeye hazırız. Devam edin ve doğrudan metin modülünün üzerine bir görüntü modülü ekleyin.

Ardından resminizi resim modülüne yükleyin. Görüntüyü transform özelliğini kullanarak büyüttüğümüzde kalitesini kaybetmemesi için görüntünün yeterince büyük olduğundan emin olun. 400 x 580 piksel olan bir resim kullanıyorum.

Ardından, görüntü modülünün genişliğini aşağı indirin ve aşağıdaki gibi sola hizalayın:

Genişlik: %5
Modül Hizalama: sol

Görüntü modülünü bu şekilde küçültmek, başlangıçta yerleşimin negatif alanını azaltmamızı sağlar. Bu şekilde, negatif kenar boşlukları kullanarak aralığı ayarlamak zorunda değiliz.

Şimdi dönüştürme seçeneklerini kullanarak görüntüyü aşağıdaki gibi büyütebiliriz:

Dönüştürme Ölçeği X ekseni: %416
Dönüşüm Ölçeği Y ekseni: %416

Ardından, transform translate kullanarak görüntüyü aşağıdaki gibi konumlandırabiliriz:

Dönüştür X eksenini çevir: -%36
Y eksenini dönüştür: %41

Son olarak, dönüştürme döndürmeyi kullanarak görüntüyü döndürebilirsiniz:

Dönüştür Döndür Z ekseni: 11deg

Şimdi ikinci resmi eklemeye hazırız. Devam edin ve doğrudan metin modülünün altına bir görüntü modülü ekleyin.

Ardından görüntü modülüne yeni bir görüntü yükleyin.

Ardından, görüntü modülünün genişliğini aşağı indirin ve aşağıdaki gibi sola hizalayın:

Genişlik: %10
Modül Hizalama: sol

Genişlik tam olarak %10 olmak zorunda değildir. Tek yapmanız gereken, düzende çok fazla dikey alan kaplamaması için modülü yeterince küçültmektir.

Ardından dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:

Dönüştürme Ölçeği X ekseni: %464
Dönüşüm Ölçeği Y ekseni: %464

Dönüştür X eksenini çevir: %7
Y eksenini dönüştür: -%80

Dönüştür Z eksenini döndür: -10deg

Ardından, ek bir tasarım öğesi için bir kutu gölgesi ekleyin.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: -20px
Kutu Gölge Dikey Konumu: -7px

Metin Modülünün Üstte Kalmasını Sağlama

Mobil cihazlarda üst üste gelmeye başladıklarında Metin Modülünün görüntülerin üstünde kalmasını sağlamak istiyoruz. Bu, görüntülerin tasarımda arka plan görüntüleri olarak hizmet etmeye devam etmesini sağlar.

Bunu yapmak için metin modülünü açın ve Ana Öğeye aşağıdaki Özel CSS'yi ekleyin:

Ana Öğe CSS'si:

position: relative;

Ardından Z-endeksini 1 olarak ayarlayın.

Bölüm Taşmasını Gizleme

Sayfa bölümünün dışına uzanan resimlere sahip olacağımızdan, fazladan alana yer açmak için tarayıcı görüntü alanı genişliği artacaktır. Bu, tarayıcının altındaki yatay kaydırma çubuğunu devreye sokacaktır. Bunu devre dışı bırakmak için bölüme bir CSS parçacığı eklemeniz gerekir.

Bölüm ayarlarını açın ve aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

overflow: hidden;

Şimdi nihai sonucu kontrol edin.

Başlığınız için Soyut Resim Kolaj Arka Planı Oluşturma

Bu sonraki tasarım için, size bir başlık için arka plan görevi görecek soyut bir resim kolajının nasıl oluşturulacağını göstereceğim. Bunu yapmak için, ölçeklendirebileceğimiz ve yaratıcı şekillerde hareket ettirebileceğimiz bir dizi görüntü oluşturmak için display flex özelliğini kullanacağız.

İşte nasıl yapılacağı.

Başlık Metni Modülünü Tasarlama

İlk olarak, tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından satıra bir metin modülü ekleyin ve aşağıdaki içeriği güncelleyin:

<h1>Interior Design</h1>
<p>This is some content</p>

Ardından tasarımı aşağıdaki gibi güncelleyin:

Arka Plan Rengi: rgba(0,0,0,0.07)
Metin Metin Rengi: #ffffff
Metin Yönü: Merkez
Başlık Yazı Tipi: Raleway
Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Metni Hizalama: Sağ
Başlık Metni Rengi: #ffffff
Başlık Metni Boyutu: 44px (masaüstü), 34px (tablet), 24px (telefon)
Genişlik: 500 piksel (masaüstü), %60 (tablet), %80 (telefon)
Modül Hizalaması: Merkez
Özel Dolgu: 5vw üst, 5vw alt, 1vw sağ

Bölüm Ayarları

Resimlerimizi eklemeden ve kolaj arka planı oluşturmadan önce bölümümüzü özelleştirelim. Bu, tasarımın geri kalanını tamamlamak için tuvalimizi sağlayacaktır.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #4c606d
Özel Dolgu (masaüstü): 0 piksel üst, 0 piksel alt
Özel Dolgu (tablet): 20 piksel alt
Özel Dolgu (telefon): 40 piksel alt

Ardından, sayfadaki sonraki bölümün arka planıyla eşleşen bir renkle bölümün altına bir iç kutu gölgesi ekleyin (bu durumda beyaz olacaktır). Bu, bir sonraki bölüme başlığın alt kısmıyla örtüşen resimlerimizin efektini yaratmamıza izin verecektir (daha sonra ne demek istediğimi anlayacaksınız).

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölgesi Dikey Konumu: -80px
Gölge Rengi: #ffffff

Kolajımız için görüntüleri bölüm görünümünün dışına taşıyacağımız için, aşağıdaki CSS'yi Ana Öğeye eklememiz gerekecek.

overflow: hidden;

1. Sıra Ayarları

Şimdi metin modülümüzü içeren satıra biraz dolgu eklememiz gerekiyor. Ayrıca bölümümüze ekleyeceğimiz görsellerin üzerine bölümün üstte kalması için bir z-index eklememiz gerekiyor. Varsayılan olarak, her bölümün z-endeksi değeri 9'dur. Yani tek yapmamız gereken, yukarıda kalmasını istediğimiz satıra 10'luk bir z-endeksi eklemek.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Dolgu: 10vw üst
Z İndeksi: 10

Soyut Resim Kolajını Oluşturma

Bu noktada görsellerimizi eklemeye başlamak için bölüm hazırdır.

Soyut resim kolajını oluşturmak için bir sütun satırına 5 resim ekleyeceğiz ve ardından tüm bu resimleri sayfada yatay olarak hizalamak için “display: flex” kullanacağız. Bu, görüntüleri tüm tarayıcı boyutlarında (yatay olarak) yerinde tutmak için gereklidir. Geleneksel bir 5 sütun düzeni kullanacak olsaydık, görüntüler farklı cihazlarda farklı sütun düzenlerine bölünür ve tasarımı bozar.

Bundan sonra dönüşüm seçenekleri ile resimlerimizi tek tek şekillendirip konumlandırabileceğiz.

Görüntü Satırı Ekleme

Devam edin ve metin modülünü içeren satırın hemen altında yeni bir tek sütunlu satır oluşturun.

Ardından satır ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Genişlik: %50
Oluk Genişliği: 1

Ve bu satırdaki tüm modülleri yatay olarak hizalamak için Sütun Ana Öğesine aşağıdaki CSS'yi ekleyin:

display: flex;

Şimdi satıra görüntü modülleri eklediğinizde, yatay olarak hizalanacaklar.

Satırdaki bir görüntü modülünü sütuna display:flex add ile çoğalttığımda ne olduğuna bakın.

Devam edin ve görüntüyü kolaj için ölçeklerken boyut artışına uyum sağlamak için yeterince büyük olduklarından emin olarak satıra 5 görüntü ekleyin. Genişliği yaklaşık 800 piksel olan ve yükseklikleri değişen Ev Geliştirme Düzen Paketimizde yer alan resimleri kullanıyorum. Farklı boyutlara sahip resimler, daha iyi görünen soyut bir kolaj oluşturma eğilimindedir.

Görüntüleri Transform Çeviri ile Konumlandırma

Kolajımızı oluşturmak için resimlerimizi konumlandırmaya başlamanın zamanı geldi.

Resim #1

İlk görüntü modülü (en solda) için ayarları açın ve dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:

Dönüştürme Ölçeği X ekseni: %266
Dönüşüm Ölçeği Y ekseni: %266

Dönüştür Çevir: X ekseni: -68
Dönüştür Çevir: Y ekseni: -54

Resim #2

İkinci görüntü modülünün ayarlarını açın ve dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:

Ölçeği X eksenini dönüştür: %184
Ölçeği Y eksenini dönüştür: %184

Dönüştür Çevir: X ekseni: -36
Dönüştür Çevir: Y ekseni: -66%

Resim #3

Üçüncü görüntü modülünün ayarlarını açın ve dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:

Dönüştürme Ölçeği X ekseni: %206
Dönüşüm Ölçeği Y ekseni: %206

Dönüştür Çevir: X ekseni: -%51
Dönüştür Çevir: Y ekseni: -%27

Resim #4

Dördüncü görüntü modülünün ayarlarını açın ve dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:

Ölçeği X eksenini dönüştür: %180
Ölçek Y eksenini dönüştür: %180

Dönüştür Çevir: X ekseni: %20
Dönüştür Çevir: Y ekseni: %42

Resim #5

Beşinci görüntü modülünün ayarlarını açın ve dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:

Dönüştürme Ölçeği X ekseni: %290
Dönüşüm Ölçeği Y ekseni: %290

Dönüştür Çevir: X ekseni: -%50
Dönüştür Çevir: Y ekseni: %72

Resimlere Kutu Gölgesi Ekleme

Ek bir tasarım öğesi oluşturmak için resimlerimize bir kutu gölgesi ekleyebiliriz. Bunu yapmak için ızgara modunu etkinleştirin ve tüm görüntü modüllerini seçmek için çoklu seçim özelliğini kullanın. Ardından, öğe ayarları modunu dağıtmak için görüntü modüllerinden birinin ayarlarını açın.

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

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -40px
Kutu Gölge Dikey Konumu: 40px
Gölge Rengi: rgba(255,255,255,0.13)

Son sonuç

İşte tasarımın nihai sonucu.

masaüstü

Tablet

Telefon

Son düşünceler

Bu örnek tasarımlar, bir fotoğraf düzenleme yazılımı dışında asla mümkün olduğunu düşünmediğiniz şekillerde web sitenizdeki görüntüleri nasıl şekillendireceğiniz ve konumlandıracağınız konusunda size ilham verecektir. Düzeninizi nasıl uygun şekilde özelleştireceğinizi öğrendikten sonra, Divi'nin dönüştürme seçenekleri, görüntüleri benzersiz ve soyut yerlerde konumlandırabilir. Umarım, bu bir sonraki projeniz için kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!