Tabela de Conteúdos

  • Páginas
    • Criação e Edição de Páginas
      • Ligações permitidas (URLs)
      • Atributos da página
      • Opções de cabeçalho de página
      • Opções CTA de Rodapé
      • Yoast SEO
    • Blocos de página
    • Blocos de páginas reutilizáveis
    • Editor de conteúdos (WYSIWYG)
    • Estilos de conteúdo
    • Tabelas
  • Tipos de correio personalizados
    • Produtos
    • Postagens no Blog (Color Science Essentials)
    • Histórias de clientes***
    • Cursos***
    • Eventos***
    • FAQs***
    • Comunicados de imprensa***
    • Equipa Bios***
    • Localizações***
  • Mediateca
  • Menus
    • Menus de edição
    • Menu das Mídias Sociais
    • Mega Menu***
    • Menu Soluções Empresariais vs. Menu Site da Empresa***

Páginas

Criação e Edição de Páginas

Para criar uma nova página, vá para: Páginas > Adicionar novo Para editar uma página existente, vá a:: Páginas > encontrar a página que gostaria de editar > Editar

  • Insira um título no campo que diz “Adicionar título”.
    • Esta será a H1 para a sua página.
  • Clicando no ícone da engrenagem no canto superior direito, serão abertas as definições do documento. A partir daqui, pode actualizar o URL e os Atributos de Página.
  • Permalink – É aqui que se pode actualizar o URL da página. Nota: Ao guardar o rascunho ou publicar a página, um URL será gerado automaticamente com base no que for inserido no campo do título. Se desejar alterar ou ajustar este URL, pode fazê-lo sob a secção “Permalink”.
  • Atributos da Página – É aqui que se pode atribuir uma página de pais.
    • Se atribuir uma página a uma página pai, esta alterará a estrutura URL da página.
    • Se “nova página” for atribuída a “página antiga”, o seu URL mudará para página antiga/nova página.
    • Pode definir a ordem das páginas na navegação visual em Appearance > Menus. (instruções abaixo)
  • Opções do cabeçalho da página – Vá até ao fundo da página para a secção “Banner”, onde deve ver opções para os seguintes campos:
      • Anulação de H1 (que anula o conjunto H1 no título da página)
      • Cópia do parágrafo de introdução
      • Imagem do herói
      • Ligação CTA
  • Opções de Rodapé CTA – Percorrer até ao fundo da página para a secção “Page Level CTA”.
    • Aqui, deverá ver as seguintes opções:
      • Mostrar CTA global (mostra a CTA global que é editada em Opções > CTA global)
      • Esconder (para páginas que não devem mostrar nenhum CTA de rodapé)
      • Sobreescrever (o que lhe permitirá especificar um CTA de rodapé único para essa página em particular)
  • Yoast SEO – Percorrer até ao fundo da página para a secção “Yoast SEO”. Aqui deverá ver opções para editar o título e a meta descrição de SEO.
    • Adicionar título específico de SEO e meta descrição para a página.
    • Utilize o separador de partilha social em Yoast para definir conteúdos específicos para o Facebook e Twitter.
    • Também se podem esconder páginas do mapa do sítio e da pesquisa no Google:
      • Ir para o separador “Advanced Settings” em Yoast.
      • Seleccione as definições Não (Índice) e Não (Seguir) irá esconder páginas do mapa do site e da pesquisa Google

Blocos de página

