Criação de banners responsivos com as novas opções de plano de fundo da Divi

Em meu último post, mostrei como estilizar botões usando a interface de opções de plano de fundo do Divi, colocando o módulo de botão em camadas sobre planos de fundo de coluna e linha. Hoje, vou mostrar como criar banners clicáveis ​​responsivos usando a interface de opções de plano de fundo do Divi.

Usaremos as mesmas técnicas que usamos para os planos de fundo dos botões com alguns pequenos ajustes. Basicamente, vou mostrar como criar botões realmente grandes e desenhá-los um pouco mais como banners. O fator importante aqui é que toda a área da superfície do banner permanece clicável. No entanto, você deve saber desde o início que só podemos fazer banners simples usando este método. Como somos limitados pela entrada de texto do módulo de botão, só podemos criar banners com uma string de texto. No entanto, ao utilizar as opções de plano de fundo da coluna, podemos criar alguns banners de aparência bem legal em nenhum momento usando o Visual Builder.

Banners HTML vs. Banners de imagem

Existem muitas vantagens em usar banners html (banners construídos com elementos html) sobre banners de imagem (banners construídos como uma única imagem sem quaisquer elementos html). Para banners html, o texto é reconhecido por navegadores da web (essencial para tradutores de páginas e leitores de tela). Eles são dimensionados de acordo com o tamanho das janelas do navegador para que sempre tenham uma aparência nítida, ao contrário das imagens que podem ficar distorcidas ou ilegíveis. E talvez meu aspecto favorito de usar banners html em vez de banners de imagem é que o html é realmente fácil de mudar. Posso alterar o texto com algumas teclas em vez de pesquisar nas profundezas do meu disco rígido por um arquivo original que precisarei editar em um editor de fotos. E posso rapidamente fazer outra versão do banner para fazer um teste de divisão usando Divi Leads.

Esse método de transformar botões em banners abre a porta para alguns aplicativos úteis, como a criação de uma postagem, categoria ou série personalizada para seu blog (ou podcast).

Vamos começar.

Espiada

Antes de sermos oficialmente lançados. Aqui está uma prévia dos banners que iremos construir neste post.

Implementando o Design com Divi

Inscreva-se no nosso canal no Youtube

Exemplo # 1: Banner de logotipo

Usando o Visual Builder, adicione uma seção regular com uma coluna e uma linha.

Em seguida, adicione um Módulo de botão à linha.

Em seguida, atualize as configurações do módulo de botão da seguinte forma:

Opções de conteúdo

Texto do botão: [digite o texto que deseja usar para sua mensagem de banner]
URL do botão: [inserir URL]

Opções de Design

Alinhamento do botão: Centro
Cor do Texto: Claro
Use estilos personalizados para botão: SIM
Tamanho do texto do botão: 32 px
Largura da borda do botão: 0 px
Fonte do botão: Arvo
Ícone do botão: [adicionar ícone. Estou usando o ícone do cursor]
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO

Opções avançadas

Precisamos definir a largura do botão em 100% para preencher a largura da coluna. Também precisamos expandir a altura do nosso botão para fornecer espaço suficiente para o conteúdo do nosso banner. Para fazer isso, insira o seguinte CSS personalizado na caixa Elemento principal:

 Width: 100%;
padding: 20px 0 200px; 

Nota : O preenchimento personalizado aqui é a chave para ajustar onde você deseja que o texto do banner seja exibido. Como o alinhamento do botão já está centralizado, tudo que preciso fazer é ajustar o texto verticalmente. Portanto, dar ao texto do botão um preenchimento mais curto na parte superior e mais longo na parte inferior ajustará o texto em direção à parte superior do banner.

Salvar configurações

As coisas ainda estão todas brancas e invisíveis agora, mas tudo bem. Vamos adicionar um plano de fundo para o módulo de botão nas configurações de linha e coluna.

Vá para as configurações de linha em que seu módulo de botão está instalado e atualize o seguinte:

Opções de conteúdo

Na guia da imagem de fundo

Imagem de fundo: [inserir imagem]
Posição da imagem de fundo: [use esta opção para ajustar a imagem do seu banner. Eu queria que a parte inferior da minha imagem fosse exibida, então selecionei “Centro Inferior”.]

Agora role um pouco para baixo para atualizar as opções de plano de fundo da coluna 1.

Selecione a guia Gradiente de fundo da coluna 1 e clique no botão circular cinza com um símbolo de adição branco.

Atualize o seguinte:

Cores de gradiente de fundo: rgba (131,0,233,0,92), rgba (0,0,0,0,69)
Direção do gradiente da coluna: 180 graus
Posição inicial da coluna: 50%
Posição final da coluna: 0%

Salvar configurações

Em seguida, vamos adicionar um logotipo ao banner. Clique na guia Imagem de fundo e atualize o seguinte:

Tamanho da imagem de fundo da coluna 1: Tamanho real (meu logotipo é 120 x 120 png)

Posição da imagem de fundo da coluna 1: centro

É isso. Agora você tem um banner simples que é clicável e responsivo. Você pode usar as configurações do Módulo de botão para adicionar quaisquer efeitos de foco que deseja para destacar o banner.

Vamos fazer outro exemplo.

Exemplo 2: Banner de texto simples

Para este próximo banner, vamos duplicar toda a seção que contém o primeiro banner que você acabou de criar. Isso vai economizar algum tempo de configuração.

Em seguida, vá para as configurações de linha e atualize o seguinte:

Opções de conteúdo

Imagem de fundo: [inserir nova imagem]
Posição da imagem de fundo: centro
Cores de gradiente de fundo da coluna 1: rgba (0,0,0,0,41), rgba (12.113.195,0.66)
Direção do gradiente da coluna: 270 graus

