Índice
Você precisa colocar texto ao redor da imagem de maneira elegante? Aprenda como fazer isso facilmente sem experiência em codificação e design. O editor Gutenberg traz mais opções para quebrar o texto ao redor do texto no WordPress.
Você pode obter um site bonito e uma rotina de edição de conteúdo fácil simultaneamente. Escolher o editor Gutenberg para o seu site WordPress oferece a melhor ferramenta de uma visão de longo prazo. Você terá mais opções para quebrar texto em torno de imagens de forma diferente. Gutenberg traz muitas vantagens como código-fonte mais claro do site, velocidade, segurança e usabilidade.
Como quebrar o texto em torno da imagem no WordPress?
O editor e os blocos Gutenberg tornam o conteúdo do site mais leve, moderno e legível sem esforço. Mostramos a você mais maneiras de quebrar o texto ao redor da imagem em páginas do WordPress, tipos de postagem e postagem personalizada também. Existem diferentes blocos e você pode usá-los também em combinação, como um conjunto de peças e recursos que oferecem opções adicionais para o envoltório.
Você pode selecionar o bloco para o texto quebrado ao redor da imagem de acordo com a subpágina e seu tipo de conteúdo. Você pode escolher um estilo para a página de apresentação e outro para uma postagem no blog. Além disso, considere o tipo de conteúdo que representa a imagem. É uma imagem descritiva ou uma mídia mais representativa ou de venda?
Quebrar texto ao redor da imagem - seleção de blocos
Existem 4 blocos que você pode usar para quebrar um bloco de texto em torno de uma imagem. Descrevemos todos eles:
- Bloco de imagem e bloco de parágrafo encontre mais abaixo
- Bloco de mídia e texto encontre mais abaixo
- Bloco de colunas em postagem individual
- bloco de cluster em postagem individual (recurso disponível apenas com plug-in Citadela Pro)
Envolva texto e imagem para uma melhor experiência de leitura
Existem várias razões pelas quais você deve usar este bloco. Você apreciará mais se estiver escrevendo postagens de blog. As imagens são parte integrante da história. Não importa se você escreve um blog de viagens ou uma revista sobre notícias de TI. Portanto, ao adicionar fotos dentro do seu conteúdo, pense no alinhamento da imagem. Os leitores poderão entender melhor sobre o que você está escrevendo.
Em muitos casos é necessário inserir imagem e texto lado a lado. O que é importante?
- Tem que fazer sentido. A imagem deve estar ao lado do texto correto.
- Tem que estar bem alinhado.
- Tem que caber em todo o layout do site.
Blocos de imagem e parágrafo
enquanto no Editor clássico você também pode colocar texto ao lado da imagem, você não pode falar sobre bom alinhamento. Especialmente se a imagem for pequena e você colocar mais texto ao lado dela. O texto envolveu a imagem e não ficou legal.
Editor do Gutemberg e seu bloco de imagem traz um ótimo recurso - redimensionamento de imagem. Arraste pontos ao redor da imagem para alterar automaticamente seu tamanho e alinhamento de texto.
Bloco de mídia e texto – o WordPress alinha o texto ao lado da imagem
- Envolva texto e imagens com o bloco Mídia e texto
- Como adicionar bloco de mídia e texto no editor
- Como funciona este bloco
- Configurações de bloco de mídia e texto
- O que "Empilhar no celular” significar
- Bônus: Como justificar texto no WordPress
Como alinhar o texto ao lado da imagem?
Comece agora
Comece agora com uma avaliação sem riscos. Não é necessário cartão de crédito.
O bloco de mídia e texto é um recurso fantástico. O bloco de mídia e texto resolve esse problema e garante o alinhamento perfeito do texto à imagem sem interromper a composição e o layout. Essa é a razão pela qual você deve usar este bloco.
Também melhora o design do site em dispositivos móveis. Este bloco de embrulho ajuda o tema do WordPress a cobrir diferentes layouts móveis. No smartphone, todas as partes do site devem estar claramente visíveis e legíveis. Qual será a aparência do bloco de mídia e texto em telefones celulares e a função “Stack on mobile” das alças de mesa que veremos a seguir.
Em pouco tempo, você poderá usar o bloco de mídia e texto em nosso novo tema WordPress chamado Citadela. Saiba mais sobre o tema Citadela em um artigo separado.
Como adicionar bloco de mídia e texto no editor de blocos?
Adicionar um bloco de mídia e texto é tão fácil quanto adicionar qualquer outro bloco. É um bloco central que significa que você não precisa baixar ou instalar nada.
Usando o ícone “+” no painel superior ou em qualquer lugar do editor e selecionando o bloco Mídia e texto.
A última opção é digitar “/“ e depois escrever “media”. O WordPress mostrará automaticamente os blocos selecionados correspondentes ao que você pesquisou.
Como funciona o bloqueio de mídia e texto?
O bloco de mídia e texto basicamente agrupa 2 tipos diferentes de conteúdo em um. O primeiro é médio, por exemplo, imagem ou vídeo que você pode adicionar via:
- Carregar
- Biblioteca de mídia
- Arraste e solte
O segundo é o espaço para conteúdo de texto. Você pode escrever parágrafos de texto, listas de marcadores ou título. Você também pode adicionar lá Bloco de botões que estávamos falando anteriormente.
O bloco de mídia e texto sempre alinha a imagem e o texto lado a lado, não importa quanto texto você escreva. Como funciona? A imagem se ajusta automaticamente com base na altura do conteúdo na coluna de texto.
Configurações de bloco de mídia e texto
Configurações gerais de bloqueio
1. Barra de ferramentas superior
A barra de ferramentas acima do bloco oferece várias opções. Se o seu tema ativo suportar isso, você pode definir o bloco de mídia e texto como largo ou largura total. Você também pode escolher onde deseja colocar a imagem ou o vídeo clicando em:
- Mostrar mídia à esquerda
- Mostrar mídia à direita
Na barra de ferramentas superior, há também um ícone para editar a mídia, onde você pode definir Alt Text, Title, Caption ou Description. Saiba mais sobre edição de imagens em nosso artigo Trabalhando com o bloco de imagens do WordPress.
2. Barra lateral direita
A barra lateral direita oferece configurações adicionais para o bloco de mídia e texto. É possível adicionar aqui um texto alternativo, definir a cor de fundo ou adicionar uma classe CSS adicional. Você também pode habilitar a função “Stack on mobile”.
Graças a esta função, a imagem e o texto são bem exibidos em dispositivos móveis. Se você desativar “Stack on mobile”, a imagem e o texto ficarão lado a lado e dificilmente serão legíveis na versão responsiva.
Se você habilitar esta função, no celular, o conteúdo do lado esquerdo será exibido acima do conteúdo do lado direito.
Alinhamento de texto
Parte do bloco de mídia e texto está junto com imagem ou vídeo e também conteúdo de texto. Pode ser um dos seguintes tipos de conteúdo:
1. Parágrafo
Na barra de ferramentas superior, você pode definir o alinhamento do texto, tornar o texto em negrito, itálico ou adicionar link de URL.
Na barra lateral à direita, você pode escolher o tamanho da fonte, a cor da fonte ou a cor do parágrafo. O recurso interessante é o “Drop Cap” que destacará o primeiro caractere do texto. É um bom recurso em postagens de bloqueio para tornar o texto mais interessante.
2. Título
O título é muito semelhante ao parágrafo. Você também pode configurar sua aparência, fazer negrito ou itálico e inserir link de URL. A diferença é que você pode escolher o tipo de cabeçalho – H2, H3, H4.
Outros tamanhos de títulos e configurações de alinhamento estão disponíveis na barra lateral à direita.
3. Lista
Se você adicionar o bloco de lista ao seu conteúdo, pode ser marcadores, lista numerada ou lista de vários níveis. Você também pode deixar o texto em negrito, itálico e adicionar um link de URL.
4. Bloco de botões
Este bloco que adiciona botão ao conteúdo pode ser ajustado ao design do site. A cor e o estilo do botão ou a cor de fundo podem ser configurados na barra lateral à direita.
Não se esqueça de ler o artigo sobre Bloco de botões.
Alternando entre os tipos de bloco
No bloco de mídia e texto, é possível converter um tipo de bloco de conteúdo em outro. Você também pode alterar o bloco de mídia e texto para o bloco de imagem e a parte do texto será excluída.
No conteúdo de texto, é possível alterar o bloco de parágrafo para cabeçalho ou bloco de lista.
Bônus: Como justificar texto no WordPress
O uso de texto justificado tem seus pontos positivos e negativos. O texto justificado geralmente pode ser encontrado em livros ou jornais, mas não é mais usado em sites. Por que?
Vários anos atrás, a função Justify foi integrada diretamente no editor clássico do WordPress. Texto justificado usado para causar problemas de visibilidade em vários navegadores ou dispositivos móveis. Também está relacionado à dificuldade de leitura do texto justificado. Esta função foi, portanto, preterida e removida.
Essa funcionalidade específica também não existe no novo editor de bloco (Gutenberg).
Então, como você justifica o texto se realmente quiser?
A solução é adicionar um código CSS simples em algumas etapas:
- Há uma configuração para o bloco Classe de parágrafo CSS adicional na barra lateral do lado direito
- Escreva lá o nome da classe „justificar“
- Publicar página ou artigo
- Se você visualizar, clique em Personalizar na barra superior principal
- No lado esquerdo há uma nova barra lateral com configurações
- Clique em CSS Adicional
- Insira o seguinte código CCS:
p.justify { texto-alinhar: justificar; }
Feito. A partir de agora, o texto em seu Bloco de Mídia e Texto é justificado.
O WordPress tornou-se mais utilizável sem construtores de páginas de terceiros, graças ao editor Gutenberg. Tem um excelente valor para o seu site do ponto de vista de longo prazo e ao criar ou redesenhar um site. Os blocos de Gutenberg oferecem uma grande variedade de estilos, no entanto, você pode encontrar mão Código do WordPress para envolver texto em imagens.
Qual é a sua opinião sobre o bloco de mídia e texto? Você já usou? Gosta de trabalhar com isso? Deixe-nos saber nos comentários abaixo.
Geralmente eu gosto do sistema de blocos, mas a menos que esteja faltando algo, isso é um passo atrás. No momento, estou procurando simplesmente flutuar uma imagem para a esquerda ou para a direita e fazer com que o texto seja quebrado como realmente deveria ser tão fácil de fazer, mas parece que o WordPress simplesmente não quer que isso aconteça. Por que não? Usar o bloco de mídia e imagem só funciona se o texto tiver o comprimento certo. Uma página como esta, por exemplo, não quer ser refeita com um espaçamento estranho entre os parágrafos se o texto não for exatamente do tamanho certo para o tamanho da imagem.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Olá,
Muito obrigado por seu feedback. Parece uma ideia muito boa, portanto, gostaria de pedir que você nos desse um minuto do seu tempo para responder a 4 perguntas simples: https://aitthemes.typeform.com/to/vc7arn que podem ajudar nossa equipe a criar produtos melhores com recursos exclusivos mais rapidamente.
Muito obrigado pelo seu tempo e compreensão.
Atenciosamente!
Zlatko
equipe AIT
Sim, não consigo quebrar o texto. Essas combinações de blocos de texto parecem inúteis.
Essa ideia é péssima como a única maneira de inserir imagens em um blog – não consigo fazer com que o texto fique bem ajustado e não fique do mesmo tamanho, não importa o que eu faça. Boa ideia para CERTAS situações, mas não para tudo. Às vezes, você só quer uma imagem com os parágrafos envolvendo-a, em vez de dizer algo sobre a imagem.
Como adicionar wrapper e usar conteúdo em largura total yar seriamente como cobrir completamente e depois colocar contêiner nele .. o construtor é muito confuso como adicionar wrap container editor muito ruim yar
Olá,
obrigado por seus elogios. Sinta-se à vontade para conferir nossa página de blog https://www.ait-themes.club/blog/ onde você encontrará muitas dicas úteis sobre como escrever postagens atraentes e úteis.
Atenciosamente!
Zlatko
equipe AIT
Olá Abdur,
Muito obrigado pelo seu feedback, é muito apreciado por nossa equipe!
Atenciosamente.
Zlatko
equipe AIT
Estou com a mesma dificuldade de várias pessoas neste tópico. no passado, eu era capaz de quebrar facilmente o texto em torno de uma imagem como em nossa página “sobre nós”, onde temos fotos e biografias. talvez eu estivesse usando o editor antigo. Eu não me lembro. mas agora estou tentando atualizar nosso site com novas fotos e biografias e não consegui encontrar uma maneira de quebrar o texto facilmente como em nossas combinações anteriores de biografia/foto. Tentei mudar para o editor clássico, mas o site me avisou que eu tinha seções de “novo editor de blocos” e tive que ficar com o modo de edição mais recente. você pode me dizer como fazer com que nossas novas biografias e fotos se pareçam com nossas postagens anteriores? obrigado.
Ei,
Se você deseja desativar o Gutenberg e continuar com o editor clássico do WordPress, considere um plug-in da equipe principal do WordPress que permite que você faça isso com o “Plugin do Editor Clássico”.
Atenciosamente!
Zlatko
equipe AIT
Para aqueles que desejam apenas um texto simples envolvendo a imagem, você pode fazer isso inserindo o Bloco de Texto Clássico (baseado na primeira parte dos Blocos ao clicar em Procurar. Você pode usar o editor clássico em um único bloco e sim , que permite inserir uma imagem e depois escolher a opção de embrulho. Problema resolvido 🙂
OBRIGADO London SEO Guy!!! Uma solução simples, mas eu tinha esquecido!
E então… basta usar a opção Convert to Blocks.
Como isso funciona, o Block Editor tem a capacidade, mas não consegue descobrir como configurá-lo corretamente. Enquanto isso, esse fudge funciona.
Mesmo problema aqui. Esta nova versão é horrível - não há como quebrar o texto corretamente ou até mesmo tornar a foto menor, a menos que você queira apenas recortar.
Sou capaz de envolver meu texto em torno de uma imagem no editor de blocos do WordPress. Parece do jeito que eu quero que pareça em "Pré-visualização". No entanto, quando publico meu blog e e-mails do WordPress para meus seguidores, eles o recebem com a imagem no topo e o texto abaixo da imagem. Isso também acontece em computadores de mesa, não apenas em pequenos telefones celulares. Quero embrulhado, não empilhado.
Olá,
Obrigado por escrever. O bloco não envolverá o texto em torno da imagem no WordPress como seria de esperar. Por favor, dê uma olhada nas seguintes instruções, pois você pode achá-las úteis: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Atenciosamente!
Zlatko
equipe AIT
Eu faço tudo isso e meu blog se encaixa perfeitamente no Preview. Quando eu publico, fica ótimo na página do meu blog. Mas quando o WordPress envia por e-mail para meus seguidores e eles abrem esse e-mail, eles não o veem embrulhado. As fotos estão no topo do texto. É muito pouco profissional. Nunca tive esse problema com o antigo Classic Editor. Agora que estou usando o Block Editor, ele não permite que eu volte para o Classic Editor, embora haja uma opção Classic para clicar.
Olá,
Obrigado por escrever.
Gostaríamos de pedir que você verifique nossa base de conhecimento e/ou documentação com tutoriais em vídeo:
https://www.ait-themes.club/ait-themes-documentation/
Ou sinta-se à vontade para postar perguntas técnicas diretamente em nosso sistema de tíquetes de suporte dedicado. Faça login na sua conta em https://system.ait-themes.club/support/add-question.
O Suporte ao Cliente é fornecido durante os dias úteis, das 8h às 17h, horário da Europa Central.
Além disso, existe um plug-in que permite usar o editor anterior. Você deve instalar e ativar o “editor clássico”.
Sinceramente!
Zlatko
equipe AIT
Discordo que isso seja superior à edição clássica, pois as opções são mais limitadas. Acho que esse bloco, por usar fontes diferentes e ser mais largo que um bloco de texto, é visualmente chocante. Ser capaz de quebrar o texto suavemente em torno de uma imagem, mantendo as mesmas configurações de fonte, tamanho e margem, traz o profissionalismo de uma página de revista. Este é apenas um exemplo de por que estou profundamente desapontado com esta versão do wordpress.
Oi Terence
Obrigado por sua opinião. Você já experimentou nossa versão de teste Citadela? Temos alguns blocos exclusivos que podem ajudá-lo a ajustar textos e imagens. De qualquer forma, você pode testar a versão completa – todos os recursos, gratuitamente.
Tenha um bom dia.