Beaver Builder 2.9 güçlü bir yeni tasarım özelliği tanıttı: çok katmanlı arka planlar . Bu güncelleme, arka plan renklerini, gradyanlarını ve görüntülerini tek bir yerde istiflemenize izin vererek satırlar, sütunlar ve kutu modülleri üzerinde daha yaratıcı kontrol sağlar.

Ancak daha fazla güçle düşünceli tasarıma ihtiyaç geliyor. Bu makalede, bu yeni özelliği kullanmanın ve bundan en iyi şekilde yararlanmanıza yardımcı olmak için ipuçlarını paylaşmanın akıllı yollarından geçeceğiz.

Çok katmanlı arka planlar nelerdir?

Çok katmanlı arka planlar, tek bir sütun, satır veya kutu modülü ile birden fazla arka plan öğesini (görüntüler, gradyanlar ve renkler) istiflemenizi sağlayan Beaver Builder'a güçlü bir ektir.

Sadece bir tür arka plan seçmek yerine, kullanıcılarınız için daha ilgi çekici ve görsel olarak zengin bir deneyim yaratmak için birkaçını birleştirebilirsiniz:

Çok katmanlı bir arka planın nasıl görünebileceği aşağıda açıklanmıştır:

• Temel Katman : Yüksek kaliteli bir görüntü, bölümün tonunu ve bağlamını ayarlar.
• Orta Katman : Yarı saygın bir gradyan kontrast ekler ve metnin okunabilir kalmasını sağlamaya yardımcı olur.
• Üst katman : Bir marka rengi kaplama veya ince bir doku her şeyi birbirine bağlar ve görsel kimliğinizi güçlendirir.

Bu unsurları harmanlayarak, hem estetik çekiciliği hem de fonksiyonel netliğe sahip arka planlar oluşturabilirsiniz. Sonuç, kullanıcıyı ezmeyen derinlik, kontrast ve görsel dokuya sahip bir düzendir.

İster bir kahraman bölümü, ister harekete geçirici bir blok veya bir özellik ızgarası tasarlarsanız, çok katmanlı arka planlar, tasarımınızı düzden tamamen boyutuna yükselten esneklik ve yaratıcı kontrol sunar.

Neden çok katmanlı arka planlar kullanıyorsunuz?

Çok katmanlı arka planlar, tasarımlarınızı görsel olarak yükseltmenin harika bir yoludur-tek bir kod satırı yazmadan. Arka plan renklerini, gradyanlarını ve görüntüleri istifleyerek, hem estetiği hem de kullanılabilirliği artıran göz alıcı efektler oluşturabilirsiniz:

Katmanlı arka planları kullanmak için bazı pratik nedenler:

• Metnin okunabilirliğini geliştirin : Kontrast ve okunabilirliği artırmak için metnin arkasına bir kaplama veya gradyan ekleyin - özellikle görüntü arka planlarını kullanırken.
• Marka Kimliğinizi Güçlendirin : Daha uyumlu ve tanınabilir bir görsel deneyim yaratmak için arka plan katmanlarındaki marka renklerinizi, desenlerinizi veya dokularınızı kullanın.
• Önemli içerik alanlarına dikkat çekin : Katmanlı arka planlar, kullanıcının gözünü harekete geçirme çağrılarına, özellikli bölümlere veya promosyon içeriğine yönlendirebilir.

Ve en iyisi - hepsi Beaver Builder UI'de yapıldı. Ekstra CSS veya karmaşık kurulum gerekmez. Sadece birkaç tıklama ile, güzel oldukları kadar işlevsel olan dinamik, katmanlı tasarımlar oluşturabilirsiniz.

Beaver Builder'da çok katmanlı arka planlar nasıl kullanılır

Herhangi bir sırayla istediğiniz kadar arka plan türünü - renk, gradyanlar ve görüntüler - karıştırabilir ve eşleştirebilirsiniz:

Bir satır, sütuna veya kutu modülüne birden çok arka plan ekleyeceğiniz aşağıda açıklanmıştır:

1. Düzenleme için öğeyi açın
   Çok katmanlı bir arka plan uygulamak istediğiniz satır, sütunu veya kutu modülünü düzenlemek için tıklayın.
2. Arka plan ayarlarına gidin
   Modül Ayarları panelinde arka plan bölümüne gidin.
3. Birden fazla arka planı etkinleştirin
   Katmanlama etkinleştirmek için birden fazla arka plan seçeneğini seçin.
4. İlk arka planınızı ekleyin
   Arka plan türü eklemek için + simgesini tıklayın, ardından renk , fotoğraf veya gradyan arasından seçim yapın. Ayarları gerektiği gibi özelleştirin.
5. Daha fazla arka plan katmanı ekleyin
   Başka bir katman eklemek için + simgesini tekrar tıklayın. İstiflemek istediğiniz her arka plan türü için işlemi tekrarlayın.
6. Değişikliklerinizi kaydedin
   Katmanlı arka plan tasarımınızdan memnun olduğunuzda, Kaydet'i tıklayın.

