Dica |
---|
Liberar na 1.5. Revisão Ok. |
Índice
Índice |
---|
maxLevel | 4 |
---|
outline | true |
---|
style | none |
---|
exclude | .*ndice |
---|
|
Objetivo
O objetivo deste guia é demonstrar como funciona a modificação de layout de uma página do fluig.
Modificando o layout de uma página
É possível mudar o layout de qualquer página editável no fluig, tornando a edição de páginas (em especial a “home”) mais flexível. Isso também significa que cada comunidade pode ter um layout completamente personalizado.
Escolhendo um novo layout
A seguir são apresentados os passos para efetuar a alteração do layout de páginas.
Deck of Cards |
---|
effectDuration | 0.5 |
---|
id | samples |
---|
history | false |
---|
effectType | fade |
---|
|
Card |
---|
default | true |
---|
id | 1 |
---|
label | Passo 1 |
---|
| Figura 1 - Opção Editar página |
Card |
---|
| - Ao mudar a página para o modo de edição, acesse novamente o menu Configurações. Você notará que há uma nova opção chamada "Trocar layout".
![](/download/attachments/185745580/im2.png?version=1&modificationDate=1427118141000&api=v2)
Figura 2 - Opção Trocar layout
|
Card |
---|
| - A janela de opções para troca de layout aparecerá já trazendo o layout atual selecionado e o botão "Aplicar layout" desabilitado.
![](/download/attachments/185745580/image2015-3-23%2011%3A42%3A29.png?version=1&modificationDate=1427121667000&api=v2)
Figura 3 - Opções de layouts |
Card |
---|
| Figura 4 - Aplicação da alteração de layout |
Card |
---|
| Aplicando a mudança, a tela de escolha é fechada e os widgets são redistribuídos na página obedecendo o novo layout. ![](/download/attachments/185745580/im5.png?version=1&modificationDate=1427118150000&api=v2)
Figura 5 - Novo layout da página
|
Card |
---|
| Ao publicar a página, ela aparecerá com os widgets renderizados obedecendo a nova ordenação - lembrando que basta arrastar os widgets entre os slots para que eles se adequem à disposição desejada. ![](/download/attachments/185745580/im6.png?version=1&modificationDate=1427118153000&api=v2)
Figura 6 - Nova versão da página publicada Versão Anterior ![](/download/attachments/185745580/im1.png?version=1&modificationDate=1427118137000&api=v2)
Figura 7 - Versão anterior da página que teve o layout alterado
|
|
...