imagens lado a lado com legendas e link
-
Olá pessoal, está é minha primeira postagem, sempre resolvi minhas dificuldades pelos forum.
Fazem 3 dias que busco solucionar meu problema e nao consigo.
Gostaria de usar imagens lado a lado com texto e link como modelo do link
http://conectparis.com.br/servicos.phpAlguém pode me ajudar? Já tentei o Nextgen mas nao consegui o mesmo
Resultado.Obrigado, vale ressaltar que não sou um expert 🙂
-
Olá,
No caso seriam cada post lado a lado? Isso é mais questão de CSS, só procurar no arquivo do tema o container dos posts e no styles.css modificar para ficar assim ex.:
.post-container { width:30%; float:left }Olá Diana, obrigado… ja meio que entrando no desespero. 🙂
seria fotos pequenas com um pequeno texto de apresentação embaixo que linka para a matéria (página) completa.
Não consigo fazer isso de jeito algum. é igual ao link que postei.
http://conectparis.com.br/servicos.phpele quer deste mesmo jeito. foto com pequeno texto que leva para página com matéria completa. No Nextgen ele tem a função, mas não permite texto com link 🙁
Obrigado se vc puder me ajudar… para não parar fiz pelo photoshop modelo, mas o problema é que quando usar o translator não vai rolar.
segue site que estou fazendo:
luniverstours.com
problema na página /regiões
eu fiz como deveria ficar, sendo que usei imagens, se vc puder navegar e entender meu problema agradeceria demais.Também estou com o mesmo problema e, realmente o nextgen não permitiu colocar texto com link em baixo, ou ao lado das imagens.
Alguém já passou por isso e pode nos ajudar?
Muito Obrigado.
Rafael Schiavo.
Oi Rafael, depois de apanhar bastante consegui, resolver.
veja como ficou no site que estou fazendo.
http://luniverstours.com/regioes-2
fiz com tabela.
abraço,
lembrando que vc ainda vai encontrar diferenca em algumas fontes pois o site ainda esta em construção 😉
ola amigo claudio estou começando agora com wp…ok
eu tambem estou sofrendo com este negocio de imagem alinhada, consegui um plugin, mas eu quero fazer com codigos, como voce fez o seu?Por gentileza ajuda ai…ok
Estou com um problema semelhante mas estou usando o plugin simple lightbox, também sou usuário novato….rs
Olá pessoal, seguinte, a única forma que consegui para resolver isso foi usando tabela.
vejam no site que fiz como ficou: luniverstours.com
qualquer dúvida é só perguntar.
abraço a todos.
a esqueci, a tabela você cria no editor de texto. 😉
um jeito que consegui foi assim pessoal mas ainda esta meio sem controle,
preciso ter o controle total,
Se o Claudio postase ai sua tabela para gente ver!!!fiz assim:
<center>
<div style=”float:left; width:33%”>foto</div>
<div style=”float:left; width:33%”>foto</div>
<div style=”float:left; width:33%”>foto</div>
<div style=”clear:both”>foto ou nao</div>
</center><table border=”1″ cellpadding=”1″ cellspacing=”1″ style=”width: 500px;”>
<tbody>
<tr>
<td>
<p>
<img alt=”” src=”http://luniverstours.com/wp-content/uploads/image/arredores%20150×150/versailles-franca.png” style=”width: 150px; height: 150px;” />
</p><p>
Versalhes, conheça o símbolo do apogeu da realeza francesa, com seus espaços suntuosos.Leia mais
</p>Obrigado Claudio , aindei estudando um pouco,e o pessoal recomenda nao usar tabelas, vou continuar estudando para emplementr mais codigos de controles para minhas imagens
Segue melhorias:
para começar uma nova coluna com 3 use o código assim: <div style=”clear:both”>
<center>
<div style=”float:left; width:33%”>conteudo ou imagem aqui</div>
<div style=”float:left; width:33%”>conteudo aqui</div>
<div style=”float:left; width:33%”>conteudo aqui</div>
<div style=”clear:both”>
<div style=”float:left; width:33%”>conteudo aqui</div>
<div style=”float:left; width:33%”>conteudo aqui</div>
<div style=”float:left; width:33%”>conteudo aqui</div>
</div>
qualquer ajuda de mais codigos dentro desta forma sera bem vinda…
opa.. olha so oque eu descobri…
aqui coloquei 2 fila de imagens.
cada fila com 4 imagens:<div class=”art-content-layout-wrapper layout-item-0″>
<div class=”art-content-layout layout-item-1″>
<div class=”art-content-layout-row”>
<div class=”art-layout-cell layout-item-2″ style=”width: 25%” >
<h4>texto aqui</h4><p style=”text-align: center;”>
<img width=”102″ height=”102″ alt=”” src=”imagem aqui”></p></div><div class=”art-layout-cell layout-item-3″ style=”width: 25%” >
<h4>texto aqui</h4><p style=”text-align: center;”>
<img width=”102″ height=”102″ alt=”” src=”imagem aqui” class=””></p></div><div class=”art-layout-cell layout-item-2″ style=”width: 25%” >
<h4>texto aqui</h4><p style=”text-align: center;”>
<img width=”102″ height=”102″ alt=”” src=”imagem aqui”></p></div><div class=”art-layout-cell layout-item-3″ style=”width: 25%” >
<h4>texto aqui</h4><p style=”text-align: center;”>
<img width=”102″ height=”102″ alt=”” src=”imagem aqui” class=””></p></div>
</div>
</div>
</div><div class=”art-content-layout-wrapper layout-item-4″>
<div class=”art-content-layout layout-item-1″>
<div class=”art-content-layout-row”>
<div class=”art-layout-cell layout-item-3″ style=”width: 25%” >
<h4>texto aquii</h4><p style=”text-align: center;”>
<img width=”102″ height=”102″ alt=”” src=”imagem aqui”></p></div><div class=”art-layout-cell layout-item-2″ style=”width: 25%” >
<h4>texto aqui</h4><p style=”text-align: center;”>
<img width=”102″ height=”102″ alt=”” src=”imagem aqui”></p></div><div class=”art-layout-cell layout-item-3″ style=”width: 25%” >
<h4>texto aqui</h4><p style=”text-align: center;”>
<img width=”102″ height=”102″ alt=”” src=”imagem aqui” class=””></p></div><div class=”art-layout-cell layout-item-2″ style=”width: 25%” >
<h4>texto aquii </h4><p style=”text-align: center;”>
<img width=”102″ height=”102″ alt=”” src=”imagem aqui” class=””></p></div>
</div>
</div>
</div>OBS: dentro do alt vai o nome da imagen
asimm:
alt=”nome da imagen”e onde esta escrito imagem aqui é o endereço da imagem
assim: local
http://127.0.0.1/wordpress/wp-content/uploads/minhasimagens/imagem.jpgou no servidor
http://www.seuservidordehospedagen/wordpress/wp-content/uploads/minhasimagens/imagen.jpgmá ou meno istooo
O tópico ‘imagens lado a lado com legendas e link’ está fechado para novas respostas.