Conteúdo do Modelo

Passo 2 - Modelo >

Conteúdo do Modelo

Previous pageReturn to chapter overviewNext page
Exibir/Ocultar o texto oculto

Após ter escolhido trabalhar  o um modelo padronizado ou um modelo vazio e ter definido o Configurações do Modelo, você pode usar os recursos nesta janela para personalizar o modelo ainda mais trabalhando no cabeçalho, rodapé e barra lateral (se houver uma), adicionando diversos tipos de conteúdo tais como menus, textos, imagens, animações, álbuns, código HTML, campos de busca e links.

Você pode trabalhar no cabeçalho, no rodapé e barra lateral do modelo gráfico tanto para a exibição em Desktop quanto, caso esteja trabalhando em um website responsivo, nos diversos viewports que correspondem aos breakpoints que tiver configurado.

? preciso selecionar a op??o Site responsivo na janela Resoluções e Design Responsivo se quiser criar um website responsivo.

Clique para expandir/recolher

A janela Conteúdo do Modelo está organizada nas abas Cabeçalho, Rodapé e Barra lateral: os comandos e opções para todas as três abas são idênticos.

A aba Barra lateral só está presente se a Cabeçalho, rodapé e barra lateral à esquerda ou a Cabeçalho, rodapé e barra lateral à direita tiver sido selecionada como Tipo de estrutura na janela Estrutura do Modelo.

Clique para expandir/recolherReferência: O editor de modelo

Se tiver escolhido criar um website responsivo, a janela Conteúdo do Modelo exibe a Barra Responsiva que você também verá na janela Resoluções e Design Responsivo.

A Barra Responsiva exibe todos os breakpoints que tiverem sido estabelecidos e os diversos intervalos entre cada breakpoint: clique em um intervalo para selecioná-lo e defina o cabeçalho, o rodapé e a barra lateral no viewport correspondente.

Além da Barra Responsiva, esta janela também inclui o editor gráfico, com uma Barra de ferramentas e, abaixo dela, a área de trabalho que automaticamente exibe a imagem de fundo do cabeçalho ou rodapé do modelo que tiver escolhido (padronizado ou personalizado). A imagem é exibida na escala 1:1, e você poderá rolar, se necessário. Quaisquer alterações que fizer neste editor serão exibidas em tempo real na imagem.

Há uma Barra de status imediatamente abaixo da imagem que fornece as seguintes informações:

Posição:  exibe as coordenadas x e y do canto superior direito do objeto selecionado, em relação à área ocupada pelo cabeçalho, pelo rodapé ou barra lateral.
Tamanho: informa a altura e a largura em pixels do objeto selecionado.

Há uma lista com todos os objetos que podem ser usados no cabeçalho, rodapé e barra lateral do modelo sob a barra de status.

Estes objetos são os usados para compor as páginas (ver Passo 4 - Páginas): eles são fáceis de identificar, graças aos filtros, e há uma pré-visualização disponível para cada um deles.

Clique para expandir/recolherReferência: A lista de objetos disponíveis

Para inserir um objeto no cabeçalho rodapé ou barra lateral do modelo, selecione o ícone correspondente a partir da lista e arraste & solte para o editor, na posição desejada.

Para tornar seu trabalho mais fácil, os objetos podem ser filtrados e gerenciados com estes comandos:

Lista de Filtragem

Exibe uma lista dos filtros que você pode usar para organizar os objetos e facilitar sua identificação. Você pode, por exemplo, exibir todos os Main Objects Page ou todos os Main Objects model.

Exibir Gerenciamento de Objetos

Abre a janela Gerenciamento de Objetos onde você pode instalar, desinstalar e atualizar todos aqueles objetos que não estavam incluídos na instalação inicial do Programa.

Os objetos que já estão incluídos em Main Objects Page e em Main Objects model são:

