Como criar o design das suas seções

Design das seções

Cada seção do seu app tem design próprio. Para cada página dela, você escolhe um modelo e depois as cores, fontes, informações e imagens exibidas. Veja como.

No menu "My App", abra Structure.

Clique na seção que deseja personalizar, aqui Local, uma seção de artigos.

Ela tem duas páginas, a lista de artigos e o artigo em si, e cada página tem um design próprio.

Lista de artigos

Para a lista, clique em "Edit the design".

Comece pelo modelo. O atual tem uma marca de seleção; use as setas para ver os outros.

Escolha "Visual Card"… e cada artigo se torna um card grande com sua foto.

Cada texto tem sua fonte, seu tamanho e sua cor. Aqui, uma nova cor para os títulos… e todos os títulos ganham essa cor.

Em Thumbnail, escolha o formato das fotos. "Golden ratio"… dá a elas um formato mais largo e mais achatado.

Como os cards têm uma cor de fundo, as fotos podem ir de borda a borda. Clique em "Disable Edge-to-edge"… e agora cada foto fica dentro do card, com uma margem.

Tokens

Em Display, escolha o que cada card exibe. Marque "Info below title"… e um resumo aparece abaixo de cada título.

Veja estes campos: as palavras entre colchetes são tokens. O app os substitui pelos dados de cada artigo, aqui a data e o resumo.

O ponto de interrogação lista todos eles: título, autor, número de comentários, uma data relativa e muito mais, para cada tipo de conteúdo.

Combine-os com suas próprias palavras. Aqui, "Published", seguido do token de data relativa… e agora cada card mostra uma data relativa em vez da data completa.

Página do artigo

Agora, a página do artigo. Volte para a seção… e clique em "Edit the design" abaixo de Article.

A página do artigo tem seus próprios modelos, com a barra de ferramentas embaixo, em cima ou na lateral. Escolha "ToolBar Up"… e a barra de ferramentas vai para o topo.

Em Content, escolha como o título e as informações dele se alinham. "Left alignment"… alinha os dois à esquerda.

Em Toolbar, escolha as ações disponíveis para seus leitores. Desmarque "Font size"… e os dois botões dele somem da barra de ferramentas.

Para ter controle total, o código HTML da página usa os mesmos tokens: organize o título, a data, o autor e o conteúdo do seu jeito.

Publicar

Bom saber: aplicar cores ou fontes no "App style" substitui o design de todas as seções.

Para que seus usuários vejam as mudanças, publique a atualização do seu app pelo menu Publish.