Beaver Builder 2.9는 강력한 새로운 디자인 기능인 다층 배경을 소개했습니다. 이 업데이트는 배경색, 그라디언트 및 이미지를 한 곳에 쌓을 수 있도록 행, 열 및 박스 모듈을보다 창의적으로 제어 할 수 있습니다.

그러나 더 많은 힘으로 사려 깊은 디자인이 필요합니다. 이 기사에서는이 새로운 기능을 사용하고이를 최대한 활용하는 데 도움이되는 팁을 공유하는 현명한 방법을 살펴 보겠습니다.

다층 배경은 무엇입니까?

다층 배경은 Beaver Builder에 강력한 추가 기능으로 단일 열, 행 또는 상자 모듈로 이미지, 그라디언트 및 색상과 같은 여러 배경 요소를 쌓을 수 있습니다.

한 가지 유형의 배경 만 선택하는 대신 여러 가지를 결합하여 사용자에게보다 매력적이고 시각적으로 풍부한 경험을 만들 수 있습니다.

다층 배경이 어떻게 보이는지는 다음과 같습니다.

• 기본 레이어 : 고품질 이미지는 섹션의 톤과 컨텍스트를 설정합니다.
• 중간 레이어 : 반 투과 적 구배는 대비를 추가하고 텍스트를 읽을 수 있도록 도와줍니다.
• 최상층 : 브랜드 색상 오버레이 또는 미묘한 텍스처는 모든 것을 하나로 묶고 시각적 정체성을 강화합니다.

이러한 요소를 혼합하면 미적 매력과 기능적 명확성이 모두있는 배경을 만들 수 있습니다. 결과는 사용자를 압도하지 않고 깊이, 대비 및 시각적 질감을 가진 레이아웃입니다.

영웅 섹션을 설계하든, 항목 유도 문안 블록 또는 기능 그리드 인 멀티 레이어 배경은 플랫에서 완전 치수로 디자인을 향상시키는 유연성과 창의적인 제어 기능을 제공합니다.

왜 다층 배경을 사용합니까?

다층 배경은 한 줄의 코드를 쓰지 않고 디자인을 시각적으로 높이는 좋은 방법입니다. 배경색, 그라디언트 및 이미지를 쌓아서 미학과 유용성을 모두 향상시키는 시선을 사로 잡는 효과를 만들 수 있습니다.

계층화 된 배경을 사용해야하는 몇 가지 실질적인 이유는 다음과 같습니다.

• 텍스트의 가독성 향상 : 텍스트 뒤에 오버레이 또는 그라디언트를 추가하여 특히 이미지 배경을 사용할 때는 대비와 가독성을 높입니다.
• 브랜드 아이덴티티 강화 : 백그라운드 레이어의 브랜드 색상, 패턴 또는 텍스처를 사용하여보다 응집력 있고 인식 가능한 시각적 경험을 만듭니다.
• 중요한 콘텐츠 영역에주의를 기울이십시오 : 계층화 된 배경은 사용자의 시선을 주요 호출, 특집 섹션 또는 홍보 콘텐츠로 안내 할 수 있습니다.

그리고 무엇보다도 Beaver Builder UI에서 모두 이루어집니다. 추가 CSS 또는 복잡한 설정이 필요하지 않습니다. 몇 번의 클릭만으로도 아름답게 기능적 인 역동적 인 레이어 디자인을 만들 수 있습니다.

Beaver Builder에서 다층 배경을 사용하는 방법

원하는만큼의 배경 유형 (컬러, 그라디언트 및 이미지)을 순서대로 혼합하고 일치시킬 수 있습니다.

다음은 행, 열 또는 박스 모듈에 여러 배경을 추가하는 방법은 다음과 같습니다.

1. 편집 요소를 엽니 다
   다층 배경을 적용하려는 행, 열 또는 박스 모듈을 편집하려면 클릭하십시오.
2. 배경 설정으로 이동하십시오
   모듈 설정 패널에서 배경 섹션으로 이동하십시오.
3. 여러 배경을 활성화합니다
   레이어링을 활성화하려면 여러 배경 옵션을 선택하십시오.
4. 첫 번째 배경을 추가하십시오
   + 아이콘을 클릭하여 배경 유형을 추가 한 다음 색상 , 사진 또는 그라디언트 에서 선택하십시오. 필요에 따라 설정을 사용자 정의하십시오.
5. 더 많은 배경 레이어를 추가하십시오
   + 아이콘을 다시 클릭하여 다른 레이어를 추가하십시오. 스택하려는 각 배경 유형의 프로세스를 반복하십시오.
6. 변경 사항을 저장하십시오
   계층화 된 배경 디자인에 만족하면 저장을 클릭하십시오.