Uma vez que tenha inserido um objeto no cabeçalho, rodapé ou barra lateral do modelo, clique no botão Conteúdo (ou dê um duplo clique no objeto) para abrir a janela onde irá, de fato, criá-lo.

Clique para expandir/recolherReferência: As opções da barra de ferramentas

Quando tiver adicionado os objetos que precisa na área de trabalho do editor de modelo, você poderá selecioná-los e usar as opções na barra de ferramentas para trabalhar neles.

Você pode fazer seleções múltiplas:

segure a tecla CTRL ou SHIFT e clique nos objetos que deseja selecionar
clique na área de trabalho e, segurando o botão esquerdo do mouse, mova o mouse para desenhar um retângulo que inclua todos os objetos que deseja selecionar.

Os comandos na barra de ferramentas são:

Cortar [CTRL+X] - Copiar [CTRL+C] - Colar [CTRL+V]

Para cortar, copiar ou colar o objeto selecionado.

Desfazer [CTRL+Z] - Refazer

Estes comandos desfazem/refazem a última operação a ser feita/desfeita.

Trazer para a frente - Enviar para trás

Para trazer o objeto selecionado para o primeiro plano ou levar para segundo plano (para mostrar o objeto sobre ou sob qualquer objeto sobreposto a ele).

Área de trabalho

Abre outra janela onde poderá especificar a aparência da área de trabalho. As opções são:

Cor do plano de fundo: você pode configurar a cor de fundo da área de trabalho como sendo Clara ou Escura, de modo que os objetos inseridos possam ser melhor visualizados.
Habilitar grade: se a grade estiver ativa, será mais fácil posicionar e dimensionar os objetos na área de trabalho. Você pode definir o Tamanho da grade da grade.

Organizar

Indica como os objetos serão arrumados na área de trabalho. Os comandos disponíveis são:

Posição e tamanho Para especificar as coordenadas da posição e tamanho do objeto selecionado. A opção Manter proporções mantém as proporções originais do objeto se você redimensioná-lo.
Alinhamento horizontal / Alinhamento vertical: ficam ativos se pelo menos 2 objetos tiverem sido selecionados. Permitem alinhar os objetos horizontalmente (esquerda, direita ou no centro) ou verticalmente (no alto, no centro, embaixo).
Distribuir: fica ativo se pelo menos 3 objetos tiverem sido selecionados. Organiza os objetos de modo que tenham o mesmo espaço entre eles, horizontal ou verticalmente.

Gerenciamento de objetos ocultos

Esta opção fica disponível se estiver criando um website responsivo. Você pode indicar se o objeto selecionado ficará visível ou invisível no viewport em que estiver trabalhando (que é definido com a Barra Responsiva).

Clique no triângulo no botão para abrir um menu com estes itens:

Ocultar para este viewport: o objeto selecionado ficará invisível no viewport atual.
Ocultar para este viewport e os seguintes: o objeto selecionado ficará invisível no viewport atual e em todos os viewports das resoluções abaixo desta.
Gerenciamento de objetos ocultos para este viewport: uma janela se abre com uma lista com todos os objetos que ficarão invisíveis no viewport atual. Uma pré-visualização fica disponível para cada um, e você poderá restaurar a visibilidade aqui.  

Inserir o conteúdo do Objeto selecionado

Esta opção abre uma janela onde você pode criar o objeto selecionado dentre os que estão no cabeçalho ou rodapé do modelo. A janela varia de acordo com o tipo de objeto (texto, imagem, etc.).

Alguns dos objetos no cabeçalho e rodapé, por exemplo os objetos animação   e código HTML que você adicionar, só ficarão visíveis quando o website for aberto em um navegador.

 


Melhores práticas:

-

Como trabalhar com modelos

-

Onde encontrar novos modelos para o WebSite X5

-

Como criar um website Responsivo no WebSite X5 | Como definir o modelo


Maiores informações:

-

Como o mecanismo de busca nativo funciona no WebSite X5