Suporte » Plugins » imagens lado a lado com legendas e link

  • Resolvido claudiopinto72

    (@claudiopinto72)


    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.php

    Alguém pode me ajudar? Já tentei o Nextgen mas nao consegui o mesmo
    Resultado.

    Obrigado, vale ressaltar que não sou um expert 🙂

Visualizando 15 respostas - 1 até 15 (de um total de 16)
  • 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
    }

    Criador do tópico claudiopinto72

    (@claudiopinto72)

    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.php

    ele 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.

    Criador do tópico claudiopinto72

    (@claudiopinto72)

    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,

    Criador do tópico claudiopinto72

    (@claudiopinto72)

    lembrando que vc ainda vai encontrar diferenca em algumas fontes pois o site ainda esta em construção 😉

    oliiniciante

    (@oliiniciante)

    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

    Htm eletronica

    (@htm-eletronica)

    Estou com um problema semelhante mas estou usando o plugin simple lightbox, também sou usuário novato….rs

    Criador do tópico claudiopinto72

    (@claudiopinto72)

    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.

    Criador do tópico claudiopinto72

    (@claudiopinto72)

    a esqueci, a tabela você cria no editor de texto. 😉

    oliiniciante

    (@oliiniciante)

    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>

    Criador do tópico claudiopinto72

    (@claudiopinto72)

    <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&#8221; 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>

    oliiniciante

    (@oliiniciante)

    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>

    oliiniciante

    (@oliiniciante)

    qualquer ajuda de mais codigos dentro desta forma sera bem vinda…

    oliiniciante

    (@oliiniciante)

    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>

    oliiniciante

    (@oliiniciante)

    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.jpg

    ou no servidor
    http://www.seuservidordehospedagen/wordpress/wp-content/uploads/minhasimagens/imagen.jpg

    má ou meno istooo

Visualizando 15 respostas - 1 até 15 (de um total de 16)
  • O tópico ‘imagens lado a lado com legendas e link’ está fechado para novas respostas.