Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo contador de números

Divi: o tema WordPress mais fácil de usar

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

O módulo Number Counter no tema WordPress Divi é uma ótima maneira de exibir os números de uma forma divertida e envolvente. Este módulo é comumente usado para exibir estatísticas sobre você ou sua empresa. Por exemplo, exibir seu número de clientes ou seguidores no Facebook é uma ótima maneira de apresentar evidências sociais.

número de exibição divi wordpress.png

Como adicionar o módulo Número do contador de Divi

Antes de adicionar um módulo contador à sua página, primeiro você deve entrar no Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.

contador de números divi.png

Localize o módulo do contador de números na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos está disponível, o que significa que você pode digitar a palavra "número do contador" e clique em "Enter" para pesquisar e adicionar o número de módulo de contador automaticamente! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Exemplo de caso de uso: usando o módulo do medidor digital para exibir os resultados de um projeto

Uma ótima maneira de usar o módulo contador de números é ilustrar as estatísticas dos estudos de caso. Basta etiquetar cada contador com um número para que o usuário possa ver facilmente o sucesso do projeto. Neste exemplo, eu uso o módulo contador digital para exibir quatro resultados do projeto.

Como você pode ver, o topo da página inclui os três objetivos do projeto usando o módulo " Balcão de bar E a parte inferior da página inclui os resultados do estudo de caso usando os módulos de medidor digital.

exemplo compteur.gif

A seção da página que mostra os resultados do estudo de caso usando módulos digitais requer o uso de uma seção especializada. Usando o Visual Builder, adicione uma seção especializada à página e selecione o seguinte layout:

seção personalizada divi.png

Selecione um layout de coluna 1 para o lado direito da seção e digite o título e o texto necessário para os resultados do estudo de caso.

faixa de inserção divi.png

Insira um layout de colunas 2 diretamente sob o layout da coluna 1, no lado direito da seção.

coluna divi.png dividida

Agora adicione seu primeiro módulo contador de números à coluna da esquerda.

adicione um número de seção divi.png

Atualize os parâmetros dos contadores de números da seguinte maneira:

Opções de conteúdo

Título: Novos visitantes
Número: 54210
Porcentagem de sinal: OFF

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Opções de design

Cor do texto: escuro
Fonte do título: padrão
Tamanho da fonte do título: 20px
Título Cor do Texto: # 405c60
Altura da linha do título: 1em
Número de caracteres: padrão, negrito
Número de caracteres: 60px
Número Cor do texto: # e07a5e
Altura da linha numérica: 72px

número da seção de conteúdo divi.png

Salvar configurações

Duplicar módulo números Contadores e slide na coluna da direita adjacente e atualizar as opções Título e número.

counter number example construction.png

Duplique a linha que contém os dois módulos do contador de números para que mais dois contadores de números sejam exibidos abaixo.

duplicação digital do contador divi.png

Em seguida, atualize as opções Título e Número para elas. Agora você tem todos os quatro contadores de discagem completa.

Não esqueça de adicionar a imagem 667 x 320 na coluna esquerda / lateral da seção especializada.

Acabou! A combinação de contadores de números e contadores de barras nesta página de estudo de caso realmente torna o conteúdo atraente.

Módulo de Realização Final compteur.png

Opções de conteúdo do contador digital

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

área selecionada wordpress content divi.png

Título

Digite um título para o medidor. Isso será exibido sob o número no texto menor.

Nome

Este é o número que o contador contará. Quando você rolar para baixo e chegar ao balcão, o número rapidamente conta de 0 até alcançar o número definido aqui. Somente valores numéricos podem ser colocados aqui.

Sinal de porcentagem

Aqui você pode escolher se o sinal de porcentagem deve ser adicionado após o número definido acima.

Cor de fundo

Defina uma cor de fundo personalizada para o seu módulo ou deixe em branco para usar a cor padrão.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Imagem de fundo

Se definida, esta imagem será usada como plano de fundo para este módulo. Para excluir uma imagem de plano de fundo, basta excluir o URL do campo de configurações. As imagens de plano de fundo aparecerão acima das cores do plano de fundo, o que significa que a cor do plano de fundo não ficará visível quando uma imagem de plano de fundo for aplicada.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design (estilo) do medidor digital

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de parâmetros de design que você pode usar para alterar qualquer coisa.

design de zona counter divi.png

Cor do texto

Você pode escolher aqui se o texto do seu título deve ser claro ou escuro. Se você estiver trabalhando em um fundo escuro, seu texto deve estar claro. Se seu plano de fundo estiver claro, seu texto deve estar escuro.

Fonte do título

Você pode alterar a fonte do texto do título selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do título

Aqui você pode ajustar o tamanho do texto do seu título. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Título da cor do texto

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do título, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento das letras do título

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do título, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do título

A altura da linha afeta o espaço entre cada linha do texto do título Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Fontes do número

Você pode alterar a fonte do seu texto selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do número

Aqui você pode ajustar o tamanho do seu texto digital. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto digital

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto digital, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de letras digitais

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto numérico, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do número

A altura da linha afeta o espaço entre cada linha do texto digital. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada. localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Use a fronteira

Ativar esta opção colocará uma borda ao redor do seu módulo. Essa borda pode ser personalizada usando os seguintes parâmetros condicionais.

Cor da fronteira

Esta opção afeta a cor da sua borda. Selecione uma cor personalizada no seletor de cores para aplicá-la à sua borda.

Largura da fronteira

Por padrão, as bordas têm uma largura de 1 pixel. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades de medida personalizadas suportadas, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

Estilo da beira

Bordas suportam oito estilos diferentes: sólido, pontilhado, pontilhado, duplo, groove, crista, inlay e start. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Preenchimento personalizado

Fill é o espaço adicionado dentro do seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Opções de contagem de números avançados

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

seção de contador digital design.png

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Outros tutoriais Divi

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
10 ações
ação4
chilrear1
Enregistrer5
Whatsapp