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.
Atribua o modelo às páginas nas quais a barra de promoção deve ser exibida.
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.
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.
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.
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;
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.
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)
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.
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
- 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
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
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.
Adicionar um módulo de conteúdo no formato Largura total
Em seguida, selecione o módulo Fullwidth Post Content.
É mais ou menos isso. Agora certifique-se de salvar o layout antes de sair do editor.
Em seguida, salve as alterações para o 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:
Em seguida, adicione o seguinte código CSS ao elemento principal do tablet:
position: relative;
Agora verifique o resultado.
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.
Oi,
Excelente artigo e tutorial, realmente TOTAL !!!
Eu gostaria de fazer a mesma coisa, mas como uso o menu secundário em que está conta, telefone e cesta acima do menu principal (minhas categorias de produtos), a barra promocional não é exibida repentinamente, a menos que eu tenha perdido uma etapa do tutorial? !!.
O que eu quero poder fazer é mostrar essa barra promocional acima da barra secundária, enfim, acima de tudo para colocar uma promo, uma venda relâmpago, mudar a informação de acordo com os eventos que desejo incluir
Alguma ideia dessa rota, por favor?
Youssef