Skip to main contentA listagem de páginas de um site pode ser acessada na barra lateral em
Content > Pages
.
Uma Page é um bloco fundamental na criação de um Site deco.cx que
normalmente terá várias Pages. Cada Page
consiste em:
- uma ou mais Sections configuradas, que podem
ser consideradas como componentes modulares que compõem o conteúdo da página.
- um nome: um nome significativo para entender o que essa página representa.
Não afeta a interface do usuário ou os metadados da página, apenas exibido na
listagem de páginas do admin.
- um path: representa a URL que aquela página estará acessível para seus
usuários. Pode ser estático (por exemplo:
/posts
) ou dinâmico (por exemplo:
/posts/:slug
, /search/*
), seguindo o esquema
URLPattern.
Criar uma nova página
Clique em Pages no menu superior e você poderá ver todas as páginas
publicadas no site, juntamente com o path que elas são acessíveis aos seus
usuários.
É possível duplicar ou apagar páginas usando as ações extras na listagem de
páginas (ícone de 3 pontos).
Para criar uma nova página em seu site, clique no botão Criar no canto
superior direito da lista de páginas. Um formulário será aberto com os campo:
nome, path e template. Template permite criar uma página tomando o
conteúdo de outra como base (campo opcional).
Após criada, você será redirecionado para o editor de página. Agora é possível
editar e adicionar novas Sections disponíveis em seu site e configurar a página
do jeito que você quiser.
Editar uma página
Para adicionar uma nova Section à página, clique no botão Add Sections no
editor e verifique todas as opções disponíveis.
Ao adicionar uma nova section, é possível selecionar sections que são globais ou
locais (obtidas da library). Há uma diferença entre elas:
- Uma section global já foi configurada e pode ser utilizada por 1 ou mais
páginas. Ao alterar a propriedade de uma section global, essa alteração é
refletida em todas as páginas que as usam
- Uma section local será configurada dentro da página, e só existe com essa
configuração nessa página (não é compartilhada entre outras páginas).
Ao selecionar uma section, será possível definir suas propriedades. Algumas das
propriedades podem pedir a seleção de uma imagem, texto, seleção de itens, ou
mesmo de um loader. Um loader é uma entidade que carrega dados e que
pode receber configurações (selecionando um loader da library) ou já estar
configurado (loaders salvos).
Além disso, é possível variar uma section a partir da seleção do ícone de
bandeira (🏳️).
Variar uma Section
Uma variante permite que a section tenha outra configuração quando determinada
condição (matcher) é satisfeita. Essa condição pode ser algo já previamente
configurado (a partir de um matcher salvo) ou você poderá configurar a
partir de um elemento da biblioteca de matchers.
É bem comum criar variantes especialmente para campanhas ou eventos de tempo
limitado. Para isso, uma estratégia é configurar um matcher de data e hora.
A variante “default” representa a página a ser exibida quando nenhum matcher é
satisfeito.
Importante: os matchers são testado na ordem que são colocados do primeiro
(mais acima) até o último (default). Quando um matcher é satisfeito, ele é
imeditamente executado e nenhuma outra condição posterior é testada,
independente de qualquer outro matcher em seguida que possa satisfazer a
condição configurada.
Editar um SEO de uma página
O SEO de uma página segue o padrão definido no site. É possível especializar o
SEO de uma página editando o SEO a partir da opção de edição de SEO.
Publicar alterações
A página será alterada a cada edição feita. Estas alterações são pertinentes ao
ambiente que você esteja trabalhando (inicialmente, staging). Uma alteração no
ambiente não é refletido no ambiente em produção até que essa alteração esteja
publicada.
Variar uma página (segmentando uma páginas)
Uma variante permite criar uma visão diferente de uma página a partir de
condições específicas. Uma variante pode ser adicionada a partir do símbolo de
banderira (🏳️).
Adicione um “Matcher” que representa uma regra que será testada para avaliar
quais sections serão atendidas. No nosso exemplo, selecionamos um Matcher local
para selecionar um tipo de dispositivo e, mais especificamente, o desktop.
A variante é criada com todas as sections copiadas da página original. Cada
variante pode ter sections editadas de forma independente. Clique na variante
criada e altera as sections da forma que quiser. A variante “default” representa
a página a ser exibida quando nenhum matcher é satisfeito.
Quando você tem várias variantes em uma única página, a deco automaticamente
exibe a pré-visualização da variante selecionada por padrão. Se nenhuma variante
estiver selecionada, a deco mostra o que o usuário veria se fosse atribuído à
variante. Isso permite que você navegue entre as variantes selecionadas e
visualize como seria a experiência do usuário para cada variante.
Você também pode ter uma variante dentro de outra variante. Você pode usar
matchers diferentes ou uma combinação deles.
Importante: os matchers são testado na ordem que são colocados do primeiro
(mais acima) até o último (default). Quando um matcher é satisfeito, ele é
imeditamente executado e nenhuma outra condição posterior é testada,
independente de qualquer outro matcher em seguida que possa satisfazer a
condição configurada.