몇 번의 클릭만으로도 시각적 깊이를 더하고 가독성을 향상시키는 아름답게 레이어 배경을 만들 수 있습니다.

프로와 같은 레이어링을위한 디자인 팁

이 기능을 최대한 활용할 수 있도록 다층 배경을 효과적으로 사용하기위한 7 가지 빠른 팁이 있습니다.

1. 더 나은 가독성을 위해 이미지를 통한 레이어 그라디언트

텍스트 가시성을 향상시키기 위해 배경 이미지 위에 어두운 또는 반 추정 기울기를 오버레이하십시오. 이것은 이미지의 영향을 잃지 않고 흰색 또는 밝은 색 텍스트가 팝 팝에 도움이됩니다. 콘텐츠를 명확하고 읽을 수 있도록하는 간단한 트릭입니다.

2. 산만하지 않고 미묘하게 유지하십시오

덜 더 많습니다. 레이아웃을 압도하지 않도록 2–3 배경 레이어를 고수하십시오. 너무 많은 텍스처 나 밝은 색상은 사용자를 산만하게하고 메시지를 손상시킬 수 있습니다. 훔치지 않고주의를 안내하는 깨끗하고 집중된 디자인을 목표로합니다.

3. 전략적으로 브랜드 색상을 사용하십시오

브랜드 팔레트를 사용하여 그라디언트 또는 색상 오버레이를 만듭니다. 이는 브랜드 아이덴티티를 강화하고 귀하의 사이트에 전문적인 터치를 추가합니다. 시각적 스타일과 일관된 브랜딩을 결합하는 현명한 방법입니다.

4. 레이어 스태킹에 시각적 관심을 추가하십시오

단색, 그라디언트 및 이미지를 결합하여 움직임없이 깊이를 만듭니다. 예를 들어, 반투명 색상 오버레이 아래에서 미묘한 텍스처를 층화하여 디자인에 더 풍부하고 복잡성을 제공합니다.

5. 모바일 응답 성 테스트

데스크탑에서 놀랍게 보이는 배경은 작은 화면에서 작동하지 않을 수 있습니다. Beaver Builder를 사용하면 반응 형 설정을 완전히 제어하여 레이어 포지셔닝, 스케일 또는 모바일의 특정 레이어를 숨길 수 있습니다.

6. 시각적 질감으로 키 섹션을 강조 표시하십시오

호출 유도 문안 또는 주요 섹션에주의를 기울여야합니까? 그라디언트 아래의 질감이있는 이미지를 사용하여 미묘한 시각적 관심을 만듭니다. 이 기술은 설계 흐름을 방해하지 않고 중요한 영역을 강조하는 데 도움이됩니다.

7. 불투명도를 사용하여 레이어를 부드럽게 혼합하십시오

각 레이어의 불투명도를 조정하여 색상과 이미지 사이에 원활한 블렌드를 만듭니다. 낮은 불투명도는 전환을 연화시켜 자연스럽고 응집력있는 느낌을주는 레이어 디자인을 구축 할 수 있습니다.

실제 사용 사례

다층 배경을 효과적으로 사용하는 방법에 대한 영감을 찾고 계십니까? 다음은 시작하기위한 몇 가지 실제 디자인 아이디어입니다.

• 영웅 섹션 : 컬러 오버레이와 이미지를 결합하여 깨끗하고 충격적인 소개를 소개합니다.
• CTA (Call-to-Actions) : 대담한 브랜드 색상과 텍스처를 사용하여 즉시주의를 기울입니다.
• 블로그 하이라이트 : 그라디언트 및 이미지 배경을 적용하여 타이틀을 돋보이게합니다.
• Bento Grids : 각 블록 뒤에있는 레이어드 텍스처와 색상을 사용하여 깊이와 시각적 관심을 만듭니다.

다음 레이아웃에서 이러한 아이디어를 시도하여 지속적인 인상을 남기는 시각적으로 매력적인 페이지를 만듭니다.

다음 : 저장된 배경 레이어

향후 업데이트에 들어가면 사이트에서 멀티 레이어 배경을 저장하고 재사용 할 수 있습니다. 이를 통해 디자인을 일관성있게 유지하고 반복적 인 설정을 더 쉽게 줄일 수 있습니다. 지금은 사이트의 다른 곳에서 재사용 할 수있는 행, 열 및 모듈을 저장할 수있는 옵션이 있습니다.

오늘 다층 배경을 시도하십시오

다층 배경 필드는 현재 Beaver Builder 2.9에서 제공됩니다. 영웅 섹션, 기능 행 또는 콜 아웃 박스를 디자인하든이 기능은 코드 라인을 만지면서 끝없는 창의적 가능성의 문을 열어줍니다. → 문서를 탐색하고 시작하십시오.