Beaver Builder에서 더 빠른 레이아웃을 구축하는 방법이 궁금하십니까? WordPress로 한동안 건축을 해왔다면 아마도 행과 열을 사용하여 복잡한 레이아웃을 구조화하는 방법을 알아내는 데 많은 시간을 보냈을 것입니다. 그것은 효과가 있었지만 항상 가장 유연하거나 효율적인 접근 방식은 아닙니다.

이것이 바로 Beaver Builder 2.9가 저에게 게임 체인저였습니다. 이 업데이트는 페이지를 작성하는 방식을 완전히 변화시킨 두 가지 주요 개선 사항을 도입했으며 워크 플로우에 가져 오는 유연성을 좋아할 것이라고 생각합니다.

• 상자 모듈 및 루프 모듈과 같은 컨테이너 모듈은 이제 최상위 레이아웃 요소 로 사용할 수 있습니다. 즉, 필요하지 않은 경우 행과 열을 완전히 건너 뛸 수 있습니다.
• 기본 모듈은 이제 클리너 HTML을 기본적으로 출력하여 추가 래퍼 <div> 디스형을 제거하고 페이지가 더 빠르게로드되고 검색 엔진에서 더 나은 순위가 향상됩니다.

이것들은 단순히 좋은 기능이 아니라 WordPress 사이트를 구축하는보다 직관적이고 성능 중심적인 방법으로 전환을 나타냅니다. 워크 플로, 페이지 속도 및 코드 품질을 향상시키려는 경우이 업데이트는 탐색 할 가치가 있습니다.

컨테이너는 중심에 있습니다

먼저 가장 큰 변화에 대해 이야기합시다. 이전 버전의 Beaver Builder에서 Row-and-Column 시스템은 레이아웃을 구성하는 유일한 옵션이었습니다. 페이지의 모든 단일 요소는이 프레임 워크 내부에 살아야했습니다.

이 일반적인 시나리오를 상상해보십시오. 제목, 일부 텍스트 및 버튼으로 간단한 호출 섹션을 만들고 싶습니다. 기존 접근법에서는 행을 생성하고 해당 행에 열을 추가 한 다음 열에 모듈을 추가합니다. 그것은 효과가 있었지만 실제로 필요하지 않은 구조 층을 추가했습니다.

그 모습은 다음과 같습니다.

열
└ ─신 열
└ ─헤 박스 모듈
└ 착장 모듈
텍스트 모듈
└ ─담 버튼 모듈

이제 Beaver Builder 2.9에서는 추가 레이어를 완전히 제거 할 수 있습니다. 상자 모듈과 같은 컨테이너 모듈은 이제 페이지 구조의 최상위 레벨에 앉아 기본 레이아웃 요소 역할을 할 수 있습니다.

새롭고 간소화 된 접근 방식은 다음과 같습니다.

박스 모듈
└ 착장 모듈
텍스트 모듈
└ ─담 버튼 모듈

이것은 인터페이스에서 클릭 수가 적다는 것이 아닙니다 (비록 좋지만). 실제로 디자인에 대해 생각하는 방식에 맞는 레이아웃을 구축하는 것입니다. 당신이 나와 같다면, 콘텐츠 섹션을 구상 할 때, 당신은 컨테이너와 그 내부의 내용에 대해 생각하고 있습니다.

이 접근법이 의미가있는 이유

이 변경은 특히 Flexbox 및 CSS 그리드와 함께 현대 CSS의 작동 방식과 완벽하게 일치합니다. 이 기술을 사용하면 복잡한 중첩 구조가 필요하지 않고 정교한 레이아웃을 만들 수 있으며 이제 Beaver Builder의 인터페이스는 현실과 일치합니다.

이점은 단순성을 넘어서는 것입니다. 컨테이너 모듈을 기본 레이아웃 요소로 사용하면 다음을 얻을 수 있습니다.

