Beaver Builder 플러그인을 사용하면 템플릿과 모듈로 완전한 웹사이트를 구축할 수 있습니다. 그러나 사이트를 더욱 맞춤화하고 싶을 때가 있습니다. Beaver Builder 단축 코드를 사용하여 모듈, 머리글, 바닥글 및 사이드바에 콘텐츠를 추가할 수 있습니다.

이 게시물에서는 Beaver Builder 단축 코드를 소개하고 콘텐츠에 삽입하는 방법을 보여줍니다. 또한 웹사이트 디자인을 향상시킬 수 있는 몇 가지 예를 살펴보겠습니다. 뛰어들자!

Beaver Builder 단축 코드 소개

이전에 WordPress 웹사이트로 작업한 적이 있다면 단축 코드에 이미 익숙할 것입니다. 사이트에 기능을 추가하는 작은 코드 조각입니다.

코드 편집기를 사용하여 HTML로 모든 것을 작성하는 대신 페이지에 단축 코드를 삽입하기만 하면 됩니다. 여기에는 모듈, 행 또는 열과 같은 Beaver Builder 요소에 해당하는 슬러그 또는 ID가 있습니다. 게시물, 페이지 또는 레이아웃 템플릿에 단축 코드를 사용할 수도 있습니다.

이 예에서는 HTML 모듈에 저장된 행을 추가합니다.

저장 을 클릭하면 Beaver Builder는 단축 코드를 다음과 같은 저장된 행으로 자동 변환합니다.

나중에 포스트에서 에디터에서 숏코드를 추가하는 방법을 보여드리겠습니다. 지금은 Beaver Builder 단축 코드 사용의 이점에 대해 논의해 보겠습니다.

단축 코드는 텍스트 기반 영역에 시각적 요소를 추가하는 데 유용할 수 있습니다. 예를 들어 가격 모듈을 만들고 단축 코드를 사용하여 제품 사진을 추가할 수 있습니다. 이렇게 하면 두 개의 개별 모듈(가격 및 사진)이 결합되므로 작업할 필요가 없습니다.

단축 코드를 사용하면 WordPress 블록 편집기로 작업하는 동안 Beaver Builder 요소를 콘텐츠에 삽입할 수도 있습니다. 즉, 모듈, 행 또는 열을 추가하기 위해 Beaver Builder 편집기로 전환할 필요가 없습니다.

다음을 포함하여 텍스트 필드가 있는 모든 Beaver Builder 모듈에 단축 코드를 추가할 수 있습니다.

• HTML
• 텍스트
• 헤더
• 부르다
• 상
• 탭

그러나 너무 많은 단축 코드를 추가하는 것은 현명하지 않을 수 있습니다. 서버가 각 단축 코드에 대해 CSS 및 Javascript 파일을 요청해야 하므로 로드 시간이 늘어날 수 있습니다. 페이지당 최대 2개를 사용하는 것이 좋습니다.

유용한 Beaver Builder 단축 코드의 5가지 예

Beaver Builder 단축 코드에 대한 많은 사용 사례가 있습니다. 몇 가지 유용한 예를 살펴보겠습니다.

1. 가격표의 행동 유도 버튼

방문 페이지나 판매 페이지에 여러 제품 옵션이 있는 가격표가 있다고 가정해 보겠습니다. 가격을 나열한 다음 페이지 하단에 있는 버튼을 사용하여 고객이 결제하도록 안내할 수 있습니다. 그러나 사용자는 더 아래로 스크롤해야 하므로 사용자 경험(UX)이 잠재적으로 손상될 수 있습니다.

대신 고객이 제품을 구매하도록 유도하는 클릭 유도문안(CTA) 버튼을 만들 수 있습니다. 이것은 고객이 더 이상 탐색할 필요가 없도록 결제 페이지로 직접 연결됩니다. 그런 다음 단축 코드를 사용하여 이 버튼을 가격표에 추가할 수 있습니다.

시각적 브랜드와 일치하도록 CTA 버튼을 사용자 지정하는 것을 잊지 마십시오.

2. 탭의 연락처 양식

비즈니스 사이트가 있는 경우 정보 섹션에 몇 가지 탭을 추가할 수 있습니다. 이렇게 하면 사용자가 페이지를 아래로 스크롤하지 않고도 회사에 대해 자세히 알아볼 수 있습니다.

