Editando template em grade

resumindoeducacao · Membro · julho 18, 2015 at 8:02 pm
Copiar link

Adicionar tema aos favoritos
Olá, eu gostaria de criar um blog com estilo de site de portifólio, ai eu gostaria de usar esse template pra ficar com um visual exatamente igual esse. Porém eu ja baixei o template e ja tentei configurar conforme as instruções mas nunca consigo deixar os posts em formato de grade e na página inicial como na imagem, ja faz dois dias que estou tentando então se alguém puder me ajudar agradeço.

O blog que eu preciso de ajuda é (visível apenas para usuários que efetuaram login).

palavraquesalva · Membro · julho 18, 2015 at 10:24 pm

Alguns temas só aceitam configurações avançadas se comprar algumas ferramentas disponibilizadas em Painel > loja. Eu não sei se é o caso do tema Sela.
Mas, com um pouco de conhecimento em HTML podemos simular um efeito semelhante, como no exemplo abaixo, com o uso da tag table:

<table>
<tr>
<td colspan="6" width="600" align="center"><a target="_blanc" href="http://wp.me/P48zDf-1"><img src="https://palavraquesalva.files.wordpress.com/2015/07/editor-wp-admin.gif" width="550" /></a></td>
</tr>
<tr>
<td colspan="2" width="200" height="150" align="center"><a target="_blanc" href="http://wp.me/s48zDf-2"><img style="margin:30px;" src="https://palavraquesalva.files.wordpress.com/2015/06/emoticon-007.gif" width="110" /></a></td>
<td colspan="2" width="200" height="150" align="center"><a target="_blanc" href="http://wp.me/p48zDf-sf"><img style="margin:30px;" src="https://palavraquesalva.files.wordpress.com/2015/06/emoticon-004.gif" width="110" /></a></td>
<td colspan="2" width="200" height="150" align="center"><a target="_blanc" href="http://wp.me/s48zDf-heresias"><img style="margin:30px;" src="https://palavraquesalva.files.wordpress.com/2015/06/emoticon-002.gif" width="110" /></b></td>
</tr>
<tr>
<td colspan="3" width="300" align="center"><a target="_blanc" href="http://wp.me/p48zDf-5H"><img style="margin:30px;" src="https://palavraquesalva.files.wordpress.com/2015/06/emoticon-002.gif" /></a></td>
<td colspan="3" width="300" align="center"><a target="_blanc" href="http://wp.me/p48zDf-Aq"><img style="margin:30px;" src="https://palavraquesalva.files.wordpress.com/2015/06/emoticon-006.gif" /></a></td>
</tr>
</table>

palavraquesalva · Membro · julho 18, 2015 at 10:28 pm
Copiar link
Para mais detalhes sobre HTML, clique no link abaixo.
http://wp.me/p48zDf-Ey
resumindoeducacao · Membro · julho 19, 2015 at 6:09 pm
Copiar link
É que é wordpress.com, eu não sei exatamente se dá para colocar esse código em algum lugar…
palavraquesalva · Membro · julho 19, 2015 at 6:18 pm
Copiar link
Dá sim.
Veja como fazer neste link: http://wp.me/p48zDf-Ey
resumindoeducacao · Membro · julho 20, 2015 at 9:55 pm
Copiar link
Obrigada por responder. Eu só não entendi direito todo o procedimento. No caso eu quero que apareçam pequenos resumos na página inicial que se clicada na imagem redirecione para a respectiva página clicada. No que eu tenho que manter a página em configurações > leitura > página estática, mas o que significa essa página inicial e página de posts?
resumindoeducacao · Membro · julho 20, 2015 at 9:57 pm
Copiar link
Ah perdão, você esta querendo dizer criar uma tabela invisível em um único post com imagens direcionadas para as páginas?
palavraquesalva · Membro · julho 20, 2015 at 10:33 pm
Copiar link
É isso mesmo. Até onde eu entendi este é o propósito nas explicações do autor do tema Sela.
palavraquesalva · Membro · julho 20, 2015 at 10:48 pm
Copiar link
Abaixo ou ao lado de cada imagem podem ser colocados textos resumos.
resumindoeducacao · Membro · julho 20, 2015 at 11:04 pm
Copiar link
Até agora só consegui formar esse código, mas o problema é que as imagens ficam muito pequenas…

