웹 페이지 디자인에 깊은 특정 요소가 묻힌 특정 요소를 찾기 위해 끝없이 스크롤 한 적이 있다면 혼자가 아닙니다. 다행히도 Beaver Builder의 개요 패널은 워크 플로우 속도를 높이고 페이지 구축 혼돈을 조직화 된 효율성으로 전환합니다.

비버 빌더 개요 패널은 페이지 레이아웃의 시각적 트리보기를 제공하여 작업 흐름을 시작하고 페이지 빌딩 효율성을 향상시켜 행, 열 및 모듈을 쉽게 탐색, 선택 및 구성 할 수 있습니다.

이 기사에서는 Beaver Builder의 개요 패널을 활용하여 조직화 된 WordPress 프로젝트를 유지하면서 페이지 빌드 시간을 반으로 줄이는 방법을 배우게됩니다.

비버 빌더 개요 패널은 무엇입니까?

Beaver Builder 개요 패널은 전체 페이지 구조를 구성적이고 탐색 가능한 형식으로 표시하는 계층 적 트리 뷰입니다. 레이아웃을 통해 시각적으로 사냥하는 대신 모든 행, 기둥 및 모듈에 대한 새의 시선을 볼 수 있습니다.

한눈에 주요 이점 :

• 큰 레이아웃을 즉시 탐색하십시오
• 드래그 앤 드롭 단순성으로 컨텐츠를 재구성하십시오
• 구축 할 때 요소를 표시하고 구성하십시오
• 레이아웃 문제를 신속하게 해결하십시오
• 팀원과보다 효과적으로 협력하십시오

이 강력한 기능은 레이아웃과 상호 작용하는 방법을 변환하여 페이지 구조를 완전히 제어 할 수있는 간소화 된 인터페이스를 제공합니다. 간단한 방문 페이지 나 복잡한 다중 섹션 웹 사이트를 구축하든 개요 패널은 모든 것을 구성하고 액세스 할 수 있도록합니다.

개발 관리자 인 Jamie가 Beaver Builder에서 가장 좋아하는 기능에 대해 물었을 때 다음은 다음과 같습니다.

"개요 패널은 시간을 절감 할 수 있습니다. 컨텐츠 구조를 한눈에 볼 수있어 긴 페이지를 탐색하기가 훨씬 쉽게 만들 수 있습니다. 문제 해결에도 좋습니다. 메인 편집기에서 모듈의 설정이 열리지 않으면 대신 개요 패널에서 액세스하십시오!"

개요 패널에 액세스하는 방법

방법 1 : 개요 아이콘을 클릭하십시오

1. Beaver Builder에서 페이지를 엽니 다
2. 상단 막대 에서 개요 아이콘을 찾으십시오
3. 패널을 열려면 클릭하십시오

방법 2 : 키보드 바로 가기 (빠른)

1. Beaver Builder 편집기에서 페이지를 엽니 다
2. Shift + O를 누르려면 패널을 즉시 열/닫는다.
3. Shift + T를 누르면 모든 섹션을 확장/붕괴시킵니다

Beaver Builder 사용자에게 개요 패널이 필수적인 이유

1. 큰 레이아웃을 쉽게 탐색하십시오

긴 페이지의 하단에서 줄을 끌려하는 것에 대한 좌절감을 기억하십니까? 그 시절은 끝났습니다. 개요 패널은 페이지의 모든 요소에 즉시 액세스하여 끝없는 스크롤이 필요하지 않습니다. 개요의 항목을 한 번 클릭하면 레이아웃의 해당 요소로 직접 점프하십시오. 페이지 구조에 대한 GPS가있는 것과 같습니다.

2. 콘텐츠를 쉽게 재구성합니다

개요 패널의 드래그 앤 드롭 기능으로 레이아웃 주위의 콘텐츠를 이동하는 것은 엄청나게 간단 해집니다. 메인 빌더 인터페이스에서 드래그 요소와 함께 제공되는 시각적 혼란없이 행, 열 및 모듈을 신속하게 재정렬 할 수 있습니다. 이것은 기존 콘텐츠를 재구성하거나 다른 레이아웃 배열을 실험 할 때 특히 가치가 있습니다.

3. 완벽한 조직을 유지하십시오

개요 패널은 전체 건물 과정 전체에 걸쳐 정리하는 데 도움이됩니다. 페이지의 전체 구조를 한눈에 볼 수 있으므로주의 나 재구성이 필요한 영역을 쉽게 식별 할 수 있습니다. 이 새의 시선은 깨끗하고 논리적 인 페이지 구조를 유지하는 데 매우 중요합니다.

Beaver Builder 2.9의 게임 변화 기능