Sadece birkaç tıklama ile, görsel derinlik katan ve okunabilirliği artıran güzel katmanlı arka planlar oluşturabilirsiniz.

Bir profesyonel gibi katmanlama için tasarım ipuçları

Bu özellikten en iyi şekilde yararlanmanıza yardımcı olmak için, çok katmanlı arka planları etkili bir şekilde kullanmak için yedi hızlı ipucu.

1. Daha iyi okunabilirlik için görüntüler üzerinde katman gradyanları

Metin görünürlüğünü artırmak için arka plan görüntüsünün üstünde karanlık veya yarı saydam bir gradyanı kaplayın. Bu, görüntünüzün etkisini kaybetmeden beyaz veya açık renkli metnin patlamasına yardımcı olur. İçeriğinizi net ve okunabilir tutan basit bir numara.

2. Dikkat dağıtıcı değil, ince tutun

Daha azı daha fazla. Düzeninizi ezmekten kaçınmak için 2-3 arka plan katmanına sadık kalın. Çok fazla doku veya parlak renk kullanıcıları rahatsız edebilir ve mesajınızı incitebilir. Dikkat gösteren temiz, odaklanmış tasarımları hedefleyin - onu çalmıyor.

3. Marka renklerini stratejik olarak kullanın

Gradyanlar veya renk kaplamaları oluşturmak için marka paletinizi kullanın. Bu, marka kimliğini güçlendirir ve sitenize profesyonel bir dokunuş ekler. Görsel stili tutarlı markalaşma ile birleştirmenin akıllı bir yoludur.

4. Katman istiflemesi ile görsel ilgi ekleyin

Derinlik oluşturmak için düz renkleri, gradyanları ve görüntüleri birleştirin - hareket gerekmez. Örneğin, tasarımınıza daha fazla zenginlik ve karmaşıklık sağlamak için yarı saydam bir renk kaplaması altında ince bir doku katmanlayın.

5. Mobil duyarlılığı test edin

Masaüstünde muhteşem görünen bir arka plan daha küçük ekranlarda çalışmayabilir. Beaver Builder ile, katman konumlandırmasını ayarlayabilmeniz, ölçebilmeniz ve hatta belirli katmanları mobil cihazlarda gizleyebilmeniz için duyarlı ayarlar üzerinde tam kontrole sahipsiniz.

6. Görsel doku ile anahtar bölümleri vurgulayın

Harekete geçirici bir çağrı veya öne çıkan bölüme dikkat çekmeniz mi gerekiyor? İnce görsel ilgi yaratmak için bir gradyanın altında dokulu bir görüntü kullanın. Bu teknik, tasarım akışını bozmadan önemli alanların vurgulanmasına yardımcı olur.

7. Katmanları sorunsuz bir şekilde harmanlamak için opaklık kullanın

Renkler ve görüntüler arasında kesintisiz karışımlar oluşturmak için her katmanın opaklığını ayarlayın. Düşük opasiteler geçişleri yumuşatır, bu da doğal ve uyumlu hisseden katmanlı tasarımlar oluşturmanıza izin verir.

Gerçek dünya kullanım durumları

Çok katmanlı arka planların etkili bir şekilde nasıl kullanılacağı konusunda ilham mı arıyorsunuz? İşte başlamanız için birkaç gerçek dünya tasarım fikri:

• Kahraman Bölümleri : Temiz, yüksek etkili bir tanıtım için görüntüleri renk kaplamalarıyla birleştirin.
• Eylem çağrısı (CTA'lar) : Dikkati anında çekmek için cesur marka renkleri ve dokular kullanın.
• Blog vurguları : Başlıkları öne çıkarmak için gradyan ve görüntü arka planlarını uygulayın.
• Bento Grids : Derinlik ve görsel ilgi yaratmak için her bloğun arkasındaki katman dokuları ve renkler kullanın.

Kalıcı bir izlenim bırakan görsel olarak ilgi çekici sayfalar oluşturmak için bir sonraki düzeninizde bu fikirleri deneyin.

Sonraki: Kaydedilen Arka Plan Katmanları

Gelecekteki bir güncellemeye gelince, sitenizdeki çok katmanlı arka planları kaydedebilir ve yeniden kullanabilirsiniz. Bu, tasarımları tekrarlayan kurulumu tutarlı ve azaltmayı kolaylaştıracaktır. Şimdilik, sitenizde başka bir yerde yeniden kullanmak için satırlarınızı, sütunlarınızı ve modüllerinizi kaydetme seçeneğiniz var.

Bugün çok katmanlı arka planları deneyin

Çok katmanlı arka plan alanı şimdi Beaver Builder 2.9'da mevcuttur. İster bir kahraman bölümü, özellik satırı veya bağlantı kutusu tasarlıyor olun, bu özellik sonsuz yaratıcı olasılıkların kapısını açar - bir kod çizgisine dokunmadan. → Dokümanları keşfedin ve başlayın.