————————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>
<table>

<tr>
<td>

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>
<div class=”entry-thumbnail”>

<img width=”360″ height=”242″ src=”https://selademo.files.wordpress.com/2014/08/mg_9438-1.jpg?w=360&h=242&crop=1″ class=”attachment-sela-grid-thumbnail wp-post-image” alt=”Chocolate ganache cupcakes”>
</div><!– .entry-thumbnail –>

<header class=”entry-header”>
<h1 class=”entry-title”>Chocolate ganache cupcakes</h1>
</header><!– .entry-header –>

<div class=”entry-summary”>
<p>All you need is love (and cupcakes)!</p>
</div><!– .entry-summary –>

</article>

</td>

<td>

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>
<div class=”entry-thumbnail”>

<img width=”360″ height=”242″ src=”https://selademo.files.wordpress.com/2014/08/mg_9438-1.jpg?w=360&h=242&crop=1″ class=”attachment-sela-grid-thumbnail wp-post-image” alt=”Chocolate ganache cupcakes”>
</div><!– .entry-thumbnail –>

<header class=”entry-header”>
<h1 class=”entry-title”>Chocolate ganache cupcakes</h1>
</header><!– .entry-header –>

<div class=”entry-summary”>
<p>All you need is love (and cupcakes)!</p>
</div><!– .entry-summary –>

</article>

</td>

</tr>

<tr>
<td>

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>
<div class=”entry-thumbnail”>

<img width=”360″ height=”242″ src=”https://selademo.files.wordpress.com/2014/08/mg_9438-1.jpg?w=360&h=242&crop=1″ class=”attachment-sela-grid-thumbnail wp-post-image” alt=”Chocolate ganache cupcakes”>
</div><!– .entry-thumbnail –>

<header class=”entry-header”>
<h1 class=”entry-title”>Chocolate ganache cupcakes</h1>
</header><!– .entry-header –>

<div class=”entry-summary”>
<p>All you need is love (and cupcakes)!</p>
</div><!– .entry-summary –>

</article>

</td>

<td>

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>
<div class=”entry-thumbnail”>

<img width=”360″ height=”242″ src=”https://selademo.files.wordpress.com/2014/08/mg_9438-1.jpg?w=360&h=242&crop=1″ class=”attachment-sela-grid-thumbnail wp-post-image” alt=”Chocolate ganache cupcakes”>
</div><!– .entry-thumbnail –>

<header class=”entry-header”>
<h1 class=”entry-title”>Chocolate ganache cupcakes</h1>
</header><!– .entry-header –>

<div class=”entry-summary”>
<p>All you need is love (and cupcakes)!</p>
</div><!– .entry-summary –>

</article>

</td>

</tr>
</table>
</body>
</html>
resumindoeducacao · Membro · julho 20, 2015 at 11:05 pm
Copiar link
Até agora só consegui formar esse código, mas o problema é que as imagens ficam muito pequenas…

————————————
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>
<table>

<tr>
<td>

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>
<div class=”entry-thumbnail”>

<img width=”360″ height=”242″ src=”https://selademo.files.wordpress.com/2014/08/mg_9438-1.jpg?w=360&h=242&crop=1″ class=”attachment-sela-grid-thumbnail wp-post-image” alt=”Chocolate ganache cupcakes”>
</div><!– .entry-thumbnail –>

<header class=”entry-header”>
<h1 class=”entry-title”>Chocolate ganache cupcakes</h1>
</header><!– .entry-header –>

<div class=”entry-summary”>
<p>All you need is love (and cupcakes)!</p>
</div><!– .entry-summary –>

