Ir para o conteúdo principal

Como usar o módulo de medidor circular no construtor Divi

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 medidor circular permite exibir uma estatística única de maneira estética e convincente. À medida que você rola para baixo, o número é contado para baixo e o gráfico de pizza é preenchido progressivamente para corresponder ao valor percentual. Tente combinar vários módulos de contador de círculos em uma página para oferecer aos visitantes uma maneira divertida de descobrir seus negócios ou habilidades pessoais.

circulerire counter example divi.png

Como adicionar um módulo de medidor circular à sua página

Antes de adicionar um módulo contador de círculos à sua página, você deve primeiro acessar o 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.

Ao clicar neste botão, você poderá ativar o Divi Builder, que lhe dará acesso a 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 se você estiver logado no seu painel do WordPress.

usar o construtor divi

Uma vez inserido no 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.

círculo contador divi.png

Localize o módulo do medidor circular na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "contador de círculos" e clicar em enter para pesquisar e adicionar automaticamente o módulo de contador de círculos!

Uma vez que o módulo é adicionado, você será bem-vindo com a lista de opções do módulo. Essas opções são divididas em três grupos principais: Conteúdo , Projeto et avançado .

Caso de uso para exibir os objetivos do projeto em um estudo de caso

Uma das melhores maneiras de usar o módulo de medição de círculo é ilustrar estatísticas para estudos de caso ou itens de portfólio.

Basta identificar cada medidor circular com uma função ou finalidade específica do projeto para que o usuário saiba quais serviços estão incluídos no projeto. Neste exemplo, usarei o módulo "contador de círculos" para exibir três objetivos do projeto.

Como você pode ver na imagem abaixo, a parte superior da página inclui os três objetivos do projeto usando o módulo Bar Counter e a parte inferior da página inclui os resultados do estudo de caso usando o módulo Counter Number .

exemplo círculo módulo divi animation.gif

Vamos começar.

Use o construtor visual para incluir uma seção padrão com um layout de largura total (coluna 1). Em seguida, adicione um módulo contador de círculos à linha.

configuração do círculo do contador divi.png

Atualize as configurações do contador de círculos da seguinte forma:

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.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 conteúdo

Título: Animação
Número: 80
% De sinal: sim
Cor do plano de fundo da barra: #e07a5e

Opções de design

Cor do círculo: #e07a5e
Cor do texto: escuro
Fonte do título: padrão
Tamanho da fonte do título: 26px
Cor do texto do título: #405c60
Número da fonte: padrão
Tamanho da fonte do tamanho: 46px
Número Cor do Texto: #405c60

animação divi criação de um círculo com um gráfico divi.png

Salvar configurações

Agora, duplique o módulo do contador de círculo duas vezes e arraste cada cópia para o segundo e terceiro colunas da sua linha.

copie um módulo de medidor circular divi.png

Como seus elementos de design foram transferidos para módulos duplicados, você só precisa atualizar o título e o número do medidor circular.

Isso é tudo!

Visite a página.

design counter divi builder.png

Opções de conteúdo do contador circular

Na guia 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 nesta guia.

módulo de círculo content section.png

Título

Digite um título para o contador de círculos. Esta é geralmente uma palavra que representa a estatística que você está exibindo. Ele será exibido abaixo do número no gráfico de pizza.

Nome

Defina um número para o medidor circular. Ao selecionar um número menor que 100, o gráfico circular preencherá uma porcentagem igual ao número digitado. Por exemplo, digitando o número 20, o círculo preencherá 20% da cor do seu sotaque.

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 da barra

Isso mudará a cor de preenchimento da barra. A quantidade de cor de preenchimento é controlada pelo "número" selecionado acima. Se você selecionar o número 50 e uma cor azul, seu círculo preencherá 50% com uma cor azul.

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]

Etiqueta de administração

Isso mudará a tag do módulo no gerador para fácil identificação. Ao usar a exibição WireFrame no Visual Builder, essas etiquetas aparecerão no bloco do módulo da interface do Divi Builder.

Opções de design de contador circular

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

Opção de contador circular divi.png

Cor do círculo

Essa é a cor que será usada para a parte não preenchida do círculo (o espaço negativo que não é preenchido pela cor de fundo da barra definida na guia Conteúdo).

Opacidade da cor do círculo

Você pode reduzir a opacidade da parte preenchida do círculo usando esse parâmetro.

Cor do texto

Aqui você pode escolher se o texto deve ser claro ou escuro. Se você estiver trabalhando com um fundo escuro, o texto deve estar claro. Se seu plano de fundo estiver claro, seu texto deve ficar preto.

Fonte de título

Você pode alterar a fonte do texto selecionando a fonte de sua preferência 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 de 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Título da cor do texto

Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do título, escolha a cor de sua escolha 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 do texto do título, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do 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" de acordo com o 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 à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Número da polícia

Você pode alterar a fonte do texto selecionando a fonte de sua preferência 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.

número de texto divi construtor circular counter.png

Tamanho da fonte do número

Aqui você pode ajustar o tamanho do seu texto numerado. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor de 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Cor do texto numérico

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

Espaçamento de letras numeradas

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra do seu texto, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

texto medidor espaçamento letras divi.png

Altura da linha numérica

Altura da linha afeta o espaço entre cada linha do seu 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 do 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Opções avançadas de contador circular

Na guia Avançado, você encontrará opções que os web designers mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar um CSS personalizado a qualquer 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.

advanced counter divi.png

ID CSS

Digite um ID CSS opcional para usar neste módulo. Um identificador 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 Divi Child ou no CSS personalizado 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

Um CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizada, você encontrará um campo de texto no qual poderá adicionar CSS diretamente a cada elemento. As entradas CSS nessas configurações já estão incorporadas nas tags de estilo. Você só precisa 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.

Isso é tudo para este Tutoriel.

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.

De volta ao topo
11 ações
ação6
chilrear2
Enregistrer3
Whatsapp