Web Tasarımı için Elementor'da Arka Plan Yerleşimi Nasıl Eklenir

Yayınlanan: 2024-07-01

Elementor, web tasarımını her zamankinden daha kolay hale getiren, WordPress için lider bir sayfa oluşturucu eklentisidir. Öne çıkan özelliklerinden biri Arka Plan Yerleşimi seçeneğidir. Bu özelliği doğru bir şekilde kullanarak web sitenizin çekiciliğini ve estetiğini bir sonraki seviyeye taşıyabilirsiniz.

Elementor size birden fazla arka plan kaplama seçeneği sunar. Bu yazıda size bu seçeneklerin her biri hakkında adım adım kılavuz göstereceğiz. Öyleyse, web tasarımı için Elementor'da arka plan kaplamasının nasıl ekleneceği hakkındaki makaleye geçelim.

Elementor Arka Plan Yerleşimi Nedir?

Arka plan kaplaması, mevcut bir arka plan görselinin, deseninin veya renginin üzerine eklenen yarı şeffaf bir katmandır. Görsel olarak çarpıcı efektler oluşturmak için kaplamayı farklı renkler, opaklıklar, degradeler ve hatta desenlerle özelleştirebilirsiniz.

Arka Plan Yerleşimi, yerleşik olarak gelen Elementor eklentisinin temel bir özelliğidir. Hem ücretsiz hem de premium sürümlerde kullanabilirsiniz. Bu özellik özellikle düşük kaliteli görüntüler kullanıldığında veya herhangi bir arka planın üstünde metin sergilendiğinde kullanışlıdır.

Elementor Arka Plan Yerleşimi Türleri

Elementor'a ekleyebileceğiniz temel olarak üç tür arka plan kaplaması vardır. Bunlar:

1. Düz Renk Kaplama : Bir web bölümüne veya öğeye yalnızca düz renk kaplama ekler. Düz bir renk ve opaklık düzeyini seçerek bu kaplamayı özelleştirebilirsiniz.

2. Degrade Renk Kaplaması : Degrade, herhangi bir web bölümünün veya öğesinin arka planına çok renkli kaplama efektleri eklemenizi sağlar. Umarım degradenin ne olduğunu zaten biliyorsunuzdur. Veya bekleyin, bu konuyu daha sonra bu yazıda tartışacağız.

3. Görüntü Yer Paylaşımı : Bu özellik, çekiciliğini artırmak için görüntünün üzerine düz bir renk, doku veya desen katmanı uygulamanıza olanak tanır.

Özel notlar Elementor Arka Plan Yerleşimi Hakkında

Elementor'daki Arka Plan Yerleşimi seçeneği, içerik arka planına değil, yalnızca widget arka planına katmanlar eklemenizi sağlar.

Elementor background overlay to the widget background

Kaplama efektini doğrudan içerik arka planına eklemek için HappyAddons gibi ek bir eklentiye ihtiyacınız vardır.

Elementor background overlay to the content background

Yani sitenizde hem Elementor hem de HappyAddons varsa, ihtiyacınız olan her yerde uygun arka plan kaplama seçeneğini kullanabilirsiniz. Yöntemleri inceleyelim.

Birinci Yöntem: Elementor'da Widget Arka Planına Kaplamalar Nasıl Eklenir?

Daha önce de söylediğimiz gibi, Elementor'a ekleyebileceğiniz üç tür arka plan kaplaması vardır. Şimdi size tüm bu tür arka plan katmanlarını Elementor widget'larına nasıl ekleyeceğinizi göstereceğiz.

Tip 01: Elementor Widget'ına Düz Renkli Arka Plan Kaplaması Ekleme

Umarım bölümünüz ve içeriğiniz hazırdır. Tüm bölümün Kapsayıcıyı Düzenle simgesini tıklayın .

Stil sekmesine gidin. İki seçeneğiniz olacak: Arka Plan ve Arka Plan Yerleşimi . Bu iki seçeneği kullanarak Elementor'a arka plan kaplamaları ekleyebilirsiniz.

Go to Elementor Background Overlay options

Örneğin, Arka Plan'ı açın. Fırça simgesini seçin. Aşağıda, arka plana düz bir renk ekleyebileceğiniz Renk seçeneğini göreceksiniz.

Add solid color background overlay in Elementor

Widget bölümünün arka plan kaplaması için bir renk seçtiğimizi görebilirsiniz.

Select a color for the background overlay

Tip 02: Elementor Widget'ına Degrade Renkli Arka Plan Kaplaması Ekleme

Widget'ı tekrar seçin . Stil sekmesine gidin. Arka Plan seçeneğini genişletin.

Arka Plan Türü'nün yanındaki Degrade seçeneğini seçin . Altında daha fazla renk seçeneği görünen seçenekler göreceksiniz.

Şimdi degrade paletinizi oluşturmak için birincil ve ikincil renk seçin. Renklerin widget'ınızın üzerinde arka plan kaplaması olarak görüntülendiğini göreceksiniz.

Add a Gradient Color Background Overlay to the Elementor Widget

Böylece widget arka planınız için degrade renkli arka plan kaplamaları oluşturabilirsiniz. Gradient'te başka birçok seçenek var. Umarım bunları kendiniz keşfedebilir ve kullanabilirsiniz.

Tip 03: Elementor Widget'ına Görüntü Arka Plan Kaplaması Ekleme

Görüntü katmanları için görüntüleri ve sağlam bir tasmayı bir arada kullanabilirsiniz. Görüntüyle birlikte düz bir renk kullanarak mükemmel bir kontrast oluşturarak yukarıdaki içeriğin daha iyi görünmesini sağlayabilirsiniz. Bunu nasıl yapacağımızı görelim.

