Divi’de görüntüler ve metin için yansıma nasıl tasarlanır
Görüntüler ve metin için yansımalar tasarlamak, web sayfaları içeriğini sezonlamak için kullanılabilecek klasik bir tasarım tekniğidir. Ve Divi, bir fotoğraf editörü kullanmak zorunda kalmadan bu yansımayı doğrudan Divi Builder’dan yapmayı kolaylaştırıyor. Bu öğreticide, Divi’de görüntüler ve metin için nasıl yansımalar tasarlayacağınızı göstereceğim. Yansıtmanın anahtarı, öğenin ayna versiyonunu oluşturmak için Divi Dönüşüm Ölçeği seçeneğini kullanmaktır. Bundan sonra, bir metin modülüyle nasıl yapılacağını göstereceğim özel bir kaplama ekleyebilirsiniz. Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımdan gizlice bir bakış.
Ücretsiz metin ve resim yansımasının düzenini indirin Bu öğreticinin tasarımını almak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.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.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve düzenini sayfanıza aktarmak için Haftalık Divi Düzen Paketine erişin! Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız olan YouTube kanalımıza abone olun, ihtiyacınız olan tek şey Divi. Divi temasının yüklü ve etkin olduğundan emin olun. Tasarımızı baştan ön tarafta (görsel yapımcı) kullanarak yapacağız. Ayrıca bu öğretici için bazı taklit görüntülere ihtiyacınız var (1920px x 600px civarında arka plan görüntüsü ve 500px x 350px civarında diğer resimler).
Hazır olduğunuzda, WordPress kontrol panelinizi açın ve sayfa> Yeni Ekle’ye gidin. Yeni sayfa başlığınızı verin ve ön tarafta Divi Builder kullanın. “Başından Uyan” seçeneğini seçin. Şimdi ayrılmaya hazırsın! Arkasındaki temel fikirler Divi’de görüntü ve metin yansımaları yapmak Divi’de refleksoloji tasarımı yapmanın arkasındaki temel fikirler üç adım içerir:
Görüntünüz veya metninizle bir modül oluşturun
Çift modüller ve yansıtılan bir görüntü veya metin oluşturmak için bir dönüşüm ölçeği kullanın
Kesinlikle konumlandırılmış bir bölücü veya metin modülünü kullanarak ayna öğesine degrade kaplama ekleyin.
Bu tasarım tekniği ayrı modüllerle sınırlı değildir. Benzersiz bir başlık tasarımı oluşturmak için yararlı olan bu yöntemi kullanarak Divi’deki tüm satırlara yansıma ekleyebilirsiniz. Metin yansıma tasarımımızdaki çizgiye bu öğreticide biraz daha sonra yansıma ekleyeceğiz. Ama şimdilik görüntü yansıması yaparak başlayalım.
Görüntü yansıması nasıl yapılır Bir görüntü yansıması yapmak için, bir satır sütunu ile yeni bir normal parça yaparak başlayalım. Ardından görüntü modülünü satıra ekleyin.
Medya galerisinden istediğiniz görüntüyü resim modülüne yükleyin. Ardından aşağıdaki resim ayarlarını güncelleyin: Maks genişlik: 600px modül hizalama: Orta Özel Kenar: 0px daha düşük Bir yansıma efekti oluşturmak için bir ayna görüntüsü oluşturun, önce görüntünün hemen altındaki görüntüden bir ayna kopyası yapmamız gerekir. Bunu yapmak için, yinelenen görüntü modülü. Ardından, yinelenen görüntü ayarlarını aşağıdaki gibi güncelleyin: Opaklık: X Ekseninin% 40 Dönüşümü Ölçeğin:% -100 Dönüşüm Ölçeği Özelliği, resmin bir ayna versiyonunu oluşturmak için resmi dikey ve yatay olarak mucizevi bir şekilde tersine çeviren şeydir. Bu temel yansıma tasarımlarını ele alır. Bununla birlikte, daha gerçekçi bir yansıma tasarımı için alt resmimize ek kaplama gradyanı ekleyebiliriz. Alt resmimize kaplama gradyanı eklemek için bir metin modülü kullanarak bir gradyan genişliği ekleyin, metin modülünü kullanabiliriz. Mutlak konum metin modülünü alt görüntünün üstünde olacak şekilde verebiliriz. Ardından, gradyanın arka planını metin modülüne ekleyebiliriz. Bir metin modülü (bölücü değil) kullanmak, daha sonra isterseniz yansıma resminin üzerine bazı içerikler eklemek için size bir bonus seçeneği sunar.
Lütfen aşağıdaki resmin altında bir metin modülü oluşturun. Metin modülü boş olacak şekilde varsayılan içeriği silin.
Arka plan rengi ekleyin Beyaz bir arka plan istemiyorsanız, benzersiz bir tam yansıma tasarımı oluşturan başka bir arka plan rengi ile deney yapabilirsiniz.
Bunu yapmak için aşağıdaki satır ayarlarını açın ve güncelleme: Arka plan rengi: #000000 Genişlik:%100: Maks genişlik:%100; Pilding Custom: 0px üst, 0px aşağıda Şimdi sonuçlara bakalım. Metin modüllerinin genişliğine metin ekleyin Unutmayın, metin modülünü alt görüntüdeki kaplama olarak kullandığımız için, istersek biraz içerik ekleyebiliriz. Bunu yapmak için, aşağıdaki metin modülü ayarlarını açın ve aşağıdakileri güncelleyin: İçindekiler: “Görüntü Yansıtma” Metin Renk Metni: #FFFFFF Metin Boyutu: 30px Metin Yönlendirme: Orta
Buradaki son tasarım, görüntü yansımasının son tasarımıdır. Divi’de metin yansıması yapmak Aşağıdaki örnek için bir metin yansıma tasarımı oluşturacağız. Süreç, bir görüntü yansıması yapacağınıza çok benzer. Ancak, bu örnek için, tüm çizgiler için bir yansıma yapacağım. Bu, iyi bir başlık tasarımı için metin ve arka plan görüntüsünü yansıtmak için kullanılmasına izin verecektir. İşte nasıl yapılacağı. İlk olarak, bir satır sütun içeren yeni bir düzenli bölüm oluşturun. Ardından metin modülünü satıra ekleyin. İçeriği “yansıma” kelimesiyle güncelleyin. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin Yazı Tipi: Oswald Metin Yazı Tipi Stili: TT Metin Renk Metni: #333333 Metin Boyutu Metin: 10VW Yüksek Satır Metin: .9MEM Metin Oryantasyonu: Orta Özel Marj: 0px daha düşük özel dolgu: 4VW Baro üzerinden Ayarlar Geçerli Satır Ayarları Metin modülümüz ayarlandı, satır ayarlarını güncelleme zamanı.Aşağıdaki satır ve güncelleme ayarlarını açın: Arka plan görüntüsü: oluk genişliğinin arka plan görüntüsünü girin: 1 genişlik:% 100 maks. İşte şimdiye kadar bir tasarım ekranı. Bir Refleksoloji Metin Çizgisi Oluşturma Bu tasarım için bir yansıma metni yapmak için, yansıma arka plan görüntülerini ekleyebilmemiz için tüm çizgiyi yansıtacağız.Sıralı oran ve aşağıdakileri güncelleyin: Y eksen ölçeğinin dönüşümü:% -100 Şimdi aşağıdaki çizgi yukarıdaki çizgiden bir ayna görüntüsü.Şimdi yapmamız gereken, bindirme eklemek. Metin modülünü kullanarak bir gradyan genişliği ekleyin Alt çizgi metin yansımamıza kaplama gradyanı eklemek için, metin modülünü yukarıdaki ilk görüntü yansıma tasarımında yaptığımız gibi kullanabiliriz. Daha önce olduğu gibi, tüm çizgiyi dolduracak ve diğer metin modülünde yansıma metnimizle oturacak şekilde mutlak bir konum metin modülü sağlayabiliriz. Ardından, gradyanın arka planını metin modülünün yer paylaşımına ekleyebiliriz. Devam edin ve alt satırdaki metin modülü altında yeni bir metin modülü oluşturun. Yeni metin modülü ayarlarını açın ve metin modülü boş olacak şekilde içeriği silin. Ardından ayarları aşağıdaki gibi güncelleyin: Arka plan gradyanının sol rengi: #ffffff sağ renk arka plan: RGBA (255,255,255,0.13) Başlangıç Pozisyonu:% 38 Genişlik:% 100 Yükseklik:% 100 Sonra Ana Element’e aşağıdaki özel CSS ekleyin: Pozisyon: Mutlak! Önemli; Üst: 0; İşte burada! Nihai sonuçlar nihai sonucu görür. İşte arka plan görüntüsü olmadan aynı tasarım.
Son yansıma zihni, doğru şekilde tasarlamak için zaman ayırırsanız çok havalı görünebilir. Neyse ki, Divi’nin gerçekleşmesi için bir aracı var. CSS yansımaları yapmak için başka yöntemler de var, ancak maalesef geçiş tarayıcısını desteklememe eğilimindedirler. Bu öğreticideki tasarım tüm tarayıcılarda iyi görünecektir. Yansıtmanın başlık başlığında harika göründüğünü ve portföyün görüntülerini görüntülediğini buldum. Ve eminim başka birçok uygulama var. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve düzenini sayfanıza aktarmak için Haftalık Divi Düzen Paketine erişin! Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız olan YouTube kanalımıza abone olun, ihtiyacınız olan tek şey Divi. Divi temasının yüklü ve etkin olduğundan emin olun. Tasarımızı baştan ön tarafta (görsel yapımcı) kullanarak yapacağız. Ayrıca bu öğretici için bazı taklit görüntülere ihtiyacınız var (1920px x 600px civarında arka plan görüntüsü ve 500px x 350px civarında diğer resimler).
Hazır olduğunuzda, WordPress kontrol panelinizi açın ve sayfa> Yeni Ekle’ye gidin. Yeni sayfa başlığınızı verin ve ön tarafta Divi Builder kullanın. “Başından Uyan” seçeneğini seçin. Şimdi ayrılmaya hazırsın! Arkasındaki temel fikirler Divi’de görüntü ve metin yansımaları yapmak Divi’de refleksoloji tasarımı yapmanın arkasındaki temel fikirler üç adım içerir:
Görüntünüz veya metninizle bir modül oluşturun
Çift modüller ve yansıtılan bir görüntü veya metin oluşturmak için bir dönüşüm ölçeği kullanın
Kesinlikle konumlandırılmış bir bölücü veya metin modülünü kullanarak ayna öğesine degrade kaplama ekleyin.
Bu tasarım tekniği ayrı modüllerle sınırlı değildir. Benzersiz bir başlık tasarımı oluşturmak için yararlı olan bu yöntemi kullanarak Divi’deki tüm satırlara yansıma ekleyebilirsiniz. Metin yansıma tasarımımızdaki çizgiye bu öğreticide biraz daha sonra yansıma ekleyeceğiz. Ama şimdilik görüntü yansıması yaparak başlayalım.
Görüntü yansıması nasıl yapılır Bir görüntü yansıması yapmak için, bir satır sütunu ile yeni bir normal parça yaparak başlayalım. Ardından görüntü modülünü satıra ekleyin.
Medya galerisinden istediğiniz görüntüyü resim modülüne yükleyin. Ardından aşağıdaki resim ayarlarını güncelleyin: Maks genişlik: 600px modül hizalama: Orta Özel Kenar: 0px daha düşük Bir yansıma efekti oluşturmak için bir ayna görüntüsü oluşturun, önce görüntünün hemen altındaki görüntüden bir ayna kopyası yapmamız gerekir. Bunu yapmak için, yinelenen görüntü modülü. Ardından, yinelenen görüntü ayarlarını aşağıdaki gibi güncelleyin: Opaklık: X Ekseninin% 40 Dönüşümü Ölçeğin:% -100 Dönüşüm Ölçeği Özelliği, resmin bir ayna versiyonunu oluşturmak için resmi dikey ve yatay olarak mucizevi bir şekilde tersine çeviren şeydir. Bu temel yansıma tasarımlarını ele alır. Bununla birlikte, daha gerçekçi bir yansıma tasarımı için alt resmimize ek kaplama gradyanı ekleyebiliriz. Alt resmimize kaplama gradyanı eklemek için bir metin modülü kullanarak bir gradyan genişliği ekleyin, metin modülünü kullanabiliriz. Mutlak konum metin modülünü alt görüntünün üstünde olacak şekilde verebiliriz. Ardından, gradyanın arka planını metin modülüne ekleyebiliriz. Bir metin modülü (bölücü değil) kullanmak, daha sonra isterseniz yansıma resminin üzerine bazı içerikler eklemek için size bir bonus seçeneği sunar.
Lütfen aşağıdaki resmin altında bir metin modülü oluşturun. Metin modülü boş olacak şekilde varsayılan içeriği silin.
Ardından metin modülü ayarlarını aşağıdaki gibi güncelleyin: Arka plan gradyanının sol rengi: RGBA (255,255,255,0) Sağ renk arka plan gradyanı: #ffffff genişliği:% 100 Yükseklik:% 50 sonra ana öğeye aşağıdaki özel CSS ekleyin: Pozisyon: Konum: Mutlak! Önemli üst:%50;
Mutlak Konum Bu metin modülü, metin modülünü satırın altına satar. Bakalım tasarımın nasıl olduğunu görelim.Arka plan rengi ekleyin Beyaz bir arka plan istemiyorsanız, benzersiz bir tam yansıma tasarımı oluşturan başka bir arka plan rengi ile deney yapabilirsiniz.
Bunu yapmak için aşağıdaki satır ayarlarını açın ve güncelleme: Arka plan rengi: #000000 Genişlik:%100: Maks genişlik:%100; Pilding Custom: 0px üst, 0px aşağıda Şimdi sonuçlara bakalım. Metin modüllerinin genişliğine metin ekleyin Unutmayın, metin modülünü alt görüntüdeki kaplama olarak kullandığımız için, istersek biraz içerik ekleyebiliriz. Bunu yapmak için, aşağıdaki metin modülü ayarlarını açın ve aşağıdakileri güncelleyin: İçindekiler: “Görüntü Yansıtma” Metin Renk Metni: #FFFFFF Metin Boyutu: 30px Metin Yönlendirme: Orta
Buradaki son tasarım, görüntü yansımasının son tasarımıdır. Divi’de metin yansıması yapmak Aşağıdaki örnek için bir metin yansıma tasarımı oluşturacağız. Süreç, bir görüntü yansıması yapacağınıza çok benzer. Ancak, bu örnek için, tüm çizgiler için bir yansıma yapacağım. Bu, iyi bir başlık tasarımı için metin ve arka plan görüntüsünü yansıtmak için kullanılmasına izin verecektir. İşte nasıl yapılacağı. İlk olarak, bir satır sütun içeren yeni bir düzenli bölüm oluşturun. Ardından metin modülünü satıra ekleyin. İçeriği “yansıma” kelimesiyle güncelleyin. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin Yazı Tipi: Oswald Metin Yazı Tipi Stili: TT Metin Renk Metni: #333333 Metin Boyutu Metin: 10VW Yüksek Satır Metin: .9MEM Metin Oryantasyonu: Orta Özel Marj: 0px daha düşük özel dolgu: 4VW Baro üzerinden Ayarlar Geçerli Satır Ayarları Metin modülümüz ayarlandı, satır ayarlarını güncelleme zamanı.Aşağıdaki satır ve güncelleme ayarlarını açın: Arka plan görüntüsü: oluk genişliğinin arka plan görüntüsünü girin: 1 genişlik:% 100 maks. İşte şimdiye kadar bir tasarım ekranı. Bir Refleksoloji Metin Çizgisi Oluşturma Bu tasarım için bir yansıma metni yapmak için, yansıma arka plan görüntülerini ekleyebilmemiz için tüm çizgiyi yansıtacağız.Sıralı oran ve aşağıdakileri güncelleyin: Y eksen ölçeğinin dönüşümü:% -100 Şimdi aşağıdaki çizgi yukarıdaki çizgiden bir ayna görüntüsü.Şimdi yapmamız gereken, bindirme eklemek. Metin modülünü kullanarak bir gradyan genişliği ekleyin Alt çizgi metin yansımamıza kaplama gradyanı eklemek için, metin modülünü yukarıdaki ilk görüntü yansıma tasarımında yaptığımız gibi kullanabiliriz. Daha önce olduğu gibi, tüm çizgiyi dolduracak ve diğer metin modülünde yansıma metnimizle oturacak şekilde mutlak bir konum metin modülü sağlayabiliriz. Ardından, gradyanın arka planını metin modülünün yer paylaşımına ekleyebiliriz. Devam edin ve alt satırdaki metin modülü altında yeni bir metin modülü oluşturun. Yeni metin modülü ayarlarını açın ve metin modülü boş olacak şekilde içeriği silin. Ardından ayarları aşağıdaki gibi güncelleyin: Arka plan gradyanının sol rengi: #ffffff sağ renk arka plan: RGBA (255,255,255,0.13) Başlangıç Pozisyonu:% 38 Genişlik:% 100 Yükseklik:% 100 Sonra Ana Element’e aşağıdaki özel CSS ekleyin: Pozisyon: Mutlak! Önemli; Üst: 0; İşte burada! Nihai sonuçlar nihai sonucu görür. İşte arka plan görüntüsü olmadan aynı tasarım.
Son yansıma zihni, doğru şekilde tasarlamak için zaman ayırırsanız çok havalı görünebilir. Neyse ki, Divi’nin gerçekleşmesi için bir aracı var. CSS yansımaları yapmak için başka yöntemler de var, ancak maalesef geçiş tarayıcısını desteklememe eğilimindedirler. Bu öğreticideki tasarım tüm tarayıcılarda iyi görünecektir. Yansıtmanın başlık başlığında harika göründüğünü ve portföyün görüntülerini görüntülediğini buldum. Ve eminim başka birçok uygulama var. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
