Divi'de Görüntüler ve Metinler İçin Yansımalar Nasıl Tasarlanır?
Yayınlanan: 2019-05-19Görüntüler ve metinler için yansımalar tasarlamak, bir web sayfasının içeriğini renklendirmek için kullanılabilecek klasik bir tasarım tekniğidir. Ve Divi, bu yansımaları bir fotoğraf düzenleyici kullanmak zorunda kalmadan doğrudan Divi Builder'dan oluşturmayı kolaylaştırır.
Bu derste size Divi'de resimler ve metinler için nasıl yansımalar tasarlayacağınızı göstereceğim. Yansıma yapmanın anahtarı, öğenin yansıtılmış bir sürümünü oluşturmak için Divi'nin dönüştürme ölçeği seçeneğini kullanmaktır. Bundan sonra, size bir metin modülüyle nasıl yapacağınızı göstereceğim özel bir kaplama ekleyebilirsiniz.
Başlayalım!
Gizlice Bakış
İşte bu eğitimde inşa edeceğimiz tasarımlara bir göz atın.
ÜCRETSİZ Metin ve Görüntü Yansımaları Düzenini İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.
Ü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.
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.
Hadi öğreticiye geçelim mi?
Youtube Kanalımıza Abone Olun
Başlamak için Gerekenler
Başlamak için tek ihtiyacınız olan Divi. Divi Temasının kurulu ve etkin olduğundan emin olun. Ön uçtaki Divi Builder'ı (görsel oluşturucu) kullanarak tasarımlarımızı sıfırdan oluşturacağız. Ayrıca bu eğitim için birkaç sahte görüntüye ihtiyacınız olacak (1920 piksel x 600 piksel civarında bir arka plan resmi ve 500 piksel x 350 piksel civarında başka bir resim).
Hazır olduğunuzda, WordPress Kontrol Panelinize gidin ve Sayfalar > Yeni Ekle'ye gidin. Yeni sayfanıza bir başlık verin ve Divi Builder'ı ön uçta dağıtın. "Sıfırdan Oluştur" seçeneğini seçin. Artık gitmeye hazırsınız!
Divi'de Görüntü ve Metin Yansıması Oluşturmanın Arkasındaki Temel Fikir
Divi'de yansıma tasarımları oluşturmanın ardındaki temel fikir üç adımdan oluşur:
- Resminiz veya Metniniz ile Bir Modül Oluşturun
- Modülü çoğaltın ve yansıtılmış görüntüyü veya metni oluşturmak için Dönüştür ölçeğini kullanın
- Mutlak konumlandırılmış bir bölücü veya metin modülü kullanarak aynalanmış öğeye Degrade Yerleşimi ekleyin.
Bu tasarım tekniği, bireysel modüllerle sınırlı değildir. Benzersiz başlık tasarımları oluşturmak için yararlı olan bu yöntemi kullanarak Divi içindeki tüm satırlara gerçekten yansımalar ekleyebilirsiniz. Bu eğitimde biraz sonra metin yansıma tasarımımızda bir satıra yansıma ekleyeceğiz. Ama şimdilik görüntü yansımasının nasıl oluşturulacağıyla başlayalım.
Görüntü Yansıması Nasıl Oluşturulur
Bir görüntü yansıması oluşturmak için, tek sütunlu yeni bir normal bölüm oluşturarak başlayalım.
Ardından satıra bir görüntü modülü ekleyin.
Medya galerisinden istediğiniz görseli görsel modülüne yükleyin. Ardından aşağıdaki görüntü ayarlarını güncelleyin:
Maksimum Genişlik: 600 piksel
Modül Hizalaması: merkez
Özel Kenar Boşluğu: 0 piksel alt
Ayna Görüntüsünü Oluşturun
Yansıma efektini oluşturmak için önce görüntünün hemen altında görüntünün yansıtılmış bir kopyasını oluşturmamız gerekir.
Bunu yapmak için görüntü modülünü çoğaltın. Ardından yinelenen görüntünün ayarlarını aşağıdaki gibi güncelleyin:
Opaklık: %40
Ölçeği X eksenini dönüştür: -%100
Dönüştürme ölçeği özelliği, görüntünün yansıtılmış bir sürümünü oluşturmak için görüntüyü sihirli bir şekilde dikey ve yatay olarak çeviren şeydir.
Bu, temel yansıma tasarımıyla ilgilenir. Ancak, daha gerçekçi bir yansıma tasarımı için alttaki görüntümüze ek bir degrade kaplama ekleyebiliriz.
Metin Modülü Kullanarak Degrade Yerleşimi Ekleme
Alttaki resmimize degrade kaplama eklemek için bir metin modülü kullanabiliriz. Metin modülüne, alttaki görüntünün üstüne oturması için mutlak bir konum verebiliriz. Ardından metin modülüne bir degrade arka planı ekleyebiliriz. Bir metin modülü (bölücü yerine) kullanmak, isterseniz daha sonra yansıma görüntüsünün üzerine bir miktar içerik ekleme bonus seçeneği sunar.
Devam edin ve alttaki görüntünün altında bir metin modülü oluşturun.
Metin modülünün boş olması için varsayılan içeriği silin.
Ardından metin modülü ayarlarını aşağıdaki gibi güncelleyin:
Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
Arka Plan Gradyanı Sağ Renk: #ffffff
Genişlik: %100
Yükseklik: %50
Ardından aşağıdaki özel CSS'yi Ana Öğeye ekleyin:
position: absolute !important; top: 50%;
Metin modülünün bu mutlak konumu, satırın alt yarısında metin modülünü kaplar.
Şimdi tasarımın şu ana kadar nasıl göründüğüne bir göz atalım.
Arka Plan Rengi Ekleme
Beyaz bir arka plan istemiyorsanız, benzersiz bir tam genişlikte yansıma tasarımı oluşturan diğer arka plan renklerini deneyebilirsiniz.
Bunu yapmak için satır ayarlarını açın ve aşağıdakileri güncelleyin:
Arka Plan Rengi: #000000
Genişlik: %100:
Maksimum Genişlik: %100;
Özel Dolgu: 0 piksel üst, 0 piksel alt
Şimdi sonucu kontrol edelim.
Metin Modülü Kaplamasına Metin Ekleme
Unutmayın, alttaki resimdeki bindirme olarak metin modülünü kullandığımızdan, istersek biraz içerik ekleyebiliriz.
Bunu yapmak için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:
İçerik: “Görüntü Yansıması”
Metin Metin Rengi: #ffffff
Metin Metin Boyutu: 30px
Metin Yönü: orta
Son tasarım
İşte görüntü yansımasının son tasarımı.
Divi'de Metin Yansıması Oluşturma
Bu sonraki örnek için, bir metin yansıma tasarımı oluşturacağız. İşlem, bir görüntü yansımasını nasıl oluşturacağınıza çok benzer. Ancak, bu örnek için, tüm satır için bir yansıma oluşturacağım. Bu, kullanımın güzel bir başlık tasarımı için hem metni hem de arka plan görüntüsünü yansıtmasını sağlayacaktır.
İşte nasıl yapılacağı.
Önce bir sütun satırı olan yeni bir normal bölüm oluşturun. Ardından satıra bir metin modülü ekleyin.
İçeriği “Yansıma” kelimesiyle güncelleyin.
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:
Yazı Tipi: Oswald
Metin Yazı Tipi Stili: TT
Metin Metin Rengi: #333333
Metin Metin Boyutu: 10vw
Metin Satırı Yüksekliği: .9em
Metin Yönü: orta
Özel Kenar Boşluğu: 0 piksel alt
Özel Dolgu: 4vw üst
Satır ayarlarını güncelleyin
Artık metin modülümüz özelleştirildiğine göre, sıranın ayarlarını güncelleme zamanı geldi.
Satır ayarlarını açın ve aşağıdakileri güncelleyin:
Arka Plan Resmi: arka plan resmi ekle
Oluk Genişliği: 1
Genişlik: %100
Maksimum Genişlik: %100
Özel Dolgu: 0 piksel üst, 0 piksel alt
İşte tasarımın şu ana kadar nasıl göründüğü.
Yansıma Metin Satırını Oluşturma
Bu tasarımın yansıma metnini oluşturmak için, arka plan görüntüsünü yansımaya dahil edebilmemiz için tüm satırı yansıtacağız.
Satırı çoğaltın ve aşağıdakileri güncelleyin:
Ölçeği Y eksenini dönüştür: -%100
Şimdi aşağıdaki satır, yukarıdaki satırın ayna görüntüsüdür. Şimdi tek yapmamız gereken bir bindirme eklemek.
Metin Modülü Kullanarak Degrade Yerleşimi Ekleme
Alt satırdaki metin yansımamıza degrade kaplama eklemek için yukarıdaki ilk resim yansıma tasarımında yaptığımız gibi bir metin modülü kullanabiliriz. Daha önce olduğu gibi, metin modülüne tüm satırı doldurması ve yansıma metnimizle diğer metin modülünün üstüne oturması için mutlak bir konum verebiliriz. Ardından, metin modülü yerleşimine degrade bir arka plan ekleyebiliriz.
Devam edin ve alt satırdaki metin modülünün altında yeni bir metin modülü oluşturun.
Yeni metin modülü ayarlarını açın ve metin modülünün boş kalması için içeriği silin.
Ardından ayarları aşağıdaki gibi güncelleyin:
Arka Plan Gradyanı Sol Renk: #ffffff
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0.13)
Başlangıç Konumu: %38
Genişlik: %100
Yükseklik: %100
Ardından aşağıdaki özel CSS'yi Ana Öğeye ekleyin:
position: absolute !important; top: 0;
Bu kadar!
Son sonuç
Nihai sonucu kontrol edin.
İşte arka plan resmi olmayan aynı tasarım.
Son düşünceler
Onları doğru şekilde tasarlamak için zaman ayırırsanız, yansımalar gerçekten harika görünebilir. Neyse ki Divi, bunu gerçekleştirecek araçlara sahip. CSS yansımaları yapmak için başka yöntemler de var, ancak ne yazık ki bunlar çapraz tarayıcı desteğinden yoksun olma eğilimindedir. Bu eğitimdeki tasarımlar tüm tarayıcılarda iyi görünecek.
Sayfa başlıklarında ve bir portföy parçasının resimlerini sergilemede yansımaların harika göründüğünü buldum. Ve eminim başka birçok uygulama da vardır.
Yorumlarda sizden haber bekliyorum.
Şerefe!