13. Usando marcações

O site possui várias marcações personalizadas como suporte, elas servem para adicionar áreas personalizadas no site de forma simples, veja abaixo a lista com exemplos:

Divisão

Uma marcação de tela total, vai de uma ponta a outra, com opções para trocar o fundo com cores personalizadas e fotos e também trocar a cor da fonte.

Uso:

Explicação: Para usar a marcação abra colchetes e escreva “divisao” (como na imagem a cima) coloque os parâmetros que desejar (caso não queira usar nenhum, escreva apenas o nome da marcação) e em seguida feche colchetes. Coloque o conteúdo que deseja e depois feche a marcação da mesma forma que abriu, porém, após abrir colchetes é obrigatório colocar uma barra “/”, veja no exemplo a cima.

Explicação dos parâmetros:

1. Esse parâmetros adiciona uma imagem no fundo da área cobrindo toda a área, para usá-lo, basta escrever seu nome após o nome da marcação ou de qualquer outro parâmetro que já esteja sendo usado seguido do sinal de igual e aspas duplas ou simples (veja imagem a cima) e colocar a url da imagem (no exemplo a cima basta trocar “URL_DA_IMAGEM” pela url correta da imagem) assim a imagem irá aparecer no fundo da área.
2. Parâmetro referente a cor de fundo, e é pedido uma cor em hexadecimal. EX: #ffffff (branco), #333333 (cinza escuro)….
3. Mesma coisa que o parâmetro a cima, tem o mesmo uso

Uma Coluna

Uma marcação que defini em quantas colunas quer dividir o conteúdo, essa em específico não divide, usa todo o espaço referente a marcação “divisao” citada a cima.

Uso:

Explicação: Para usar a marcação abra colchetes e escreva “uma-coluna” (como na imagem a cima) coloque os parâmetros que desejar (caso não queira usar nenhum, escreva apenas o nome da marcação) e em seguida feche colchetes. Coloque o conteúdo que deseja e depois feche a marcação da mesma forma que abriu, porém, após abrir colchetes é obrigatório colocar uma barra “/”, veja no exemplo a cima.

Explicação do parâmetro:

1. classe: Colocar o nome de uma classe para aplicar algum efeito, temos disponíveis:
   1. “texto-branco“: deixa todo o texto dentro com a cor branca
   2. “mg“: Margem em cima e embaixo do elemento, serve para deixá-lo mais afastado dos outros elementos.
   3. “pd“: Funciona como o “mg” citado a cima, porém tem um uso melhor quando pretende adicionar uma cor de fundo ao bloco.

Meia Coluna

Uma marcação que defini em quantas colunas quer dividir o conteúdo, essa em específico divide em duas partes o espaço referente a marcação “divisao” citada a cima.

Uso:

Explicação: Para usar a marcação abra colchetes e escreva “meia-coluna” (como na imagem a cima)  e em seguida feche colchetes. Coloque o conteúdo que deseja e depois feche a marcação da mesma forma que abriu, porém, após abrir colchetes é obrigatório colocar uma barra “/”, veja no exemplo a cima.

OBS: Essa marcação não possui parâmetros.

Um quarto

Uma marcação que defini em quantas colunas quer dividir o conteúdo, essa em específico divide em 4 partes o espaço referente a marcação “divisao” citada a cima.

Uso:

Explicação: Uso padrão, o mesmo da marcação “meia-coluna” citada a cima.

OBS: Essa marcação não possui parâmetros.

Um terço

Uma marcação que defini em quantas colunas quer dividir o conteúdo, essa em específico divide em 3 partes o espaço referente a marcação “divisao” citada a cima.

Uso:

Explicação: Uso padrão, o mesmo da marcação “meia-coluna” citada a cima.

Explicação do parâmetro:

1. “borda”: especifica se haverá uma linha abaixo de cada um (apenas para dispositivos móveis), usado para separar conteúdo. Para ativar coloque o valor “sim” ou “nao” para não colocar.
2. “classe”: mesmas classes da marcação “uma-coluna” citada a cima.

Depoimentos

Essa marcação insere na página o carrossel de depoimentos de seus clientes.

Uso:

OBS: Marcações que não recebem conteúdo e nem parâmetros podem ser chamadas de forma simplificada, para usá-la basta abrir colchetes colocar o nome da marcação e fechar colchetes, como na imagem a cima.

Texto e ícone

Marcação que ajusta uma imagem ao lado de um parágrafo de texto, deixando a imagem pequena ao lado esquerdo do texto, como um ícone.

Uso:

OBS: Essa marcação não possui parâmetros.

Vídeo Modal

Marcação para adicionar uma modal na página.

Uso:

OBS: Neste caso todo o conteúdo que colocar dentro da marcação não irá aparecer na página e sim em uma modal que estará aguardando ser aberta por uma ação do usuário. Para abri-la é necessário usar outra marcação chamada “bt-video” que gera um botão visível na página para que o usuário possa interagir, veja abaixo o seu uso:

