The GutenKit Image Accordion block focuses on allowing you to display multiple images in a consolidated area of your website. Additionally, you can add a title, button, popup, project, and so on. 

In this documentation, you will learn to add an image accordion in the Gutenberg block editor in simple steps.

Required Plugins: GutenKit Plugin

How to add Image Accordion in Gutenberg Websites #

Ready to get started? Follow the steps below.

Step 1: Add GutenKit Image Accordion Block #

Log in to your WordPress dashboard, 

• 이동 페이지 > 새 페이지 추가 또는 블록 편집기로 기존 페이지 편집을 시작하세요.
• “를 찾으세요.+” icon at the top of the editor screen. Click it.
• 블록 메뉴가 나타나면 '를 검색하세요.GutenKit Image Accordion".
• 보이면 클릭하거나 블록 에디터 화면에 드래그 앤 드롭하세요.

Step 2: Add Accordion Content #

Adding the image accordion block will automatically load three items to your screen. Then, open the block setting and head to the 콘텐츠 탭.

아래의 이미지 아코디언 option, you will see:

• Each item includes a 항목 복제 icon to copy a customized item.
• And the ‘엑스” icon to delete an item.
• Plus, there is a “+ 항목 추가” button to add a new item.

Now, select any accordion item to open its setting.

• Keep This Item Active: Enable this toggle button to keep an item active on the visitor’s end.
• 배경 이미지: Here you will insert the image of the accordion item.
• 제목: Type the text you want to show as the title.
• Enable Wrapper Link: Activating this option allows adding a link that visitors will follow by clicking anywhere on the accordion item.
• Add Button URL: Enable this option to insert a link in the button of the accordion item.
• Add Project Link Url: Enter the project link URL. Do note that the project link is disabled by default. You can enable it from the next settings.

Step 3: Configure Accordion Settings #

In the previous step, we added content for the image accordion. Now, we’ll set how to showcase them.

설정: #

• 스타일: Choose an accordion style between Horizontal and Vertical.
• Active Behaviour: Select a revealing event of the active accordion item.
• Enable Button: Toggle this button to insert a button in the accordion item.
  • 버튼 라벨: Enter the text for the button label.
• 팝업 활성화: Activate this option to show a popup with an accordion item.
  • Popup Icon: Choose an icon to indicate the user to reveal the popup.
• Enable Project Link: Enable this toggle button to show a project with the accordion item.
  • Enable Project Link Icon: Add an icon from the library or upload your SVG file to display the project.

Step 4: Style Image Accordion #

일반적인: #

• Min Height: Use the slider or add a custom value to define the height of the entire accordion section.
• Gutter: Adjust the gap between accordion items.
• Active Item Background: Choose between a solid color or a gradient background.

제목: #

• 여유: Determine the gap between the title and other items. Like 
• 색상: Select a color for the title from the color picker.
• 타이포그래피: Use this setting to set the title font family, text size, weight, line height, style, decoration, etc. 

콘텐츠: #

• 조정: Place all the content of the accordion item between left, center, and right.
• 심: Give a custom value in this field to adjust the space around the accordion content.
• 수직 위치: Defne the vertical placement of the accordion content between top, center, and bottom.

단추: #

• 심: Define the inner space around the button text and border.
• 타이포그래피: Here you have all the customizing controls to set the typography style.

Now the following border customization options are applicable for both Normal and Hover state. You can separately customize them.

• 색상: Choose the text color for the button.
• 배경 유형: Add a gradient or solid color background for the button.
• 국경 & 테두리 반경: These settings are used for giving the border a color and set its style, thickness, & roundness.

Action Icon: #

• 너비: Use the slider to define the inner space of the action icon(Popup or Project) and its border.
• 사이의 공간: Use the slider to adjust the gap between action icons.
• 테두리 너비: Determine the thickness of the icon border.

The following styling features are applicable for both Normal and Hover states.

• Popup Icon Color: Select a color for the popup icon. 
• Link Icon Color: Use the color picker to choose the project icon color.
• 배경색: Add a background color for both action icons.

Step 5: Advanced Settings #

From the Advanced Settings tab, you can configure the Image Accordion block layout, background, border styles, and control its visibility.

공들여 나열한 것, #