Em seguida, clique na guia da imagem de fundo da coluna 1 e exclua a imagem / logotipo.

Salvar configurações

Vá para as Configurações do Módulo de Botão e atualize o seguinte:

Opções de conteúdo

Texto do botão: [insira o texto para o seu banner]
URL do botão: [insira o URL do banner]

Opções de Design

Tamanho do texto do botão: 42px
Largura da borda do botão: 19 px
Cor da borda do botão: rgba (0,0,0,0.17)
Espaçamento entre letras dos botões: 8px
Fonte do botão: Montserrat, Negrito (B)
Adicionar Ícone do Botão: NÃO
Cor da borda do botão flutuante: rgba (0,0,0,0.46)
Raio da borda de flutuação do botão: 0 px
Espaçamento entre letras do botão ao passar o mouse: 12 px

Como você pode ver, este banner de exemplo tem um efeito de foco exclusivo que altera a cor da borda e aumenta o espaçamento entre letras:

Como fazer seu banner com largura total

Para tornar este banner de largura total, tudo o que você precisa fazer é atualizar as Configurações da seção na guia Design da seguinte forma:

Preenchimento personalizado: 0px superior, 0px direito, 0px inferior, 0px esquerdo

Salvar configurações

Agora vá para Configurações de linha e atualize as opções de design da seguinte maneira:

Tornar esta linha com largura total: SIM
Usar largura de calha personalizada: SIM
Largura da calha: 1

Agora, o banner se estende por toda a largura da tela em todos os dispositivos.

Como fazer um banner adesivo

Se você quiser, pode facilmente tornar este banner fixo (adesivo) e corrigi-lo na parte superior da janela do seu navegador. Eu sugeriria diminuir o preenchimento para torná-lo muito mais curto, de modo que não bloqueie muito a janela.

Para diminuir a altura, vá para Configurações do módulo de botão na guia Avançado e adicione o seguinte CSS na caixa Elemento principal :

padding: 0px 0px !important;

Agora, para tornar a seção inteira aderente, vá para as Configurações da seção e atualize as Opções da guia Avançado com o seguinte CSS personalizado na caixa Elemento principal :

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

Agora, toda a sua seção ficará no topo da página e permanecerá lá quando você rolar a página para baixo.

Esse tipo de banner funcionaria bem para itens promocionais em uma página de destino sem uma barra de navegação, já que o banner pegajoso acabaria escondendo a barra de navegação.

Adicionando Banners a Layouts de Múltiplas Colunas

Você também pode fazer banners em uma estrutura de linhas de várias colunas. Isso seria útil se você quisesse destacar alguns itens na parte inferior de sua página ou blog.

Vamos tentar.

Adicione outra seção regular com uma estrutura de linha de 1/2 1/2 coluna.

Por uma questão de tempo, vá em frente e copie ou duplique um módulo de botão que acabamos de criar e cole ou arraste-o para a primeira coluna.

Para obter o design do plano de fundo do banner, usaremos os planos de fundo da coluna nas configurações de linha. Vá para Configurações de linha e atualize o seguinte:

Opções de conteúdo

Na guia da imagem de fundo

Fundo da coluna 1: [inserir imagem de fundo]
Posição da imagem de fundo da coluna 1: [ajuste a posição da imagem de acordo com sua preferência]
Mistura de imagem de fundo da coluna 1: multiplique

Na guia Gradiente de fundo

Cores de gradiente da coluna 1: rgba (255,255,255,0), # e02b20
Direção do gradiente da coluna 1: 180 graus
Posição inicial da coluna 1: 70%
Posição final da coluna 1: 0%

A última etapa é atualizar as configurações do módulo de botão :

Opções de conteúdo

Texto do botão: série de viagens

Opções de Design

Tamanho do texto do botão: 32 px
Largura da borda do botão: 2 px
Espaçamento entre letras dos botões: 0 px
Cor da borda do botão flutuante: # edf000
Espaçamento entre letras do botão ao passar o mouse: 0 px

Opções avançadas

CSS personalizado na caixa Elemento principal:

padding: 350px 0px 50px;
width: 100%;

Este css personalizado ajusta o preenchimento do módulo Botão para que o texto fique na parte inferior, logo atrás do gradiente de fundo.

Sinta-se à vontade para duplicar este processo para o banner na próxima coluna e atualizar o conteúdo como quiser.

Confira o resultado.

Nota : Eu não usaria Equalize a altura da coluna ao usar esta funcionalidade. A coluna se estenderá além do módulo do botão. Se você quiser que as alturas do banner combinem perfeitamente, pode ser necessário brincar com o preenchimento do módulo de botão para acertar.

Responsivo?

sim. Como os botões são construídos dentro da estrutura de colunas do Divi, eles respondem bem em todos os dispositivos. Para os banners horizontais, eu tomaria cuidado com o posicionamento do seu logotipo e do seu texto, pois eles podem se sobrepor no celular.

Aqui está um exemplo de como eles se parecem ao serem reduzidos para tamanhos de tela menores:

Compatibilidade do navegador

Atualmente, a propriedade CSS do modo de mesclagem de fundo não é compatível com o Internet Explorer ou Edge e o Safari tem opções de mesclagem limitadas. No entanto, o fallback não é considerável em minha experiência para a maioria dos casos.

Pensamentos finais

Espero que você tenha gostado desse truque de design pequeno, mas útil, para criar banners responsivos. Contanto que você entenda as limitações envolvidas e mantenha as coisas simples, você pode criar alguns banners bem legais. Além disso, essa solução é facilmente implementada e rapidamente personalizada.

E, tenho certeza de que existem outros aplicativos úteis para isso. Estou ansioso para ouvir suas idéias nos comentários.

Saúde!