Criação de elementos controláveis

1. IntroduçãIntrodução

ÉÉ atravéatravés da criaçãcriação de elementos que se conseguem criar campos que depois poderãpoderão ser editados pelo gestor de conteúconteúdo.

Para exemplo, vamos utilizar o template abaixo.

Esta éé o topo da a pápágina "index.html". Por enquanto, iremos ignorar o header e editar o slider.

2. IdentificaçãIdentificação dos elementos no template

Em primeiro lugar, devemos identificar no template os elementos que deverãdeverão ser editáeditáveis pelo gestor de conteúconteúdos. Por vezes, pode haver elementos estáestáticos, em que nãnão háhá necessidade de dar a possibilidade de ediçãedição dos mesmos ao gestor de conteúconteúdo. Contudo, tal ficaráficará àà sua escolha.

Vejamos uma possípossível identificaçãidentificação dos elementos a editar.

Uma das coisas a ter em atençãatenção ao criar os elementos éé o nome. O nome do elemento deverádeverá permitir, de forma rárápida, que o gestor de conteúconteúdo identifique o que estáestá a representar no website.

Ou seja, títítulo 1, títítulo 2, títítulo 3 nãnão seria uma boa práprática de nomear os elementos, pois o gestor de conteúconteúdo nãnão consegue diferenciar uns dos outros.

Um exemplo melhor seráserá antetíantetítulo, títítulo, subtísubtítulo. Assim, o gestor de conteúconteúdo, mesmo sem ver como os elementos estãestão dispostos no website, consegue, mais facilmente, saber o que os mesmos representam na sua estrutura.

3. CriaçãCriação do primeiro elemento

Para criar um elemento, deverádeverá aceder a:

Gestor CMS -> Estrutura -> Websites -> Alterar estruturaPáginas

Nesta pápágina, deverádeverá clicar na aba "Elementos da PáPágina" e clicar no sísímbolo + (criar novo elemento)

O sistema abriráabrirá em modal o seguinte painel:

Vamos, entãentão, criar o primeiro elemento. Neste caso, começcomeçaremos pelo AntetíAntetítulo e iremos preencher o modal de "novo elemento" com a seguinte informaçãinformação.

Item pai - Nenhum pai

Este campo éé utilizado para listas de repetiçãrepetição. Um tipo de elemento muito úútil para a criaçãcriação de elementos em que o cócódigo HTML éé igual em todos. Abordaremos isto mais tarde.

Nome do elemento - AntetíAntetítulo

O nome do elemento como iráirá aparecer para o gestor de conteúconteúdos. Tal como indicado anteriormente, deve ter-se alguma cuidado em como nomear um elemento, para que seja fáfácil o gestor de conteúconteúdos compreender a sua relaçãrelação na estrutura do website.

Selecione a secçãsecção - Nenhum

As secçõsecções sãsão úúteis para organizar o conteúconteúdo em abas individuais no CMS e para ativar/desativar porçõporções do HTML sem ser necessánecessário apagar ou comentar o mesmo. Abordaremos isto mais tarde.

Grupo de elementos - (deixar vazio)

Grupos de elementos sãsão úúteis para a organizaçãorganização do conteúconteúdo no CMS. Abordaremos isto mais tarde.

Texto de ajuda - Este texto aparece no slider em primeiro lugar, com um tamanho pequeno e a negrito

O texto de ajuda serve para indicar ao gestor de conteúconteúdo qualquer informaçãinformação que possa ser úútil no momento de criaçãcriação de conteúconteúdo. Pode deixar o espaçespaço vazio ou utilizar um texto como o que colocamos em exemplo.

Tipo de elemento - Texto Curto

Existem vávários tipos de elementos, cada um com a sua funçãfunção especíespecífica. Abordaremos os vávários tipos ao longos dos tutoriais. Como o antetíantetítulo éé um texto curto, iremos utilizar este tipo de elemento. Na pápágina da gestãgestão de conteúconteúdos, este elemento apareceráaparecerá como um pequeno campo para introduçãintrodução de texto.

OrdenaçãOrdenação - 1

Esta éé a ordem em que os elemento estãestão dispostos nas pápáginas de inserçãinserção de conteúconteúdos. A nossa plataforma ordena os elementos automaticamente consoante sãsão criados. ÉÉ possípossível, contudo, alterar a ordem dos mesmos.

