A Trignosfera criou um tutorial para que possa aprender a usar as funcionalidades do SiteJet Builder que disponibilizamos aos nossos clientes.
Com este tutorial poderá de forma relativamente rápida começar a criar o seu site e a publicar o mesmo Online…

Visão geral:
Construtor de Sites (CMS)

Neste artigo, apresentaremos o layout do Construtor de Sites (CMS) e forneceremos detalhes sobre vários dos principais menus e recursos, incluindo links para mais informações.

Tabela de conteúdos

• Vídeo (Clicar para Ver)
  
• Navegação de topo
• Menu do hambúrguer
• Barra lateral de conteúdo
• Mais menu
• Rodapé com breadcrumb, timer e editor de código
• Editor WYSIWYG
  
  

  Navegação de Topo

Vamos começar pelo lado esquerdo da navegação superior.
Aqui temos o menu de hambúrguer que falaremos em detalhes na próxima seção.
É por isso que nós avançamos para o ícone de seta esquerda que permite que você desfazer (Ctrl + Z) alterações e o ícone de seta direita que permite que você refazer (Ctrl + Y) alterações.

Quando você clica no ícone do olho (ou usa Ctrl + P),
você pode visualizar seu site dentro do editor do site – é por isso que chamamos de ícone de visualização.
Esse recurso de visualização no editor do site permite verificar e testar as alterações que ainda não foram salvas.
Se você fizer o mouse sobre o ícone de visualização, verá um menu suspenso com opções de visualização adicionais:

• Pré-visualização: O modo de visualização dentro do editor do site – sem salvar necessário.
• Abrir site de visualização:
  Isso abrirá seu site em uma nova guia. Se você quiser verificar e testar as alterações, você deve clicar em salvar (ou usar Ctrl + S) antes de abrir o site de visualização, pois ele mostra apenas a versão mais recente do site salvo.
• Modo de apresentação:
  Aqui você verá seu site na visualização de desktop, tablet e celular ao mesmo tempo para obter uma visão geral rápida de como seu site se parece e se comporta em diferentes viewports.
• Link de apresentação de compartilhamento: Este é o link para o modo de apresentação.
• Link para a ferramenta de feedback:
  Aqui você encontrará o link para a ferramenta de feedback que seus clientes podem usar para adicionar comentários na página diretamente a elementos específicos do site.
  Este é um verdadeiro divisor de águas que irá melhorar o processo de feedback com seus clientes.

Em seguida, temos a opção de recarga que irá recarregar o seu site.
Por favor, certifique-se de salvar quaisquer alterações se você quiser mantê-las, pois a recarga irá redefinir o seu site para a versão mais recente salva.

Ao lado de recarregar você encontrará o ícone de salvamento (Ctrl + S).
Este ícone fica laranja se as alterações no site foram feitas.
Se o seu site já for publicado, todas as alterações que você salvar serão diretamente empurradas para o site ao vivo.

No meio da navegação superior, você pode escolher entre uma visualização de desktop, tablet e telemóvel para verificar seu site em todos os dispositivos e ajustar as configurações responsivas, se necessário.

Se você passar o mouse sobre uma viewport, encontrará diferentes dispositivos predefinidos para verificar seu site em diferentes resoluções.
Usando o menu suspenso percentual, você também pode determinar qual fator de zoom deve ser usado e se você quiser corrigir o fator de zoom, você pode fazer isso clicando no bloqueio, caso contrário, o zoom será ajustado dependendo do dispositivo escolhido.

Em Design, você encontrará todas as configurações globais do site, como o esquema de cores, fontes
e design de botões, o que afetará todo o site e, assim, garantirá que você tenha um estilo e um design consistentes em todo o seu site, mesmo que você decida alterá-lo mais tarde.
Você pode substituir essas configurações de design nos painéis de configurações dos elementos e predefinições individuais.

Em Páginas, você encontrará todas as subpáginas de um site.
Você pode adicionar novas subpáginas, editar URLs e nomes de páginas, adicionar informações meta específicas do site, proteger uma subpágina com uma senha e determinar se uma subpágina deve ser listada pelos mecanismos de pesquisa.
Cada subpágina será aberta como uma guia acima da navegação superior.

