Bir görüntünün üzerinde metnin nasıl görüntüleneceğini bilmeyi hiç istediniz mi? Elementor ?

Bu yeni eğitimde, size bunu nasıl yapacağınızı göstereceğiz.

Bugün ne hakkında konuşmak istediğimiz hakkında hiçbir fikriniz yoksa, sizi aşağıdaki videoyu izlemeye davet ediyoruz:

O zaman neden burada olduğumuza dönelim.

Bu öğreticiyi tamamlamak için ihtiyacınız olacak Elementor'un Pro sürümü, çünkü yalnızca bu sürüm tarafından desteklenen özel CSS kodunu kullanacağız.Elementor.

Ayrıca aşağıdakilerle ilgili rehberimizi keşfedin: Elementor ile bir resim galerisi nasıl oluşturulur

3 sütun yapısı ile yeni bir bölüm oluşturalım, ardından panelde tanımlayalım. Yükseklik uzeri Minimum Yükseklikve sonra Minimum yükseklik hadi tıklayalım VH ve kaydırıcıyı ayarlayın 100.

3 sütun bölümü

Orta sütunu seçelim ve sekmede stilbölümünde arka plân hadi tıklayalım klasik için Arka plan türü, ardından koyu bir renk seçin.

Bu sütuna şunu koyalım: İç Bölüm Widget'ı. Dahili Bölüm widget'ı varsayılan olarak 2 sütunla yapılandırılmıştır, bunlardan birini silelim. Panelde kalanını değiştirerek yapılandıralım. Yükseklik uzeri Minimum Yükseklik ve Minimum yükseklik hadi imleci ayarlayalım 400.

Ayrıca Oku: Elementor: Bir Profil Kartı Nasıl Yakınlaştırılır

sonra, üzerinde Dikey hizalama hadi seçelim Çevre.

sonra bırak Başlık widget'ı in iç bölüm Başlık Fotoğrafı olarak girelim ve Hizalamada Seçelim Merkez.

Elementor ile bir görüntünün üzerindeki metni göster

Sekmede stil Başlığın rengini, değilse görünür olacak şekilde değiştirelim,

bir bırakalım Metin Düzenleyici widget'ı altında Başlık widget'ı. Ardından, sekmede stil, Hizalamada seçin Merkez. Ayrıca metnin rengini de görünür olacak şekilde değiştirelim.

Ayrıca bakınız: Elementor: Bölüm oluşturmak için ayırıcı nasıl eklenir

seçelim orta sütun ve onun sekmesinde stil, arka plan rengini sıfırlayın ve bir görüntü yükleyin, ardından Pozisyon hadi seçelim Merkezli Merkezli, tekrar uzeri Tekrarsız, Örtmek uzeri boyut.

Elementor ile bir görüntünün üzerindeki metni göster

bölümünde sınır hadi hepsini değiştirelim 12 üzerinden sınır yarıçapı. Içinde kutu gölgesi, kaydırıcıyı 0 için YatayIçin, 0 Dikey için, 40 Blur'da, -10 yayında. Resminizin altında güzel bir gölge efekti görmelisiniz.

Elementor ile bir görüntünün üzerindeki metni göster

Sur Arka plan yerleşimi, Seçme klasik için Arka plan türü ve renk birini seç siyah renk, Opacity'de kaydırıcıyı şu şekilde ayarlayalım: 0.55

Sekmede gelişmiş, hadi kapalım 20 tüm Marjlar için.

bizim seçelim İç bölüm ve sekmesine gidin gelişmiş Özel CSS bölümünde aşağıdaki kod parçacığını kopyalayıp yapıştırın:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}
Elementor ile bir görüntünün üzerindeki metni göster

(Bu bölüme sahip değilseniz Pro sürümünüz yoktur, devam etmek istiyorsanız sürümünüzü yükseltmeniz gerekir).

Bölümümüzün orta sütununu bir kez daha seçelim, sekmesinde stil, ve bölümünde Arka plan yerleşimi, sekmede olduğumuzu kontrol edin NORMAL, alçalalım opaklık à 0.

Ardından sekmeye tıklayın GENEL BAKIŞSonra klasik için arka plan türü ve renk, bir seçin koyu renk, sonraopaklık uzeri 0.55ve Geçiş süresi kaydırıcıyı ayarlayalım 0.5.

İşte manipülasyonumuzun nihai sonucu.

Elementor ile bir görüntünün üzerindeki metni göster

Sütunumuzu 2 kere çoğaltıp diğer 2 boş sütunu silelim.Geriye arka plan resmini ve arka plan resmini değiştirmek kalıyor. içindekiler 2 yeni sütun için metin editörleri.

Elementor ile bir görüntünün üzerindeki metni göster

Nasıl göründüğünü görmek için çalışmanızı Tablet ve Akıllı Telefonda önizleyin. Ardından kaydedin veya güncelleyin.

Yani. Az önce bir resmin üzerinde bir metin görüntülediniz. Page Builder Elementor.

Elementor Pro'yu Hemen Alın!

Sonuç

Böyle ! Metnin bir resmin üzerinde nasıl görüntüleneceğini gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize içinde bildirin. Yorumlar.

Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...