Divi’de özel arka plan tasarımı oluşturmak için görüntüleri nasıl birleştirilir
Bazı görüntüleri birleştirmek, web siteniz için profesyonel bir arka plan tasarımı oluşturmaya yardımcı olabilir. Fikir, iki veya üç ayrı görüntü çekmek ve birbirlerinin üstüne kaplamaktır. Ardından uyumlu ve entegre bir tasarım oluşturmak için katmanları birbirine karıştırmak için bir karışım modu kullanın. Her Divi Builder elemanının, karıştırma elemanının Divi üreticisinde yapılması kolay hale getirmek için bir karışım ve varsayılan filtre seçeneği vardır. Tabii ki, Photoshop’ta (veya diğer fotoğraf editörlerinde) görüntüleri birleştirebilirsiniz, ancak rahat bir Divi çözümü isteyenler için bu yazı yardımcı olacaktır. Divi aslında bunu oldukça kolaylaştırıyor. Doğru yerde bir resim aldıktan sonra, her şeyi birkaç tıklamada birleştirebilirsiniz. Ve elbette, son bir dokunuş yapmak ve tasarımı yeni bir yaratıcı seviyeye getirmek için bir Divi seçenek deponuz var.
Başlayalım. Aşağıdaki gizlice göz attığımız tasarıma 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!
YouTube kanalımıza abone olun
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Değilse, yüklü Divi temasını (veya Divi temasını kullanmıyorsanız Divi Builder eklentisini) yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
Öğreticiler için kullanılacak medya kütüphanesine bazı yapay görüntüler yükleyin. Göz doktorunun düzen paketinden bir resim kullanıyorum.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Bölüm ve satır için Divi’de özel bir arka plan tasarımı oluşturmak için bazı görüntülerin nasıl birleştirilmesi, normal bölüme bir satır bir sütun ekleyin.
Görüntü modülü görüntü #1 ile resim ekleyin Satır ve sütun ayarlandıktan sonra görüntü modülünü satıra ekleyin. Yaklaşık 500 piksel 700 piksel boyutta görüntü yükleyin. Göz doktorunun düzen paketlerinden birini kullanıyorum. Görüntü yüklendikten sonra, VW uzunluğu ünitesini kullanarak maksimum genişliğe sahip bir resim verin, böylece ölçek birleştireceğimiz diğer görüntülerle iyi olacak ve sola aşağıdaki gibi hizalandı: maksimum: 33VW genişlik Modül hizalaması: sol
Bu resmin sağına paralel eklediğimiz bir sonraki resmi istiyoruz, böylece bu resmi sola doğru yüzmemiz gerekiyor. Bunu yapmak için, aşağıdaki CSS’yi ana öğeye ekleyin: şamandıra: sol;
Şekil 2 Ardından, geçerli görüntünün altına yeni bir görüntü modülü ekleyin. Bundan sonra, yaklaşık 1000px kat 667px boyutlarında yeni görüntüler yükleyin. Ardından bir genişlik resim ve yeni bir maksimum tesviye verin. Maksimum genişlik: 40vw Modül hizalaması: doğru
İlk resim sola doğru yüzdüğü için, ikinci resim şimdi sağın yanında olmalıdır.
Bu resimlerdeki son dokunuşlardan bazılarını yapmak için geri döneceğiz, ancak şimdilik bölümün ayarlarına geçelim. Ayarlar Bölümü Bölüm ayarlarını açın ve arka plan ve gradyan görüntüleri aşağıdaki gibi ekleyin:
Arka plan görüntüsü: [1920px kez 1280 piksel görüntüyü yükleyin] Arka Plan Sol gradyan rengi: RGBA (1,16,63.0.64)
Sağ renk gradyan arka planı: RGBA (12,113,195.0.82) Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Sonra dolguyu biraz ayarlayın.
Dolgu (masaüstü): 0px üst, 0px aşağıda
Dolgu: 0px üst, 0px aşağıda
Karışım modu satıra ekleyin Şimdi satır parçanın tüm arka planını kapsar. Bu, iki görüntüyü bölümün arka planına birleştirmek için satıra bir karışım eklememizi sağlayacaktır. Bunu yapmak için aşağıdaki karışım modunu ekleyin. Karışık Modu: çarpın
Neden birçok kez? Karışık Karışım Modu Temel olarak akım katmanı/satırını (içerdiği görüntü dahil) aşağıdaki bir katmanla (arka plan kısmı) çarpmak. Etkiyi düşünmenin kolay yolu, slayt projektöründe diğerinin arkasına istiflenmiş iki slayt hayal etmektir. Ekranda iki görüntü yansıtıyorsanız, biraz daha karanlık bir kombinasyon elde edersiniz. Görüntüyü dikey olarak odaklamak gerekli değildir, ancak satırdaki iki görüntünün dikeyin ortasında kaldığından emin olmak istiyorsanız, sütuna CSS parçaları ekleyebilirsiniz. Bunu yapmak için satır ayarlarını açın ve ardından sütun ayarlarını tıklayın. Ardından ana öğeye aşağıdaki CSS ekleyin. Ekran: Flex;
Hizalama-öğeler: merkez; En iyi iki görüntüdeki son dokunuşu oluşturun, şu anda iki en üstteki resmimiz iyi birleşti, ancak biraz daha profesyonel görünmesini sağlamak için bazı tasarım ayarlarını kullanabilirler. Görüntünün kenarını yumuşatmak için beyaz kutunun gölgesini kullanabilir ve istediğimiz yere konumlandırmak için bir çeviri dönüşümü kullanabiliriz.
Şekil #1 Touch Final Soldaki görüntü ayarlarını açın ve aşağıdakileri güncelleyin:
Gölge Kutusu: Ekran yakalamaya bakın Bulanık Güç Gölgesi Kutusu: 6VW
Kutunun gölgesinin dağılımının gücü: 6vw
Gölge rengi: #ffffff
Dönüşüm Çeviri: 5VW (x ekseni), 11vw (y ekseni)
Şekil #2 Dokunma Finali Soldaki 1 numaralı görüntüe dokunmayı bitirdikten sonra, sağdaki görüntü #2 için ayarları açın ve aşağıdaki değişiklikleri yapın:
Gölge Kutusu: Ekran yakalamaya bakın Bulanık Güç Gölgesi Kutusu: 3VW Kutunun gölgesinin dağılımının gücü: 3vw
Gölge rengi: #ffffff
Görüntülerin bir kombinasyonunu daha iyi hale getirmek için bazı filtre efektleri bile ekleyebiliriz.
Doygunluk:% 30
Opaklık:% 60 Metin İçeriği Ekleme ŞİMDİ PARÇASI Üç resim ile tamamlanmıştır, içeriğimizi bölümün üzerine ekleyebiliriz. Bunu yapmak için, mevcut olanın yeni bir bölümünü ekleyin.
Ardından normal bölüme bir satır sütun ekleyin.
Ardından metin modülünü satıra ekleyin. Gövde İçindekiler Metin modülünün içeriğini aşağıdaki içerikle güncelleyin:
Yazı Tip Başlığı: Poppins Başlık metin rengi: #ffffff
Başlık Metin Boyutu: 5VW
Genişlik: 60VW (masaüstü),% 100 (telefon)
Marj (masaüstü):% -35 üst,% 35 aşağı
Marj (Telefon): Yukarıda% 70,% 70 aşağı
Son Tasarım Aşağıdakiler son tasarımdır.
Aşağıdakiler, farklı tarayıcı genişliği için ölçek.
Tasarımı tamamladıktan sonra daha fazla tasarım seçeneğini keşfetmek, daha fazla karışım modu, filtreler, renkler ve daha birçok tasarım seçeneği ile deneyimi kolaylaştırın. Örneğin, tasarımı yeni bir renk şemasıyla eşleştirmek istiyorsanız, tek yapmanız gereken bu bölüm tarafından kullanılan iki arka plan gradyan rengini değiştirmektir. Ya da siyah beyaz yapmak için görüntülerden birine bir filtre ekleyebilirsiniz. doygunluk veya opaklığı biraz azaltın. Karışık karışık model zihin ve divi filtre seçeneği, profesyonel arka plan tasarımı için görüntüleri birleştirmek için ihtiyacınız olan her şeye sahiptir. İşin püf noktası, tüm arka plan tasarımı cep telefonuna da duyarlı olacak şekilde bir birim uzun VW birimini kullanarak konumlandırmaktır. Ancak görüntü konumunda olduğunda, şaşırtıcı karışık tasarım oluşturmak için her türlü karışık mod ve diğer birçok tasarım seçeneğini deneyebiliriz. Umarım bu yazı size biraz ilham verir ve umarım yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
YouTube kanalımıza abone olun
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Değilse, yüklü Divi temasını (veya Divi temasını kullanmıyorsanız Divi Builder eklentisini) yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
Öğreticiler için kullanılacak medya kütüphanesine bazı yapay görüntüler yükleyin. Göz doktorunun düzen paketinden bir resim kullanıyorum.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Bölüm ve satır için Divi’de özel bir arka plan tasarımı oluşturmak için bazı görüntülerin nasıl birleştirilmesi, normal bölüme bir satır bir sütun ekleyin.
Görüntü modülü görüntü #1 ile resim ekleyin Satır ve sütun ayarlandıktan sonra görüntü modülünü satıra ekleyin. Yaklaşık 500 piksel 700 piksel boyutta görüntü yükleyin. Göz doktorunun düzen paketlerinden birini kullanıyorum. Görüntü yüklendikten sonra, VW uzunluğu ünitesini kullanarak maksimum genişliğe sahip bir resim verin, böylece ölçek birleştireceğimiz diğer görüntülerle iyi olacak ve sola aşağıdaki gibi hizalandı: maksimum: 33VW genişlik Modül hizalaması: sol
Bu resmin sağına paralel eklediğimiz bir sonraki resmi istiyoruz, böylece bu resmi sola doğru yüzmemiz gerekiyor. Bunu yapmak için, aşağıdaki CSS’yi ana öğeye ekleyin: şamandıra: sol;
Şekil 2 Ardından, geçerli görüntünün altına yeni bir görüntü modülü ekleyin. Bundan sonra, yaklaşık 1000px kat 667px boyutlarında yeni görüntüler yükleyin. Ardından bir genişlik resim ve yeni bir maksimum tesviye verin. Maksimum genişlik: 40vw Modül hizalaması: doğru
İlk resim sola doğru yüzdüğü için, ikinci resim şimdi sağın yanında olmalıdır.
Bu resimlerdeki son dokunuşlardan bazılarını yapmak için geri döneceğiz, ancak şimdilik bölümün ayarlarına geçelim. Ayarlar Bölümü Bölüm ayarlarını açın ve arka plan ve gradyan görüntüleri aşağıdaki gibi ekleyin:
Arka plan görüntüsü: [1920px kez 1280 piksel görüntüyü yükleyin] Arka Plan Sol gradyan rengi: RGBA (1,16,63.0.64)
Sağ renk gradyan arka planı: RGBA (12,113,195.0.82) Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Sonra dolguyu biraz ayarlayın.
Dolgu (masaüstü): 0px üst, 0px aşağıda
Dolgu (cep telefonu): 0px üst, 10vw aşağıda
Satır Ayarları Bölüm tamamlandıktan sonra satır ayarlarını açın ve aşağıdakileri güncelleyin:
Genişlik:%100;
Dolgu: 0px üst, 0px aşağıda
Karışım modu satıra ekleyin Şimdi satır parçanın tüm arka planını kapsar. Bu, iki görüntüyü bölümün arka planına birleştirmek için satıra bir karışım eklememizi sağlayacaktır. Bunu yapmak için aşağıdaki karışım modunu ekleyin. Karışık Modu: çarpın
Neden birçok kez? Karışık Karışım Modu Temel olarak akım katmanı/satırını (içerdiği görüntü dahil) aşağıdaki bir katmanla (arka plan kısmı) çarpmak. Etkiyi düşünmenin kolay yolu, slayt projektöründe diğerinin arkasına istiflenmiş iki slayt hayal etmektir. Ekranda iki görüntü yansıtıyorsanız, biraz daha karanlık bir kombinasyon elde edersiniz. Görüntüyü dikey olarak odaklamak gerekli değildir, ancak satırdaki iki görüntünün dikeyin ortasında kaldığından emin olmak istiyorsanız, sütuna CSS parçaları ekleyebilirsiniz. Bunu yapmak için satır ayarlarını açın ve ardından sütun ayarlarını tıklayın. Ardından ana öğeye aşağıdaki CSS ekleyin. Ekran: Flex;
Hizalama-öğeler: merkez; En iyi iki görüntüdeki son dokunuşu oluşturun, şu anda iki en üstteki resmimiz iyi birleşti, ancak biraz daha profesyonel görünmesini sağlamak için bazı tasarım ayarlarını kullanabilirler. Görüntünün kenarını yumuşatmak için beyaz kutunun gölgesini kullanabilir ve istediğimiz yere konumlandırmak için bir çeviri dönüşümü kullanabiliriz.
Şekil #1 Touch Final Soldaki görüntü ayarlarını açın ve aşağıdakileri güncelleyin:
Gölge Kutusu: Ekran yakalamaya bakın Bulanık Güç Gölgesi Kutusu: 6VW
Kutunun gölgesinin dağılımının gücü: 6vw
Gölge rengi: #ffffff
Dönüşüm Çeviri: 5VW (x ekseni), 11vw (y ekseni)
Şekil #2 Dokunma Finali Soldaki 1 numaralı görüntüe dokunmayı bitirdikten sonra, sağdaki görüntü #2 için ayarları açın ve aşağıdaki değişiklikleri yapın:
Gölge Kutusu: Ekran yakalamaya bakın Bulanık Güç Gölgesi Kutusu: 3VW Kutunun gölgesinin dağılımının gücü: 3vw
Gölge rengi: #ffffff
Görüntülerin bir kombinasyonunu daha iyi hale getirmek için bazı filtre efektleri bile ekleyebiliriz.
Doygunluk:% 30
Opaklık:% 60 Metin İçeriği Ekleme ŞİMDİ PARÇASI Üç resim ile tamamlanmıştır, içeriğimizi bölümün üzerine ekleyebiliriz. Bunu yapmak için, mevcut olanın yeni bir bölümünü ekleyin.
Ardından normal bölüme bir satır sütun ekleyin.
Ardından metin modülünü satıra ekleyin. Gövde İçindekiler Metin modülünün içeriğini aşağıdaki içerikle güncelleyin:
Ücretsiz Göz Sınavı’nı kitap
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında şekillendirebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz. Metin Tasarımı İçerik içeriği yüklendikten sonra, tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin Rengi Metin: #fffffffYazı Tip Başlığı: Poppins Başlık metin rengi: #ffffff
Başlık Metin Boyutu: 5VW
Genişlik: 60VW (masaüstü),% 100 (telefon)
Marj (masaüstü):% -35 üst,% 35 aşağı
Marj (Telefon): Yukarıda% 70,% 70 aşağı
Son Tasarım Aşağıdakiler son tasarımdır.
Aşağıdakiler, farklı tarayıcı genişliği için ölçek.
Tasarımı tamamladıktan sonra daha fazla tasarım seçeneğini keşfetmek, daha fazla karışım modu, filtreler, renkler ve daha birçok tasarım seçeneği ile deneyimi kolaylaştırın. Örneğin, tasarımı yeni bir renk şemasıyla eşleştirmek istiyorsanız, tek yapmanız gereken bu bölüm tarafından kullanılan iki arka plan gradyan rengini değiştirmektir. Ya da siyah beyaz yapmak için görüntülerden birine bir filtre ekleyebilirsiniz. doygunluk veya opaklığı biraz azaltın. Karışık karışık model zihin ve divi filtre seçeneği, profesyonel arka plan tasarımı için görüntüleri birleştirmek için ihtiyacınız olan her şeye sahiptir. İşin püf noktası, tüm arka plan tasarımı cep telefonuna da duyarlı olacak şekilde bir birim uzun VW birimini kullanarak konumlandırmaktır. Ancak görüntü konumunda olduğunda, şaşırtıcı karışık tasarım oluşturmak için her türlü karışık mod ve diğer birçok tasarım seçeneğini deneyebiliriz. Umarım bu yazı size biraz ilham verir ve umarım yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
