구텐베르크 워드프레스에서 아코디언을 추가하는 방법

Accordions are a great way to organize and show detailed information in a small, easy-to-read style whether you’re making a list of frequently asked questions, sharing plans, or giving detailed information.

워드프레스 설정 후 궁금한 점이 있으면 다음을 확인하세요. 구텐베르크 워드프레스에서 아코디언을 추가하는 방법, you’ve come to the right place.

이 가이드에서는 구텐베르크 편집기를 사용하여 워드프레스 사이트에 아코디언을 추가하는 방법을 설명합니다. 적합한 플러그인 선택부터 아코디언의 모양과 작동 방식 변경에 이르기까지 모든 것을 도와드릴 수 있습니다. 

프로세스를 시작하기 전에 아코디언 블록에 대해 알아야 합니다.

아코디언 블록이란 무엇인가요?

아코디언 블록은 아코디언 스타일 레이아웃으로 접을 수 있는 정보를 표시할 수 있는 유용한 웹 디자인 기능입니다. 

작동 방식:

아코디언의 구조: 아코디언은 사용자가 클릭하거나 탭하여 자세한 정보를 볼 수 있는 제목 목록으로 구성됩니다. 제목은 일반적으로 질문이나 주제입니다.

제목을 클릭하면 확장되어 더 많은 콘텐츠가 표시되고, 다시 클릭하면 다시 축소되어 해당 콘텐츠가 숨겨집니다.

구텐베르크에게 아코디언이 있나요?

워드프레스의 기본 블록 편집기인 구텐베르크에는 기본적으로 아코디언 블록이 포함되어 있지 않습니다. 하지만 타사 플러그인이나 사용자 정의 구텐베르크 블록을 사용하여 이 기능을 쉽게 추가할 수 있습니다. 

웹사이트에서 아코디언은 언제 사용하나요?

Accordion blocks are a great way to organize website content. It is easy for people to use and doesn’t take up too much space. In the following situations, let us see where an accordion is used:

자주 묻는 질문

아코디언 블록은 웹사이트에 자주 묻는 질문(FAQ)을 표시하는 데 자주 사용됩니다. 각 섹션을 펼치면 질문에 대한 답변을 찾을 수 있습니다. 이렇게 하면 필요한 정보를 빠르게 찾을 수 있습니다.

제품 세부 정보 또는 서비스

아코디언은 제품, 서비스 또는 기능에 대한 자세한 정보를 체계적으로 표시하는 데 도움이 될 수 있습니다. 사용자는 페이지를 너무 복잡하게 만들지 않고도 보고 싶은 질문을 확장할 수 있습니다.

단계별 지침 

Accordion blocks are great for making step-by-step instructions or guides. It’s easy for people to follow along because each step can be a separate part that can collapse.

긴 형식의 텍스트

법적 경고, 서비스 약관, 개인정보처리방침과 같이 긴 텍스트가 있는 경우 아코디언은 사용자가 상호작용할 수 있을 때까지 해당 텍스트를 숨길 수 있습니다.

반응형 페이지

아코디언은 다양한 화면 크기에서 잘 작동합니다. 데스크톱 컴퓨터에서 방문하든 모바일 디바이스에서 방문하든 사이트의 정보가 체계적으로 유지되고 쉽게 찾을 수 있습니다.

SEO 색인

When it comes to SEO, you won’t lose any benefits because search engines can still index the information inside accordion blocks.

워드프레스용 구텐베르크 편집기에서 아코디언을 추가하고 사용하는 방법

구텐베르크 블록 플러그인을 설치하기만 하면 아코디언 블록을 추가할 수 있습니다.

워드프레스 대시보드로 이동하여 플러그인 탭으로 이동합니다.

플러그인 -> 새 플러그인 추가를 선택합니다.

이제 다음을 입력합니다. "졸로블록'를 플러그인 검색에 입력합니다.

그런 다음 지금 설치 버튼을 클릭합니다.

졸로블록을 설치한 후, 활성화 플러그인.

플러그인이 활성화되면 졸로블록의 환영 페이지가 표시됩니다.

이제 블록 메뉴로 이동하여 아코디언 블록이 활성화되어 있는지 확인합니다.

활성화된 경우 지금 아코디언 블록을 추가해 보겠습니다.

원하는 페이지나 글에 아코디언 블록을 추가할 수 있습니다.

이 예제에서는 기존 홈페이지에 아코디언을 추가할 수 있습니다.

회원 평가 섹션 바로 아래에 아코디언 블록을 추가할 수 있습니다.

이렇게 하려면 상단에서 사이트 편집 버튼을 클릭합니다.

이제 편집 모드로 리디렉션됩니다.

아래로 스크롤하여 페이지를 클릭하고 회원 평가 섹션을 찾으면 됩니다.

이제 회원 평가 섹션을 클릭한 다음 + 기호가 표시됩니다.

목록에서 많은 블록을 볼 수 있습니다. 

이제 졸로블록에서 아코디언 블록을 선택합니다.

방금 아코디언 블록을 추가했습니다.

이제 각 아코디언 타이틀을 클릭하고 오른쪽 패널의 일반 옵션에서 편집을 시작하면 됩니다.

이제 질문의 + 기호를 클릭하여 확장하고 답을 표시합니다. 

텍스트 표시줄에 답을 입력합니다.

비슷한 방식으로 다른 아코디언 제목과 답안도 편집할 수 있습니다.

아코디언을 더 추가하려면 아코디언 추가 버튼을 클릭합니다.

아코디언 전체 항목, 제목, 아이콘 및 콘텐츠를 사용자 지정할 수 있습니다.

아코디언 제목과 콘텐츠의 색상, 반경, 패딩, 여백 및 상자 그림자를 변경할 수 있습니다.

예를 들어 여기에서는 아코디언 제목 글꼴 색상이 빨간색으로 변경되고 배경이 회색으로 변경됩니다.

이제 몇 초 만에 아코디언을 빠르게 추가하고 사용자 지정할 수 있습니다.

편집이 완료되면 이전 페이지의 경우 상단에 저장 버튼이 표시됩니다. 그러나 새 페이지 또는 글인 경우 게시 버튼이 표시됩니다. 저장 또는 게시 버튼을 클릭하면 새 아코디언 블록이 페이지에 나타납니다.

더 많은 영감을 얻으려면 졸로블록을 확인하세요. 데모 를 사용하여 다양한 아코디언 스타일을 디자인할 수 있습니다.

하지만 아코디언을 사용자 지정하는 데 도움이 필요하다면 다음 도움말을 참조하세요. 문서 또는 ZoloBlocks에서 전문가의 도움을 받을 수 있습니다. 프리미엄 지원.

최종 생각

방금 배웠습니다. 워드프레스용 구텐베르크 편집기에서 아코디언을 추가하고 사용하는 방법. 

ZoloBlocks를 사용하면 아코디언을 쉽게 추가하고 사이트 모양을 변경할 수 있습니다. 웹 페이지에 접을 수 있는 블록을 추가하는 가장 쉽고 좋은 방법이라고 생각합니다.

구텐베르크 편집기 내에서 FAQ, 제품 기능 또는 구조화된 레이아웃을 위한 대화형 아코디언 스타일의 콘텐츠를 만들 수 있습니다. 

웹 프로젝트에 유연성과 창의성을 더해 보세요!