Görüntüler ve metinler için vurgulamalar tasarlamak, görüntüyü renklendirmek için kullanılabilecek klasik bir tasarım tekniğidir. içindekiler bir web sayfasının. Ayrıca Divi, bu yansımaları bir fotoğraf düzenleyici kullanmanıza gerek kalmadan doğrudan Divi Builder'dan oluşturmayı 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?

Başlamak için tek ihtiyacınız olan Divi. Emin ol Divi teması kurulu ve aktif. Ö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 bazı sahte resimlere de 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> 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ü

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 görselimize degrade kaplama eklemek için bir metin modülü kullanabiliriz. Metin modülüne alt görselin üzerinde olacak şekilde mutlak bir konum verebiliriz. Daha sonra metin modülüne degrade bir arka plan ekleyebiliriz. Bir metin modülü kullanmak (ayırıcı yerine) size ek olarak ekleme seçeneği sunacaktır. içindekiler istenirse daha sonra yansıma görüntüsünün üzerine.

Devam edin ve alttaki görüntünün altında bir metin modülü oluşturun.

Divi metin modülü ekle

Silin içindekiler metin modülünün boş olması için varsayılan olarak.

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

Şimdi sonucu görelim.

Yansımalı Divi modülü

Onları düzgün bir şekilde tasarlamak için zaman ayırırsanız, yansımalar gerçekten harika görünebilir. Neyse ki, Divi'nin araçları başarmak için. CSS yansımalarını gerçekleştirmek için başka yöntemler de var, ancak ne yazık ki tarayıcılardan destek alamama eğilimindeler. Bu eğitimdeki tasarımlar tüm tarayıcılarda 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.