The GutenKit Icon Box block comes with many useful options like icons, badges, text, buttons, Watermark icons, etc to effectively display your products, services, customer reviews, and other information. 

This multipurpose block has extensive choices for the icon, text, badge, and a range of customization options to style a unique information box in an easily digestible way.

In this guide, we will learn about using the GutenKit Icon Box block in the Gutenberg builder.

How to Use GutenKit Icon Box Block #

로 이동: WordPress 대시보드 > Choose or create a New page or post > Click the “+”아이콘은 블록 편집기 화면 상단  > 검색 GutenKit Icon Box. Now, simply drag and drop it into the editor.

Once the GutenKit Icon Box block is on your editor screen, click on it. The right sidebar will open all the features of this block. These features are structured under three different categories: 콘텐츠, 스타일, 그리고 고급의.

Step 1: Add an Icon #

We will start with the Content tab. First, add an icon.

Come under the 콘텐츠 탭,

상: #

• 아이콘 추가: Toggle this button to add an icon.
  • 헤더 아이콘: Click the “아이콘 라이브러리” button and a popup will reveal extensive icon options. Like the image below.

From here, choose your icon. You can also use the search bar to quickly find your icon. Once you see your preferred icon, click on it. Then hit the “끼워 넣다” button at the bottom of the popup.

And the icon is successfully added.  

Now if you want to add an SVG icon, enable the 아이콘 추가 option like the previous step and it will reveal the 헤더 아이콘. 여기, 

• “를 클릭하세요.Upload SVG" 옵션. 
• It will require you to enable SVG file upload support. Simply, select the “할 수 있게 하다" 옵션.
• It will direct you to the upload media file option. Just upload your SVG icon like you add any media files from your device.

Step 2: Add Button & Badge #

Continuing on, we will give our attention to adding a button and badge on the icon box.

단추: #

1. 활성화 버튼: Click this toggle button to add a button in the icon box.
2. Enable Button On Hover: Activate this button to show the button on hover.
3. 상표: Edit your button label.
4. URL: Enter the link you want to drive the visitor.
5. 아이콘 표시: Enable this button to show an icon with the button.
6. 아이콘 선택: Select your preferred icon.
7. 아이콘 위치: Place the icon before or after the button.

배지: #

1. 배지 표시: Click this button to show the badge in the icon box.
2. 제목: Type the title you want.
3. 위치: Locate badge position from six different locations. Or, you can enter top & left values for a custom location. 

Step 5: Additional Configuration #

Learning the next step will help you add a watermark icon and adjust its placement.

설정: #

1. Enable Hover Watermark: Toggle this button to show an icon on hover.
   • Choose Watermark Icon: 라이브러리에서 아이콘을 선택하거나 직접 만든 아이콘을 업로드하세요.
2. Header Icon Position: Set the header icon position (Top /Left /Right)
3. 콘텐츠 정렬: Select the alignment of your icon box content.
4. 제목 HTML 태그: Select the title HTML tag to H1- H6, Div, Span or P.

Step 5: Icon Box Customization #

Now we will proceed with the customization features for the icon box. Go to the Style tab.

Icon Box Container,

1. Add Hover Animation: Toggle this button to add a hover animation effect for the container box.

• 호버 애니메이션: Select an animation type from four different effects.

2. Add Hover Background Animation: Activate this button to add a background hover animation effect. (To set a background type, you need to use the 고급의 tab.)
   • 애니메이션 방향: Set your animation direction. (Left, Right, Top, Bottom) 

Step 6: Typography & Watermark Icon Customization #

로부터 콘텐츠 settings of the 스타일 tab, you will customize the Title and Description text separately.

1. 조정: Align the icon to left, center, or right.
2. 여유: Specify the space around the text.
3. 색상: Pick a color from the color palette.
4. 호버 색상: Add a color for the hover effects.
5. 타이포그래피: Set font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing.

And, there are multiple style settings for the Watermark Icon:

Watermark

1. 색상: Pick a color for the Water Makr icon.Watermark Icon Size: Define the size of the watermark icon.

Step 7: Style The Icon

Here’s a wide range of features for customizing the icon style. Let’s see the use:

1. 크기: Specify the icon size in pixels.회전: Use the bar to rotate the icon or enter the value in degrees.수직 위치: Set the icon’s vertical position in pixels.높이 너비 사용: Enable this button to customize the width and height of the icon

2. 너비: Set the width of the icon.키: Determine the gap between text and icon.라인 높이: Adjust the height of the icon line.

The remaining features are applied to both normal and hover states.

5. 아이콘 색상: Use the color picker tool to assign a color to the icon.

6. 아이콘 배경색: Give color to the icon background.

7. 국경: Use the slider or manually enter a value in pixels for borders.

8. 테두리 반경: Give a value for the border radius to control the roundness of the border.

9. 박스 섀도우: Adjust the shadow around the box.

10. 여유: Define the margin around the icon.

11. 심: Set the padding within the icon.

Step 8: Badge Customization #

The last step includes customizing the badge.

배지: #

1. 심: Define the spacing around the badge.
2. 테두리 반경: Specify the roundness of the border of the badge.
3. 색상: Select the color for the badge text.
4. 배경: Choose the background color of the badge.
5. 박스 섀도우: Set the box shadow’s softness, size, and direction.
6. 타이포그래피: Change the typography options for the badge.

That’s all! Now you can easily add an icon box to show anything informatively on your website.