Beaver Builder에 대한 최신 업데이트는 개요 패널을 더욱 강력하게 만드는 흥미로운 개선 사항을 소개합니다.

검색 및 필터 기능 향상

Beaver Builder 2.9는 복잡한 프로젝트를위한 실시간 구역으로 판명 된 검색 기능을 소개합니다.

확대 유리 아이콘을 클릭하고 "상자", "루프"또는 기타 모듈 유형이든 모든 요소 이름의 일부를 입력하십시오. 개요 패널은 일치하는 노드를 즉시 강조 표시하므로 가장 복잡한 레이아웃에서도 특정 요소를 찾을 수 있습니다.

다음과 같이 검색 할 수 있습니다.

• 모듈 이름
• 맞춤형 레이블
• 요소 ID
• CSS 클래스 이름

이 검색 기능은 특히 사용자 정의 클래스 및 ID로 작업하는 개발자 및 고급 사용자뿐만 아니라 대규모 콘텐츠가 풍부한 페이지를 관리하는 모든 사람에게 유용합니다.

예를 들어, SEO에 대한 페이지를 최적화 할 때 헤더 태그 (H1 – H6)를 빠르게 찾는 데 특히 도움이됩니다.

인라인 레이블 편집

버전 2.9에서 가장 실용적인 개선 사항 중 하나는 개요 패널 내에서 노드 레이블을 직접 추가하고 편집하는 기능입니다.

더 이상 스크린 사이를 점프하여 요소를 구성 할 수 없습니다. 이제 구축 할 때 요소에 레이블을 지정할 수있어 프로젝트에 적합한 명확한 이름 지정 시스템을 만들 수 있습니다.

라벨 인라인을 추가하려면 :

1. 개요 패널을 엽니 다
2. “타입 A 라벨”필드를 드러내려면 요소 위에 호버링
3. 사용자 정의 레이블을 클릭하고 입력하십시오
4. Enter를 누르거나 확인을 클릭하여 저장하십시오

이 기능은 레이아웃을 구성하는 방법을 변형시켜 "영웅 섹션", "증언"또는 페이지 구조를 즉시 이해할 수있게하는 "호출 대회"와 같은 의미있는 이름을 만들 수 있습니다.

모든 행, 열 또는 모듈의 고급 탭으로 이동하여 레이블을 추가 할 수도 있습니다. HTML 요소 섹션으로 스크롤하여 레이블 필드에 이름을 입력하십시오. 레이블은 요소의 내용 또는 목적에 대한 간단한 설명을 제공합니다.

추가되면 Beaver Builder 인터페이스 오버레이, 설정 창 및 개요 패널에 레이블이 나타납니다.

개요 패널 효율을 극대화하기위한 팁

프로처럼 키보드 바로 가기를 사용하십시오

이러한 필수 키보드 바로 가기로 워크 플로를 속도를 높이십시오.

• Shift + O : 개요 패널을 열고 닫는다
• Shift + T : 전체 트리 뷰를 확장하거나 붕괴시킵니다.

이 바로 가기는 키보드에 손을 대고 워크 플로우를 원활하게 움직입니다.

마우스 오른쪽 버튼으로 마스터하십시오

개요 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 감지 옵션이 표시됩니다.

• 행 및 열 : 설정 열기, 복제, 제거
• 그룹 : 제거하십시오
• 모듈 : 설정 열기, 복제, 제거

이 맥락 메뉴는 인터페이스를 어지럽히지 않고 일반적인 동작에 빠르게 액세스 할 수 있습니다.

시각적 지표를 활용하십시오

개요 패널에는 요소에 대한 즉각적인 통찰력을 제공하는 유용한 아이콘 표시기가 포함되어 있습니다.

• Blue Eye 아이콘 : 행, 열 또는 모듈의 가시성 설정이 기본 "항상"설정에서 변경되었음을 나타냅니다.
• 적색 눈 아이콘 : 조건부 로직이 행, 열 또는 모듈에 적용될 때 나타납니다. 이 옵션은 Beaver Temer가 설치 될 때 사용할 수 있습니다.
• 코드 아이콘 : 고급 탭을 통해 사용자 정의 CSS 또는 JavaScript가 행, 열 또는 모듈에 추가되었음을 보여줍니다.
• 느낌표 아이콘 : 레이아웃에서 모듈이 누락되었음을 신호합니다. 모듈이 비활성화되었거나 모듈을 제공하는 타사 플러그인이 비활성화되거나 제거 된 경우에 발생할 수 있습니다.

이러한 시각적 신호는 특수 구성 또는 잠재적 문제로 요소를 신속하게 식별하는 데 도움이됩니다.

스마트 라벨링으로 구성하십시오

