Como Alinhar Imagens Lado-a-Lado no WordPress

alinhamento da Imagem é uma luta constante para o WordPress, o blogger.

esta postagem é para quem passou mais tempo do que gostaria de admitir mexer no alinhamento e posicionamento da imagem no editor.

os dois melhores métodos para alinhar imagens

existem duas técnicas que você deve considerar para colocar imagens próximas umas das outras. Vou compartilhar como usar cada um, bem como os prós e contras incluídos.

alinhar imagens com uma galeria

o método mais confiável para colocar imagens lado a lado é usar uma galeria WordPress.Se você nunca criou uma galeria antes, siga este tutorial sobre como criar galerias.

o truque é usar uma versão de tamanho médio das imagens e escolher duas colunas, mesmo se você estiver incluindo apenas duas imagens. O resultado será parecido com isto:

 captura de tela de uma galeria de exemplo

captura de tela de uma galeria de exemplo

ao contrário das imagens que você coloca em sua postagem, as galerias têm HTML especial que mantém as imagens próximas umas das outras. Esta estrutura torna mais fácil e menos trabalhoso alinhar as imagens em linhas/colunas.

Coloque imagens com códigos de acesso de coluna

se você não se importa em Adicionar um novo plugin ao seu site, o Column Shortcodes é uma ótima solução para alinhar imagens.

 captura de tela da página do plugin Column Shortcodes

Column Shortcodes é um daqueles plugins incríveis que não enchem seu site com novos menus. Na verdade, a única coisa que ele adiciona ao seu painel de administração é esse botão conveniente acima do editor.

O botão adicionado por Coluna Shortcodes

O botão adicionado por Coluna de códigos de acesso

Para mostrar como ele funciona, vou criar uma única linha de três imagens.

como usar códigos de acesso de coluna

o primeiro passo é colocar o cursor em uma linha vazia no editor. Em seguida, clique no botão shortcode e selecione uma opção de coluna.

 exibindo como adicionar um shortcode coluna
criando uma linha com três colunas.

repita esta etapa para adicionar uma segunda coluna 1/3 e, em seguida, repita mais uma vez, mas desta vez usando a opção de um terço (último). O resultado são os seguintes códigos de acesso adicionados ao editor.

códigos de acesso no editor

Shortcodes no editor

Se você nunca usou shortcodes antes, você pode querer seguir este tutorial primeiro.

como você pode ver, cada shortcode tem uma tag de abertura e fechamento. Agora você pode colocar uma imagem dentro de cada um shortcode, como este:

Imagens de códigos de acesso no editor

Imagens de códigos de acesso no editor

Parece uma bagunça, não é?

isso ocorre porque os códigos de acesso não podem estilizar as imagens no editor, mas não é um problema. Depois de visualizá-los no site, eles se alinharão perfeitamente em colunas, assim:

Exemplo de imagens colocadas em colunas

Exemplo de imagens colocadas em colunas

Coluna de códigos curtos em comparação às galerias

Enquanto os códigos de acesso não se apresentar bem no editor, como galerias e pode ser mais um desafio para trabalhar com, você também terá um pouco mais de controle. Por exemplo, galerias de força de todas as imagens para ligar para:

  • arquivo de Mídia
  • Anexo página
  • Nada

Com as colunas plugin, as imagens podem ter URLs personalizados e cada um link para um tipo diferente de página.

você também pode misturar e combinar as colunas. Por exemplo, você pode colocar uma imagem em um shortcode de 2/3 ao lado de uma imagem com um shortcode de 1/3 coluna.

Por Que Você não deve usar opções de alinhamento

esses métodos produzirão os layouts desejados sem todas as dores de cabeça.

as galerias do WordPress são a maneira mais simples e fácil de alinhar imagens seguidas. No entanto, códigos de acesso de coluna é uma boa alternativa que fornece mais flexibilidade.Ambos funcionam tão bem porque colocam imagens em uma nova estrutura HTML. O HTML permite manter um layout lado a lado, independentemente da tela usada para visualizá-los.

há algo que eu perdi? Tem alguma pergunta? Publique um comentário abaixo.

Ben Sibley
Ben Sibley
Ben Sibley é um tema do WordPress designer & desenvolvedor, e fundador de Competir Temas.

Leave a Reply