• Cadastro
  • Fóruns
  • Manual
  • Tradução
  • Tutoriais
  • OpenAtrium
  • Eventos
  • Ofertas de Emprego
Início

Login do usuário

  • Criar uma conta
  • Recuperar senha

Pesquisa no site

Google

Assine o RSS do Drupal-BR

RSS dos itens mais ativos

RSS do conteúdo

RSS dos comentários

Lista de Discussão

Drupal-BR

Download

Últimas versões

Drupal 7.12Drupal 6.22

Contribuições

Módulos Temas Tradução

Itens ativos

  • Lightbox e thickbox sem efeito algum
  • Sistema de atendimento, similar a suporte por tickets. Webform, Support ticketing system ou outro?
  • Não consigo habilitar o módulo JQueryUI
  • Abrir page_comment.tpl.php no layout admisnitrativo
  • Topic locked - Como configurar advanced forum para evitar isso?
  • Drupal, CMS e sistemas... É possível?
  • Correção de erros em site de vendas
  • Freelance Drupal 7 - $1.000 mensais
  • Proposta de trabalho Tech For/São Paulo- Analista Programador Drupal
  • [Resolvido] Sumiu título de content type
Veja mais
Início » Fórum » Suporte » Drupal

Tutorial - Mudando a visualização de um node com o Panels

Às vezes você precisa exibir um determinado tipo de conteúdo com uma aparência um pouco mais trabalhada, para valorizar o seu conteúdo. Com o Drupal isso pode ser feito de várias formas, e nesse tutorial vamos ver uma, usando o módulo Panels.

O que vamos fazer

Esse tutoria irá mostar como exibir partes de um determinado tipo de conteúdo em duas colunas como no exemplo mostrado abaixo.

foto do exemplo

Nesse exemplo estamos mostrando, em duas colunas, o conteúdo que seria exibido um embaixo do outro. É esse exemplo que vamos reproduzir.

Pré requisitos

Antes de começar você deve ter o Drupal instalado, bem como o Módulo Panels e suas dependências. Não vou cobrir aqui a instalação apenas o uso dos mesmos.
Para esse tutorial também habilitei o módulo blog e criei posts para blog, mas isso não é obrigatório

Mãos à obra

Após ter instalado tudo, o primeiro precisamos criar algum conteúdo.

Depois de criar conteúdo, acesse a página de gestão de Painéis em Administrar > Construção do site > Páginas e procure pelo painel node_view e clique em Editar para esse painel.

linha a habilitar

Você será direcionado à tela de edição desse painel. Como ele é um painel zerado, você precisa adicionar uma variante para ele. Isso irá, efetivamente, criar o visual que desejamos.

Para isso, clique no link Add a new variant

como adicionar uma variante

Ao adicionar uma variante lhe será solicitado que dê um título administrativo (para que você a localize quando for necessário) a ela, que escolha um tipo de variante (que no caso será Panel) e quais recursos opcionais você deseja. No caso, marque os dois itens padrão (Selection Rules e Contexts).

o que escolher para a variante

O próximo passo é escolher as regras de seleção (Selection Rules) para esse painel. No caso, eu escolhi uma regra por tipo, você pode escolher a que melhor lhe interessar.

escolhendo a regra de seleção

Caso você tenha feito como eu, ele irá te solicitar a quais os tipos de conteúdo você deseja atrelar esse painel. Eu escolhi Post de blog e Artigo, escolha qual lhe for mais conveniente.

escolhendo tipos

O passo seguinte você poderá adicionar os contextos. Como editamos um painel com contexto já pré-configurado (o contexto é o node) podemos só continuar para a tela seguinte.

escolhendo contexto

Em seguida, escolhemos o layout. Para o meu exemplo escolhi um layout de 2 colunas. Você pode escolher qual achar melhor.

escolha de layout

Estamos quase no fim! Agora vamos escolher o que queremos exibir em cada uma das regiões do nosso painel.

conteúdo para as regiões

No meu exemplo, escolhi para o pane da esquerda o conteúdo do node e para o da direita os comentários do node. Mais uma vez, fica a seu critério escolher o que achar melhor.

escolhendo o conteúdo

Após isso você precisará clicar em Create variant e por fim no botao Salvar que fica logo mais abaixo.

Pronto, com isso você terá o resultado abaixo para os tipos de conteúdo que você escolheu mudar a visualização.

foto do exemplo

Comentários e sugestões são bem vindas. Abaixo você pode baixar essa variante para pode importar, caso deseje.

AnexoTamanho
Exportação da variante2.34 KB
‹ URL Interna Espaço Blocks ›
‹ Tutorial - Customizando a caixa de busca acima Tutorial : Campos de um conteudo em forma de tabs ›
Enviado por rafael em seg, 12/07/2009 - 15:33
  • Drupal
  • 6.x
  • Versão para impressão
  • Se logue ou se registre para poder enviar comentários
  • 6369 leituras
Em sex, 07/02/2010 - 17:28 thigove disse:

muito bom...
mas ainda o panels é um mistério para mim... mas valeu, vou continuar estudando

Thiago Gomes Veríssimo

  • Se logue ou se registre para poder enviar comentários
Em qui, 12/30/2010 - 09:59 nuvenus disse:

Muito bom o tutorial... simplificou muito para muita gente!

amo muito tudo isso!

  • Se logue ou se registre para poder enviar comentários
Em qua, 11/30/2011 - 09:43 Gra disse:

Adorei o tutorial me ajudo demais. Valeu mesmo. Alguém pode me ajuda na parte de criar um link expandido, o link não expandi, ou ele fica com o link filho fixo ou ele oculta, ele não faz a função como teria quer como vejo nos links normalmente, que quando se clica em cima ele se expandi aparecendo os filhos. Desde já obrigada

  • Se logue ou se registre para poder enviar comentários

Este site é feito, orgulhosamente, com Drupal. Gentilmente hospedado por HostSH