Divi’deki soyut yerlerde görüntüleri nasıl organize edip konumlandırır
Resim, web tasarımının önemli bir yönüdür. Ve modern web tasarımı, web sitenizde resimleri görüntülemek için yeni ve soyut yollar gerektiriyor gibi görünüyor. Divi’nin Dönüşüm seçeneği, istediğiniz yerde sayfanızda görüntüleri düzenlemeyi ve konumlandırmayı kolaylaştırır. Web sitenizi bir sonraki seviyeye getirecek benzersiz bir düzen oluşturmak için kapıyı açar. Bu öğreticide, web sitenizdeki soyut yerlerde görüntüleri düzenlemenin ve konumlandırmanın birkaç yolunu göstereceğim. Bu, yalnızca Photoshop veya Sketch gibi fotoğraf editörlerinde mümkün olduğunu düşünebileceğiniz görüntüler için sayısız tasarım varyasyonu yapmanıza izin verecektir.
Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımdan gizlice bir bakış.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Şimdi öğreticiye gidelim mi? Başlamaya başlayın, Divi temasını yüklediğinizden ve etkinleştirdiğinizden emin olun. Ardından yeni bir sayfa oluşturun ve ön uçta Divi Builder kullanın. “Başından Uyan” seçeneğini seçin. Şimdi tasarlamaya hazırsınız! Kısmi bir görüntüyü görünümün dışında konumlandırma (sağda veya sola)
Bu ilk örnekte, kısmi bir görüntünün görünümün dışında nasıl konumlandırılacağını göstereceğim. Bu, görüntünüze içeriğiniz için özel bir arka plan görüntüsü gibi işlev görecek daha soyut ekran eklemenin iyi bir yoludur. Daha sonra daha benzersiz bir tasarım için görüntüler ayarlayabilirsiniz. İşte nasıl yapılacağı. Oluştur ve İlk Metin Modülünün Stili Bizim için ana içerik olarak işlev görecek bir metin modülü oluşturacağız. Yapmadıysanız, bir sütunla düzenli bir bölüm yapın. Ardından metin modülünü satıra ekleyin. İçeriği aşağıdakileri içerecek şekilde güncelleyin:
Ardından görüntüsü çevirme dönüşümünü kullanarak konumlandırabiliriz: dönüşüm x eksenini çevirin:% -36 dönüşüm Y eksenini çevirin:% 41 Son olarak, Dönüştürme Rotate: Dönüştürme Ekseni Z: 11deg’i kullanarak görüntüyü oynatabilirsiniz Şimdi ikinci bir resim eklemeye hazırız. Lütfen görüntü modülünü doğrudan metin modülünün altına ekleyin. Ardından görüntü modülüne yeni bir resim yükleyin. Daha sonra görüntü modülünün genişliğini düşürür ve sola aşağıdaki gibi hizalanır: Genişlik:% 10 Hizalama Modülü: Sol genişliğin tam olarak% 10 olması gerekmez. Tek yapmak istediğiniz, düzene çok fazla dikey alan almaması için modülü küçültmektir. Daha sonra Dönüşüm seçeneğini aşağıdaki gibi güncelleyin: x -sayı ölçek dönüşümü:% 464 y -ekseni ölçeğinin dönüşümü:% 464 dönüşüm x -eksenini çeviren:% 7 dönüşüm y eksenini çevirin: -80% dönüşüm ekseni z: -10deg Ardından kutunun gölgesini ek tasarım öğelerine ekleyin. Gölge Kutusu: Kutunun gölgesinin yatay ekran görüntüsüne bakın: -20px Dikey Konum Gölge Kutusu: -7px Metin modülünün yukarıda kaldığından emin olun, metin modülünün cep telefonunda örtüşmeye başladığında resmin üzerinde kaldığından emin olmak istiyoruz. Bu, görüntünün tasarımda bir arka plan görüntüsü olarak işlev görmeye devam etmesini sağlar. Bunu yapmak için metin modülünü açın ve aşağıdaki özel CSS’yi ana öğeye ekleyin: CSS Ana öğesi:
Pozisyon: göreceli; Ardından z-ineksi 1’e ayarlayın. Taşan parçaları gizlemek, sayfanın dışına uzanan görüntülerimiz olacağından, görünüm portu tarayıcısının genişliği ekstra alana uyum sağlamak için artacaktır. Bu, tarayıcının altındaki yatay kaydırma çubuğunu içerecektir. Bunu devre dışı bırakmak için, bu bölüme CSS parçaları eklemeniz gerekir. Bölüm ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: Taşma: Gizli;
Şimdi sonucuna bakın.
Başlığınız için arka plan soyut görüntü kolajı yapın Bir sonraki tasarım için, başlık için bir arka plan olarak işlev görecek bir görüntüden soyut bir kolajın nasıl oluşturulacağını göstereceğim. Bunu yapmak için, yaratıcı bir şekilde ölçeklendirebileceğimiz ve hareket edebileceğimiz bir dizi görüntü yapmak için Flex ekran özelliğini kullanacağız. İlk başlık metin modülünü tasarlama, bir sütun satırı ile yeni bir normal bölüm oluşturun. Ardından metin modülünü satıra ekleyin ve aşağıdaki içeriği güncelleyin:
Ardından, sayfadaki bir sonraki parçanın arka planıyla eşleşen bir renkle kutunun gölgesini parçanın altına ekleyin (bu durumda beyaz olacaktır). Bu, görüntü efektimizin başlığın alt kısmı ile bir sonraki bölüme örtüşmemizi sağlayacaktır (daha sonra ne demek istediğimi göreceksiniz). Gölge Kutusu: Yatay ekrana bakın Gölge Kutusu: 0px Dikey Konum Gölge Kutusu: -80px Renk Gölgesi: #FFFFFFFFFDAN Görüntüleri kolajımız için ViewPort bölümünün dışına taşıyacağız çünkü aşağıdaki CSS’yi ana öğeye eklememiz gerekir. Taşma: gizli;
Satır 1 Ayarları Şimdi metin modülümüzü içeren satıra biraz dolgu eklememiz gerekiyor. Ayrıca, parçayı kendi tarafımıza ekleyeceğimiz resmin üstünde tutmak için INDEX-Z dizin eklememiz gerekiyor. Varsayılan olarak, her bölümün bir Z-Index 9 değeri vardır. Bu yüzden yapmamız gereken, yukarıda kalmak istediğimiz çizgiye Z-Index 10 eklemektir. Aşağıdaki satır ve güncelleme ayarlarını açın: Pilding Custom: 10VW Dizin Z: 10 Bu noktada soyut bir görüntü kolajı yapın. Parça resimlerimizi eklemeye hazırdır. Soyut bir görüntü kolajı oluşturmak için, bir satır sütuna 5 resim ekleyeceğiz ve ardından tüm görüntüleri sayfada yatay olarak uyumlu hale getirmek için “Ekran: Flex” i kullanacağız. Bu, görüntüyü tüm tarayıcı boyutlarında (yatay olarak) yerinde tutmak için gereklidir. 5 geleneksel sütunun düzenini kullanırsak, resim farklı cihazlarda farklı bir sütun düzenine ayrılır ve tasarıma zarar verir. Bundan sonra görüntülerimizi dönüşüm seçeneğiyle tek tek organize edebileceğiz ve konumlandırabilecekiz. Görüntünün bir satırını eklemek devam edin ve doğrudan metin modülünü içeren satır altında yeni bir sütun satırı yapın. Ardından aşağıdaki satır ayarlarını açın ve güncelleme: Özel genişlik:% 50 Talang genişliği: 1 ve bu satırdaki tüm modülleri yatay olarak uyumlu hale getirmek için, kolonun ana öğelerine aşağıdaki CSS ekleyin: Ekran: Flex; şimdi görüntüyü eklediğinizde Modül satıra, yatay olarak hizalanırlar. Görüntü modülünü satırdaki bir ekranla çoğalttığımda ne olacağını görün: flex sütuna ekleyin. Devam edin ve kolaj için görüntüyü canlı olarak boyut olarak karşılayacak kadar büyük olduğundan emin olmak için satıra 5 resim ekleyin. 800px civarında olan ve yükseklik değişen ev geliştirme düzenimizin paketinde görüntülenen görüntüleri kullanıyorum. Farklı boyutlara sahip görüntüler soyut kolajların daha iyi görünme eğilimindedir. Görüntüleri Çeviri Dönüşümleri ile Konumlandırma, kolajımızı yapmak için görüntülerimizi konumlandırmaya başlamanın zamanı geldi. Şekil #1 İlk (en soldaki) görüntü modülü için ayarları açın ve Dönüşüm seçeneğini şu şekilde güncelleyin: x -ekseninin dönüşümü: y -eksen ölçeğinin% 266 dönüşümü:% 266 dönüşüm: x -eksen: -eksen: -eksen: – % 68 Çeviri Dönüşümü: Y Ekseni: – -% 54 Şekil #2 İkinci görüntü modülü için ayarları açın ve Dönüşüm seçeneğini şu şekilde güncelleyin: X -Sumum Skalası Dönüşüm: Y -ekseni ölçekinin% 184 dönüşümü:% 184 Dönüşüm Dönüşümü Çeviri: Eksen x: % -36 Dönüşüm: y Eksen: -66 % Şekil #3 Üçüncü Görüntü Modülü ayarlarını açın ve Dönüşüm seçeneğini aşağıdaki gibi güncelleyin: x -Number ölçeğinin dönüşümü: y ekseninin% 206 dönüşümü:% 206 dönüşüm Çeviri: x -ekseni:% -51 dönüşüm dönüşüm Dönüşüm: Y Ekseni:% -27 Şekil #4 Dördüncü şekil modülü için ayarları açın ve Dönüşüm seçeneğini şu şekilde güncelleyin: X-Number Ölçeği Dönüşüm: Y ekseninin% 180 Dönüşümü:% 180 Dönüşüm Çeviri: Eksen X:% 20 Dönüşüm Çeviri: Y Eksen :% 42 Şekil #5 Beşinci Görüntü Modülü ayarlarını açın ve Dönüşüm seçeneğini şu şekilde güncelleyin: x -sumlama ölçeği Dönüşüm: Y ekseninin% 290 Dönüşümü:% 290 Dönüşüm Çeviri: x -eksen:% -50 dönüşüm dönüşüm dönüşüm : Y ekseni:% 72 Ek bir tasarım öğesi oluşturmak için görüntüye kutunun gölgesini ekleyin, resmimize kutunun 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çici özelliği kullanın. Ardından sermaye belirleme sermayesini uygulamak için görüntü modüllerinden birinin ayarlarını açın. Ardından aşağıdakileri güncelleyin: Gölge Kutusu: Ekrana Bkz. Yatay Konum Gölge Kutusu: -40px Dikey Konum Gölge Kutusu: 40px Renk Gölgesi: RGBA (255,255,255.0.13) Sonuç aşağıdakiler tasarımın nihai sonucudur.Masaüstü Tablet Telefon Bu tasarım örneğinin son zihni, web sitenizdeki görüntüleri fotoğraf düzenleme yazılımı dışında hiç düşünemeyeceğiniz şekilde nasıl organize edeceğiniz ve konumlandıracağınız konusunda size biraz ilham verecektir.Düzeni doğru bir şekilde nasıl ayarlayacağınızı öğrendikten sonra, Divi Dönüşüm seçeneği görüntüleri benzersiz ve soyut bir yere konumlandırabilir.Umarım, bu bir sonraki projeniz için yararlı olacaktır.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Şimdi öğreticiye gidelim mi? Başlamaya başlayın, Divi temasını yüklediğinizden ve etkinleştirdiğinizden emin olun. Ardından yeni bir sayfa oluşturun ve ön uçta Divi Builder kullanın. “Başından Uyan” seçeneğini seçin. Şimdi tasarlamaya hazırsınız! Kısmi bir görüntüyü görünümün dışında konumlandırma (sağda veya sola)
Bu ilk örnekte, kısmi bir görüntünün görünümün dışında nasıl konumlandırılacağını göstereceğim. Bu, görüntünüze içeriğiniz için özel bir arka plan görüntüsü gibi işlev görecek daha soyut ekran eklemenin iyi bir yoludur. Daha sonra daha benzersiz bir tasarım için görüntüler ayarlayabilirsiniz. İşte nasıl yapılacağı. Oluştur ve İlk Metin Modülünün Stili Bizim için ana içerik olarak işlev görecek bir metin modülü oluşturacağız. Yapmadıysanız, bir sütunla düzenli bir bölüm yapın. Ardından metin modülünü satıra ekleyin. İçeriği aşağıdakileri içerecek şekilde güncelleyin:
Hakkımızda
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Bu içeriğin her yönünü modül tasarım ayarlarında stilize edebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz. : Kalın başlık 2 metin boyutu: 44px (masaüstü), 24px (cep telefonu) genişlik: 680 piksel (masaüstü),% 60 (tablet),% 80 (mobil) dolgu özel:% 10 üst,% 10 alt,% 10 sol, % 5 doğru
Görüntü #1 ekle Şimdi ilk resmi eklemeye hazırız. Lütfen görüntü modülünü doğrudan metin modülünün üzerine ekleyin. Ardından görüntünüzü görüntü modülüne yükleyin. Bir dönüşüm özelliği kullanarak görüntüyü büyüttüğümüzde görüntünün kaliteyi kaybetmeyecek kadar büyük olduğundan emin olun. 400 x 580 piksel ölçen bir görüntü kullanıyorum.
Ardından görüntüsü çevirme dönüşümünü kullanarak konumlandırabiliriz: dönüşüm x eksenini çevirin:% -36 dönüşüm Y eksenini çevirin:% 41 Son olarak, Dönüştürme Rotate: Dönüştürme Ekseni Z: 11deg’i kullanarak görüntüyü oynatabilirsiniz Şimdi ikinci bir resim eklemeye hazırız. Lütfen görüntü modülünü doğrudan metin modülünün altına ekleyin. Ardından görüntü modülüne yeni bir resim yükleyin. Daha sonra görüntü modülünün genişliğini düşürür ve sola aşağıdaki gibi hizalanır: Genişlik:% 10 Hizalama Modülü: Sol genişliğin tam olarak% 10 olması gerekmez. Tek yapmak istediğiniz, düzene çok fazla dikey alan almaması için modülü küçültmektir. Daha sonra Dönüşüm seçeneğini aşağıdaki gibi güncelleyin: x -sayı ölçek dönüşümü:% 464 y -ekseni ölçeğinin dönüşümü:% 464 dönüşüm x -eksenini çeviren:% 7 dönüşüm y eksenini çevirin: -80% dönüşüm ekseni z: -10deg Ardından kutunun gölgesini ek tasarım öğelerine ekleyin. Gölge Kutusu: Kutunun gölgesinin yatay ekran görüntüsüne bakın: -20px Dikey Konum Gölge Kutusu: -7px Metin modülünün yukarıda kaldığından emin olun, metin modülünün cep telefonunda örtüşmeye başladığında resmin üzerinde kaldığından emin olmak istiyoruz. Bu, görüntünün tasarımda bir arka plan görüntüsü olarak işlev görmeye devam etmesini sağlar. Bunu yapmak için metin modülünü açın ve aşağıdaki özel CSS’yi ana öğeye ekleyin: CSS Ana öğesi:
Pozisyon: göreceli; Ardından z-ineksi 1’e ayarlayın. Taşan parçaları gizlemek, sayfanın dışına uzanan görüntülerimiz olacağından, görünüm portu tarayıcısının genişliği ekstra alana uyum sağlamak için artacaktır. Bu, tarayıcının altındaki yatay kaydırma çubuğunu içerecektir. Bunu devre dışı bırakmak için, bu bölüme CSS parçaları eklemeniz gerekir. Bölüm ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: Taşma: Gizli;
Şimdi sonucuna bakın.
Başlığınız için arka plan soyut görüntü kolajı yapın Bir sonraki tasarım için, başlık için bir arka plan olarak işlev görecek bir görüntüden soyut bir kolajın nasıl oluşturulacağını göstereceğim. Bunu yapmak için, yaratıcı bir şekilde ölçeklendirebileceğimiz ve hareket edebileceğimiz bir dizi görüntü yapmak için Flex ekran özelliğini kullanacağız. İlk başlık metin modülünü tasarlama, bir sütun satırı ile yeni bir normal bölüm oluşturun. Ardından metin modülünü satıra ekleyin ve aşağıdaki içeriği güncelleyin:
İç tasarım
Bu bazı içerikler Ardından tasarımı aşağıdaki gibi güncelleyin: Arka Plan Rengi: RGBA (0,0,0,0.07) Metin Renk Metni: #FFFFFFFFF Metin Oryantasyonu: Orta Yazı Tipi Başlık: Raleway Ağırlığı Mektubu Başlık: Kalınlık Metin Tesviye Başlık: #FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFfffffff Başlık Metin Boyutu: 44px (masaüstü), 34px (tablet), 24px (cep telefonu) genişliği: 500 piksel (masaüstü),% 60 (tablet),% 80 (mobil) Modül Hizalama: Özel Dolgu Merkezi: 5VW üst, 5VW Aşağıda , 1vw doğru Görüntü eklemeden ve arka plan kolajı oluşturmadan önce bölümü ayarlayın, parçamızı ayarlayalım. Bu, tasarımın geri kalanını tamamlamak için tuvalimizi sağlayacaktır. Aşağıdaki bölüm ayarlarını açın ve güncelleme: Arka plan rengi: #4C606D dolgu özel (masaüstü): 0px üst, 0px alt özel dolgu (tablet): 20px alt özel dolgu (telefon): 40px aşağıdaArdından, sayfadaki bir sonraki parçanın arka planıyla eşleşen bir renkle kutunun gölgesini parçanın altına ekleyin (bu durumda beyaz olacaktır). Bu, görüntü efektimizin başlığın alt kısmı ile bir sonraki bölüme örtüşmemizi sağlayacaktır (daha sonra ne demek istediğimi göreceksiniz). Gölge Kutusu: Yatay ekrana bakın Gölge Kutusu: 0px Dikey Konum Gölge Kutusu: -80px Renk Gölgesi: #FFFFFFFFFDAN Görüntüleri kolajımız için ViewPort bölümünün dışına taşıyacağız çünkü aşağıdaki CSS’yi ana öğeye eklememiz gerekir. Taşma: gizli;
Satır 1 Ayarları Şimdi metin modülümüzü içeren satıra biraz dolgu eklememiz gerekiyor. Ayrıca, parçayı kendi tarafımıza ekleyeceğimiz resmin üstünde tutmak için INDEX-Z dizin eklememiz gerekiyor. Varsayılan olarak, her bölümün bir Z-Index 9 değeri vardır. Bu yüzden yapmamız gereken, yukarıda kalmak istediğimiz çizgiye Z-Index 10 eklemektir. Aşağıdaki satır ve güncelleme ayarlarını açın: Pilding Custom: 10VW Dizin Z: 10 Bu noktada soyut bir görüntü kolajı yapın. Parça resimlerimizi eklemeye hazırdır. Soyut bir görüntü kolajı oluşturmak için, bir satır sütuna 5 resim ekleyeceğiz ve ardından tüm görüntüleri sayfada yatay olarak uyumlu hale getirmek için “Ekran: Flex” i kullanacağız. Bu, görüntüyü tüm tarayıcı boyutlarında (yatay olarak) yerinde tutmak için gereklidir. 5 geleneksel sütunun düzenini kullanırsak, resim farklı cihazlarda farklı bir sütun düzenine ayrılır ve tasarıma zarar verir. Bundan sonra görüntülerimizi dönüşüm seçeneğiyle tek tek organize edebileceğiz ve konumlandırabilecekiz. Görüntünün bir satırını eklemek devam edin ve doğrudan metin modülünü içeren satır altında yeni bir sütun satırı yapın. Ardından aşağıdaki satır ayarlarını açın ve güncelleme: Özel genişlik:% 50 Talang genişliği: 1 ve bu satırdaki tüm modülleri yatay olarak uyumlu hale getirmek için, kolonun ana öğelerine aşağıdaki CSS ekleyin: Ekran: Flex; şimdi görüntüyü eklediğinizde Modül satıra, yatay olarak hizalanırlar. Görüntü modülünü satırdaki bir ekranla çoğalttığımda ne olacağını görün: flex sütuna ekleyin. Devam edin ve kolaj için görüntüyü canlı olarak boyut olarak karşılayacak kadar büyük olduğundan emin olmak için satıra 5 resim ekleyin. 800px civarında olan ve yükseklik değişen ev geliştirme düzenimizin paketinde görüntülenen görüntüleri kullanıyorum. Farklı boyutlara sahip görüntüler soyut kolajların daha iyi görünme eğilimindedir. Görüntüleri Çeviri Dönüşümleri ile Konumlandırma, kolajımızı yapmak için görüntülerimizi konumlandırmaya başlamanın zamanı geldi. Şekil #1 İlk (en soldaki) görüntü modülü için ayarları açın ve Dönüşüm seçeneğini şu şekilde güncelleyin: x -ekseninin dönüşümü: y -eksen ölçeğinin% 266 dönüşümü:% 266 dönüşüm: x -eksen: -eksen: -eksen: – % 68 Çeviri Dönüşümü: Y Ekseni: – -% 54 Şekil #2 İkinci görüntü modülü için ayarları açın ve Dönüşüm seçeneğini şu şekilde güncelleyin: X -Sumum Skalası Dönüşüm: Y -ekseni ölçekinin% 184 dönüşümü:% 184 Dönüşüm Dönüşümü Çeviri: Eksen x: % -36 Dönüşüm: y Eksen: -66 % Şekil #3 Üçüncü Görüntü Modülü ayarlarını açın ve Dönüşüm seçeneğini aşağıdaki gibi güncelleyin: x -Number ölçeğinin dönüşümü: y ekseninin% 206 dönüşümü:% 206 dönüşüm Çeviri: x -ekseni:% -51 dönüşüm dönüşüm Dönüşüm: Y Ekseni:% -27 Şekil #4 Dördüncü şekil modülü için ayarları açın ve Dönüşüm seçeneğini şu şekilde güncelleyin: X-Number Ölçeği Dönüşüm: Y ekseninin% 180 Dönüşümü:% 180 Dönüşüm Çeviri: Eksen X:% 20 Dönüşüm Çeviri: Y Eksen :% 42 Şekil #5 Beşinci Görüntü Modülü ayarlarını açın ve Dönüşüm seçeneğini şu şekilde güncelleyin: x -sumlama ölçeği Dönüşüm: Y ekseninin% 290 Dönüşümü:% 290 Dönüşüm Çeviri: x -eksen:% -50 dönüşüm dönüşüm dönüşüm : Y ekseni:% 72 Ek bir tasarım öğesi oluşturmak için görüntüye kutunun gölgesini ekleyin, resmimize kutunun 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çici özelliği kullanın. Ardından sermaye belirleme sermayesini uygulamak için görüntü modüllerinden birinin ayarlarını açın. Ardından aşağıdakileri güncelleyin: Gölge Kutusu: Ekrana Bkz. Yatay Konum Gölge Kutusu: -40px Dikey Konum Gölge Kutusu: 40px Renk Gölgesi: RGBA (255,255,255.0.13) Sonuç aşağıdakiler tasarımın nihai sonucudur.Masaüstü Tablet Telefon Bu tasarım örneğinin son zihni, web sitenizdeki görüntüleri fotoğraf düzenleme yazılımı dışında hiç düşünemeyeceğiniz şekilde nasıl organize edeceğiniz ve konumlandıracağınız konusunda size biraz ilham verecektir.Düzeni doğru bir şekilde nasıl ayarlayacağınızı öğrendikten sonra, Divi Dönüşüm seçeneği görüntüleri benzersiz ve soyut bir yere konumlandırabilir.Umarım, bu bir sonraki projeniz için yararlı olacaktır.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