Uma vez criada a sua página, pode começar a construir a sua página com blocos de páginas.

  • Clique no ícone preto + abaixo do título da página.
  • Aqui, deverá ver algumas opções para escolher blocos de páginas a acrescentar à página. Pode escolher entre estes 6 blocos de páginas mais recentemente utilizados ou seleccionar “Procurar todas” para ver todas as opções de blocos de páginas.
  • Adicione o estilo de bloco de página que pretende.
  • Cada bloco de página terá opções diferentes com base no estilo que é.
  • No separador das definições:
    • Editar as definições para esse bloco de página em particular
    • As definições irão variar de acordo com o tipo de bloco de páginas que escolheu. Normalmente, as configurações aqui incluirão cor de fundo, opções de coluna, e opções de estilo de layout.
  • No separador do conteúdo:
    • Acrescentar o conteúdo em conformidade.
    • Tal como o separador das definições, o layout do separador do conteúdo variará com base no estilo de bloco de página que escolheu.
  • Pode alterar a ordem dos blocos de páginas com os ícones ∧ e ∨.

Blocos de páginas reutilizáveis

Para certos blocos de páginas, como um CTA de rodapé, poderá querer criar um bloco reutilizável. Um bloco reutilizável é um bloco individual que se pode adicionar a várias páginas com o mesmo conteúdo em todas as instâncias. Se actualizar um bloco reutilizável num só local, ele será actualizado em todo o lado.

Para criar um bloco reutilizável:

  • Ir para: Gutenblocks > Blocos reutilizáveis > Adicionar Novo
  • Será levado a um editor gutenberg onde poderá adicionar e construir um bloco reutilizável, tal como faria com qualquer outro bloco
  • Uma vez que o conteúdo tenha sido disposto da forma que pretende, dê um nome ao bloco
  • Publicar o bloco

Para adicionar um bloco reutilizável a uma página:

  • Navegue até à página em que pretende que o bloco reutilizável viva
  • Clique no ícone laranja + no canto superior esquerdo, tal como faria para entrar num bloco normal
  • Alternar para o separador “Reutilizável
  • Seleccione o bloco que pretende adicionar.
  • Notará que o bloco reutilizável tem uma borda amarela brilhante à sua volta e uma mensagem de aviso. Isto é apenas para lembrar que o bloco é um bloco reutilizável e pode existir noutro local do site.

Editor de conteúdos (WYSIWYG)

Entrada de conteúdo no editor de conteúdo:

  • Pode escrever o conteúdo directamente no editor WYSIWYG ou copiar/colar a partir de um processador de texto.
  • Se estiver a copiar e colar conteúdo, utilize sempre o botão “Clear Formatting” após a colagem. Também se pode “colar como texto simples”.
  • Utilizar o botão “Special Characters” (Ω) para substituir quaisquer caracteres especiais do conteúdo colado. Caso contrário, a codificação pode ser diferente.

Estilos de conteúdo

Para mais informações sobre todos os vários estilos de conteúdo possíveis para o seu site, visite a sua Página de Estilos de Conteúdo.

  • Estilos de cabeçalho
    • Diferentes estilos de cabeçalho são pré-carregados no menu pendente “Parágrafo” e são etiquetados (Cabeçalho 1, Cabeçalho 2, etc.)
    • Nunca terá de seleccionar h1 pois a substituição do nome ou título da página criará automaticamente o h1 para esta página.
    • Destacar o texto e depois seleccionar o estilo de cabeçalho desejado.
  • Estilos de formato
    • Os diferentes estilos de formato são pré-carregados no menu suspenso “Formatos”.
    • Adicionar estilo de texto de introdução destacando o texto e seleccionando “Texto de Introdução” a partir do menu pendente.
    • Transforme links em botões destacando o texto do link e seleccionando “Botão” ou “Botão Secundário” a partir do menu suspenso.

Tabelas

As tabelas são utilizadas em muitos locais em todo o site. Tem três opções de como criar tabelas, com base na localização:

  • Tabelas WYSIWYG
  • Tabelas TablePress
  • Mesas de Gutenburg Table Block Tables

Nota: Todas as tabelas devem receber o mesmo estilo. Pode utilizar os atalhos e para obter a marca de verificação e os símbolos X para gráficos comparativos.