Comprimento mímínimo do texto - (deixar vazio)

Comprimento mámáximo do texto - (deixar vazio)

O comprimento mímínimo e mámáximo de texto éé utilizado para criar restriçõrestrições ao núnúmero de caracteres que se pode inserir no tipo de elemento "Texto Curto". Por enquanto, vamos deixádeixá-lo vazio.

Clica em "guardar"

Pode confirmar que agora, na aba "Elementos da pápágina" apareceráaparecerá o elemento que acabou de criar.

Pode clicar no botãbotão azul (com o íícone de lálápis) para abrir o modal de ediçãedição do elemento e efetuar alteraçõalterações no mesmo.

Caso deseje eliminar o elemento, clique no botãbotão vermelho (com o íícone de caixote do lixo).

ATENÇÃATENÇÃO: apagar um elemento éé uma açãação permanente. NãNão éé possípossível retroceder.

4. CriaçãCriação dos restantes elementos

Terminada a criaçãcriação do primeiro elemento, falta-nos, entãentão, criar os restantes cinco:

2. TíTítulo

3. SubtíSubtítulo

4. DescriçãDescrição

5. BotãBotão

6. Imagem

4.1. Elementos TíTítulo e SubtíSubtítulo

O segundo e terceiro elemento (títítulo e subtísubtítulo, respetivamente) sãsão criados de forma idêidêntica ao AntetíAntetítulo. Ou seja, deve ser um tipo de elemento Texto Curto.

4.2. Elemento descriçãdescrição

O quarto elemento (DescriçãDescrição), apesar de ser pequeno, pode ser criado com um tipo de elemento Texto Longo. Isto, porque, com este tipo de elemento, o gestor de conteúconteúdos teráterá um campo maior para introduzir o texto e, mais facilmente, aplicar quebras de linha no mesmo.

4.3. Elemento BotãBotão

Vamos ver agora como criar o botãbotão.

Clique no sinal + para criar um novo elemento. DêDê o nome de "BotãBotão" e selecione o tipo de elemento Link. Como pode ver na imagem abaixo, este tipo de elemento tem um conjunto de campos especíespecíficos.

Vejamos o que cada um destes campos permite o gestor de conteúconteúdos editar.

RóRótulo: Nome do botãbotão. Aquilo que o utilizador final da pápágina veráverá no seu ecrãecrã.

íícone: Permite selecionar um cócódigo

Abrir em Modal: Ao selecionar este opçãopção, o link abriráabrirá em modal.

Abrir em Alvo: Permite ao gestor de conteúconteúdo escolher que o link abra numa nova aba/janela.

Cor do Texto do Link: Permite que o gestor de conteúconteúdos escolha a cor do texto do link.

Cor do Fundo: Permite que o gestor de conteúconteúdos escolha a cor do do fundo.

Neste caso, selecionaremos apenas as opçõopções presentes na imagem (RóRótulo, Abrir em Modal e Abrir em Alvo). Mais àà frente veremos como aplicar todas as opçõopções deste tipo de elemento.

Clique em "guardar".

4.4. Elemento Imagem

Finalmente, vamos criar o elemento Imagem, para que o gestor de conteúconteúdos possa editar a imagem de fundo.

Clique no sinal + para criar um novo elemento. DêDê o nome de "Imagem" e selecione o tipo de elemento imagem. Tal como o elemento anterior, o tipo de elemento Imagem tambétambém tem os seus campos especíespecíficos.

Nos elementos do tipo Imagem, éé necessánecessário colocar as dimensõdimensões de Largura e Altura. Neste caso iremos utilizar as dimensõdimensões 1920x800 pixeis, pois sãsão as mesmas da imagem original do template. Visto a imagem nãnão ter transparêtransparências, selecionamos o formato JPG.

Clique em guardar.

Assim que terminar de criar todos os elementos, a pápágina deve aparecer da seguinte forma:

Nota: o texto cinza por baixo do nome do elemento serve como identificaçãidentificação do mesmo. ÉÉ úúnico por cada elemento e criado automaticamente pelo sistema. Caso existam dois elementos com o mesmo nome, o sistema coloca uma numeraçãnumeração àà frente do mesmo.