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.

Como adicionar um contador de fatos interessantes no editor de blocos do 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. Adicione uma página ou publicação e vá para o editor de blocos.
2. Clique no "+” ícone na parte superior da tela do editor.
3. Você verá uma biblioteca de blocos ser revelada.
4. Use a barra de pesquisa para encontrar o “Fato engraçado" bloquear.
5. Quando ele aparecer, clique ou arraste e solte-o na tela do 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.

Ícone: #

• Adicionar ícone: 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.

Contente: #

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

Configurações: #

• Selecione o estilo: Choose a revealing style for the fact number on the visitor end.
  • Duração: 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:

Ícone, #

• Direção: Define the placement of the icon (Left/ Top/ Right/ Bottom)
• Tamanho: Use the slider to determine the size of the icon.
• Margem: Enter the custom value of marting to adjust the space around the icon.
• Preenchimento: 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 da caixa: Using these controls, you can add shadow effects around the icon.
• Cor: Use the color picker to set a color for the icon.
• Fundo: Adicione um tipo de fundo entre cor sólida e gradiente.
• Fronteira and Border Radius: Set the thickness, color, and roundness of the icon border.

Step 3: Style the Text Content #

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

Contagem de números:

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

Título:

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

Step 4: Style Other Elements #

Super: #

• Cor: 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.
• Posição 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: #

• Direção: Set the revealing direction of the hover border.
• Cor: 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: #

• Direção: Select the left or right direction of the vertical border.
• Alinhamento: From there, you will set the vertical placement of the vertical border.
• Cor: 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.

Etapa 5: Configurações avançadas #

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

Disposição, #

• Margem: Defina o espaço ao redor do layout do bloco. Ajuda a definir a lacuna entre outro bloco.
• Preenchimento: insira um valor para definir o espaço ao redor do bloco dentro de seu layout.
• Largura: Além de manter a largura padrão do layout.
  • Largura completa: selecionar esta opção fará com que o layout ocupe toda a largura da tela.
  • Em linha (automático): Aplicá-lo terá a mesma largura do elemento do bloco.
  • Personalizado: Escolher esta opção revelará um controle deslizante para definir o espaço horizontal do layout do bloco.
• Índice Z: Use o controle deslizante para especificar a ordem da pilha do bloco com outros blocos.

Posição: #

No menu suspenso, você verá três opções: Padrão, Absoluto, e Fixo. 

• Absoluto: Selecionar esta opção lhe dará uma posição absoluta do bloco, o que significa que os elementos caberão em seu contêiner.
• Fixo: a opção Posição fixa permitirá que o elemento caiba em toda a viewport ou tela.

Ambas as opções Absoluta e Fixa têm configurações semelhantes às abaixo:

• Orientação horizontal: Escolha a direção de posicionamento entre esquerda e direita.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento horizontal do bloco.
• Orientação Vertical: Selecione a direção de posicionamento entre para cima ou para baixo.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento vertical do bloco. 

Fundo: #

• Fundo: escolha uma opção de plano de fundo entre cor sólida, gradiente ou imagem.

Na opção Hover:

• Imagem: Se você escolher a opção de imagem, serão abertas as seguintes opções:
  • Imagem: escolha uma imagem da biblioteca de mídia ou carregue a sua própria.
  • Tamanho da imageme: Selecione o tamanho da imagem entre Miniatura, Médio, Grande ou Completo.

• Posição: Selecione a posição das 10 opções diferentes.
• Anexo: Especifique a relação da imagem de fundo fixa ou de rolagem com o resto da tela do navegador.
• Repita: selecione uma opção para definir como as imagens de fundo serão repetidas.
• Tamanho de exibição: selecione um tamanho de exibição entre quatro opções diferentes.
• Duração da transição: use o controle deslizante para ajustar a transição do plano de fundo do estado Normal para o estado flutuante.

Fronteira: #

• Fronteira: Nesta opção de configuração, você obterá opções de configuração de borda como largura, estilo e cor.
• Raio da Fronteira: defina o arredondamento da borda inserindo um valor.
• Sombra da caixa: Obtenha todas as configurações como cor, horizontal/vertical, desfoque, propagação e muito mais para dar efeitos de sombra à borda. 

Na opção Hover:

• Duração da transição: você pode adicionar um valor manualmente ou usar o controle deslizante para definir o tempo para alterar o design da borda no estado de foco.

Visibilidade: #

O módulo de visibilidade permite controlar a exibição de designs de blocos dependendo do tipo de dispositivo. Haverá três opções de dispositivos (Desktop, Tablet, Mobile) com um botão de alternância. Ative o botão de alternância para ocultar o design do bloco desse dispositivo.

No entanto, você ainda pode vê-lo na visualização do editor.

Avançado: #

• Nome do bloco: forneça um nome para identificar este bloco exclusivamente ao vincular ou criar scripts para definir o estilo do bloco.
• Âncora HTML: adicione um URL para vincular uma página do site.

• Classes CSS adicionais: atribua classes CSS adicionais ao bloco, o que permitirá estilizar o bloco como desejar com CSS personalizado. 

Observação: você pode adicionar várias classes separadamente com espaços.