Baixe um design de banner de vendas multiuso GRATUITO para Divi
Publicados: 2018-11-18Ter um banner de vendas multifuncional certamente será útil (e você economizará tempo) durante aqueles momentos cruciais do ano, quando as promoções estão na moda. É por isso que estamos oferecendo este banner de vendas multiuso para Divi como um download GRATUITO! Este banner de vendas pode ser facilmente personalizado para atender às suas necessidades com apenas alguns ajustes de algum texto e uma imagem de fundo. Projetar o banner de vendas no Divi é fácil o suficiente para que você não precise se contentar com banners de imagem que muitas vezes parecem um pouco granulados na web. Por isso, além do download gratuito, vou mostrar a vocês como desenhar o banner de vendas em Divi do zero.
Vamos começar!
o que está incluído
Aqui está uma olhada no design do banner de vendas incluído no download.
Baixe o design do banner de vendas GRATUITAMENTE
Para colocar suas mãos no design do banner de vendas gratuitamente, primeiro você precisa baixá-los 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á está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
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.
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!
Carregando o Layout para a Biblioteca Divi
Depois de baixar o arquivo, descompacte-o. Você descobrirá que ele contém um arquivo denominado “sales-banner-design.json”. Isso é o que você carregará em sua biblioteca Divi. Agora vá para o painel do Wordpress e navegue até Divi> Divi Library. Em seguida, clique no botão importar na parte superior da página. Na janela pop-up de portabilidade, selecione a guia Importar e escolha o arquivo sales-banner-design.json. Em seguida, clique no botão Import Divi Builder Layouts.
Agora, para importar o layout para sua página, basta criar uma nova página e implantar o construtor visual. Em seguida, selecione “Choose a Premade Layout”. No pop-up de carregamento da biblioteca, selecione a guia “Seus layouts salvos” e clique no layout Design do banner de vendas na lista. É isso!
Como criar o banner de vendas do zero no Divi
Adicionando o Fundo da Seção
Para começar, crie uma nova página. Depois de dar um título à sua página, implemente o construtor visual e selecione a opção “Construir do zero”. Em seguida, adicione uma nova seção com uma linha de uma coluna.
Antes de começar a adicionar qualquer módulo à linha, dê à sua seção uma cor gradiente de fundo (a cor não importa neste ponto. Precisamos apenas de uma cor de fundo para ver todos os elementos de design branco que usaremos em nossas vendas bandeira.)
Personalizando as linhas para o banner de vendas
Antes de adicionarmos nossos módulos à linha, vamos primeiro dar a nossa linha uma largura personalizada de 700px e remover qualquer espaçamento superior ou inferior para que nossa linha fique bem em cima da outra linha que adicionaremos embaixo. Vá para as configurações de linha e atualize o seguinte:
Largura personalizada: 700 px
Largura da calha: 1
Margem personalizada: 0 px superior, 0 px, inferior
Preenchimento personalizado: 0 px superior, 0 px inferior
Agora duplique a linha duas vezes para que você tenha um total de três linhas idênticas. Eles serão usados para construir nosso banner de vendas.
Adicionando a moldura da borda superior com texto adjacente
Para construir nosso banner de vendas, começamos com uma borda superior com algum texto à esquerda. Para fazer isso, usaremos um módulo divisor e um módulo de texto. Primeiro, crie um novo módulo de texto e adicione algumas palavras de conteúdo na caixa de conteúdo.
Conteúdo: “Apenas online”
Continue na guia de design e atualize o seguinte:
Peso da fonte do texto: negrito
Estilo da fonte do texto: TT
Cor do texto do texto: rgba (255,255,255,0,9)
Tamanho do texto do texto: 15px
Espaçamento entre letras do texto: 2px
Altura da linha de texto: 1em
Largura: 22% (desktop), 25% (tablet), 40% (smartphone)
Alinhamento do Módulo: esquerda
Margem personalizada: 0 px superior, -15 px inferior
Preenchimento personalizado: 0 px superior, 0 px inferior
Esta margem personalizada é um pouco prematura, pois nosso divisor ainda não foi adicionado, mas é necessário alinhar o texto para que fique perfeitamente adjacente ao divisor a ser adicionado em breve.
Agora adicione um módulo divisor sob o módulo de texto na mesma linha. Em seguida, atualize as configurações do divisor da seguinte forma:
Cor: rgba (255,255,255,0,9)
Posição do divisor: inferior
Peso do divisor: 15px
Altura: 15px
Largura: 78% (desktop), 75% (tablet), 60% (smartphone)
Alinhamento do Módulo: Direito
Margem personalizada: 0 px superior, 0 px inferior
Preenchimento personalizado: 0 px superior, 0 px inferior
Claro, você precisará ajustar a largura de sua borda dependendo da largura de seu módulo de texto ao personalizar o design para suas próprias necessidades.
Em seguida, precisamos adicionar mais um módulo divisor para conectar nosso divisor à borda direita da linha que iremos projetar a seguir.
Para isso, duplique o módulo divisor e atualize o seguinte:
Largura: 15px
Margem personalizada: -1px inferior
Adicionando a moldura da borda inferior com Texto Adjacente
Para criar a moldura da borda inferior, podemos usar o mesmo elemento que criamos na moldura da borda superior de nossa linha superior. Desta vez, começaremos com o módulo divisor de largura de 15px. Vá em frente e copie o módulo divisor de 15 pixels e cole-o na terceira linha (inferior). Em seguida, atualize o alinhamento do módulo para a esquerda em vez de para a direita.
Em seguida, copie o módulo divisor mais longo da linha superior e cole-o sob o divisor de 15px na linha inferior. Em seguida, ajuste o seguinte:
Largura: 75% (desktop), 70% (tablet), 50% (smartphone)
Alinhamento do Módulo: esquerda
Por fim, copie o módulo de texto na linha superior e cole sob os dois módulos divisores na linha inferior. Em seguida, atualize o seguinte:
Conteúdo: “Começa em 1º de novembro”
Largura: 25% (desktop), 30% (tablet), 50% (smartphone)
Alinhamento do Módulo: Direito
Margem personalizada: -15 px superior, 0 px inferior
Preenchimento personalizado: 15 px restantes
Adicionando os Módulos de Texto à Linha do Meio
Agora estamos prontos para começar a adicionar os módulos de texto à linha do meio, que conterão o texto do banner de vendas principal. Estaremos empilhando três módulos de texto um em cima do outro. Vá em frente e adicione o primeiro módulo de texto à linha do meio.
Em seguida, atualize o seguinte:
Conteúdo: “Tudo com 20% de desconto”
Cor de fundo: rgba (255,255,255,0,9)
Peso da Fonte do Texto: Semi Negrito
Estilo da fonte do texto: TT
Cor do texto do texto: # 000000
Tamanho do texto do texto: 34 px (desktop), 20 px (smartphone)
Espaçamento entre letras do texto: 2px
Altura da linha de texto: 1em
Orientação do Texto: Centro
Preenchimento personalizado: 2vw superior, 2vw inferior, 5vw esquerdo, 5vw direito
Dar ao texto uma cor preta sobre um fundo branco é essencial para maximizar o efeito do modo de mesclagem da tela que permitirá que o texto se mescle com o fundo da seção. Adicionaremos o modo de mesclagem de tela à linha um pouco mais tarde.
Agora duplique o módulo de texto para iniciar o design do próximo módulo de texto. Em seguida, atualize o conteúdo com o seguinte html:
<h2 style="border: 7px solid #000000;">Fall Sale</h2>
O estilo embutido simplesmente adiciona uma borda preta ao redor do texto do título. Novamente, a cor preta funcionará com o modo de mesclagem de tela para expor o plano de fundo da seção com o texto.
Em seguida, atualize o seguinte:
Peso da fonte do cabeçalho 2: negrito
Estilo da fonte do título 2: TT
Cor do texto do título 2: # 000000
Tamanho do texto do título 2: 100 px (desktop), 80 px (tablet), 60 px (smartphone)
Cabeçalho 2 espaçamento entre letras: 2px
Margem personalizada: 0px superior
Preenchimento personalizado: 0 px superior, 0 px inferior
Para o último módulo de texto, duplique o primeiro módulo de texto nesta linha do meio e cole-o no segundo módulo de texto.
Em seguida, atualize o seguinte:
Conteúdo: “Compre agora”
Estilo da fonte do texto: TT, U (sublinhado)
Margem personalizada: 0px superior
Preenchimento personalizado: 1vw superior, 2vw inferior
Estilizando a linha do meio
A fase final desse design é adicionar uma borda à linha do meio e um efeito de modo de mesclagem de tela. Para fazer isso, abra as configurações da linha do meio e atualize o seguinte:
Preenchimento personalizado: 15 px à esquerda, 15 px à direita
Largura da borda direita: 15px
Cor da borda direita: rgba (255,255,255,0,9)
Largura da borda esquerda: 15px
Cor da borda esquerda: rgba (255,255,255,0,9)
Modo de mistura: tela
O modo de mesclagem de tela permite que o texto se misture com a imagem de fundo para mostrar através do texto para um efeito legal!
Confira o resultado final.
Adicionando um link ao seu banner de vendas
Como este é um banner de vendas, você deseja maximizar o espaço clicável no banner para aumentar as conversões. Para fazer isso, você pode adicionar um link para toda a linha do meio. Basta abrir as configurações da linha do meio e inserir um URL do link da linha para redirecionar para a página desejada.
Adicionando Planos de Fundo de Seção Diferentes para Projetos Únicos
Com este novo design de banner de vendas, você pode facilmente atualizar a imagem de fundo para criar designs exclusivos.
Aqui estão alguns exemplos.
Pensamentos finais
Espero que este design de banner de vendas seja útil para todas as promoções da web necessárias ao longo do ano. O design é construído para servir como um banner de vendas multiuso que pode ser facilmente atualizado com novo texto e imagens de fundo de seção para uma aparência completamente nova. Você pode até adicionar um fundo de vídeo também!
Estou ansioso para ouvir de você nos comentários.
Saúde!