Como rotular uma imagem de plano de fundo com dicas de ferramentas envolventes na Divi

Adicionar dicas para rotular uma imagem de plano de fundo é uma maneira criativa de envolver os visitantes com informações valiosas sobre seu produto ou serviço. A ideia básica é posicionar ícones (ou texto) em locais específicos na imagem (como um mapa do google com pontos). E se você aproveitar as vantagens dos efeitos de foco do Divi, poderá revelar texto adicional ao passar o mouse sobre um ícone para criar dicas de ferramentas envolventes.

Neste tutorial, vou mostrar como rotular uma imagem de fundo com sinopses que servirão como dicas informativas sobre o seu produto. Para fazer isso, usarei a página inicial da Academia de ginástica para rotular uma imagem de fundo com informações sobre condicionamento físico de qualidade.

Vamos começar.

Uma espiada

Aqui está uma prévia do design que construiremos neste tutorial.

O que você precisa

Para este tutorial, você precisará do seguinte:

• O Tema Divi
• A página inicial da academia de ginástica do pacote de layout da academia de ginástica (disponível no Divi Builder)
• Uma imagem a ser usada para sua imagem de plano de fundo que tem exatamente 320 x 507 pixels. Sinta-se à vontade para arrastar este para sua área de trabalho e usá-lo neste tutorial.
  

Preparando o Layout Premade

Para começar, crie uma nova página, adicione um título e implante o Visual Builder. Em seguida, selecione “Choose a Premade Layout”. No pop-up de carregamento da biblioteca, selecione o layout da página inicial da academia de ginástica e clique em “Usar este layout”.

Depois que o layout for carregado na página, role para baixo até a quarta seção com a linha de duas colunas que tem o título “Programas em destaque” na coluna da direita. Vamos adicionar nossa imagem de fundo com dicas de ferramentas na coluna esquerda desta linha.

Use o editor embutido para alterar o texto do título na coluna da direita para “Smart Fitness”.

Adicionando a imagem de fundo e personalizando as configurações de linha

Com este projeto, o dimensionamento e o espaçamento são cruciais e precisam ser precisos. E tudo começa com o tamanho da nossa imagem de fundo. Conforme mencionado antes, a imagem que usamos para o plano de fundo deve ter 320 px por 507 px. Como a largura de 320 px é um bom ponto de partida para dispositivos móveis, isso nos permitirá tornar o design compatível com dispositivos móveis sem ter que alterar o tamanho de nossa imagem.

Abra as configurações de linha e adicione a imagem de fundo à coluna 1. Em seguida, atualize o seguinte:

Tamanho da imagem de fundo da coluna 1: tamanho real
Posição da imagem de fundo da coluna 1: centro esquerdo
Repetição da imagem de fundo da coluna 1: sem repetição

Em seguida, precisamos adicionar uma largura personalizada à linha e remover o espaçamento superior e inferior.

Largura personalizada: 700 px
Preenchimento personalizado: 0 px superior, 0 px inferior

Definir a largura para 700 px garantirá que a linha não fique menor em telas menores antes do ponto de interrupção do tablet.

Neste ponto, acho uma boa ideia prosseguir e definir uma altura específica para a coluna 1 igual à altura da imagem de fundo. Desta forma, sabemos que a imagem permanecerá visível se o conteúdo da coluna não expor toda a imagem. Para fazer isso, vá para a guia avançada e adicione o seguinte CSS personalizado no elemento principal da coluna 1:

height: 507px;

Agora, a altura da coluna é igual à altura da sua imagem e não dependerá do conteúdo (ou módulos) que adicionarmos à linha.

Adicionando os rótulos das dicas sobre a imagem de fundo usando o Blurbs

Com nossa imagem de fundo no lugar, podemos começar a adicionar nossas sinopses que serão posicionadas e estilizadas para funcionar como dicas de ferramentas. Vá em frente e adicione um módulo de sinopse à coluna 1 e atualize as seguintes configurações de sinopse:

Título: “Foco”
Conteúdo: “A chave para o sucesso!”
Ícone de uso: Sim
Ícone: veja a captura de tela

É importante manter o título e o conteúdo com apenas algumas palavras, porque queremos ser capazes de ajustar a sinopse inteira dentro da imagem de fundo.

A seguir, você atualizará as configurações de design. Este é um design mais avançado de uma sinopse, então há várias opções para alterar junto com alguns efeitos de foco que revelarão o conteúdo da sinopse ao passar o mouse. Atualize as seguintes configurações de design do blurb:

Cor do ícone: # edf000
Ícone de círculo: SIM
Cor do círculo: rgba (0,0,0,0)
Mostrar borda do círculo: SIM
Cor da borda do círculo (padrão): rgba (0,0,0,0)
Cor da borda do círculo (pairar): # edf000
Posicionamento de imagem / ícone: esquerda
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 40px

