Divi: Kullanılacak en kolay WordPress teması
Divi: Tüm zamanların en iyi WordPress teması!
daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]
Görüntüler ve metin için yansımalar tasarlamak, bir web sayfasındaki içeriği renklendirmek için kullanılabilen klasik bir tasarım tekniğidir. Ayrıca Divi, bu yansımaların bir fotoğraf editörü kullanmak zorunda kalmadan doğrudan Divi Builder'dan oluşturulmasını kolaylaştırır.
Bu eğitimde, Divi'deki görüntüler için yansımaların nasıl tasarlanacağını göstereceğim. Yansıtma yapmanın anahtarı, bir öğenin ayna sürümünü oluşturmak için Divi'nin dönüştürme seçeneğini kullanmaktır. Bundan sonra size bir metin modülüyle nasıl kullanılacağını göstereceğim özel bir kaplama ekleyebilirsiniz.
Hadi başlayalım!
anket
İşte bu eğitimde yapacağımız tasarımlara genel bir bakış.
Başlamak için neye ihtiyacınız var?
Yeni başlayanlar için tek ihtiyacınız olan Divi. Divi temasının kurulu ve aktif olduğundan emin olun. Ön uçtaki Divi Builder'ı (görsel oluşturucu) kullanarak tasarımlarımızı sıfırdan oluşturacağız. Bu eğitim için bazı sahte resimlere de ihtiyacınız olacak (yaklaşık 1920px x 600px'lik bir arka plan resmi ve yaklaşık 500px x 350px'lik başka bir resim).
Hazır olduğunuzda, WordPress kontrol panelinize gidin ve Sayfalar> 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 bir görüntü ve metin yansıması oluşturmanın arkasındaki temel fikir
Divi'de yansıma kalıpları oluşturmanın temel fikri üç adımı içerir:
- Resminizle veya metninizle bir modül oluşturun
- Modülü çoğaltın ve ayna görüntüsü veya metni oluşturmak için dönüştürme ölçeğini kullanın
- Aynalı öğeye bir ayırıcı veya mutlak konumlandırılmış bir metin modülü kullanarak bir degrade kaplama ekleyin.
Bu tasarım tekniği, tek tek modüllerle sınırlı değildir. Bu yöntemi kullanarak Divi'deki tüm satırlara yansımalar ekleyebilirsiniz, bu da benzersiz başlık tasarımları oluşturmak için kullanışlıdır. Yansımayı, bu öğreticide daha sonra metin yansıtma tasarımımızın bir satırına ekleyeceğiz. Ama şimdilik bir görüntü yansıması oluşturarak başlayalım.
Bir 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.
Sonra çizgiye bir görüntü modülü ekleyin.
Elementor ile web sitenizi kolayca oluşturun
Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]
Ortam kitaplığından istediğiniz görüntüyü görüntü modülüne indirin. Ardından aşağıdaki görüntü ayarlarını güncelleyin:
Maksimum genişlik: 600px
Modülün hizalanması: orta
Özel marj: En altta 0px
Ayna görüntüsünü oluşturun
Yansıma efekti oluşturmak için, önce görüntünün doğrudan bir kopyasını doğrudan görüntünün altında oluşturmamız gerekir.
Bunu yapmak için, görüntü modülünü çoğaltın. Ardından, yinelenen görüntü ayarlarını aşağıdaki gibi güncelleyin:
Opaklık:% 40
X ekseni dönüşüm ölçeği: -100%
Dönüştürme ölçeği özelliği, görüntünün aynalanmış 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ını destekler. Ancak, daha gerçekçi bir yansıma tasarımı için alt resmimize ek bir gradyan yerleşimi ekleyebiliriz.
Bir metin modülü kullanarak bir degrade kaplama ekleyin
Alttaki resmimize bir degrade kaplama eklemek için bir metin modülü kullanabiliriz. Metin modülüne, alttaki görüntünün üzerine oturması için mutlak bir konum verebiliriz. Ardından metin modülüne gradyan arka planı ekleyebiliriz. Bir metin modülü kullanmak (ayırıcı yerine), daha sonra isterseniz yansıma görüntüsünün üstüne içerik ekleme 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 şekilde güncelleyin:
Sol arka plan gradyanı Renk: rgba (255,255,255,0)
Arka plan degrade sağ Renk: #ffffff
Genişlik:% 100
Yükseklik:% 50
Ardından ana öğeye aşağıdaki özel CSS kodunu ekleyin:
konum: mutlak! önemli; üst:% 50;
Metin modülünün bu mutlak olarak konumlandırılması, metin modülünü satırın alt yarısına yerleştirir.
Arka plan rengi ekleme
Beyaz bir arka plan istemiyorsanız, tüm genişlikte bir yansıma deseni oluşturmak için diğer arka plan renklerini kullanabilirsiniz.
Bunu yapmak için, hat ayarlarını açın ve aşağıdakileri güncelleyin:
Arka plan rengi: #000000
Genişlik:% 100:
Maksimum Genişlik:% 100;
Özel dolgu: 0px yüksek, 0px aşağı
Çevrimiçi Mağazanızı kolayca oluşturun
WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]
Şimdi sonucu görelim.
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 sahiptir. CSS yansımaları yapmanın başka yöntemleri de var, ancak maalesef tarayıcılardan destek alma eğiliminde değiller. Bu eğitimdeki tasarımlar herhangi bir tarayıcıda harika görünecek.
Bir portföy öğesi için sayfa başlıklarında ve görseller sergilenirken yansımaların harika göründüğünü gördüm. Ve eminim birçok başka uygulama vardır.
Bu eğitim için bu kadar, umarım Divi'nin dahili özelliklerini kullanarak WordPress sitenize yansımalar eklemenize izin verir.