Criar uma barra promoção A animação para o seu modelo de página no Divi pode ser uma ótima maneira de anunciar produtos e ofertas elegantes sem depender de um plug-in. Usando os poderosos recursos de design do Divi, você pode criar visualmente o promoção quando você edita um modelo no Divi Theme Builder. Então, quando o modelo estiver pronto, a barra promoção aparecerá em qualquer página atribuída a este 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”.

Escolha um layout em escala divi

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
Escolha um layout dimensionado divi 1

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

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). Também centraliza os módulos na coluna vertical e horizontalmente. A razão pela qual fazemos isso dessa maneira é evitar o uso de estruturas de múltiplas colunas e linhas que serão empilhadas umas sobre as outras no celular. Com esta configuração, o conteúdo permanecerá alinhado horizontalmente em todas as larguras do navegador.

Agora estamos prontos para adicionar conteúdo para a 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
Módulo de resumo divi de personalização

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

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.

Exemplo de resultado antes

Depois

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

Exemplo de resultado após

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 promocional (do zero) usando o Divi Theme Builder. A barra promocional é completa com várias animações e designs para torná-la realmente visível para visitantes. Você pode até corrigir a barra promocional enquanto rola a página para obter ainda mais visibilidade. E com a capacidade de controlar onde a barra de promoção é colocada em seu site, o aplicativo é extremamente conveniente.