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.

Come aggiungere un contatore di fatti divertenti nell'editor a blocchi di 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. Aggiungi una pagina o un post e vai all'editor a blocchi.
2. Clicca il "+" nella parte superiore della schermata dell'editor.
3. Verrà visualizzata una libreria di blocchi.
4. Utilizza la barra di ricerca per trovare "Fatto divertente” bloccare.
5. Quando appare, cliccaci sopra o trascinalo e rilascialo nella schermata dell'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.

Icona: #

• Aggiungi icona: 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.

Contenuto: #

• Numero: 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.

Impostazioni: #

• Seleziona Stile: Choose a revealing style for the fact number on the visitor end.
  • Durata: 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:

Icona, #

• Direzione: Define the placement of the icon (Left/ Top/ Right/ Bottom)
• Misurare: Use the slider to determine the size of the icon.
• Margine: Enter the custom value of marting to adjust the space around the icon.
• Imbottitura: Define the padding of the icon by using the slider or entering a custom value in the field.
• Ruotare: Give a specific value or apply the slider to determine the degree of icon rotation.

• Scatola Ombra: Using these controls, you can add shadow effects around the icon.
• Colore: Use the color picker to set a color for the icon.
• Sfondo: Aggiungi un tipo di sfondo tra colore pieno e sfumato.
• Confine and Border Radius: Set the thickness, color, and roundness of the icon border.

Step 3: Style the Text Content #

• Allineamento: Place the text content to the left, center, or right.
• Margine: Adjust the margin for the text content.

Conteggio dei numeri:

• Colore: Select a color for the number.
• Tipografia: 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.

Titolo:

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

Step 4: Style Other Elements #

Super: #

• Colore: Select a color for the super text or symbol.
• Tipografia: Get all the typography settings for super text.
• Top Position: Adjust the vertical positioning of the super content.
• Posizione orizzontale: 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: #

• Direzione: Set the revealing direction of the hover border.
• Colore: Give a color to the hover border.
• Altezza: Define the height of the hover border by using the slider or entering a custom value.

Vertical Border: #

• Direzione: Select the left or right direction of the vertical border.
• Allineamento: From there, you will set the vertical placement of the vertical border.
• Colore: 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.

Disposizione, #

• Margine: Definisce lo spazio attorno al layout del blocco. Aiuta a impostare lo spazio tra un altro blocco.
• Imbottitura: inserisci un valore per impostare lo spazio attorno al blocco all'interno del suo layout.
• Larghezza: Oltre a mantenere la larghezza del layout predefinita.
  • Intera larghezza: Selezionando questa opzione, il layout si estenderà per l'intera larghezza dello schermo.
  • In linea (automatico): Applicandolo avrà la stessa larghezza dell'elemento blocco.
  • Costume: Scegliendo questa opzione verrà visualizzato un cursore per definire lo spazio orizzontale del layout del blocco.
• Indice Z: utilizzare il cursore per specificare l'ordine di sovrapposizione del blocco con altri blocchi.

Posizione: #

Sotto il menu a discesa, vedrai tre opzioni: Predefinito, Assoluto, E Fisso. 

• Assoluto: Selezionando questa opzione ti verrà fornita una posizione assoluta del blocco, il che significa che gli elementi si adatteranno al loro contenitore.
• Fisso: l'opzione Posizione fissa consentirà all'elemento di adattarsi all'intera finestra o schermo.

Entrambe le opzioni Assoluto e Fisso hanno impostazioni simili come le seguenti:

• Orientamento orizzontale: scegliere la direzione di posizionamento tra sinistra e destra.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento orizzontale del blocco.
• Orientamento verticale: Selezionare la direzione di posizionamento tra su o giù.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento verticale del blocco. 

Sfondo: #

• Sfondo: scegli un'opzione di sfondo tra tinta unita, sfumatura o immagine.

Sotto l'opzione Al passaggio del mouse:

• Immagine: Se scegli l'opzione immagine si apriranno le seguenti opzioni:
  • Immagine: scegli un'immagine dal catalogo multimediale o carica la tua.
  • Dimensioni immaginee: selezionare la dimensione dell'immagine tra Miniatura, Media, Grande o Intera.

• Posizione: Seleziona la posizione delle 10 diverse opzioni.
• Allegato: Specifica la relazione fissa o scorrevole dell'immagine di sfondo con il resto della schermata del browser.
• Ripetere: selezionare un'opzione per impostare la modalità di ripetizione delle immagini di sfondo.
• Dimensioni dello schermo: consente di selezionare una dimensione di visualizzazione tra quattro diverse opzioni.
• Durata della transizione: utilizza il cursore per regolare la transizione dello sfondo dallo stato normale allo stato al passaggio del mouse.

Confine: #

• Confine: sotto questa opzione di impostazione, otterrai opzioni di impostazione del bordo come larghezza, stile e colore.
• Raggio del confine: imposta la rotondità del bordo inserendo un valore.
• Scatola Ombra: Ottieni tutte le impostazioni come colore, orizzontale/verticale, sfocatura, diffusione e altro per dare effetti di ombra al bordo. 

Sotto l'opzione al passaggio del mouse:

• Durata della transizione: puoi aggiungere un valore manualmente o utilizzare il dispositivo di scorrimento per impostare l'ora in cui modificare il design del bordo allo stato al passaggio del mouse.

Visibilità: #

Il modulo visibilità consente di controllare la visualizzazione dei disegni a blocchi in base al tipo di dispositivo. Ci saranno tre opzioni del dispositivo (desktop, tablet, cellulare) con un pulsante di attivazione/disattivazione. Attiva il pulsante di attivazione/disattivazione per nascondere il design a blocchi di quel dispositivo.

Tuttavia, puoi ancora vederlo nella vista dell'editor.

Avanzate: #

• Nome del blocco: assegna un nome per identificare questo blocco in modo univoco durante il collegamento o lo scripting per definire lo stile del blocco.
• Ancoraggio HTML: aggiungi un URL per collegare una pagina del sito web.

• Classi CSS aggiuntive: assegna classi CSS aggiuntive al blocco che ti consentiranno di modellare il blocco come desideri con CSS personalizzato. 

NB: puoi aggiungere più classi separatamente con spazi.