프로젝트를위한 일관된 라벨링 시스템을 개발하십시오. 기능과 위치를 나타내는 설명 이름을 사용하는 것을 고려하십시오.

• "헤더 - 내비게이션"
• "영웅 - 메인 CTA"
• "바닥기 - 연락처 정보"

이 체계적인 접근 방식은 협업을보다 쉽게 ​​만들고 몇 달 후에 프로젝트로 돌아 오는 데 도움이됩니다.

고급 개요 패널 기술

전략적 확장/붕괴 관리

개요 패널은 확장 또는 붕괴 된 섹션을 기억합니다. 현재 작업하지 않는 지역이 무너지면서 자주 액세스하는 섹션을 확장하여 자주 액세스하는 섹션을 유지하여 이점을 활용하십시오. 이것은 현재 초점과 일치하는 맞춤형보기를 만듭니다.

다른 비버 빌더 기능과 통합

개요 패널은 다른 비버 빌더 기능과 완벽하게 작동합니다. 응답 형 편집 도구와 함께 사용하여 다양한 장치보기를 테스트하면서 다른 섹션을 빠르게 탐색하십시오. 이 조합은 특히 모든 화면 크기에 걸쳐 레이아웃이 완벽하게 작동하도록하는 데 특히 강력합니다.

피해야 할 일반적인 실수

구조를 과도하게 복제합니다

개요 패널은 복잡한 레이아웃을 관리 할 수 ​​있지만 불필요하게 복잡한 구조를 생성하려는 충동에 저항하십시오. 콘텐츠 목표를 달성하는 논리적이고 깨끗한 계층을 목표로합니다.

레이블 일관성을 무시합니다

일관성이없는 라벨링은 조직의 목적을 물리칩니다. 프로젝트 초기에 명명 규칙을 설정하고 전체적으로이를 고수하십시오.

모바일 고려 사항을 잊어 버립니다

아름답게 정리 된 데스크탑 레이아웃은 모바일 장치에 대한 조정이 필요할 수 있습니다. Beaver Builder의 반응 형 편집 도구와 함께 개요 패널을 사용하여 모든 장치에서 구조가 작동하는지 확인하십시오.

자주 묻는 질문

개요 패널에 어떻게 액세스합니까?

Beaver Builder Toolbar에서 개요 아이콘을 클릭하거나 즉시 액세스하려면 Shift + O를 누릅니다.

개요 패널에서 요소를 검색 할 수 있습니까?

개요 패널을 사용하면 페이지 레이아웃에서 요소를 쉽게 검색 할 수 있습니다. 확대 유리 아이콘을 클릭하고 모듈 이름, 레이블, CSS 클래스 또는 요소 ID별로 검색하십시오.

파란 눈 아이콘은 무엇을 의미합니까?

Blue Eye 아이콘은 기본 "Always"설정에서 요소의 가시성 설정이 수정되었음을 나타냅니다.

요소에 레이블을 추가하려면 어떻게합니까?

개요 패널에 레이블을 추가하려면 행, 열 또는 모듈 위로 호버링하려면 "A Type A Label" 필드를 클릭하고 사용자 정의 이름을 입력하십시오.

느낌표 아이콘이있는 이유는 무엇입니까?

Beaver Builder 개요 패널의 느낌표 아이콘은 일반적으로 비활성화 된 플러그인 또는 모듈 충돌로 인해 누락되거나 비활성화 된 모듈을 나타냅니다.

결론 : 오늘 페이지 빌드를 변환하십시오

Beaver Builder 개요 패널은 단순한 내비게이션 도구가 아닙니다. 완전한 워크 플로 변환 시스템입니다. Beaver Builder 2.9의 향상된 검색 및 라벨링 기능에서 강력한 시각적 지표 및 조직 기능에 이르기 까지이 패널을 마스터하면보다 효율적이고 효과적인 WordPress 페이지 빌더가됩니다.

주요 테이크 아웃 :

• 더 빠른 액세스를 위해 키보드 바로 가기 (Shift + O) 를 사용하십시오
• 각 프로젝트의 시작부터 일관된 라벨링을 구현하십시오
• 품질 보증을 위해 시각적 지표를 활용하십시오
• 반응 형 디자인 워크 플로와 통합
• 정기적 인 건물 루틴의 개요 패널을 부분적으로 만드십시오.

간단한 방문 페이지 나 복잡한 다중 섹션 웹 사이트를 구축하든, 개요 패널은 혼란스러운 페이지 구축을 간소화 된 전문 프로세스로 바꾸는 조직 재단을 제공합니다.

비버 빌더 경험을 변화시킬 준비가 되셨습니까? Beaver Builder Editor를 열고 Shift + O를 누르면 개요 패널을 시작한 다음 오늘보다 효율적으로 구축을 시작하십시오!