잠재 고객이 읽기를 마치는 즉시 귀하의 서비스에 대해 연락하기를 원한다고 가정해 보겠습니다. 사용자는 이미 탭 사이를 전환하는 데 시간을 보내고 있습니다. 그들을 다른 곳으로 안내하면 연락을 취하기로 한 결정을 재고할 수 있는 시간을 몇 초 더 줄 수 있습니다.

대신 단축 코드를 사용하여 탭 중 하나에 문의 양식을 추가할 수 있습니다.

정말 쉽습니다! 이제 고객은 페이지를 떠나지 않고도 귀하에게 연락할 수 있습니다.

3. 텍스트 상자 안의 이미지

페이지를 작성할 때 단일 모듈에 이미지와 텍스트를 추가하는 것을 선호할 수 있습니다. 두 개의 별도 모듈을 사용할 수는 있지만 내용이 분할되어 텍스트 중간에 그림을 넣을 수 없습니다.

텍스트와 이미지를 결합하면 온라인 상점에 제품을 효과적으로 표시할 수 있습니다. 예를 들어 가격 상자 모듈에 사진을 추가하여 다양한 제품 기능을 보여줄 수 있습니다.

이론적으로, 서로 다른 모듈이 쌓인 동일한 레이아웃을 조합할 수 있습니다. 그러나 이미지 단축 코드를 사용하면 디자인 프로세스의 속도를 높일 수 있습니다.

4. 블록 편집기의 모든 모듈

블록 편집기로 작업할 때 Beaver Builder 단축 코드를 사용할 수도 있습니다. 이것은 블로그 게시물을 작성하고 기사에 대화형 요소를 추가하려는 경우 특히 유용할 수 있습니다.

블록 편집기를 종료하지 않고도 Beaver Builder 모듈을 페이지에 쉽게 놓을 수 있습니다. Shortcode 블록을 삽입하고 내부에 코드를 붙여넣기만 하면 됩니다.

게시물을 게시하면 단축 코드가 프런트 엔드에 내용을 표시합니다.

예를 들어 연락처 양식 모듈을 삽입할 수 있습니다. 고객을 매장으로 안내하는 클릭 유도문안이나 매장 위치에 대한 내장된 지도를 추가할 수도 있습니다.

5. The Date (Beaver Builder 테마 전용)

Beaver Builder 테마에는 사용자 지정 날짜 단축 코드가 함께 제공됩니다. 머리글, 바닥글 및 사이드바를 포함하여 페이지의 모든 부분에 현재 날짜가 표시됩니다.

이 단축 코드는 뉴스 웹사이트를 운영하는 경우 유용할 수 있습니다. 다음 단축 코드를 사용하여 날짜를 추가할 수 있습니다.

바닥글의 저작권 메시지 옆에 이 단축 코드를 사용할 수도 있습니다. 이렇게 하면 항상 최신 상태를 유지할 수 있습니다.

Beaver Builder로 단축 코드를 추가하는 방법(2단계)

우리는 Beaver Builder 단축 코드가 디자인 프로세스의 속도를 높이고 단순화할 수 있는 몇 가지 시나리오를 다루었습니다. 이제 사이트에 추가하는 방법을 살펴보겠습니다.

1단계: 단축 코드 생성

단축 코드는 웹사이트에서 쉽게 사용할 수 없습니다. 짧은 코드로 삽입하기 전에 먼저 Beaver Builder 요소를 저장해야 합니다. 이러한 요소에는 다음이 포함될 수 있습니다.

• 모듈
• 행
• 열
• 템플릿

예를 들어 사용자 지정 연락처 양식 모듈을 디자인한다고 가정해 보겠습니다. Beaver Builder > 저장된 모듈 > 새로 추가 로 이동하여 이 작업을 수행할 수 있습니다.

그런 다음 모듈의 이름을 지정하고 유형을 선택하라는 메시지가 표시됩니다.

저장된 모듈 추가 를 클릭합니다. 다음 페이지에서 Launch Beaver Builder 를 선택하여 편집기에 액세스합니다. 여기에서 원하는 대로 문의 양식을 사용자 지정할 수 있습니다.

준비가 되면 모듈을 게시해야 합니다. 이제 저장된 모듈 페이지에 표시됩니다. 최신 버전의 Beaver Builder를 사용하는 경우 자동으로 생성된 단축 코드를 볼 수 있습니다.

