Como criar uma barra promocional animada para seus modelos de página na Divi

Criar uma barra promocional animada para o seu modelo de página no Divi pode ser uma ótima maneira de anunciar produtos e negócios com estilo, sem ter que depender de um plug-in. Usando os poderosos recursos de design do Divi, você pode construir a barra promocional visualmente ao editar um modelo no Divi's Theme Builder. Então, quando o modelo estiver pronto, a barra promocional aparecerá em qualquer página que tenha sido atribuída a esse modelo. Fácil!

Vamos pular e começar!

Espiada

Aqui está uma rápida olhada na barra de promoção que criaremos neste tutorial.

Também mostraremos como tornar a barra promocional fixa (ou fixa).

Baixe o modelo de página da barra promocional GRATUITAMENTE

Para colocar suas mãos no modelo de página da barra de promoção deste tutorial, primeiro você precisará baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já faz parte da lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e adicione um dos arquivos json no Divi Theme Builder usando a opção Theme Builder Portability.

Vamos para o tutorial, vamos?

Inscreva-se no nosso canal no Youtube

O que você precisa para começar

Para começar, você precisará instalar e ativar o Divi Theme. Certifique-se de que possui 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, a fim de atribuir o modelo de barra promocional a essa página para mostrar o resultado.

Depois disso, você está pronto para ir.

Criação de uma barra promocional animada no topo de um modelo de página

Criação de um novo modelo

No painel do WordPress, navegue até Divi> Theme Builder. Em seguida, clique na caixa “Adicionar novo modelo” para criar um novo modelo.

Atribua o modelo à (s) página (s) em que deseja que a barra promocional seja exibida.

No novo modelo, clique na área “Adicionar Corpo Personalizado” e selecione “Construir Corpo Personalizado”.

NOTA: Estamos adicionando a barra promocional à área do corpo do modelo (não o cabeçalho) para que ela possa funcionar com o cabeçalho padrão do Divi e também com quaisquer cabeçalhos personalizados que você possa adicionar no futuro.

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

Adicionando a barra promocional ao modelo

Dentro do Editor de layout de modelo, podemos começar a construir a barra promocional usando o Divi Builder.

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

Configurações de linha

Antes de adicionar um módulo, atualize as configurações de linha da seguinte maneira:

• Cor do gradiente de fundo à esquerda: # 4a42ec
• Cor certa do gradiente de fundo: # 521d91
• Direção do gradiente: 90 graus
• Usar largura de calha personalizada: SIM
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%
• Preenchimento: 0 px superior, 0 px inferior

Isso cuida da cor de fundo e da largura da barra promocional que estamos criando.

Configurações de coluna

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

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

Este CSS usa a propriedade flex para alinhar o conteúdo (ou módulos) dentro da coluna para empilhar horizontalmente (lado a lado). Ele também centraliza os módulos na coluna vertical e horizontalmente. O motivo de estarmos fazendo isso dessa maneira é evitar o uso de várias estruturas de linhas de coluna que se empilham umas sobre as outras no dispositivo móvel. Com esta configuração, o conteúdo ficará em um alinhamento horizontal em todas as larguras do navegador.

Agora estamos prontos para adicionar algum conteúdo à barra promocional.

Adicionando o Módulo Blurb

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

Clique no ícone de mais de um círculo cinza dentro da linha e adicione um módulo de sinopse.

Para o conteúdo da sinopse, digite o seguinte:

• Título: [insira o texto promocional]
• Ícone de uso: SIM
• Ícone: ícone de presente (veja a imagem)

Atualize as configurações de design do blurb da seguinte maneira:

• Cor do ícone: # ff4a9e
• Posicionamento de imagem / ícone: esquerda
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 16px
• Tamanho do texto do título: 16 px (desktop), 14 px (telefone)
• Altura da linha de título: 1,3em
• Largura máxima: 230 px (apenas telefone)
• Preenchimento: 10px superior
• Estilo de animação: slide
• Direção da animação: direita
• Atraso de animação: 250ms

Adicionando o Módulo de Botão

Em seguida, adicione um módulo de botão no módulo blurb. Por causa da propriedade flex, o módulo aparecerá à direita da sinopse em vez de abaixo dela.

Atualize as configurações de design do botão da seguinte forma:

• Use estilos personalizados para botão: SIM
• Tamanho do texto do botão: 15 px (desktop), 13 px (telefone)
• Cor do texto do botão: #ffffff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 20 px
• Peso da fonte do botão: Semi negrito

• Margem (desktop): 20 px restantes
• Margem (telefone): 10 px restantes
• Preenchimento (desktop): 0 px superior, 0 px inferior
• Preenchimento (telefone): 2px superior, 2px inferior, 8px à esquerda, 8px à direita
• Estilo de Animação: Bounce
• Atraso de animação: 1000 ms

Configurações da seção

Para completar o design da barra promocional, atualize a seção que contém a barra promocional da seguinte forma:

• Preenchimento: 0 px superior, 0 px inferior
• Estilo de Animação: Bounce
• Direção da animação: baixo
• Duração da animação: 500ms
• Atraso de animação: 250ms
• Opacidade inicial da animação: 100%
• Índice Z: 999

Adicionando o Módulo de Postagem de Largura Total

Neste ponto, a barra promocional está pronta para funcionar. Mas como este é um modelo, precisamos nos certificar e adicionar o módulo de conteúdo de postagem para exibir o conteúdo da (s) página (s) usando este modelo.

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

(OBSERVAÇÃO: para páginas que usam o editor padrão, você desejará usar um módulo de conteúdo de postagem regular dentro de uma seção regular para que tenha uma largura máxima semelhante de 1080px por padrão.)

Adicionar seção de largura total

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

Adicionar módulo de conteúdo de postagem de largura total

Em seguida, selecione o Módulo de Postagem de Largura Completa.

Isso é suficiente. Agora certifique-se de salvar o layout antes de sair do editor.

Em seguida, salve as alterações para o construtor de tema também.

Resultado final

Antes

Agora aqui está a página antes de atribuir o modelo à barra promocional.

Depois de

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

Aqui está no celular.

Aqui está a animação da barra promocional no carregamento da página.

Tornando a barra promocional pegajosa

Para fazer a barra promocional ficar sob o cabeçalho Divi padrão, podemos adicionar um snippet CSS simples à seção que contém a barra promocional.

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

position: fixed;
width: 100%;

Em seguida, adicione o seguinte CSS ao elemento principal no tablet:

position: relative;

Agora verifique o resultado.

Não se esqueça dos links

Depois de construir a barra promocional, você desejará adicionar o URL do link à oferta promocional ou página. Você pode adicionar o URL do link do botão na guia de conteúdo das configurações do botão.

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

Pensamentos 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 notável para os visitantes. Você pode até mesmo consertar a barra promocional ao rolar a página para baixo para ter ainda mais visibilidade. E com a capacidade de controlar onde a barra promocional aparece em todo o seu site, o aplicativo é extremamente prático.

Esperamos que isso o inspire a criar suas próprias barras promocionais.

Estou ansioso para ouvir de você nos comentários.

Saúde!