As tabelas WYSIWYG são as que utilizámos nas páginas de detalhe do produto. Estes podem ser criados em qualquer WYSIWYG no site. Exemplo nesta página.

  • No WYSIWYG, seleccionar o ícone da tabela no editor.
  • Seleccione o número de colunas e filas que deseja.
  • Introduza o seu conteúdo em cada campo/célula da tabela
  • Estilizar o conteúdo em conformidade
  • A fim de obter um fundo vermelho numa fila, terá de o atribuir como a fila de cabeçalho. Para o fazer:
    • Coloque o seu cursor numa das células da linha do cabeçalho
    • Depois vá para a Tabela > Linha > Propriedades da Linha da Tabela no menu WYSIWYG no topo
    • Depois deve ver uma opção para atribuir o tipo de linha como “cabeçalho”.
  • Se precisar de atribuir uma cor de fundo diferente (tal como um fundo cinzento para os subtítulos das tabelas):
    • Realce as células da fila que pretende actualizar
    • Depois para ir Tabela > Fila > Propriedades da Fila da Tabela > Avançado
    • Actualizar a cor de fundo a partir da ferramenta de selecção de cores

Tabelas TablePress

  • As tabelas TablePress podem ser usadas no lugar das tabelas WYSIWYG. Isto seria uma boa ferramenta para tabelas particularmente complexas.
  • Para criar uma nova tabela TablePress, vá a TablePress > Adicionar nova tabela
  • Construir a mesa como de costume (isto herdará o estilo de mesa do site)
  • Uma vez construída a mesa, pegue no atalho do campo “Shortcode” no topo e coloque-o no WYSIWYG onde quer que a mesa viva.

Mesas de Gutenburg Table Block Tables

  • As tabelas de Gutenburg são o que temos usado nas páginas de comparação de produtos, como esta. Note-se que estes são criados como um bloco e não como um WYSIWYG, pelo que não podem ser utilizados nas secções de separadores das páginas de produtos. Pode ver um exemplo disto nesta página.
  • Para adicionar uma destas tabelas a uma página, clique no ícone laranja + no canto superior esquerdo para adicionar um novo bloco e seleccione o tipo de bloco “Tabela”.
  • Seleccionar o número de colunas e filas
  • O estilo adicional para estas tabelas pode ser feito clicando nos três pontos dos controlos do bloco e indo para “Mostrar mais definições”. Aqui, pode atribuir estilos de tabela e definir uma linha de cabeçalho (vermelha).
  • Para blocos de comparação, pode também incluir atalhos de identificação do produto nas células da tabela para trazer informações sobre os produtos, incluindo a imagem, nome, pedido de informações, e folhas de especificações.
    • Para encontrar a identificação de um produto, navegue até à parte de trás do produto a que pretende ligar.
    • Depois, no URL do seu navegador, deverá ver uma parte do URL que diz “post=”, o número seguinte é o número de identificação do produto.

Tipos de correio personalizados

Produtos

