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.

¿Cómo agregar un contador de datos curiosos en el editor de bloques de WordPress? #

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. Agrega una página o publicación y dirígete al editor de bloques.
2. Haga clic en el "+” icono en la parte superior de la pantalla del editor.
3. Verá que se revelará una biblioteca de bloques.
4. Utilice la barra de búsqueda para encontrar el “Hecho de la diversión" bloquear.
5. Cuando aparezca, haz clic o arrástralo y suéltalo en la pantalla del editor.

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.

Icono: #

• Agregar icono: 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.

Contenido: #

• Número: 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.

Ajustes: #

• Seleccionar estilo: Choose a revealing style for the fact number on the visitor end.
  • Duración: 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:

Icono, #

• Dirección: Define the placement of the icon (Left/ Top/ Right/ Bottom)
• Tamaño: Use the slider to determine the size of the icon.
• Margen: Enter the custom value of marting to adjust the space around the icon.
• Relleno: Define the padding of the icon by using the slider or entering a custom value in the field.
• Girar: Give a specific value or apply the slider to determine the degree of icon rotation.

• Sombra de la caja: Using these controls, you can add shadow effects around the icon.
• Color: Use the color picker to set a color for the icon.
• Fondo:Agrega un tipo de fondo entre color sólido y degradado.
• Borde and Border Radius: Set the thickness, color, and roundness of the icon border.

Step 3: Style the Text Content #

• Alineación: Place the text content to the left, center, or right.
• Margen: Adjust the margin for the text content.

Conteo de números:

• Color: Select a color for the number.
• Tipografía: 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.

Título:

• Color: Give a color to the title text.
• Tipografía: Get all the typography controls like font family, size, style, line spacing, etc.
• Relleno: Enter your desired custom value to add padding around the title.

Step 4: Style Other Elements #

Súper: #

• Color: Select a color for the super text or symbol.
• Tipografía: Get all the typography settings for super text.
• Top Position: Adjust the vertical positioning of the super content.
• Posicion horizontal: 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: #

• Dirección: Set the revealing direction of the hover border.
• Color: Give a color to the hover border.
• Altura: Define the height of the hover border by using the slider or entering a custom value.

Vertical Border: #

• Dirección: Select the left or right direction of the vertical border.
• Alineación: From there, you will set the vertical placement of the vertical border.
• Color: 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.

Paso 5: Configuración avanzada #

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

Disposición, #

• Margen: define el espacio alrededor del diseño del bloque. Ayuda a establecer un espacio entre otro bloque.
• Relleno: ingrese un valor para establecer el espacio alrededor del bloque dentro de su diseño.
• Ancho: Además de mantener el ancho de diseño predeterminado.
  • Ancho completo: Al seleccionar esto, el diseño abarcará todo el ancho de la pantalla.
  • En línea (automático): Al aplicarlo tendrá el mismo ancho que el elemento del bloque.
  • Costumbre: Al elegir esta opción, se mostrará un control deslizante para definir el espacio horizontal del diseño del bloque.
• Índice Z: utilice el control deslizante para especificar el orden de pila del bloque con otros bloques.

Posición: #

Debajo del menú desplegable, verá tres opciones: Por defecto, Absoluto, y Fijado. 

• Absoluto: Al seleccionar esta opción, obtendrá una posición absoluta del bloque, lo que significa que los elementos encajarán en su contenedor.
• Fijado: La opción Posición fija permitirá que el elemento encaje en toda la ventana gráfica o pantalla.

Tanto la opción Absoluta como la Fija tienen configuraciones similares a las siguientes:

• Orientación horizontal: Elija la dirección de posicionamiento entre izquierda y derecha.
• Compensar: Utilice el control deslizante o introduzca un valor manualmente para ajustar la posición horizontal del bloque.
• Orientación vertical: Seleccione la dirección de posicionamiento entre arriba o abajo.
• Compensar: Utilice el control deslizante o introduzca un valor manualmente para ajustar la posición vertical del bloque. 

Fondo: #

• Fondo: elija una opción de fondo entre color sólido, degradado o imagen.

En la opción Pasar el cursor:

• Imagen: Si elige la opción de imagen, se abrirán las siguientes opciones:
  • Imagen: elija una imagen de la biblioteca multimedia o cargue la suya propia.
  • Tamaño de la imagene: Seleccione el tamaño de la imagen entre Miniatura, Mediano, Grande o Completo.

• Posición: Selecciona la posición de las 10 opciones diferentes.
• Adjunto: Especifique la relación de la imagen de fondo fija o de desplazamiento con el resto de la pantalla del navegador.
• Repetir: seleccione una opción para configurar cómo se repiten las imágenes de fondo.
• tamaño de la pantalla: seleccione un tamaño de visualización entre cuatro opciones diferentes.
• Duración de la transición: utilice el control deslizante para ajustar la transición del fondo de Normal al estado de desplazamiento.

Borde: #

• Borde: En esta opción de configuración, obtendrá opciones de configuración de bordes como ancho, estilo y color.
• Radio del borde: establezca la redondez del borde ingresando un valor.
• Sombra de la caja: Obtenga todas las configuraciones como color, horizontal/vertical, desenfoque, extensión y más para darle efectos de sombra al borde. 

En la opción de desplazamiento:

• Duración de la transición: Puede agregar un valor manualmente o usar el control deslizante para establecer el tiempo para cambiar el diseño del borde en el estado de desplazamiento.

Visibilidad: #

El módulo de visibilidad le permite controlar la visualización de diseños de bloques según el tipo de dispositivo. Habrá tres opciones de dispositivo (escritorio, tableta, móvil) con un botón de alternancia. Active el botón de alternancia para ocultar el diseño de bloque de ese dispositivo.

Sin embargo, aún puedes verlo en la vista del editor.

Avanzado: #

• Nombre del bloque: proporcione un nombre para identificar este bloque de forma única mientras lo vincula o crea una secuencia de comandos para darle estilo al bloque.
• Ancla HTML: agregue una URL para vincular una página de sitio web.

• Clases CSS adicionales: Asigne clases CSS adicionales al bloque, lo que le permitirá diseñar el bloque como desee con CSS personalizado. 

NÓTESE BIEN: Puede agregar varias clases por separado con espacios.