Neste momento tanto o website, a página e os elementos da página já deve ter sido criados. Consulte os tópicos anteriores caso ainda não os tenha feito.

Esta é sem dúvidas, a etapa mais técnica do processo, consiste em alterar o HTML para que os elementos identificados na estruturação sejam aplicados ao template e assim permitam ao Gestor de Conteúdo altera as informações.

Aqui estamos a trabalhar na página:

Gestor CMS ⇨ Estrutura ⇨ Wesite XPTO (Alterar Estrutura)  ⇨ Página Inicial ⇨ Aba HTML

Após o editor do código fonte do HTML do template, encontramos 2 botões, um azul outro verde.

O azul abrirá um modal com os campos disponíveis para fazer a subsituição.

O verde guarda o HTML sem sair da página.

Se o curosr estiver posicionado no editor de código HTML, os atalhos de teclaro Ctrl+S e Ctrl+E ajudam respectivamente a guardar o conteúdo e a abri o modal de elementos disponíveis. Caso esteja a utilizar o sistema operacional MacOS, use Command.

Neste momento, é necessário algum conhecimento sobre HTML para identificar o propósito de cada tag, e localizar no código o que pode ser alterado.
Nos tópicos 3.1 e 3.2 identificamos e criamos alguns elementos para aplicar no HTML desta secção:

A secção em questão utiliza este HTML:

* A identificação do bloco de código referente à secção foi realizado manualmente

 

Com o bloco de código selecionado e os campos já disponíveis é só aplicar os campos.

Vamos começar pela a imagem. A imagem do computador está a ser exibida nesta tag (linha 417):

Faça como nesta imagem acima, selecione a URL da imagem (conteúdo do atributo src da tag img), e pressione Ctrl+E. Ao fazer isso, o modal de elementos abrirá:

Logo ao clicar no primeiro botão: Elemento Imagem Destaque, o modal será fechado e o trecho do código HTML selecionado será substituído pela "tag" do Módulo CMS. Esta "tag" é uma espécie de marcação para identificar aonde e como será aplicado o conteúdo no website. Não existe a necessidade de memorizar estas tags, pois elas ficam disponíveis no modal de elementos.

Apenas para detalhar, a tag é formada por:

[slug-o-website_slug-da-pagina_slug-do-elemento]

Mas dependendo do tipo de elemento pode haver alguma propriedade extra (mais abaixo vemos que o tipo de elemento Link possui esta característica):

[slug-o-website_slug-da-pagina_slug-do-elemento_propriedade_extra]

Faça o mesmo para os campos de texto:

 

O resultado desta secção ficaria algo como:

Então, no caso do tipo de elemento Imagem, devemos alterar a URL da imagem.

No caso do Texto Curto é mais intuitivo, basta alterar o texto (com o texto em preto no editor de código).

Mas no caso do Texto HTML (diferente do Texto Curto e do Texto Longo), o próprio editor de texto (CKEditor) insere a tag <p>. Caso no passo 3.2 tivéssemos inserido o tipo de elemento como Texto Longo em vez de Texto HTML, seria importante manter a tag <p> que havia ali (na imagem acima, linha 428).

E o tipo de elemento Link, nos fornece 3 botões (ou mais, de acordo com o que foi estruturado). Elementos do tipo Link possuem obrigatoriamente o URL (aplicar no atributo href). Opcionalmente podem possuir Rótulo (entre as tags <a ..></a>). Opcionalmente também pode ser interessante para o Gestor de Conteúdo definir se o link será aberto em um modal ou em uma nova página. Para isso existem as opções "taget" e "modal". No caso do target, como o nome já diz, deve ser atribuído ao atributo target da tag <a>. Mas no caso do modal, esta marcação deve ser adicionada ao atributo "class" da tag <a>, mantendo o valor da tag class atual para não afetar a exibição (apenas coloque um espaço antes das aspas e a tag por exemplo: class="btn btn-success [orla-comum_pagina-inicial_botao-de-acao_modal]" ).