Para criar um novo produto, vá para: Produtos > Adicionar Novo Para editar um produto existente, ir para: Produto > encontre o produto que gostaria de editar > Editar

  • Criação e Edição de Produtos
    • Introduza o título do post no campo “Adicionar título”.
    • Introduzir todo o conteúdo no editor de conteúdo (WYSIWYG).
    • Yoast SEO – Definir o título e meta descrição de SEO na secção “Yoast SEO”.
    • Categorias – Atribuir a categoria para este produto na barra lateral direita. (Ver abaixo para mais informações sobre as categorias de produtos)
      • Nota: Atribuir a categoria a um produto significa também que o “produto CTA” dessa categoria aparecerá na página de produto abaixo das imagens/galeria de heróis. Para este produto, por exemplo, atribuí-lo à categoria Benchtop é o que carrega o “Não sabe por onde começar?” secção sob a imagem. Mais informações sobre como editar esse conteúdo na secção abaixo sobre a edição de categorias de produtos.
    • Definir a imagem em destaque que aparecerá no herói e em todos os blocos de alimentação de recursos como uma miniatura para este produto.
    • Guardar e actualizar o produto.
    • Uma vez definida a informação básica do produto, deslocar-se para a secção “Conteúdo Adicional à Página do Produto” na parte inferior. Aqui deve ver três separadores:
      • Separador Conteúdo – Neste separador, encontrará as opções para editar os seguintes campos
        • Folha de especificações
        • Excerto curto
        • Conteúdo de topo
        • Conteúdo principal (cópia do corpo)
      • Separador Carrossel de Imagem – Neste separador, encontrará as opções para editar e adicionar ao carrossel de imagem + legendas na área do herói. Note-se que a primeira imagem no carrossel será sempre a imagem em destaque que colocar na barra lateral. Não é necessário introduzir a imagem em destaque nos campos do carrossel.
      • Tabs Tab – Neste separador, encontrará as opções para editar os seguintes campos
        • “Adicionar separador” para adicionar um separador adicional ao produto
        • Rótulo do separador
        • Tab Content (Este WYSIWYG é onde a maioria das tabelas será construída para os produtos)
  • Produtos Offsite Link
    • Alguns produtos viverão fora do local e necessitarão assim de um conjunto de ligações externas em vez de uma página de aterragem.
    • Para o fazer, montar um produto como de costume, com o nome, a imagem em destaque e excertos.
    • Depois, na barra lateral direita, deverá ver uma secção que diz “Page Links To”. Nesta secção, seleccionar a opção “Um URL Personalizado” para que o produto aponte para outro link em vez de para uma página de detalhes.
  • Criação e edição de categorias de produtos
    • Para criar uma nova categoria de produtos, vá para: Produtos > Categorias de produtos. Para editar um produto existente, vá a: Produto > Categorias de produtos > encontrar a categoria que gostaria de editar > Editar.
    • Defina o nome e a lesma para a categoria
    • Para editar o “produto CTA” de um produto que aparece nas páginas de detalhe do produto, irá a essa categoria específica de produto e editará o texto no campo “Produto CTA” na parte de trás.

Postagens no Blog (Color Science Essentials)

Para criar um novo posto, vá para: Posts > Adicionar Novo Para editar um post existente, vá a:: Posts > encontre o post que gostaria de editar > Editar

  • Criação e Edição de Postagens de Blogs
    • Introduza o título do post no campo “Adicionar título”.
    • Introduzir todo o conteúdo no editor de conteúdo (WYSIWYG).
    • Yoast SEO – Definir o título e meta descrição de SEO na secção “Yoast SEO”.
    • Categorias e etiquetas – Adicionar categorias e etiquetas conforme necessário na barra lateral direita.
      • Ver abaixo as notas sobre a criação e edição de categorias e tags de blogues.
    • Defina a imagem em destaque que aparecerá na página de todos os recursos como uma miniatura para este item do post.
    • Guardar e actualizar o post.
  • Categorias de blogues Para criar e/ou editar uma categoria de blogues, vá a:
    Posts > Categorias.

    • Se estiver a tentar editar uma categoria que já existe, pode fazê-lo também no mesmo local.
    • Editar/adicionar categoria como achar melhor. Para que uma categoria apareça na página de entrada do blog, é preciso primeiro aplicar essa categoria a um post de blog publicado.
  • Tags de blog Para criar e/ou editar uma tag de blog, vá para: Posts > Tags.
    • Se estiver a tentar editar uma etiqueta que já existe, pode fazê-lo também no mesmo local.
    • Edite/adicione a etiqueta como achar melhor.

Histórias de clientes

Cursos

Eventos

FAQs

Comunicados de imprensa

Equipa Bios

Localizações

Mediateca