Continue a ajustar as configurações de design da seguinte maneira:

Peso da fonte do título: negrito
Cor do texto do título (padrão): rgba (0,0,0,0)
Cor do texto do título (padrão): # edf000
Cor do corpo do texto (padrão): rgba (0,0,0,0)
Cor do corpo do texto (padrão): #ffffff

(Observe que as cores do texto padrão são completamente transparentes para ocultá-las até que você passe o mouse sobre a sinopse.)

Margem personalizada: 15 px superior, 0 px inferior, 90 px à esquerda
Preenchimento personalizado: 5px superior, 5px inferior, 5px direito

(A margem personalizada é como você posiciona o ícone de sinopse em um local específico sobre a imagem.)

Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: -154 px
Posição vertical da sombra da caixa: 0 px
Cor da sombra (padrão): rgba (0,0,0,0)
Cor da sombra (pairar): # 1e2441

(A sombra da caixa é uma forma criativa de adicionar uma cor de fundo atrás do conteúdo da sinopse. Por padrão, a sombra da caixa é completamente transparente, mas mostrará uma bela cor azul ao passar o mouse.)

Agora vá e confira o resultado final de sua primeira sinopse para ter certeza de que o efeito de foco e o design estão corretos.

Em seguida, podemos duplicar o módulo blurb para criar nosso segundo rótulo de dica de ferramenta. Depois de duplicar a sinopse, você pode atualizar o conteúdo para o texto que desejar (seja breve). Em seguida, tudo o que você precisa fazer é posicionar a dica de ferramenta usando uma margem personalizada diferente da seguinte maneira:

Margem personalizada: 0 px superior, 0 px inferior, 15 px à esquerda

Para criar a terceira sinopse, você pode duplicar a segunda sinopse.

Para esta terceira sinopse, ficaremos sem espaço no lado direito de nossa imagem, então não teremos muito espaço para conteúdo. Poderíamos usar a margem negativa para estender a sinopse fora da imagem, mas isso também se estenderia além do tamanho da tela de 320 px no celular. Portanto, vamos apresentar alguns pequenos trechos de código para inverter o conteúdo de nossa sinopse de modo que o ícone fique à direita e o texto à esquerda. Para fazer isso, abra as configurações do blurb e, na guia Avançado, adicione o seguinte CSS personalizado.

CSS do elemento principal:

direction: rtl;

CSS da imagem do Blurb:

padding-left: 15px;

Se você não percebeu, o ícone agora está à direita. Agora, tudo o que você precisa fazer é posicionar a sinopse usando a seguinte margem personalizada:

Margem personalizada: 35 px superior, 0 px inferior, 0 px à esquerda

Também precisamos ajustar a sombra da caixa para que venha da esquerda em vez da direita da seguinte maneira:

Posição horizontal da sombra da caixa: 150 px

Agora verifique a dica de ferramenta invertida no site ao vivo.

Para a última sinopse, copie a primeira no topo da coluna e cole na terceira sinopse.

Em seguida, atualize a margem da seguinte forma:

Margem personalizada: 0 px superior, 100 px à esquerda

Agora confira o resultado final do design!

E verifique os efeitos de flutuação da dica de ferramenta!

É responsivo?

Este projeto foi construído tendo em mente a mobilidade desde o início. A imagem tem uma largura de 320 px, que é a largura da maioria dos smartphones pequenos. E porque dimensionamos e posicionamos tudo usando unidades de comprimento de pixel, o design (incluindo as dicas) não se move quando ajustamos o tamanho do navegador.

No entanto, há mais uma coisa que você pode precisar fazer para garantir e maximizar a largura da imagem em telas pequenas de telefone. Por padrão, sua linha terá 80% de largura no celular, então, para fazer isso 100%, você pode adicioná-lo como CSS personalizado ao elemento principal de sua linha, como:

width: 100%;

Sua largura personalizada de 700 px ainda servirá como largura máxima em computadores, mas agora será 100% em dispositivos móveis.

Pensamentos finais

Rotular uma imagem de plano de fundo com dicas e efeitos de foco como este pode adicionar um elemento de design profissional que envolve seu público com informações úteis. E tenho certeza de que existem várias maneiras de usar esse conceito para outros casos de uso. Mas isso traz desafios se você planeja manter o design no celular também. O truque é pensar primeiro em dispositivos móveis e planejar com antecedência. Espero que isso sirva de inspiração para projetos futuros. Se alguma coisa, pelo menos você sabe como criar uma sinopse com um ícone ou com o botão direito :).

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

Saúde!