Take the help of GutenKit Fun Facts Gutenberg Blocks for an intuitive and impressive display of important facts with numbers and icons. It gives you all the customization controls and animation styles to highlight numbers on your WordPress website.

Read this documentation to learn how to create an amazing fun fact counter on the Gutenberg block editor of your website.

How to Add Fun Fact Counter on WordPress Block Editor? #

Before moving to the first step, you need to have the GutenKit plugin installed on your WordPress website.

Step 1: Add GutenKit Fun Fact Block #

From your WordPress dashboard:

1. Add a page or post and head to the block editor.
2. “를 클릭하세요.+편집기 화면 상단에 있는 ”아이콘을 클릭하세요.
3. You will see a block library will reveal.
4. Use the search bar to find the “재미있는 사실” block.
5. 화면이 나타나면 클릭하거나 끌어서 편집기 화면으로 놓으세요.

Step 2: Add Icon and Content #

Now, the first setting area of ​​the block that you will work with is the Content tab. From here, you will add icons and other content like numbers, prefixes, suffixes, etc.

상: #

• 아이콘 추가: By default, this toggle button is activated. Disable this, if you don’t want to show an icon. You can change the icon from the library or upload your own SVG icon file.

콘텐츠: #

• 숫자: Put the number you want to show in this field.
• Enable Prefix: Use this toggle button if you want to add something before the number. You can simply type anything on the block editor screen.
• Enable Suffix: Activate this to add and type something after the number.
• Enable Super: Super works as another supporting element of your fun fact info. Enable it and add a text or symbol.
• Enable Heading: Enable this toggle button to show heading or text. Also, define the header HTML tag from the dropdown.

설정: #

• 스타일 선택: Choose a revealing style for the fact number on the visitor end.
  • 지속: Set the duration of the number counting while showing in milliseconds.
• Enable Hover Bottom: Toggle this button to show a bottom line on hover.
• Enable Vertical Border: Activate it to show a vertical border.

Step 2: Style the Icon #

In this part, we will focus on styling the icon and other content elements. 

Go to the style tab:

상, #

• 방향: Define the placement of the icon (Left/ Top/ Right/ Bottom)
• 크기: Use the slider to determine the size of the icon.
• 여유: Enter the custom value of marting to adjust the space around the icon.
• 심: Define the padding of the icon by using the slider or entering a custom value in the field.
• 회전: Give a specific value or apply the slider to determine the degree of icon rotation.

• 박스 섀도우: Using these controls, you can add shadow effects around the icon.
• 색상: Use the color picker to set a color for the icon.
• 배경: 단색과 그라데이션 사이에 배경 유형을 추가합니다.
• 국경 and Border Radius: Set the thickness, color, and roundness of the icon border.

Step 3: Style the Text Content #

• 조정: Place the text content to the left, center, or right.
• 여유: Adjust the margin for the text content.

숫자 카운트:

• 색상: Select a color for the number.
• 타이포그래피: Control all the typography settings like font family, size, weight, style, letter spacing, and many more.
• Bottom Spacing: Define the bottom gap between the number and title content by using the slider or putting a custom value.
• Right Spacing: Define the space or gap between number and suffix content.

제목:

• 색상: Give a color to the title text.
• 타이포그래피: Get all the typography controls like font family, size, style, line spacing, etc.
• 심: Enter your desired custom value to add padding around the title.

Step 4: Style Other Elements #

감독자: #

• 색상: Select a color for the super text or symbol.
• 타이포그래피: Get all the typography settings for super text.
• Top Position: Adjust the vertical positioning of the super content.
• 수직적 지위: Use this slider to define the horizontal position of super content.

The next two options will only be visible in the Style tab when they are enabled from the Content tab.

Hover Border: #

• 방향: Set the revealing direction of the hover border.
• 색상: Give a color to the hover border.
• 키: Define the height of the hover border by using the slider or entering a custom value.

Vertical Border: #

• 방향: Select the left or right direction of the vertical border.
• 조정: From there, you will set the vertical placement of the vertical border.
• 색상: Use the color picker to give a color to the vertical border.
• Width and Height: Adjust the thickness and height of the vertical border.

That’s it. We are done with all the settings. Now, it’s your turn to try all these features to create your fun fact counter on your website.

Step 5: Advanced Settings #

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

공들여 나열한 것, #

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

위치: #

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

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

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

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

배경: #

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

호버 옵션에서:

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

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

국경: #

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

호버 옵션에서:

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

시계: #

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

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

고급의: #

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

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

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