Nota: As imagens devem ser cortadas e comprimidas antes de serem acrescentadas à mediateca. Recomenda-se que as imagens não sejam maiores que 250kb (embora por vezes isto seja inevitável). Quererá recortar a imagem na dimensão apropriada antes de a comprimir. Este site, tinypng.com, pode ser útil na compressão de tamanhos de ficheiros para imagens de tamanho. Para ver a Mediateca, vá até: Meios de comunicação social > Biblioteca

  • Para adicionar novas imagens e ficheiros, clique no botão “Adicionar novo” no topo da página. Depois clicar em “Seleccionar ficheiros” ou simplesmente arrastar e largar um ficheiro para a janela.
  • Pode adicionar ficheiros directamente a uma pasta específica ou arrastá-los e largá-los na pasta apropriada mais tarde.
  • Pode clicar em qualquer item de mídia para editar os seguintes campos:
    • Texto alternativo
    • Título
    • Legenda
    • Descrição
    • URL do ficheiro
  • Se estiver a editar um PDF, o campo “File URL” é o link que utilizará para ligar directamente ao PDF.

Nota: A mediateca pode ser filtrada por tipo ou data e é pesquisável por título.

Formulários

Para criar e editar formulários, vá para: Formulários Ninja > Painel de controlo

  • Aqui, deve ver todos os formulários do seu site.
  • Clique no ícone de equipamento ao lado do seu formulário para editar, duplicar, pré-visualizar e apagar o seu formulário. Também pode ver as submissões neste local.
  • Ou clicar em “Adicionar novo” ou editar um formulário existente.
  • Ir para os “Campos do Formulário
    • Adicione nos campos do formulário que pretende com o ícone azul + no canto inferior direito.
    • Uma vez adicionados os campos de formulário desejados. Clique em “Publicar”. Nota: Este botão dirá sempre “Publish,” mesmo que o formulário já tenha sido publicado.
  • Ir para o separador “Email & Acções
    • Edição de redireccionamento, administração de e-mail e definições de utilizador de e-mail para cada formulário
      • Redireccionar – Redirecciona para lhe agradecer página
      • Email admin – Pode personalizar a forma como cada envio atinge a sua caixa de entrada: desde nome, endereço, até ao e-mail (muito importante), assunto, e campos.
    • As Configurações Avançadas abaixo da janela html permitem a adição de parâmetros adicionais de correio electrónico. Se for necessário adicionar ao formulário um e-mail de resposta automática, CC ou endereços de e-mail adicionais. Pode ser feito aqui versus a criação de novos endereços de correio electrónico.
    • Quando o formulário estiver completo, copiar o código curto e colar num editor de conteúdos.

Menus

Para editar menus, vá a Appearance > Menus Nota: O menu dos meios de comunicação social no rodapé está num local diferente. Ver abaixo.

Menus de edição

  • Ir para o menu pendente “Seleccionar um menu para editar:”, e escolher o menu que deseja editar.
  • Utilize os menus para organizar a forma como pretende que os vários menus sejam apresentados.
  • Adição de itens do menu –
    • Encontre a página (ou outro tipo de item de menu) que deseja adicionar ao seu menu a partir da área de selecção “Adicionar itens de menu” à esquerda.
    • Seleccione “Adicionar ao Menu”, e a página aparecerá na parte inferior desse menu.
    • Arraste e largue a página que adicionou ao local no menu onde deseja que apareça.
    • Para definir algo como um item de menu infantil, arraste a página de modo a aparecer indentada por baixo da página principal.
    • Clique na seta do lado direito do item do menu para mais opções. Nesta área, pode editar os seguintes itens:
      • Etiqueta de Navegação (o texto que aparece no próprio menu)
      • Título Atributo
      • Uma caixa de verificação para abrir links num novo separador
      • (opcional) Classes CSS
  • Assim que tiveres o. Menu da forma que desejar, clique no botão “Save Menu” no canto superior esquerdo.

Menu das Mídias Sociais

Para editar o menu dos meios de comunicação social, vá para: Opções > Rodapé > Meios de comunicação social

  • Introduza os links nos campos apropriados categorizados por aplicação.
  • Actualizar a página para guardar as alterações.

Mega Menu