코드 없이 구텐베르크에서 (고정) 고정 블록을 만드는 방법

구텐베르크에서 끈끈한 블록을 만드는 방법을 찾고 계십니까? 🤔

제휴사 면책 조항을 작성하거나, 할인을 제공하거나, 제품의 중요한 기능에 방문자의 관심을 끌고 싶은 경우 고정 블록이 이러한 목표를 달성하는 데 도움이 될 수 있습니다.

고정 블록이라고도 하는 고정 블록은 사용자가 페이지를 아래로 스크롤하는 동안에도 화면에 계속 표시되므로 강조 표시하려는 콘텐츠가 항상 화면에 표시됩니다.

👉 다음은 우리가 말하는 내용의 예입니다. 사용자가 스크롤하는 동안에도 소셜 아이콘이 해당 위치에 "고정"되는 방식을 확인할 수 있습니다.

Gutenberg에 고정 블록을 추가하면 원활하고 매력적인 사용자 경험을 제공하여 효과적으로 메시지를 전달하고 청중의 관심을 끌 수 있습니다.

구텐베르그는 기본적으로 끈끈한 블록을 제공하지 않습니다. 그러나 게시물과 페이지에 고정 블록을 추가하는 데 사용할 수 있는 타사 도구가 있습니다.

이 튜토리얼에서는 Otter Blocks라는 인기 있는 Gutenberg 플러그인을 사용하여 WordPress 웹 사이트에 고정 블록을 추가하는 방법을 보여줍니다.

그것에 대해 자세히 살펴 보겠습니다. 🤿

Gutenberg Editor에서 고정 블록을 추가하는 방법

Gutenberg Editor에서 고정 블록을 추가하려면 다음 단계를 수행해야 합니다:

• 1단계: Otter Blocks 플러그인 설치 및 활성화
• 2단계: 블록에 고정 도구로 변환 활성화
• 3단계: 접착 블록 위치 변경
• 4단계: 오프셋 구성
• 5단계: 모바일에서 고정 블록 활성화
• 선택 단계: 부동 모드 사용해 보기
• 선택 단계: 차단 동작 지정

1단계: Otter Blocks 플러그인 설치 및 활성화 🔌

Otter Blocks는 Gutenberg Editor의 기능을 확장하는 WordPress 플러그인입니다.

웹 사이트의 디자인과 기능을 개선하는 데 도움이 되는 페이지 빌딩 블록, 편집기 기능 및 템플릿 모음을 제공합니다.

Otter가 제공하는 가장 인기 있는 블록에는 가격표, 사용후기, 소셜 아이콘, 지도, 진행률 표시줄, 애니메이션, 카운트다운, 제품 리뷰 등이 있습니다. 다음은 Otter 블록의 전체 목록입니다.

Otter Blocks에는 무료 버전과 프리미엄 버전(Otter Pro라고 함)이 있습니다.

무료 버전을 사용하면 구텐베르그에서 기본 접착 블록을 만들 수 있으므로 이 튜토리얼을 무료로 따라할 수 있습니다.

그러나 블록과 화면 사이의 거리 추가, 프런트엔드에서 고정 블록 제거, 모바일에 고정 블록 표시 등과 같이 우리가 다룬 일부 단계를 수행하려면 프리미엄 버전의 플러그인이 필요합니다.

Otter Pro는 단일 웹사이트에 대해 연간 $49의 비용으로 사용할 수 있습니다. 여기에서 구입하실 수 있습니다. 플러그인을 사용하기 전에 먼저 시험해 보고 싶다면 이 데모를 한번 시도해 보세요.

➡️ 계속하려면 Otter의 무료 또는 프리미엄 버전을 설치하세요. 아래 튜토리얼에서는 특정 기능에 프리미엄 옵션이 필요한 경우를 기록해 보겠습니다.

2단계: 블록에 고정 도구로 변환 활성화 🚧

Gutenberg Editor에서 고정 블록을 추가하려는 페이지나 게시물을 엽니다.

고정하려는 블록을 선택 하고 편집기 오른쪽에 있는 패널 로 이동합니다.

패널에서 블록 으로 이동하여 블록 도구 옵션으로 이동합니다. 더하기 기호 를 선택하여 블록 도구를 확장합니다.

그런 다음 드롭다운 메뉴에서 고정으로 변환을 선택합니다.

Sticky 라는 새로운 옵션이 블록 도구 바로 아래에 나타납니다. 확장하고 Sticky To 로 이동합니다.

Sticky To에서는 블록을 붙일 요소를 설정할 수 있습니다. 네 가지 옵션이 있습니다:

1. 최상위 블록
2. 부분
3. 상위 블록
4. 화면

이러한 옵션과 스티커 게시물에 적합한 옵션을 이해하려면 구텐베르그 편집기에서 문서 개요를 열고 스티커 게시물 블록 주변의 블록을 살펴보세요.

최상위 블록은 최상위 레벨 블록입니다. 최상위 블록을 선택하면 접착 블록이 최상위 블록에 고정 됩니다. 우리의 경우 아래 이미지의 그룹 블록입니다.