Stil sekmesine gidin. Arka Plan Yerleşimi seçeneğini genişletin. Resim seçeneğini tıklayın. Yerel sürücüden veya medya kitaplığından bir görüntü seçmenize ve eklemenize izin verilecektir.

Go to image option in Elementor Background Overlay

Arka Plan Kaplamasına bir resim eklediğimizi görebilirsiniz. Daha sonra içeriğe mükemmel uyum sağlayacak uygun bir konum seçin .

Image added to the Elementor Background Overlay option

Arka Plan seçeneğini genişletin. Daha sonra görüntüye uygun, uygun bir düz renk seçin . Görüntünün üzerine bir katmanın eklendiğini göreceksiniz.

Add a solid color to the Image overlay

Arka Plan Yerleşimi seçeneğine gidin.

Go to Background Overlay Option again

Elementor panelini aşağı kaydırarak Karışım Moduna gelin. Sağ taraftaki simgeye tıklayın. Karışım modlarının bir listesini açacaktır.

Come to the Blend Mode

Listedeki tüm karışım ruh hallerini keşfederek beğendiğiniz bir ruh hali seçin . Görüntü üzerindeki etkisini göreceksiniz.

Select a Blend Mode

Arka plan kaplamasının ve metin renklerinin neredeyse benzer olduğunu görebilirsiniz. Bu nedenle, metnin daha iyi okunabilmesi için aralarında kontrast oluşturacak şekilde metin rengini değiştirdik.

Create a contrast between the background overlay and text

Böylece Elementor widget'ının arka planına bir Arka Plan Kaplaması ekleyebilirsiniz.

İkinci Yöntem: Elementor'da İçerik Arka Planına Kaplamalar Nasıl Eklenir?

İçeriği arka plana yerleştirme işlemi yukarıdaki yöntemle tamamen aynıdır. Bu HappyAddons eklentisinin ücretsiz bir özelliğidir . Eklenti hakkında henüz fazla bilginiz yoksa HappyAddons'ın ne olduğunu keşfedin.

Peki HappyAddons'taki Arka Plan Yerleşimi seçenekleri nerede? İçerik widget'ını seçin . Gelişmiş sekmesine gidin. Bu sekmenin altında Arka Plan ve Arka Plan Yerleşimi seçeneklerini göreceksiniz.

Background Overlay options in HappyAddons

Bu iki seçeneğin isimleri ile Elementor'un iki seçeneğinin isimlerinin birebir aynı olduğunu görebilirsiniz. Ve onların çalışma süreçleri de aynı. Süreci keşfedelim.

Tip 01: Eklenen İçeriğe Düz Renkli Arka Plan Kaplaması Ekleme

İçerik widget'ını seçin . Elementor panelindeki Gelişmiş sekmesine gelin. Arka Plan seçeneğini genişletin.

Düz bir renk seçin . Rengin içeriğin arka planına uygulandığını göreceksiniz.

Add a solid color background overlay to Elementor content background

Tip 02: Eklenen İçeriğe Degrade Renkli Arka Plan Kaplaması Ekleme

Yukarıdaki yöntemde olduğu gibi Arka Plan altında Degrade seçeneğini seçin . Birincil ve ikincil rengi ayarlayın. Renk paleti, Elementor tuvalindeki içeriğin arkasında görüntülenecektir.

Add a Gradient Color Background Overlay to the Added Content

Tip 03: Eklenen İçeriğe Görüntü Arka Planı Yerleşimi Ekleme

İçerik widget'ını seçin . Gelişmiş sekmesine gidin.

Arka Plan Yerleşimi seçeneğini genişletin. Resim alanına tıklayın.

Add image background overlay to Elementor content

Yukarıdaki yöntemde açıklandığı gibi yerel sürücünüzden veya medya kitaplığınızdan bir resim ekleyebileceksiniz. Umarım burada da bunu yapabilirsiniz.

Image background overlay is added to the Elementor content

Artık metin içeriğinin arka planda öne çıkmasını sağlamak için metin rengi değiştirildi. Umarım bu, içeriği artık daha iyi ve daha okunabilir hale getirmiştir.

Change the text color

Böylece Elementor'daki içeriğinize resim arka plan kaplamaları ekleyebilirsiniz.

Not: Elementor eklentileri genellikle siteleri biraz yavaşlatır. Ancak bu tür web sitelerini hızlandırmanın birçok yolu vardır. Web sitesi hızını nasıl optimize edeceğinizi keşfedin.

Son Notlar!

Günümüzde arka plan kaplaması eklemek çoğu profesyonel web sitesi tasarımcısı arasında yaygın bir uygulama haline geldi. Bu basit ve kolay bir web tasarım özelliğidir ancak web bölümlerinizi ve içeriğinizi muhteşem ve heyecan verici hale getirecek muazzam bir güce sahiptir.

Yıllar önce HTML ve CSS dilleriyle arka plan kaplamaları oluşturmak gerçekten çok zordu. Ancak Elementor onu esnek hale getirdi ve bu da HappyAddons eklentisiyle çok daha ileri götürüldü. Umuyoruz ki, blog gönderisini takip ederek artık web sitenizdeki arka plan ve içerikten oluşan büyüleyici kaplamalar oluşturabileceksiniz.

Bu özellikle ilgili hala sorun yaşıyorsanız lütfen yorum kutusundan veya canlı sohbet seçeneğinden bize ulaşın. Geçerli bir çözümle çok yakında size geri döneceğiz.