Ana İçeriğe Geç

Divi'de görüntü yansımaları nasıl oluşturulur

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ış.

Yansımalı Divi modülü

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:

  1. Resminizle veya metninizle bir modül oluşturun
  2. 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
  3. 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.

Divi bölümü ekle

Sonra çizgiye bir görüntü modülü ekleyin.

Divi görüntü modülü

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

CSS stil değişikliği

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.

Bir divi yansıması yapın

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.

Divi metin modülü ekle

Metin modülünün boş olması için varsayılan içeriği silin.

Metin ve görüntüler için Divi Yansımaları

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.

Divi özel metin modülü

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ğı

Divi çizgi stilini değiştir

Ç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.

Yansımalı Divi modülü

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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse1
cıvıltı
Enregistrer