Como colocar um botão sobre uma imagem?

Por que colocar um botão sobre uma imagem?

Colocar um botão sobre uma imagem ajuda a criar uma chamada para ação (CTA) clara sem interromper o fluxo do design. Isso torna a página mais envolvente e direciona os visitantes para a próxima etapa imediatamente.

Os casos de uso comuns incluem:

• Apresentando um "Compre agora" botão em banners de produtos ou coleções.
• Chamando a atenção para promoções ou descontos sazonais.
• Ligando diretamente a um página de destino específica ou seção de destaque.
• Criando um layout mais limpo em vez de separar a imagem e o botão.

Dicas: Escolha uma cor de botão que contraste com sua imagem de fundo para garantir que ela se destaque, especialmente em dispositivos móveis.

Para fazer isso no GemPages, você pode seguir dois métodos simples explicados abaixo.

Como colocar um botão sobre sua imagem no GemPages?

Método 1: Use um elemento de banner de herói

Normalmente, você pode usar o elemento Banner de Herói para carregar essa imagem. Depois, o banner de herói permite outros elementos, incluindo o botão. Siga estes passos:

Passo 1: Vou ao Construtor GemPages app> PÁGINAS. Em seguida, clique na página na qual você deseja colocar um botão sobre sua imagem para abrir o editor.

Passo 2: Na barra lateral esquerda, procure por “banner de herói”. Arraste e solte o layout preferido para qualquer posição na sua página.

Passo 3: Exclua os elementos de texto e mantenha apenas o elemento do botão.

Passo 4: Clique no Bandeira de herói elemento para revelar suas configurações. Role para baixo até o Contexto seção e selecione o Imagem campo.

Passo 5: Carregue sua imagem ou escolha uma da biblioteca para usar como imagem de fundo.

Passo 6: Ajusta a imagem de fundo como preferir.

Passo 7: Clique no Botão elemento para abrir suas configurações. A partir daqui, você pode personalizar o botão do seu jeito, como:

• Altere a cor, a forma e o tamanho.
• Adicione um ícone ou efeito de foco.
• Vincule o botão a uma nova página ou a uma seção de destino na sua página.

Consulte Este artigo para mais instruções.

Passo 8: Salve suas alterações e clique em Publicar.

Método 2: Use a opção Relativa da Posição do Botão

Para garantir que o botão seja colocado corretamente sobre a imagem no design da sua página, você pode definir o Posição do botão para Relativo.

Siga esses passos:

• Clique no elemento Botão para abrir suas configurações e navegar até o Avançado aba.
• Desloque-se até o Posição seção.
• Selecione os Parente opção no menu suspenso.

Saiba mais sobre toda essa configuração através do Este artigo.