Divi: O melhor tema WordPress de todos os tempos!

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

Criar uma barra de promoção animada para o seu modelo de página no Divi pode ser uma ótima maneira de anunciar produtos e ofertas elegantes sem ter que depender de um plugin. Usando os poderosos recursos de design do Divi, você pode criar visualmente a barra de promoção ao editar um modelo no Divi Theme Creator. Então, quando o modelo estiver pronto, a barra de promoção aparecerá em qualquer página atribuída a esse modelo. 

Também mostraremos como tornar a barra de promoção fixa (ou adesiva).

O que você precisa para começar

Para começar, você deve instalar e ativar o tema Divi . Certifique-se de ter a versão mais recente do Divi.

Você também precisará de pelo menos uma página criada com o Divi Builder para fins de teste, que será afetada pelo modelo da barra de promoção.

Crie uma barra de promoção animada no topo de um modelo de página

Crie um novo modelo

No painel do WordPress, vá para Divi> Gerador de temas. Em seguida, clique na caixa "Adicionar um novo modelo" para criar um novo modelo.

Adicionar um novo modelo divi

Atribua o modelo às páginas nas quais a barra de promoção deve ser exibida.

Página inicial da Divi

No novo modelo, clique na caixa "Adicionar corpo personalizado" e selecione "Criar corpo personalizado".

NOTA: estamos adicionando a barra de promoção à área do corpo do modelo (não o cabeçalho) para que possa funcionar com o cabeçalho padrão Divi, bem como com todos os cabeçalhos personalizado que você pode adicionar mais tarde.

Adicionar um modelo de corpo

Em seguida, selecione a opção “Build From Scratch”.

Adicionando a barra de promoção ao modelo

No editor de layout de modelo, podemos começar a criar a barra de promoção usando Divi Builder.

Comece adicionando uma linha de uma coluna à seção regular.

Adicionar linha a uma coluna em divi

Configurações de linha

Antes de adicionar um módulo, atualize os parâmetros de linha da seguinte maneira:

  • Gradiente de fundo esquerdo: # 4a42ec
  • Gradiente de fundo direito: # 521d91
  • Direcção do Gradiente: 90deg
  • Use uma largura de calha personalizada: SIM
  • Largura da calha: 1
  • Largura: 100%
  • Largura máxima: 100%
  • Estofamento: 0px na parte superior, 0px na parte inferior

Isso suporta a cor e a largura do plano de fundo da barra de promoção que criamos.

Crie facilmente seu site com Elementor

Elementor permite que você crie Facilmente e Gratuito qualquer site ou blog com um visual profissional. Pare de pagar muito por um site que você pode fazer sozinho.

Parâmetros da coluna

Antes de sair das configurações de linha, clique para abrir as configurações de coluna. Em seguida, adicione o seguinte CSS personalizado ao elemento da coluna principal:

display: flex;align-items: center;justify-content: center;

Personalização do código css

Este CSS usa a propriedade flex para alinhar o conteúdo (ou módulos) na coluna para empilhar horizontalmente (lado a lado). Ele também centraliza os módulos na coluna vertical e horizontalmente. A razão de fazermos isso é evitar o uso de várias estruturas de linha de coluna que serão empilhadas umas sobre as outras em um dispositivo móvel. Com esta configuração, o conteúdo permanecerá alinhado horizontalmente em todas as larguras do navegador.

Agora estamos prontos para adicionar conteúdo à barra de promoção.

Adicionar módulo do Blurb

Para o conteúdo deste exemplo de promoção, incluiremos um módulo de apresentação com um pequeno ícone e um blog de texto com um botão à direita (assim como a barra de promoção em Elegantthemes.com).

Clique no círculo cinza mais o ícone dentro da linha e adicione um módulo de apresentação.

Adicionar uma segunda seção do módulo de resumo

Para o conteúdo do texto da apresentação, digite as seguintes informações:

  • Título: [insira o texto da promoção]
  • Use o ícone: SIM
  • Ícone: ícone de presente (veja a imagem)
Configuração do módulo de resumo divi