OBS: Abra e feche a marcação normalmente, neste caso, o conteúdo será adicionado como o texto dentro do botão.

Atenção: A marcação “bt-video” não poder ser coloca dentro da marcação “video”, elas devem ser colocadas uma após a outra.

Conteúdo separado por abas laterais

Marcação que separa conteúdo por abas, deixando as abas nas laterais e o conteúdo relacionada a aba ao lado direito sendo exibido de acordo com o clique em cada aba.

Uso:

Explicação:

Para usar as marcações para formar a área de abas, siga o exemplo a cima, essa marcação é mais complexa, e depende de outras marcações para funcionar corretamente. Toda a estrutura deve ser montada exatamente da forma que esta no exemplo a cima, sendo a sequência: “area-abas”, “aba-botao” e “aba-conteudo”.

A marcação “area-abas” prepara a página para para as próximas marcações, ela sempre deve envolver todas as outras marcações.

*1: Em seguida, podemos adicionar um título e um texto descritivo, que ficará a cima das abas e conteúdos (caso não queira adicionar nada, pule essa parte e insira em seguida a marcação “aba-botao”).

*2: Em seguida, é obrigatório o uso da marcação “aba-botao”, podendo ser no máximo 4 marcações desse tipo. Essa marcação possuí 4 parâmetros para ter o funcionamento correto, e todos devem ser passados corretamente, veja abaixo os parâmetros:

• “id”: um nome único e exclusivo para essa marcação, não pode se repetir, é usado para o controle de ação do usuário.
• “id-conteudo”: um nome único e exclusivo para essa marcação que fará referência ao conteúdo que essa aba irá mostrar, não pode se repetir, é usado para o controle de ação do usuário.
• “n”: um número inteiro para o item, deve começar em 1 e ir aumentando até chegar no último item. Atenção: O último item deve obrigatoriamente receber o valor “-1”, caso contrário, o site não poderá identificar que aquele é o último item.
• “classe”: deve seguir sempre essa ordem: “departmental”, “transformative”, “item3”, “item4”. Cada uma para cada item, ou seja, a primeira marcação recebe a classe “departmental”, a segunda recebe a “transformative” e assim por diante.

*3: Em seguida, é obrigatório o uso da marcação “aba-conteudo”, podendo ser no máximo 4 marcações desse tipo. Essa marcação possuí 4 parâmetros para ter o funcionamento correto, e todos devem ser passados corretamente, veja abaixo os parâmetros:

• “id”: um nome único e exclusivo para essa marcação, não pode se repetir, é usado para o controle de ação do usuário. Atenção: Esse nome deve ser exatamente igual o nome passado no parâmetro “id-conteudo” da marcação citada a cima. Ex: se a primeira marcação de aba-botao recebeu o valor “id-conteudo-1” esse deve ser exatamente o mesmo valor passado aqui.
• “id-botao”: um nome único e exclusivo para essa marcação, não pode se repetir, é usado para o controle de ação do usuário.  Atenção: Esse nome deve ser exatamente igual o nome passado no parâmetro “id” da marcação citada a cima. Ex: se a primeira marcação de aba-botao recebeu o valor “id-botao-1” esse deve ser exatamente o mesmo valor passado aqui.
• “n”: um número inteiro para o item, deve começar em 1 e ir aumentando até chegar no último item. Atenção: O último item deve obrigatoriamente receber o valor “-1”, caso contrário, o site não poderá identificar que aquele é o último item.
• “titulo”: O título que será exibido na área visível para dispositivos móveis.

OBS: Siga sempre o exemplo da imagem a cima para montar essa área, deve sempre seguir a mesma estrutura.

ID Área

Marcação para adicionar uma identificação única na página, pode ser usada várias vezes na mesma página para marcar algum conteúdo em específico.

Uso:

Explicação: Basta adicionar a marcação onde desejar na página e passar um valor único para o parâmetro “id”, esse valor não pode se repetir. Após colocar essa marcação na página é possível direcionar links diretamente para essa área da página, assim quando uma pessoa clicar no link em questão a página irá rolar até o conteúdo específico.

Botão

Insere na página um botão personalizado.

Uso:

Explicação: Para usar a marcação abra colchetes e escreva “bt” (como na imagem a cima) coloque os parâmetros que desejar e em seguida feche colchetes. Coloque o conteúdo que deseja (fica disponível como texto dentro do botão) e depois feche a marcação da mesma forma que abriu, porém, após abrir colchetes é obrigatório colocar uma barra “/”, veja no exemplo a cima.

Explicação do parâmetro:

1. “link“: o link do botão, ou seja, para onde o usuário será mandado quando clicar no botão.

Área Clientes

Insere na página a listagem dos logos dos clientes cadastrados.

Uso:

Explicação: Basta adicionar a marcação onde desejar, não é necessário fechar depois.