Para muitos entusiastas do WordPress, a capacidade de adicionar um botão sobre uma imagem é essencial para tornar o conteúdo mais interativo e atraente. Suas motivações podem se originar do desejo de enriquecer as interações com o usuário, aproveitar os recursos do WordPress ou abordar restrições em temas ou plug-ins. Seja para melhorar a navegação do usuário, superar desafios de layout ou simplesmente adotar tendências modernas de web design, esse recurso pode ajudar os usuários a enfrentar desafios de layout ou adotar tendências modernas de design sem exigir habilidades avançadas.
Felizmente, o Cover Block integrado do WordPress torna o processo simples e acessível. Neste guia, mostraremos a você como fazer isso passo a passo.
Etapa 1: Adicionar um bloco de cobertura
Para começar, abra a página ou postagem onde deseja colocar sua imagem preferida com o botão. No editor do WordPress, clique no botão "+" para adicionar um bloco e procure por "Cover". Depois de encontrá-lo, selecione o bloco Cover.
Etapa 2: Inserir uma imagem
Depois de adicionar o bloco, você precisa carregar sua imagem escolhida ou selecione uma das Biblioteca de mídia. Essa imagem agora servirá como plano de fundo para seu design.
Etapa 3: Adicionar um título à imagem (opcional)
Quando o bloco Cover estiver no lugar, você notará um texto de espaço reservado que diz "Write title..." (Escreva o título...) dentro da imagem. Clique nesse texto e digite o título ou cabeçalho que você deseja exibir sobre a imagem.
Etapa 4: Adicionar um botão sobre a imagem
Quando o bloco Cover estiver pronto, clique na imagem, e o inseridor de blocos será exibido. Agora, clique no sinal "+", procure por "Buttons" e adicione o bloco.
Etapa 5: Personalizar o design
Para ajustar cada detalhe, separamos esta seção em 3 partes. Começaremos com o título, depois os botões e terminaremos com o bloco geral da capa para obter uma aparência profissional.
5.1 Personalizar o texto do título
Clique no texto que você colocou como Título no bloco Cover para selecioná-lo. Use a barra de ferramentas do bloco para ajustar o estilo do texto - negrito, itálico ou alinhamento. Se desejar personalização adicional, vá para as configurações do bloco na barra lateral direita para alterar o tamanho da fonte, a cor e a tipografia.
5.2 Personalizar o botão
Selecione o bloco de botões, digite o texto que deseja exibir e vincule-o à página ou URL relevante clicando no ícone de corrente (1) na barra de ferramentas. Use a barra de ferramentas de bloco para alinhar o botão e ajustar seu estilo.
Agora, navegue até o painel de configurações do bloco no lado direito. O painel Guia Geral (1) permite ajustar a largura do botão em relação ao seu contêiner, e o botão Guia Estilos (3) permite personalizar os estilos, as cores, a tipografia, as dimensões e a borda do botão.
5.3 Personalizar o bloco de cobertura geral
Clique no bloco Cover para acessar suas configurações na seção Guia Geral. A partir daí, ajuste o Configurações de layout para restringir blocos aninhados, ative o Fundo fixo para manter o plano de fundo fixo enquanto você rola ou o botão Antecedentes repetidos se sua imagem for menor do que o bloco e precisar ser colocada em mosaico para preencher o espaço, e defina o Ponto Focal para manter visíveis as áreas importantes da imagem.
Em seguida, mude para o Guia Estilos. A partir daí, você pode ajustar a cor geral, a opacidade, a tipografia, a dimensão, a proporção, a borda e muito mais.
Etapa 6: Visualizar e publicar
Percorra toda a página novamente para garantir que o botão e a imagem sejam exibidos conforme o planejado. Quando tudo estiver certo, publique ou atualize seu conteúdo para torná-lo ativo.
Conclusão
A capacidade de adicionar um botão em uma imagem no WordPress abre possibilidades criativas para tornar seu conteúdo mais interativo e visualmente atraente. O bloco Cover no WordPress permite que você sobreponha botões em imagens e crie designs interativos e visualmente atraentes sem a necessidade de ferramentas extras ou codificação. Ele oferece total flexibilidade para personalizar títulos, botões e detalhes de layout para facilitar o alinhamento de seu conteúdo com as tendências de design moderno. Seguindo este guia, você pode obter um resultado profissional que aprimora o design e a funcionalidade do seu site. Seguindo este guia, o design de seu site pode se destacar com uma navegação melhor e um acabamento refinado.