다음으로 섹션을 선택하면 접착 블록이 섹션 블록에 고정되고, 상위 블록을 선택하면 접착 블록 바로 위의 블록에 접착 블록이 고정 됩니다.

우리의 경우 상위 블록은 섹션 열 블록입니다. 아래 이미지를 참조하세요.

마지막으로 화면 옵션을 선택하면 편집자가 모든 블록을 무시하고 게시물을 사용자 화면 상단에 게시하도록 지시합니다.

고정 블록의 위치는 기본적으로 위쪽으로 설정됩니다. 위치를 변경하는 방법을 알아보려면 다음 단계로 진행하세요.

3단계: 접착 블록 위치 변경 🚩

고정 블록 위치를 변경하려면 오른쪽 패널로 돌아가서 고정 옵션 바로 아래에서 위치를 찾으세요.

화면 상단이나 하단에 접착 블록을 배치할 수 있습니다. 하단 위치는 Otter Pro 사용자만 사용할 수 있습니다 .

데모 사이트 중 하나에서 블록이 어떻게 보이는지는 다음과 같습니다.

4단계: 오프셋 구성 ⚙️

끈끈이 블록의 위치를 ​​설정한 후 미리보기를 해보세요. 블록이 화면에서 너무 멀리 있거나 가까이 나타나면 오프셋 옵션을 사용하여 끈적끈적한 블록과 화면 사이의 거리를 늘리거나 줄입니다.

5단계: 모바일에서 고정 블록 활성화 📱

기본적으로 고정 블록은 데스크탑에만 나타납니다. 모바일에서 활성화하려면 모바일에서 활성화 옵션을 켜기만 하면 됩니다.

그런데 Otter Pro 사용자만 모바일 옵션에 액세스할 수 있습니다 .

선택 단계: 부동 모드를 사용해 보세요 🏄

사용자가 페이지를 스크롤할 때 고정 블록이 화면을 따라 부동하도록 설정할 수 있습니다. 이는 사용자의 주의를 끌고 고정 블록을 가리킬 수 있는 좋은 방법입니다.

Otter Pro 사용자만 부동 모드를 사용할 수 있으며 이 경우 그룹 블록인 최상위 블록에만 적용할 수 있습니다.

부동 모드를 전환하자마자 블록의 너비 , 측면 및 측면 오프셋을 정의하라는 메시지가 표시됩니다.

물론 너비는 블록의 너비를 나타내며 측면은 화면에서 블록의 위치 (왼쪽 또는 오른쪽)를 정의하는 데 도움이 됩니다. 오프셋은 끈끈한 블록과 선택한 면 사이의 거리를 나타냅니다.

플로팅 모드를 구성한 후 페이지를 미리 보고 필요한 조정을 수행하는 것이 좋습니다.

선택 단계: 차단 동작 지정 👨🏻‍💼

Otter Block 플러그인을 사용하면 동일한 페이지에 여러 개의 고정 블록을 만들 수 있습니다. 때로는 이러한 블록이 서로 충돌할 수도 있습니다. 동작 옵션을 사용하여 충돌 중에 접착 블록이 어떻게 반응할지 지정할 수 있습니다.

축소 , 페이드 또는 쌓기 동작을 설정할 수 있습니다.

붕괴를 선택하면 충돌할 때 동일한 움직임을 가진 끈적한 블록이 다음과 같이 서로 붕괴 되도록 설정됩니다.

그리고 페이드를 선택하면 블록이 다른 블록으로 페이드되거나 사라지도록 설정됩니다.

마지막으로 스택을 선택하면 아래 gif와 같이 블록이 충돌하는 다른 끈적한 블록 위에 블록이 쌓이게 됩니다.

페이드와 스택 모두 Otter Pro 사용자만 사용할 수 있습니다 .

그게 다야. 이제 구텐베르크에 끈적끈적한 블록을 추가했습니다. 😋

구텐베르크에서 첫 번째 끈적끈적 블록을 만들어 보세요 🧱

Gutenberg에 고정 또는 고정 블록을 추가하는 것은 WordPress 웹 사이트의 중요한 부분에 방문자의 관심을 끌 수 있는 좋은 방법입니다.

Gutenberg는 기본 고정 블록을 제공하지 않으므로 이 기능을 사이트에 추가하려면 타사 플러그인을 사용해야 합니다.

소수의 고정 블록 플러그인이 있지만 Otter Blocks는 가장 쉽고 사용자 친화적인 블록 플러그인입니다.

무료 버전과 프리미엄 버전이 있습니다. 무료 버전을 사용하여 고정 블록을 만들 수 있지만 화면 하단의 블록을 수정하거나 모바일에서 블록을 활성화하는 등의 일부 고급 설정은 프리미엄 버전의 플러그인을 사용하여 수행할 수 있습니다.

👉 Otter Blocks 플러그인을 사용하여 페이지에서 고정 블록을 실행하려면 다음 단계를 따라야 합니다.

Gutenberg에서 고정 블록을 만드는 방법에 대해 궁금한 점이 있으면 아래 댓글 섹션에 알려주십시오 .