• 여유: 블록 레이아웃 주변의 공간을 정의합니다. 다른 블록 사이의 간격을 설정하는 데 도움이 됩니다.
• 심: 레이아웃 내의 블록 주변 공간을 설정하는 값을 입력합니다.
• 너비: 기본 레이아웃 너비를 유지하는 것 외에.
  • 전체 넓이: 이 옵션을 선택하면 레이아웃이 화면 전체 너비에 걸쳐 적용됩니다.
  • 인라인(자동): 적용하면 블록 요소와 동일한 너비를 갖게 됩니다.
  • 관습: 이 옵션을 선택하면 블록 레이아웃의 수평 공간을 정의하는 슬라이더가 표시됩니다.
• Z-지수: 슬라이더를 사용하여 다른 블록과 함께 블록의 스택 순서를 지정합니다.

위치: #

드롭다운 아래에 세 가지 옵션이 표시됩니다. 기본, 순수한, 그리고 결정된. 

• 순수한: 이 옵션을 선택하면 블록의 절대 위치가 제공됩니다. 즉, 요소가 컨테이너에 맞습니다.
• 결정된: 고정 위치 옵션을 사용하면 요소가 전체 뷰포트나 화면에 맞춰집니다.

절대 및 고정 옵션 모두 아래와 같이 유사한 설정을 갖습니다.

• 수평 방향: 위치결정 방향을 왼쪽과 오른쪽 중에서 선택합니다.
• 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수평 위치를 조정합니다.
• 수직 방향: 위치결정 방향을 위, 아래 중에서 선택합니다.
• 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수직 위치를 조정합니다. 

배경: #

• 배경: 단색, 그라데이션, 이미지 중 배경 옵션을 선택합니다.

호버 옵션에서:

• 영상: 이미지 옵션을 선택하면 다음 옵션이 열립니다.
  • 영상: 미디어 라이브러리에서 이미지를 선택하거나 자신의 이미지를 업로드하세요.
  • 이미지 크기e: 썸네일, 중간, 크게 또는 전체 중에서 이미지 크기를 선택합니다.

• 위치: 10가지 옵션의 위치를 선택합니다.
• 부착: 나머지 브라우저 화면과의 고정 또는 스크롤 배경 이미지 관계를 지정합니다.
• 반복하다: 옵션을 선택하여 배경 이미지가 반복되는 방식을 설정합니다.
• 디스플레이 크기: 네 가지 옵션 중에서 디스플레이 크기를 선택합니다.

• 전환 기간: 슬라이더를 사용하여 배경 전환을 일반에서 호버 상태로 조정합니다.

국경: #

• 국경: 이 설정 옵션에는 너비, 스타일, 색상과 같은 테두리 설정 옵션이 제공됩니다.
• 테두리 반경: 값을 입력하여 테두리의 둥근 정도를 설정합니다.
• 박스 섀도우: 색상, 가로/세로, 흐림, 퍼짐 등의 모든 설정을 사용하여 테두리에 그림자 효과를 적용할 수 있습니다. 

호버 옵션에서:

• 전환 기간: 수동으로 값을 추가하거나 슬라이더를 사용하여 마우스 오버 상태에서 테두리 디자인을 변경하는 시간을 설정할 수 있습니다.

시계: #

가시성 모듈을 사용하면 장치 유형에 따라 블록 디자인 표시를 제어할 수 있습니다. 토글 버튼이 있는 세 가지 장치 옵션(데스크톱, 태블릿, 모바일)이 있습니다. 해당 장치의 블록 디자인을 숨기려면 토글 버튼을 켜십시오.

그러나 편집기 보기에서는 계속 볼 수 있습니다.

고급의: #

• 블록 이름: 블록 스타일을 지정하기 위해 링크하거나 스크립팅하는 동안 이 블록을 고유하게 식별할 수 있도록 이름을 지정합니다.
• HTML 앵커: 웹사이트 페이지를 링크하기 위한 URL을 추가합니다.

• 추가 CSS 클래스: 추가 CSS 클래스를 블록에 할당하면 사용자 정의 CSS를 사용하여 원하는 대로 블록 스타일을 지정할 수 있습니다. 

주의: 공백을 사용하여 여러 클래스를 별도로 추가할 수 있습니다.

Now it’s your turn to add an image accordion layout to your WordPress website using the Gutenberg block editor. You will end up showing multiple images in an appealing and attractive way.