ShortCode 열이 표시되지 않으면 코드를 수동으로 생성해야 합니다. 이렇게 하려면 모듈의 슬러그가 필요합니다.

모듈 아래에 있는 편집 버튼을 클릭하면 해당 슬러그를 볼 수 있습니다. 보이지 않으면 화면 옵션 메뉴를 열고 Slug 옆에 있는 상자를 선택하십시오.

이제 다음 코드를 사용하여 이 모듈의 단축 코드를 만들 수 있습니다.

 [fl_builder_insert_layout slug="my-post-slug"]

"my-post-slug"를 Beaver Builder 모듈의 슬러그로 바꾸는 것을 잊지 마십시오. 이 예에서는 다음과 같이 표시됩니다.

 [fl_builder_insert_layout slug="contact-form"]

그게 다야 - 이제 Beaver Builder 모듈용 단축 코드를 만드는 방법을 알게 되었습니다.

2단계: 페이지에 단축 코드 삽입

마지막 단계는 페이지에 단축 코드를 추가하는 것입니다. 대부분의 경우 이 프로세스에는 모듈의 텍스트 필드 안에 스니펫을 붙여넣는 작업이 포함됩니다.

다음은 이전의 가격표 예입니다. 보시다시피 기능 5 텍스트 상자에 CTA 버튼의 단축 코드를 추가했습니다.

Beaver Builder는 프론트 엔드 편집기를 사용하기 때문에 저장된 모듈을 즉시 볼 수 있습니다. 경우에 따라(HTML 모듈을 사용할 때와 같이) 단축 코드가 시각적 요소로 변환되기 전에 변경 사항을 저장해야 할 수도 있습니다.

결론

Beaver Builder 단축 코드를 사용하면 저장된 모듈, 행, 열 또는 레이아웃을 페이지의 다른 부분에 빠르게 추가할 수 있습니다. 이를 사용하여 디자인 프로세스의 속도를 높이고 아름다운 WordPress 페이지를 만들 수 있습니다.

요약하자면 다음과 같은 간단한 단계에 따라 Beaver Builder 단축 코드를 사용할 수 있습니다.

1. 요소(모듈, 행, 열 또는 레이아웃)를 저장하고 단축 코드 또는 슬러그를 찾습니다.
2. Beaver Builder 모듈 내의 텍스트 필드 또는 블록 편집기의 Shortcode 블록에 단축 코드를 삽입합니다.

사이트를 위한 멋진 페이지를 만들 준비가 되셨습니까? Beaver Builder의 사용자 친화적인 기능의 전체 목록을 확인하십시오!

관련 질문

Beaver Builder는 단축 코드를 사용합니까?

Beaver Builder는 모듈, 행, 열 및 템플릿과 같은 저장된 요소에 대한 단축 코드를 제공합니다. 그런 다음 이러한 스니펫을 텍스트 기반 필드 및 모듈에 추가할 수 있습니다. 이것은 Beaver Builder 프런트 엔드 편집기와 WordPress 블록 편집기 모두에서 가능합니다. 또한 단축 코드를 사용하면 Beaver Builder와 함께 즐겨 사용하는 다른 플러그인을 사용할 수 있습니다.

단축 코드를 사용하려면 Beaver Builder 테마가 필요합니까?

단축 코드를 사용하기 위해 공식 Beaver Builder 테마가 필요하지 않습니다. 페이지 빌더 플러그인을 사용하여 페이지를 만들고 대부분의 테마로 단축 코드를 추가할 수 있습니다. 그러나 날짜 단축 코드와 같은 일부 단축 코드는 Beaver Builder 테마에서만 작동합니다.

Beaver Builder와 Beaver Themer의 차이점은 무엇입니까?

Beaver Builder는 모듈과 템플릿을 사용하여 페이지 및 게시물의 콘텐츠 영역을 편집할 수 있는 페이지 작성 도구입니다. 대조적으로, Beaver Themer는 헤더, 바닥글 및 사이드바와 같이 일반적으로 테마에 의해 제어되는 사이트 영역을 편집할 수 있는 애드온 플러그인입니다. 이 콘텐츠에는 테마 템플릿, 템플릿 부분 및 포스트 그리드가 포함됩니다.