</article>

</td>

<td>

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>
<div class=”entry-thumbnail”>

<img width=”360″ height=”242″ src=”https://selademo.files.wordpress.com/2014/08/mg_9438-1.jpg?w=360&h=242&crop=1″ class=”attachment-sela-grid-thumbnail wp-post-image” alt=”Chocolate ganache cupcakes”>
</div><!– .entry-thumbnail –>

<header class=”entry-header”>
<h1 class=”entry-title”>Chocolate ganache cupcakes</h1>
</header><!– .entry-header –>

<div class=”entry-summary”>
<p>All you need is love (and cupcakes)!</p>
</div><!– .entry-summary –>

</article>

</td>

</tr>

<tr>
<td>

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>
<div class=”entry-thumbnail”>

<img width=”360″ height=”242″ src=”https://selademo.files.wordpress.com/2014/08/mg_9438-1.jpg?w=360&h=242&crop=1″ class=”attachment-sela-grid-thumbnail wp-post-image” alt=”Chocolate ganache cupcakes”>
</div><!– .entry-thumbnail –>

<header class=”entry-header”>
<h1 class=”entry-title”>Chocolate ganache cupcakes</h1>
</header><!– .entry-header –>

<div class=”entry-summary”>
<p>All you need is love (and cupcakes)!</p>
</div><!– .entry-summary –>

</article>

</td>

<td>

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>
<div class=”entry-thumbnail”>

<img width=”360″ height=”242″ src=”https://selademo.files.wordpress.com/2014/08/mg_9438-1.jpg?w=360&h=242&crop=1″ class=”attachment-sela-grid-thumbnail wp-post-image” alt=”Chocolate ganache cupcakes”>
</div><!– .entry-thumbnail –>

<header class=”entry-header”>
<h1 class=”entry-title”>Chocolate ganache cupcakes</h1>
</header><!– .entry-header –>

<div class=”entry-summary”>
<p>All you need is love (and cupcakes)!</p>
</div><!– .entry-summary –>

</article>

</td>

</tr>
</table>
</body>
</html>
resumindoeducacao · Membro · julho 21, 2015 at 4:33 pm
Copiar link
Ah ja consegui, se alguém tiver alguma duvida no futuro esse foi o código que eu usei que eu praticamente copiei e colei do Sela mas tive que ajustar algumas coisas por que a foto estava ficando estranha. Ai é só copiar e colar quantas vezes quiser e ele forma a grade.

———————

<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>

<div class=”entry-thumbnail”>

</div>

<div class=”titulotexto”>

<div id=”text-4″ class=”widget titulo_texto” align=”center”>
<h1 class=”titulo-texto”>
Titulo
</h1>

<img src=” url da imagem de miniatura “>

<p> Resumo

Leia mais →

</p>

</div>
</div>
</article>
resumindoeducacao · Membro · julho 21, 2015 at 4:34 pm
Copiar link
`
<article id=”post-134″ class=”child-page post-134 page type-page status-publish has-post-thumbnail hentry with-featured-image has-post-thumbnail-prev”>

<div class=”entry-thumbnail”>
<a title=”Permalink to titulo do post ” href=” link que ao clicar sera redirecionado ” rel=”134″>

</a>
</div>

<div class=”titulotexto”>

<div id=”text-4″ class=”widget titulo_texto” align=”center”>
<h1 class=”titulo-texto”>
Titulo
</h1>

<a href=” link que ao clicar sera direcionado “>
<img src=” url da imagem de miniatura “>
</a>

<p> Resumo
<a href=” link que ao clicar no Leia Mais será direcionado “>
Leia mais →
</a>
</p>

</div>
</div>
</article>`

O tópico ‘Editando template em grade’ está fechado para novas respostas.

Editando template em grade

Não encontrou o que precisava?

Contate-nos

Navegue pelos nossos guias

Aplicativos móveis

Mídia social