Divi dönüşüm seçeneği ile güzel bir portföy öğesi nasıl biriktirilir
Yeni Divi Dönüşüm seçeneği, görsel olarak çekici web tasarımları oluşturmak için birçok yeni kapı açtı. Başlangıçtan bir web sitesi tasarlarken herhangi bir görüntü düzenleme yazılımı gerektirmememiz için bize bir adım daha yaklaşıyor. Hala%100 duyarlı bir tasarıma sahipken tam olarak istediğimiz gibi görünmesini sağlamak için değiştirebiliriz. Bu yazıda, güzel bir portföy öğesini biriktirmek için yeni bir dönüşüm seçeneği kullanacağız. Bu, örneğin daha önce oluşturulan web sitelerini görüntülemek için iyi bir yaklaşımdır. Ayrıca, ziyaretçiler tarafından kullanılan ekran boyutu ne olursa olsun görüntünün yerinde kalmasını sağlayacağız. Bu öğretici, web sitesini ihtiyaçlarınıza göre ayarlarken yeni Divi dönüşüm seçeneğiyle yaratıcı olmanız için size ilham vermesini umuyoruz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım.
Renk 1: #F4F4F4
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 30
Son pozisyon:% 30 Mesafe Ardından, tasarım sekmesini açın ve alan ayarlarında özel dolgu değerlerini değiştirin.
Üst Pilding: 0px (masaüstü), 18VW (tablet), 40VW (Telefon)
Aşağıda dolgu: 0px (masaüstü), 18VW (tablet), 40VW (Telefon) Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliğini kullanın: Yalebar Talang: 1
Yüksek sütunu eşitleyin: evet
Mesafe Ardından, boşluk ayarlarını açın ve varsayılan dolguyu yukarı ve aşağı silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Bize gösterilen iki sütunun daha küçük bir ekran boyutunun yanında görünmesini sağlar. Bunu yapmak için, hattın ana öğelerine bir satır CSS kodu eklememiz gerekir. Ekran: Flex;
Modül Şekil #1 Sütun 1’e 1 Görüntüyü Yükle Şimdi farklı bir modül eklemeye başlayabiliriz! Bu öğreticiyi takip etmek için devam edin ve aşağıdaki yazdırma ekranı bilgisayarınıza kaydedin: Yazdırma ekranını ilk sütundaki görüntü modülüne yükleyin. Yapıştırıcı daha sonra tasarım sekmesini açın ve ‘Force Fullwidth’ seçeneğini etkinleştirin. Bunu yaptıktan sonra, görüntü sütunun tüm genişliğini karşılayacaktır. Tam geniş zorla: Evet
Görüntünün boyutunu küçültmek için mesafe, bazı sol ve sağ kenar boşlukları ekleyeceğiz. Ekran boyutu ne olursa olsun, görüntünün boyutunun bozulmadan kalmasını sağlamak için ViewPort ünitesini kullandığımızı göreceksiniz. Üst Marj: -10VW
Sol dolgu: 11vw
Doğru dolgu: 11vw
Bir sonraki sınır ayarındaki her köşeye ‘2VW’ ekleyin. Kutunun gölgesi ile birlikte kutunun gölgesi. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3)
Çeviriyi Değiştirme Şimdi görüntüleri değiştirmeye başlayabiliriz! Dönüşüm seçeneğinden Dönüşüm sekmesine aşağıdaki değeri ekleyin: Aşağıda: -26vw
Doğru: -2vw
Buraya eklediğiniz değer, görüntünüzün genişliğine ve yüksekliğine bağlıdır, bu nedenle farklı bir görüntü kullanırsanız, değeri değiştirmeniz gerekir. Görüntünün konumunun tüm ekran boyutlarında aynı kaldığından emin olmak için ViewPort ünitesini kullandığınızdan emin olun. Uygun dönen ve dönen sekmeye geçmek için dönüşü değiştirin:
Sol: 24 derece Orta: 46 derece
Doğru: -7deg
Son olarak çevirin, ancak en az değil, çevirme eğrisini aşağıdaki değerlerle etkinleştirin:
Aşağıda: -4deg Doğru: 24 derece
Sütun 1’e Modül Resim #2 ekleyin. Görüntüyü sonraki görüntü modülüne yükleyin! Aşağıdaki yazdırma ekranını bilgisayarınıza kaydedin veya seçtiğiniz başka bir baskı ekranı kullanın:
Sütun 1’deki ikinci görüntü modülüne basılı bir ekran yükleyerek devam edin. Yapıştırıcı daha sonra boyut ayarlarını açın ve ‘Force Fullwidth’ seçeneğini etkinleştirin. Tam geniş zorla: Evet Mesafemiz görüntünün boyutunu azaltır ve boşluk ayarlarında bazı özel marj değerlerini kullanarak önceki görüntü ile örtüşmesini sağlar.
Üst kenar: -81vw (masaüstü), -50vw (tablet ve cep telefonu) Sol kenar boşluğu: 11vw
Doğru marj: 11vw
Sınırımız bir sonraki sınır ayarındaki her köşeye ‘2VW’ ekleyecektir.
Kutunun gölgesi ve ayrıca kutunun gölgesini de ekleyeceğiz. İkinci portföy öğe görüntüsü için nasıl daha koyu bir kutu gölgesi kullandığımızı unutmayın. Bu, portföy öğeleri arasında daha fazla derinlik oluşturmanıza yardımcı olacaktır. Bulanık Güç Gölgesi Kutusu: 150px Gölge Rengi: RGBA (0.0,0,0,6)
Çeviriyi daha sonra değiştirin, Dönüşüm ayarını açın ve Dönüşüm Çeviri değerini değiştirin:
Aşağıda: -8vw Doğru: 0px
Bir kez daha, bu değerler yazdırma ekranını nasıl konumlandırmak istediğinize ve baskı ekranınızın hangi boyutlarda sahip olduğuna çok bağlıdır. Görüntü ne kadar küçük olursa, daha büyük bir negatif değer kullanarak o kadar sola itmeniz gerekir. Dönüş hareketini Dönüşüm Döndürme sekmesine değiştirin ve üç değerle oynatın.
Sol: 24 derece
Orta: 46 derece Doğru: -7deg
Son olarak tercüme edildi, ancak en az değil, LOPS çevirisinin değerini değiştirin:
Aşağıda: -4deg
Doğru: 24 derece
Sütun 1’e Modül Resim #3 ekleyin. Sütun 1’e ihtiyaç duyduğumuz bir sonraki ve son olarak görüntü modülü yükle.
Yeni görüntü modülüne kaydettiğiniz baskı ekranını ekleyin.
Yapıştırıcı daha sonra boyut ayarlarını açın ve ‘Force Fullwidth’ seçeneğini etkinleştirin.
Sol kenar boşluğu: 19vw Doğru marj: 19VW
Görüntü modülünün her açısına ‘2VW’ ekleyerek sınır devam edin.
Kutunun gölgesi bir sonraki kutunun gölgesini ekler. Bir kez daha, önceki iki görüntü modülü için kullandığımızdan daha güçlü bir gölge rengi kullanıyoruz.
Bulanık Güç Gölgesi Kutusu: 200px Gölge Rengi: RGBA (0.0,0,0.82) Çeviriyi değiştir, sonra dönüşüm ayarını açın ve dönüşüm çeviri değerini değiştirin:
Aşağıda: -42vw
Doğru: 11vw Taşıma Dönüş Dönüştürme sekmesine taşıma değiştirin ve orada da bazı değişiklikler yapın.
Sol: 24 derece
Orta: 46 derece Doğru: -7deg
Son olarak tercüme ama en az değil, çeviri çarpma değerini değiştirin.
Aşağıda: -4deg
Doğru: 24 derece Başlık Metin Modülünü Sütun 2’ye Ekleyin H2’nin bir kopyasını ikinci sütuna ekleyin! Metin modülünü istediğiniz bazı H2 içeriğine ekleyin. Metin ayarı H2 Bir sonraki H2 metin ayarlarını açın ve bazı değişiklikler yapın.
Başlık 2 yazı tipi: Roboto
Başlık 2 yazı tipi ağırlığı: ince Başlık 2 Metin Seviyesi: Sol Başlık 2 Renk Metni: #000000
Başlık 2 Metin Boyutu: 5VW (Masaüstü), 6VW (Tablet), 7VW (Telefon)
Başlık alanı 2 harf: -1px
Uzay ayarlarına bazı özel marj değerleri ekleyerek daha fazla mesafe.
Üst kenar: 35VW (masaüstü), 10vw (tablet), 0vw (telefon)
Sol kenar boşluğu: -4vw
Doğru marj: 4VW Bölme modülünü Sütun 2, Sütun 2’de ihtiyacımız olan bir sonraki modülün görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
O zaman renk tasarım sekmesini açın ve bölücünün rengini değiştirin.
Renk: #8193fa Yapıştırıcı değişim de boyutu ayarlayın.
Bölücü ağırlığı: 8px Genişlik:% 28
Mesafe ve bazı özel marj değerleri ekleyin. Üst Marj: 1VW
Sol kenar boşluğu: -4vw
Doğru marj: 4VW Açıklama Metin Modülünü Sütun 2’ye Ekleyin Sütun 2’de ihtiyacımız olan bir sonraki modülün içeriğini ekleyin başka bir metin modülüdür. İstediğiniz bazı paragraf içeriği ekleyin.
Metin Ayarları Ardından, metin ayarlarını açın ve bazı değişiklikler yapın.
Metin yazı tipi: SANS’ı aç
Metin Boyutu: 0.6VW (masaüstü), 1.2vw (tablet), 1.8VW (Telefon) Metin hattı yüksekliği: 3.1em (masaüstü), 2.7em (tablet), 2.6em (telefon) Metin Oryantasyonu: Sol
Mesafe Bir sonraki özel marj değerleri ekleyin.
Üst Marj: 1VW
Sol kenar boşluğu: -4vw
Doğru marj: 4VW Düğme Modülünü Sütun 2’ye Ekleyin Bir sonraki bir kopyayı ekleyin ve son olarak tasarımı tamamlamamız gerekiyor Düğme modülü. Seçimin birkaç kopyasını ekleyin. Düğmeyi ayarlayın, tasarım sekmesini açın ve düğme ayarlarını değiştirin.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 1VW (Masaüstü), 2VW (Tablet), 3VW (Telefon)
Renk 1: #5627BA Renk 2: #8FB5FC Gradyan yönü: 122deg
Düğmenin sınır genişliği: 0px
Mektup Ağırlığı: Çok kalın
Yazı tipi stili: büyük harf
Özel kenar boşluklarını ve dolgu değerlerini değiştirmek için mesafe.
Üst kenar: 2VW (masaüstü), 3VW (tablet), 5VW (telefon)
Alt kenar boşluğu: 6VW (tablet), 8VW (telefon)
Sol kenar boşluğu: -4vw
Doğru marj: 4VW Üst Dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Aşağıda dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Sol dolgu: 3VW (masaüstü), 5VW (tablet), 7vw (telefon)
Sağ dolgu: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Son kutu gölgesi, pürüzsüz ve bitmiş bir kutunun gölgesini ekleyin!
Bulanık Güç Gölgesi Kutusu: 40 PX
Gölge Rengi: RGBA (0.0,0,0,3)
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.
Bu yazıdaki son zihin, yeni Divi Dönüşüm seçeneğiyle nasıl yaratıcı olacağınızı gösterdik. Daha spesifik olarak, iyi ve görsel olarak çekici bir tasarım yaratmak için portföy öğelerini yığdık. Ayrıca görüntünün tüm ekran boyutlarında iyi göründüğünü de doğruladık. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
