Como dividir a área do post em 2 ou 3 colunas - * Blog Elaine Gaspareto *

Como dividir a área do post em 2 ou 3 colunas

em 03/08/2017

Como dividir a área do post em 2 ou 3 colunas

Tempos atrás eu mostrei aqui no blog como dividir um gadget em 2 colunas.
Relembre:

No tutorial em questão um leitor me perguntou sobre dividir a área dos posts.
Não sabe do que eu estou falando?
Veja:


COLUNA 1
Oi!
Eu sou o texto de exemplo da Coluna 1.
COLUNA 2
Olá!
Eu sou o texto de exemplo da Coluna 2.

COLUNA 3
Oi, mig@s!
Eu sou o texto de exemplo da Coluna 3.

Esse truque é bem legal para quando a gente quer dividir o texto do post, fazer um charminho, criar 3 listas alinhadas, etc...
Eu trouxe hoje o modo de fazer isso; na verdade é muito simples pois trata-se apenas de truque de CSS.
Quer aprender? Vem comigo!

Para começar abra a página e copie o código necessário à execução do tutorial:

Copiar o código

No editor de posts (onde você escreve suas postagens) clique em HTML, no alto do editor.
Essa ação colocará o seu editor de texto em modo html.
Aí cole o código que pedi pra copiar e a seguir clique em Escrever, no alto do editor de texto.
A sua área do post já aparecerá dividida e aí é só escrever o que desejar em cada coluna.
Simples e sem complicação.

Caso queira apenas duas colunas ficaria assim:



E se, ao invés de texto, eu quiser alinhar imagens na área dividida? Pode?
Sim, pode!
Basta colcar o código que forneci e no lugar do texto você carrega as imagens.
Importante: a única regrinha é que a soma da largura das imagens tem que ser menor que a largura total de sua área de postagens, ok?
Ficaria mais ou menos assim:




Legal, né?
E se quiser escrever abaixo ou acima das imagens é possível, exatamente como se fosse a área sem divisão.
Atente apenas ao tamanho de cada imagem: a soma delas não pode ser maior que a largura da área do post.


Gostou do tutorial rapidão?
Experimente em seu blog, ou melhor ainda: salve esse post em seus favoritos pois a gente nunca sabe quando vai precisar.
Não é?
1 comentários via Blogger
comentários via Facebook

Um comentário:

  1. Muito bom, Elaine! E como colocar o texto ao lado da imagem e ao terminar o tamanho da imagem o texto continuar abaixo dela. Já vi em alguns blogs, mas não consegui fazer. Você poderia ensinar, por favor?! Obrigada, mais uma vez! Beijos!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



No Instagram