• 간격, 정렬 및 반응 형 동작에 대한 보다 직접적인 제어 . 여러 레벨의 중첩에서 설정을 관리하는 대신 컨테이너 레벨에서 모든 것을 처리 할 수 ​​있습니다.
• 구조 층을 통해 탐색하는 데 더 적은 시간을 소비하고 실제 디자인에 중점을 둔 시간이 더 적기 때문에 더 빠른 디자인 반복 .
• 브라우저에서 HTML 마크 업을 생성하고 처리하는 것이 적기 때문에 더 나은 성능 .
• 더 쉽게 유지 보수가 더 쉽게 돌아와서 나중에 레이아웃을 수정 해야하는 경우 (귀하 또는 팀의 다른 사람이든.

상자 모듈 : 레이아웃 강국

박스 모듈은 게임 변화 업그레이드를 얻었습니다. 한때 간단한 유틸리티 도구는 Beaver Builder에서 유연하고 현대적인 레이아웃을 구축하기위한 핵심 기반 으로 발전했습니다. 이것은 사소한 업데이트가 아닙니다. 페이지 제작 프로세스의 중심에 박스 모듈을 배치하는 완전한 재 설계입니다.

최상위 레이아웃 요소로 기능하는 새로운 기능을 갖춘 Box 모듈은 추가 부모 컨테이너가 필요하지 않고 배경색 및 이미지에서 패딩 및 여백에 이르기까지 모든 것을 관리하여 기존 행 랩퍼를 대체 할 수 있습니다.

또한 박스 모듈은 Flexbox 속성을 완전히 지원하므로 레이아웃 내부의 자식 요소의 정렬, 간격 및 배포를 정확하게 제어 할 수 있습니다. 텍스트, 이미지, 버튼, 양식 또는 기타 콘텐츠 모듈을 둥지하든 상자 모듈은 매끄럽게 처리합니다.

즉, 박스 모듈과 실제로 필요한 컨텐츠 모듈 만 사용하여 복잡하고 반응 형 레이아웃을 만들 수 있습니다. 인터페이스가 필요했기 때문에 구조적 요소를 더 이상 생성하지 않습니다.

후드 아래에서 클리너 HTML

Beaver Builder 2.9에서 레이아웃을 구조화하는 방법을 다시 생각하고 있지만, 빌더 자체는 무대 뒤에서 약간의 정리를하고 있습니다. 이 릴리스의 두 번째 주요 업데이트는 기본 모듈 에서 불필요한 래퍼 <div> 요소를 제거하여 HTML 출력이 크게 높아집니다.

이전 버전에서는 제목, 이미지 및 버튼과 같은 모듈에는 실제 콘텐츠 주위에 추가 <div> 가 포함되어 있습니다. 다음 예에서 볼 수 있듯이 마크 업에 복잡성과 팽창이 추가되었습니다.

Beaver Builder 이전 2.9 :

 <div class="fl-module fl-module-heading"> <div class="fl-module-content"> <h2>Welcome to Our Site</h2> </div> </div>

Beaver Builder 2.9 이후 :

 <h2>Welcome to Our Site</h2>

이 변경 사항은 더 깨끗한 코드 이상을 제공합니다. 실제 성능을 향상시킵니다.

• 단순화 된 스타일링 : 래퍼 클래스가 적을수록 CSS를 더 직접 쓸 수 있습니다.
• 더 빠른로드 시간 : 요소가 적 으면 브라우저가 처리되는 것이 적습니다.
• 더 나은 SEO : 더 깨끗하고 시맨틱 한 HTML은 검색 엔진이 콘텐츠를 이해하는 데 도움이됩니다.

사용자 정의 테마 또는 클라이언트 사이트에서 작업하는 개발자 또는 대행사라면 업데이트가 가져 오는 명확성과 효율성에 감사드립니다. 변경 사항은 2.9 이후에 추가 된 모듈에만 적용되기 때문에 (또는 레거시 설정을 활성화하지 않는 한) 기존 레이아웃은 안전하고 호환됩니다.

물건을 깨지 않고 유연성

이제 생각한다면, "잠깐만 - 내 커스텀 CSS는 그 래퍼 클래스에 의존합니다!" -괜찮아요. Beaver Builder 2.9는이를 염두에두고 설계되었습니다. 이전 스타일과의 호환성을 보존하려면 단일 설정으로 래퍼 <div> 를 다시 활성화 할 수 있습니다.

레거시 래퍼 마크 업을 복원하는 방법 :

1. WordPress 대시 보드로 이동하십시오
2. 설정> 비버 빌더> 고급으로 이동하십시오
3. "힘 모듈 래퍼 디스" 활성화

그러나 절대적으로 필요하지 않은 한이 기능을 유지하는 것이 좋습니다. 클리너 마크 업은 성능을 향상시킬뿐만 아니라 현대적인 웹 개발 모범 사례를 반영합니다. 레거시 CSS에 의존한다면 단순성과 장기 유지 관리를 위해 리팩터를 리팩터링 할 수있는 좋은 기회 일 수 있습니다.

뒤로 호환성

Beaver Builder 2.9의 가장 좋은 부분 중 하나? 기존 사이트를 깨뜨릴 위험없이 이러한 현대적인 개선 사항을 모두 얻을 수 있습니다.

작동 방식은 다음과 같습니다.

• 기존 모듈 (2.9로 업데이트 전 배치)은 원래 래퍼 구조로 계속 렌더링됩니다.
• 업데이트 후 추가 된 새 모듈은 기본적으로 새 클리너 마크 업을 자동으로 사용합니다.

이 듀얼 렌더링 전략은 원활한 전환 경로를 제공합니다. 현재 레이아웃은 손상되지 않으며, 새로운 컨텐츠를 구축하면 더 빠르고 가벼운 구조의 이점이 있습니다.

이러한 변화가 웹 사이트 성능을 향상시키는 방법

Beaver Builder 2.9는 웹 사이트가 더 빠르게로드하고, 높은 순위를 차지하며, 더 부드러운 사용자 경험을 제공하는 데 도움이되는 강력한 성능 및 워크 플로 개선을 도입했습니다.

더 빠르고 더 얇은 페이지
<div> 요소가 줄어들고 최상위 요소로서 컨테이너 모듈을지지하면 레이아웃은 더 깨끗하고 가벼워서 더 빠른로드 시간과 더 나은 SEO로 전송됩니다.

더 똑똑한 방문 페이지
불필요한 행과 열의 혼란을 건너 뜁니다. 이제 영웅 섹션 및 CTA 용 상자 모듈과 같은 컨테이너 모듈 만 사용하여 유연한 고분비 랜딩 페이지를 구축 할 수 있습니다.

깨끗한 헤더 및 바닥 글
박스 모듈은 헤더와 바닥 글로 빛나며 노력이 적고 제어력이 적은 구조화되고 반응 형 레이아웃을 만들 수 있습니다.

개발자 친화적 인 마크 업
과도한 둥지에 작별 인사를하십시오. 간소화 된 HTML 출력은 CSS 타겟팅을 단순화하고 특이성 문제를 줄여 사용자 정의 개발을보다 쉽고 유지 관리하기 쉽게 만듭니다.

클라이언트 우승 성과
대행사의 경우 더 빠른 사이트, 클리너 코드 및보다 현대적인 빌드 프로세스가 분명합니다. 고객이 "Dev"라고 말하지 않더라도 성능과 광택의 차이를 알 수 있습니다.

레이아웃을 구축하는 더 똑똑한 방법

Beaver Builder 2.9는 또 다른 기능 업데이트가 아니라 레이아웃 빌딩에 접근하는 방법에 대한 신중한 발전입니다. 컨테이너 모듈을 유연한 레이아웃 기초로 도입하고 HTML 출력을 간소화 함으로써이 릴리스는 Beaver Builder가 현대적인 설계 및 개발 관행에 부합합니다.

결과? 더 빠르고 깨끗하고 직관적 인 워크 플로우로 시간을 절약하고 더 나은 성능을 제공합니다. 간단한 브로셔 사이트를 제작하거나 복잡한 클라이언트 프로젝트를 관리하든 이러한 개선 사항을 사용하면 더 쉽게 구축 할 수 있습니다.

레이아웃을 레벨 업할 준비가 되셨습니까?
Beaver Builder 2.9로 업데이트하고 오늘날 더 똑똑하고, Leaner 및 미래의 준비가 된 사이트를 구축하기 시작하십시오.