Em To-do, você pode adicionar To-dos globais ou lembretes ou pode adicionar To-dos na página que podem ser conectados a elementos específicos do site.
Isso facilita o gerenciamento do processo de feedback com seus clientes que têm uma versão semelhante do recurso To-do no portal do cliente chamada ferramenta de feedback, mas também simplifica o processo de auditoria e feedback com sua equipe, por exemplo, se você verificar os sites uns
dos outros.
Como usar o recurso To-do no editor do site e no portal do cliente será explicado em detalhes aqui.

Se o seu site ainda não for publicado, você também verá um botão Publicar na navegação superior.
Isso irá redirecioná-lo para o gerenciador de domínio de um site onde você pode adicionar e gerenciar os domínios do seu site para publicar o site.

Por último, mas não menos importante, temos o menu Mais que vamos olhar com mais detalhes abaixo.

---

Menu do hambúrguer

No menu de hambúrguer você encontrará as seguintes características importantes:

• Redirecionamentos: Aqui você pode adicionar três tipos diferentes de redirecionamentos: 301, 302 e 410.
• Backups:
                                                                                                                                                                                                                                                                                                            Aqui você encontrará todos os backups que o sistema salva automaticamente a cada 5-10 minutos durante uma sessão ativa no editor do site.
  Você também pode criar seus próprios backups manuais.
• Exportação do site: Aqui você pode exportar seu site como um arquivo ZIP.
• Preferências:
  Aqui você pode configurar suas preferências ao usar o editor do site.
  Você pode, por exemplo, alterar o idioma do editor, você pode decidir se os painéis devem fechar quando você salvar o site ou se apenas a página inicial ou todas as subpáginas devem ser criadas ao adicionar um novo idioma.
• Ajuda: Aqui você tem acesso direto a todos os nossos recursos de ajuda.
• Atalhos:
  Use os atalhos implementados para ser mais eficiente ao criar seu site.
  Você pode usar atalhos comuns como Ctrl + C e Ctrl + V para copiar e colar elementos, mas também temos atalhos para adicionar facilmente novos elementos, por exemplo, ao usar Ctrl + 2 você adicionará um novo elemento de texto.
  Para abrir a visão geral dos atalhos, você também pode usar um atalho: Ctrl + K.
  Para usuários de Mac, esses atalhos podem ser usados com as teclas equivalentes.

---

Barra lateral de conteúdo

A barra lateral de conteúdo à esquerda é segmentada em diferentes categorias que facilitam a adição de novos conteúdos ao seu site.
Na barra lateral de conteúdo, distinguimos entre elementos que são componentes individuais, como títulos, textos ou imagens, e predefinições que são seções de sites pré-construídas que consistem em
diferentes elementos.
Exemplos de predefinições são acordeões, galerias de imagens ou tabelas de preços.
Os elementos são exibidos com ícones (exemplos estão na caixa vermelha) e as predefinições (caixa laranja) são exibidas com miniaturas que oferecem uma visualização da seção do site:

Em algumas categorias como “Formulários”, você encontrará predefinições e formará elementos.
Aqui você também pode fazer uso da distinção mencionada acima , os elementos de formulário são exibidos com ícones, predefinições são exibidas com miniaturas.
Ao trabalhar com formulários, é altamente recomendável começar com um preset de formulário que você pode adaptar às suas necessidades, adicionando ou excluindo elementos de formulário.
Mais informações sobre formulários podem ser encontradas aqui.

Para adicionar predefinições e elementos ao seu site, você pode simplesmente arrastá-los e soltá-los para sua posição preferida.

---

Mais menu

Em Mais você encontrará alguns recursos mais úteis:

• Configurações do site: Aqui você pode alterar o logotipo globalmente para o site e adicionar um favicon e visualização da imagem do site.
• Dados:
  Gerenciar os dados de contato e do cliente para este site em um só lugar e usar as ligações de dados em todo o site para que as alterações sejam gerenciadas em um só lugar, mas afetarão todo o site.
