Resumo de IA
Quer adicionar uma imagem ao seu site WordPress?
As imagens são uma parte essencial de todo o conteúdo online. Elas melhoram o apelo visual do seu site e tornam o seu conteúdo mais legível.
Neste tutorial, irei guiá-lo através do processo de adicionar uma imagem a diferentes partes do seu site WordPress.
Como Adicionar uma Imagem ao WordPress
O processo para adicionar imagens ao WordPress varia dependendo de onde exatamente está a inserir uma imagem. Neste tutorial, vamos mostrar-lhe alguns dos cenários mais comuns para carregar imagens no WordPress.
Aqui estão instruções escritas se preferir ler em simultâneo.
Crie o Seu Formulário de Imagem WordPress Agora
Cenário #1: Adicionar Imagem a um Post do WordPress
Se está a criar um novo post ou página no WordPress, é provável que precise de adicionar algumas imagens para que o seu conteúdo se destaque.
Para adicionar uma imagem ao seu post, primeiro terá de ir ao editor de posts do WordPress navegando para Posts » Todos os Posts no menu de administração.
Isto irá levá-lo imediatamente para o editor Gutenberg do WordPress. Uma vez dentro do editor, basta clicar no botão ‘+‘ para abrir a lista de blocos disponíveis e, em seguida, selecionar o bloco Imagem.
Quando o bloco Imagem for inserido na área de conteúdo, verá as opções para carregar uma nova imagem do seu computador, selecionar uma imagem já carregada da Biblioteca de Média ou inserir uma imagem a partir de um URL.
Se estiver a adicionar uma nova imagem que ainda não existe na biblioteca, clique no botão Carregar.
Em seguida, selecione a imagem que deseja carregar do seu computador e ela deverá aparecer imediatamente no seu post.
É assim de fácil adicionar uma imagem a um post de blog do WordPress!
O processo para inserir imagens em páginas é semelhante. Terá apenas de seguir o mesmo processo após clicar na opção de menu Adicionar Nova Página na barra lateral de administração do seu WordPress.
Cenário #2: Adicionar Imagem a um Formulário do WordPress
Se quiser adicionar uma imagem a um formulário do WordPress, primeiro terá de instalar um plugin de formulário com uma funcionalidade fácil de carregamento de imagens.
O WPForms é um dos poucos plugins de formulário para WordPress que tornam incrivelmente fácil inserir uma imagem em qualquer lugar dentro do seu formulário.
Instalar WPForms
Se ainda não tem o WPForms instalado no seu site, recomendamos a aquisição da licença WPForms Pro.
Para obter ajuda com a instalação do plugin, pode consultar o nosso guia sobre a instalação do WPForms.
Depois de ter instalado o plugin, passe para o próximo passo, onde lhe mostramos como criar um formulário.
Criar um Novo Formulário
No seu painel do WordPress, vá para WPForms » Adicionar Novo.
Verá a janela de configuração do formulário abrir em poucos segundos. Aqui, pode dar um nome ao seu formulário e escolher um modelo pré-fabricado para começar rapidamente.
Usaremos o Formulário de Contacto Simples para este tutorial, passando o cursor sobre ele e clicando em Usar Modelo.
O modelo de formulário será agora carregado no seu ecrã com todos os campos necessários já adicionados.
Podemos personalizar este formulário para adicionar uma imagem com bastante facilidade, como mostrado no próximo passo.
Inserir uma Imagem no Seu Formulário do WordPress
Para inserir uma imagem, terá de adicionar o campo Conteúdo ao seu formulário. Simplesmente arraste e solte o campo Conteúdo do painel esquerdo para o direito.
Vamos adicionar um logótipo ao topo do formulário, por isso colocaremos o campo Conteúdo no topo.
Depois de adicionar o campo, clique nele para abrir as Opções do Campo no painel esquerdo, o que lhe permite usar o editor visual para inserir conteúdo.
Em seguida, terá de clicar no botão Adicionar Média, mesmo acima do editor visual.
Agora, clique no botão Selecionar Ficheiros.
Pode agora selecionar qualquer ficheiro de imagem para carregar e inserir no seu formulário. Assim que for carregado, pode introduzir detalhes como o texto alternativo e o título. Depois, clique no botão Inserir no Formulário na parte inferior.
Fazer isto inserirá a imagem dentro do seu formulário. A imagem não aparecerá imediatamente no formulário, embora a possa ver no editor à esquerda.
Terá apenas de premir o botão Atualizar Pré-visualização, por baixo do editor visual, para ver a imagem no formulário.
É assim que deve parecer depois de ter adicionado a imagem usando o campo Conteúdo e atualizado a pré-visualização.
Também pode aceder a opções de formatação adicionais clicando no botão Expandir Editor, no canto inferior direito do editor.
Por exemplo, pode ajustar o alinhamento do seu conteúdo, adicionar uma lista com marcadores para texto e mais.
Excelente! Agora que adicionou uma imagem ao seu formulário, prossiga e prima o botão Guardar no canto superior direito do construtor de formulários.
Tudo o que resta agora é publicar este formulário no seu site para que os seus visitantes o possam aceder.
Publicar o Seu Formulário Online
O WPForms vem com um assistente de incorporação fácil que torna a publicação um processo rápido e simples.
Comece por clicar no botão Incorporar, no topo do construtor de formulários.
Verá então uma janela modal a aparecer, pedindo-lhe para escolher onde quer incorporar o seu formulário. Selecionaremos Criar Nova Página para incorporar um formulário numa nova página.
Depois disso, introduza um nome para a sua página e clique em Vamos Lá.
O assistente levá-lo-á ao editor do WordPress, onde encontrará o seu formulário incorporado.
Quando estiver pronto para prosseguir, prima o botão Publicar no canto superior direito para colocar o seu formulário em direto.
E é tudo! Criou agora com sucesso um formulário com uma imagem adicionada.
Há muito mais que pode fazer com o WPForms quando se trata de adicionar gráficos. Vamos mostrar-lhe algumas dicas bónus a seguir.
Bónus: Mais Formas de Usar Imagens em Formulários do WordPress
A flexibilidade do WPForms torna muitas coisas interessantes possíveis quando se trata de adicionar média aos seus formulários.
Apresentaremos algumas dicas que podem ajudá-lo a tornar os seus formulários ainda melhores, juntamente com métodos alternativos para inserir imagens.
Adicionar Imagens a Campos Selecionados
No exemplo acima, mostrámos como inserir uma imagem como um elemento de conteúdo no seu formulário.
Mas sabia que também pode usar imagens para acompanhar itens selecionáveis em campos como Caixas de seleção e Múltiplos itens?
Para usar imagens nas opções de um campo de Múltiplos itens, pode clicar no botão de alternância Usar Escolhas de Imagem nas Opções do Campo.
Após ativar as Escolhas de Imagem, poderá carregar imagens para cada escolha no seu campo. Clique no botão Carregar Imagem para adicionar facilmente qualquer imagem.
Pode repetir isto para cada escolha para transformar um formulário simples em algo mais visualmente apelativo.
Na verdade, não se limita a carregar imagens personalizadas para as escolhas. O WPForms também lhe dá acesso a uma enorme biblioteca de ícones pré-carregados que pode adicionar às suas escolhas.
Para usar ícones nas suas escolhas, prossiga e clique na alternância Usar Escolhas de Ícone.
Experimente. É fácil de fazer e os seus visitantes apreciarão mais o preenchimento dos seus formulários quando houver elementos visuais para lhes prender a atenção!
Adicionar Imagens com Código HTML
Anteriormente, mostrámos como inserir rapidamente uma imagem no seu formulário WordPress usando o campo de Conteúdo.
No entanto, se preferir trabalhar diretamente com código HTML, também pode inserir imagens usando um método mais tecnicamente envolvido.
Para que isto funcione, é necessário que a imagem que pretende adicionar ao seu formulário já esteja carregada na sua Biblioteca de Média e que o seu URL lhe seja conhecido.
Se não, pode carregar uma e obter o URL agora. No seu painel WordPress, clique em Média » Adicionar Nova Média.
Isto abrirá a área de carregamento da Biblioteca de Média. Clique no botão Selecionar Ficheiros para prosseguir.
Agora, escolha o ficheiro que pretende carregar do seu computador. Quando o ficheiro terminar de carregar, poderá ver o seu URL.
Clique no botão Copiar URL para a Área de Transferência para obter a ligação.
Agora, abra um formulário existente ao qual pretende adicionar a imagem ou crie um novo, como mostrámos anteriormente neste tutorial.
Pode editar um formulário existente indo a WPForms » Todos os Formulários.
Agora, selecione o formulário no qual pretende inserir a sua imagem na página Visão Geral dos Formulários.
Dentro do construtor de formulários, arraste e solte o campo HTML na área direita onde está o seu formulário.
Após fazer isto, clique no campo HTML que acabou de colocar dentro do seu formulário para abrir as suas Opções do Campo à esquerda.
Pode usar a opção Rótulo para dar um nome ao campo HTML para que o possa identificar mais facilmente no formulário, mas isto não será visível no frontend.
Finalmente, a imagem que pretende inserir terá de ser adicionada dentro de uma tag img na caixa Código. Pode usar este formato para adicionar a sua imagem: <img src="[insira o URL do ficheiro da sua imagem]">
Note que, ao contrário do campo Conteúdo, o campo HTML não pode carregar o código para atualizar a pré-visualização dentro do construtor de formulários. Mas pode usar o botão Pré-visualizar no topo para ver uma pré-visualização de todo o seu formulário.
Isto é útil para verificar se o código HTML que introduziu está a funcionar corretamente.
Pode então prosseguir e publicar o formulário seguindo os mesmos passos que sublinhámos acima.
E é tudo! Está agora pronto para adicionar uma imagem ao seu site WordPress, quer precise de o fazer num post ou num formulário.
Crie o Seu Formulário de Imagem WordPress Agora
Em seguida, Aceitar Imagens Enviadas por Utilizadores
O WPForms também facilita aos seus visitantes o envio das suas próprias imagens para o WordPress, por isso certifique-se de que verifica isso a seguir.
Procura mais formas de desenhar e estilizar os seus formulários? Consulte este artigo sobre estilização do WPForms usando o editor de Blocos. Este guia irá mostrar-lhe como desenhar o seu formulário como um profissional usando controlos simples e sem qualquer código!
Pronto para criar o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e X para mais tutoriais e guias gratuitos do WordPress.
Olá.
Quando quero colocar uma imagem no meu formulário, ela não se adapta ao tamanho do formulário, é sempre demasiado grande.
Como posso torná-la mais "responsiva"?
Obrigado!
Olá Guillaume - Peço desculpa pelo problema! Para tornar as imagens responsivas, pode adicionar tamanhos de imagem em % e ajustar o tamanho, como
No entanto, para garantir que respondemos à sua pergunta da forma mais completa possível, poderia contactar a nossa equipa de suporte com mais alguns detalhes sobre o que pretende fazer?
Obrigado! :)
Como é que os utilizadores podem enviar a sua imagem no formulário? do seu computador ou usando a webcam
Olá Sohaib - Boa pergunta! Pode primeiro armazenar a imagem no armazenamento do seu computador (inclui as capturadas com webcam) e depois seguir as instruções do Passo 2, referindo-se a este mesmo artigo.
Espero que isto ajude! 🙂
Como é que os meus CLIENTES podem publicar as suas imagens no meu site através de um formulário que criei, digamos para vender um carro ou equipamento?
Olá Carl! A forma mais fácil de permitir que os seus clientes criem os seus próprios anúncios seria através do nosso complemento de Submissão de Posts, especialmente com o nosso recentemente lançado editor de Campo de Texto Rico :)
Com estes dois combinados, os seus utilizadores poderão praticamente desenhar o seu anúncio como quiserem, enviar o formulário, e ele será adicionado diretamente ao seu site (ou pendente da sua aprovação).
Espero que isto ajude a esclarecer :) Se tiver mais alguma questão sobre isto, por favor contacte-nos se tiver uma subscrição ativa. Se não tiver, não hesite em colocar-nos algumas questões nos nossos fóruns de suporte.
Como posso alterar o logótipo de pesquisa do formulário do widget?
Olá Cory! Peço desculpa, mas não tenho a certeza se percebi a que te referes.
Quando tiveres oportunidade, contacta a nossa equipa aqui se tiveres uma subscrição ativa.
Se não tiveres, não hesites em contactar os nossos fóruns de suporte.
Obrigado!
Adicionei a imagem no meu formulário usando HTML, mas não carrega a imagem no email.
Adicionei algumas imagens no cabeçalho para poder imprimir a entrada do formulário juntamente com os logótipos no topo, mas sem sucesso.
Olá Aman!
Obrigado por nos contactares!
A razão pela qual não passamos campos HTML, campos de Divisor de Secção ou descrições (os dois últimos são essencialmente campos HTML) é que estas áreas permitem HTML completo, o que significa que será comum conterem coisas que irão quebrar as notificações por email ou causar problemas de entrega.
No entanto, temos um filtro que te permitirá incluir campos não de entrada nos teus emails. Aqui está o nosso tutorial com todos os detalhes, mais o código de que precisas: https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
Temos também um tutorial útil com detalhes sobre como adicionar código personalizado como este ao teu site: https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (para uma opção especialmente fácil, recomendo a opção do plugin Code Snippets).
Ou, se preferires evitar PHP, podes considerar modificar o corpo das tuas notificações para incluir o texto de que precisas. Poderias fazer isto construindo o conteúdo da notificação de uma forma mais personalizada usando texto normal, HTML e Smart Tags.
Esta opção provavelmente oferece o maior controlo, pois podes escolher exatamente quais os detalhes que gostarias de incluir na tua notificação.
Peço desculpa se isto não é exatamente o que procuravas, mas espero que uma destas ideias possa funcionar para ti. Podes, por favor, dizer-me se tens mais alguma questão?
Obrigado!
Posso fazer com que um utilizador use a câmara do seu dispositivo para tirar uma foto e carregá-la num único passo, em vez de primeiro tirar uma foto, guardá-la no seu desktop e depois carregar a foto. Idealmente, gostaria que o utilizador carregasse uma foto de uma biblioteca se tiver uma foto existente, mas se preferir, pode simplesmente tirar uma foto da câmara e carregá-la. Existe alguma forma de fazer isto no WPForms?
Olá Anil! O campo de Upload de Ficheiro, quando acedido por um dispositivo móvel, pode fornecer a opção para os utilizadores carregarem uma imagem diretamente da sua câmara. No entanto, depende se esse dispositivo móvel foi configurado para permitir que o navegador aceda à sua câmara. Se não for, a opção não estará disponível.
Espero que isto ajude a esclarecer :) Se tiver mais alguma questão sobre isto, por favor contacte-nos se tiver uma subscrição ativa. Se não tiver, não hesite em colocar-nos algumas questões nos nossos fóruns de suporte.
Olá,
O WPForms trata os dados de registo do utilizador da mesma forma que o WooCommerce? Se um utilizador finalizar a compra na minha loja de comércio eletrónico e registar uma conta, os seus dados são duplicados, uma vez no WooCommerce e outra vez no registo do WPForms?
Olá Ann, o nosso suplemento de Registo de Utilizador não fornece uma interface para gerir ou editar utilizadores existentes e foca-se unicamente no processo de criação de conta. No entanto, não temos qualquer integração com o WooCommerce.
Dito isto, para garantir que respondemos à sua pergunta da forma mais completa possível e evitar qualquer confusão, poderia contactar a nossa equipa?
Se tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, por isso, por favor, envie um pedido de suporte. Caso contrário, fornecemos suporte complementar limitado no fórum de suporte WPForms Lite WordPress.org.
Obrigado.
O WPForms suporta media gib? Ou a incorporação de um código curto de um plugin de visualização 3D?
Olá Melissa – Teríamos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem de suporte para que possamos ajudá-lo.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, por favor, envie um ticket de suporte.
Caso contrário, fornecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Como adiciono uma imagem ao botão de envio do wpforms no WordPress?
Até agora, só mostra como adicionar ícones. Mas tenho uma imagem personalizada que gostaria de adicionar.
Olá Aser – Para adicionar uma imagem ao botão de envio, pode considerar usar o seguinte CSS:
.wpforms-submit-container .wpforms-submit { background-image: url('URL_da_imagem'); background-size: cover; padding-left: 40px; }E caso ajude, aqui fica um tutorial detalhado sobre como adicionar CSS personalizado como este ao seu site.
O meu código é algo como isto:
.wpforms-submit-container .wpforms-submit { background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’); background-size: cover; padding-left: 40px; }
No entanto, o URL não é captado, o que significa que a imagem não está a ser exibida. Não tenho a certeza se compreende o que pretendo, mas quero que uma imagem .png seja visível ao lado do texto "Enviar" dentro do botão de envio, à esquerda.
Encontrei este código do seu tutorial que exibe ícones Fantastique e faz quase o que pretendo, mas não consigo adicionar um URL da minha imagem de eleição.
.wpforms-form button[type=submit]:hover { background-color: #ac2428 !important; }
.wpforms-form button[type=submit]:before { content: ‘\f1d8’; /* Unicode para ícone, certifique-se de manter as aspas e a barra invertida */ margin-right: 10px !important; /* Distância entre o ícone e o texto do botão */ }
Olá Aser – Teríamos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem de suporte para que possamos ajudá-lo.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, por favor, envie um ticket de suporte.
Caso contrário, fornecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Como alinhar uma imagem à esquerda de um formulário?
Olá JM – Se pretende exibir uma imagem à esquerda e campos à direita, pode considerar usar o campo de layout.
Olá, tenho uma questão para saber se posso comprar o seu módulo para fazer o formulário de que preciso. A primeira linha contém 6 botões de rádio acima dos quais está uma imagem (portanto, 6 imagens), mas que não são “rótulos”. Quando se clica numa imagem, abre-se um popup a exibir a imagem maior e texto explicativo. É possível fazer isto com o WP-Forms? Agradeço desde já.
Olá Françoise – Teríamos todo o gosto em ajudar! Quando tiver oportunidade, por favor, envie um pedido de suporte para que possamos ajudá-lo.