Atualize as configurações de design da apresentação da seguinte maneira:

  • Cor do ícone: # ff4a9e
  • Imagem / localização dos ícones: esquerda
  • Use o tamanho da fonte do ícone: SIM
  • Tamanho da fonte do ícone: 16px
  • Tamanho do título do texto: 16px (computador), 14px (telefone)
  • Linha de título Hewight: 1.3em
  • Largura máxima: 230px (somente telefone)
  • Preenchimento: Top 10px
  • Estilo de animação: slide
  • Direção da animação: direita
  • Atraso de animação: 250 ms

Adicionando o módulo de botão

Em seguida, adicione um módulo de botão no módulo Blurb. Devido à propriedade flex, o módulo aparecerá à direita da sinopse, e não abaixo.

Módulo de botão Divi

Quer vender seus produtos na internet?

Baixe WooCommerce grátis, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress e criar facilmente sua loja online. Perfeito para iniciantes.

Atualize os parâmetros de design do botão da seguinte maneira:

  • Use estilos personalizados para o botão: SIM
  • Tamanho do texto do botão: 15px (computador), 13px (telefone)
  • Cor do texto do botão: #ffffff
  • Largura da borda do botão: 0px
  • Raio da borda do botão: 20px
  • Peso da fonte: semi-negrito
Personalize o módulo do botão divi
  • Margem (computador): 20px à esquerda
  • Margem (telefone): 10px à esquerda
  • Estofamento (escritório): 0px na parte superior, 0px na parte inferior
  • Preenchimento (telefone): 2px na parte superior, 2px na parte inferior, 8px na esquerda, 8px na direita
  • Estilo de Animação: Bounce
  • Atraso de animação: 1000 ms
Personalize o espaçamento do módulo do botão divi

Configurações de seção

Para concluir o design da barra de promoção, atualize a seção que contém a barra de promoção da seguinte maneira:

  • Estofamento: 0px na parte superior, 0px na parte inferior
  • Estilo de Animação: Bounce
  • Direção da animação: Baixo
  • Duração da animação: 500ms
  • Atraso de animação: 250 ms
  • Animação Opacidade inicial: 100%
  • Índice Z: 999
Personalize o módulo divi de animação

Adicionando o módulo de publicação de conteúdo de largura total

Nesse ponto, a barra de promoções está pronta. Mas, como este é um modelo, precisamos ter certeza de adicionar o módulo de publicação de conteúdo para exibir o conteúdo da (s) página (s) usando este modelo.

Para páginas construídas (ou que serão construídas) usando Divi Builder, você vai querer usar um módulo de conteúdo de postagem de largura total para maximizar a área de conteúdo.

(NOTA: para páginas que usam o editor padrão, você vai querer usar um modo de conteúdo de postagem padrão em uma seção regular, a fim de atingir uma largura máxima semelhante de 1080px por padrão.)

Adicionar uma seção de largura total

Na seção que contém sua barra de promoção, adicione uma seção de largura total.

Crie uma seção de construtor divi de largura total

Adicionar um módulo de conteúdo no formato Largura total

Em seguida, selecione o módulo Fullwidth Post Content.

Divi de conteúdo de artigo de largura total

É mais ou menos isso. Agora certifique-se de salvar o layout antes de sair do editor.

Salvar layout divi

Em seguida, salve as alterações para o construtor de temas.

Divisão do construtor de temas

Resultado final

Avant

Agora aqui está a página antes de atribuir ao modelo a barra de promoção.

Depois

E aqui está a mesma página com o novo modelo com a barra promocional.

Torne a barra promocional pegajosa

Para que a barra de promoção caiba no cabeçalho padrão do Divi, podemos adicionar um trecho de CSS simples à seção que contém a barra de promoções.

position: fixed;width: 100%;

Abra as configurações da seção e adicione o seguinte código CSS ao elemento principal da área de trabalho:

Entre na seção fixa

Em seguida, adicione o seguinte código CSS ao elemento principal do tablet:

position: relative;

Adicione um código css à seção divi

Agora verifique o resultado.

Resultado animado Divi

Para conversões anteriores, você também pode adicionar o URL do link a toda a linha, na opção de link Configurações de linha.

Considerações finais

Neste tutorial, mostramos como criar uma barra de promoção (do zero) usando o Divi Theme Builder. A barra promocional é completa com várias animações e designs para torná-la verdadeiramente visível para os visitantes. Você pode até consertar a barra de promoção ao rolar a página para baixo para ter ainda mais visibilidade. E com a capacidade de controlar o posicionamento da barra de promoção em seu site, o aplicativo é extremamente conveniente.