• SEO: Adicione metainformações para o site ou snippets de código que devem ser colocados no head?.
• Idiomas : Ative diferentes idiomas para exibir um site multilanguage.
• Gerenciador de coleções: Crie e gerencie conteúdo dinâmico como blogs.
• Arquivos: Use o gerenciador de arquivos para carregar e gerenciar imagens, arquivos e outros conteúdos necessários para o site.
• Importação de conteúdo:
  Se você quiser usar arquivos, imagens e conteúdo de um site antigo, basta usar esse recurso para importar o conteúdo diretamente para o seu site.
• Fontes :
  Gerenciar as fontes que devem ser carregadas para este site.
  Você pode selecionar fontes disponíveis ou fazer upload de fontes personalizadas.
• Desejos: Aqui você verá todas as informações e requisitos que seus clientes enviaram sob o Wishes em seu portal de clientes.

---

Footer com breadcrumb, timer e editor de código

No rodapé, você encontrará o breadcrumb que mostra a hierarquia de recipientes e elementos para obter uma visão geral de como diferentes recipientes, predefinições e elementos são aninhados.
Em outras palavras: dentro das migalhas de pão, cada elemento e seus containers são listados em conjunto com todas as classes CSS usadas.
Os contêineres predefinidos mostram o ícone da paleta de cores, os contêineres com um fundo mostram um ícone de imagem, as animações são indicadas por um ícone de estrela, elementos vinculados têm um ícone de link e elementos que fazem parte de uma coleção mostram um ícone de banco de dados. Basta clicar duas vezes sobre estes símbolos ou o nome do contentor e as definições correspondentes serão abertas.

Como você pode ver nesta imagem, clicamos em um elemento de botão que é aninhado em um contêiner que faz parte da predefinição de 3 colunas, etc.:

Você também pode usar as teclas de seta para saltar de um elemento para o próximo e, assim, também passar pelas diferentes hierarquias.
Isso é especialmente útil se você tiver muitos elementos aninhados que são difíceis de alcançar.

No lado direito do rodapé, você pode ver um temporizador que mostra quanto tempo você está no CMS durante esta sessão.
Com o gerenciamento de status e o acompanhamento de tempo, você sempre tem uma visão geral do tempo que já foi gasto trabalhando em um projeto.
Ao lado do temporizador, você encontrará o botão de código que permite acessar o código do site, incluindo CSS, JavaScript e HTML.
Aqui você pode visualizar ou editar o código do projeto, incluindo código para predefinições, ou escrever o seu próprio código.

---

Editor WYSIWYG

A seção do meio é o editor WYSIWYG da Sitejet.
WYSIWYG significa “o que você vê é o que você recebe”.
Clique duas vezes em qualquer elemento enquanto estiver no editor e suas configurações serão exibidas em um painel no lado esquerdo da tela.
As preferências podem ser acessadas através de um ícone de peça de quebra-cabeça que aparece à esquerda de um elemento quando você passa o mouse sobre ele.
Se você clicar nele, a janela com as configurações padrão será aberta.

Clique com o botão direito do mouse em um elemento para abrir o menu de contexto.
Existem opções para editar o item, cortar, copiar, colar, adicionar e excluir itens e muito mais.
O menu de contexto fornece links para edição e a opção para torná-lo “Editável para Clientes”.
Com esse recurso, você pode fazê-lo para que certas partes da página possam ser editadas por seus clientes a partir do portal do cliente.
Aqui você tem a possibilidade de compartilhar apenas este elemento, todos os elementos deste tipo na página, ou todos os elementos da página.

Caso tenha alguma duvida ou outras questões não hesite em nos contactar pelos nossos diversos métodos de contacto:

Emails:
geral@trignosfera.pt
Admin@trignosfera.pt
apoio@trignosfera.pt

Ou através das nossas presenças nas redes sociais:

Facebook:
www.facebook.com/trignosfera

Twitter:
www.twitter.com/trignosfera

Com os meus melhores Cumprimentos,

Team Trignosfera