Ir para o conteúdo principal

Como usar o módulo de barra animada no Divi

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]

Os contadores animados são uma maneira divertida e eficiente de exibir estatísticas para seus visitantes. A animação é acionada pelo carregamento atrasado para tornar a navegação na página realmente interessante. Você pode colocar quantos contadores quiser dentro deste módulo.

módulo de medidor divi.png

Como adicionar um módulo contador de barras à sua página

Antes de poder adicionar um módulo do contador de barras à sua página, primeiro você precisa 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ê estiver navegando em seu site no frontend, 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. .

bar counter divi.png

Localize o módulo do contador de barras 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 "Bar Counter", depois clicar em enter para pesquisar e adicionar automaticamente o módulo do contador de barras!

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 de um projeto em um estudo de caso

Uma das melhores maneiras de usar o módulo Bar Counters é ilustrar as estatísticas dos estudos de caso. Basta identificar cada barra 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, uso o módulo da barra para exibir três metas do projeto.

mostre o projeto 3 goals.jpg

Como você pode ver, o topo 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". Número ».

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 barras à linha.

Atualize os parâmetros dos contadores de barras da seguinte maneira:

Opções de conteúdo

Porcentagens de uso: ON
Cor de fundo: #dddddd
Cor de fundo da barra: # e07a5e

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 de Título: 2em
Porcentagem de fonte: padrão
Porcentagem da fonte: 16px
Porcentagem Cor do texto: #ffffff
Porcentagem Altura da Linha: 2.5em

adicione uma contagem divi.png counter

Volte agora para a guia Conteúdo e selecione + Adicionar um novo item para adicionar o primeiro contador de barras ao módulo.

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]

Atualize as configurações individuais do módulo da seguinte maneira:

Guia Conteúdo

Título: Meu título
Porcentagem: 80

Salvar configurações

número da barra de personalização divi.png

Adicione dois contadores de barras adicionais ao módulo e atribua a cada um título e uma porcentagem.

bar counter divi lista de bars.png

Isso é tudo!

resultado final divi module barre.png

Opções de conteúdo do contador de barras

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.

opção módulo de conteúdo bar divi.png

Percentagens de uso

Por padrão, as porcentagens são exibidas no contador da barra de cores. Este texto pode ser desativado usando essa configuração, permitindo que o gráfico de barras visual fale por si mesmo.

Cor de fundo

Esta opção permite ajustar a cor de fundo de cada contador de barras. Essa configuração se aplica ao espaço negativo por trás da cor da barra preenchida.

Cor de fundo da barra

Esta opção permite ajustar a cor de fundo da barra preenchida. Essa cor de plano de fundo abrange a configuração de cor anterior do plano de fundo.

Rótulo 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 balcão de bar

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.

módulo de design de opção counter barre.png

Cor do texto

Você pode escolher aqui se o seu texto 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. Você pode personalizar ainda mais sua cor de texto usando as opções adicionais de cores de texto a seguir.

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]

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.

percentagem de texto divi module barre.png

Porcentagem de texto

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.

Porcentagem do tamanho da fonte

Aqui você pode ajustar o tamanho do seu texto como uma porcentagem. 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.

Porcentagem de 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 seu texto como uma porcentagem, escolha a cor de sua escolha no seletor de cores usando essa opção.

Espaçamento entre letras

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 em porcentagem, 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 percentual

Altura da linha afeta o espaço entre cada linha do seu texto como uma porcentagem. 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.

Raio da borda

A aplicação de um raio de borda arredondará os cantos da barra no balcão da barra. Quanto mais alto o raio da borda, mais arredondados serão os cantos.

opção de fronteira divi builder.png

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 no 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, por exemplo em, vh, vw etc.

Estilo da beira

As bordas suportam oito estilos diferentes, incluindo: sólido, pontilhado, pontilhado, duplo, sulco, crista, inserção e início. Selecione o estilo de sua escolha no menu suspenso para aplicá-lo à sua borda.

Preenchimento de bar

O preenchimento é o espaço adicionado dentro do seu módulo, entre a borda do módulo e seus elementos internos. Aqui você pode adicionar o preenchimento superior personalizado e o preenchimento inferior ao módulo da barra.

Opções Avançadas do Contador de Barras

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.

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

barra de contador advanced options.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 no seu tema filho Divi ou no CSS personalizado que você adiciona à sua página ou site usando as opções do tema Divi ou as configurações da página do 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 para este tutorial.

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
13 ações
ação6
chilrear2
Enregistrer5
Whatsapp