Personalizar os templates ou modelo do site do Zyro é fácil e divertido! É só ir até a página de Websites, encontrar o seu site e clicar em Editar.

Possibilidades de personalização

  1. Personalizar cores

  2. Personalizar fontes

  3. Adicionar novos itens: páginas, seções, elementos

  4. Personalizar elementos de botão: estilo e opções de link

  5. Editar o cabeçalho do seu site (logotipo, menu)

  6. Copiar e Colar seções e elementos

  7. Duplicar página, seções, elementos

  8. Remover conteúdo desnecessário: deletar páginas, seções, elementos

  9. Adicionar código HTML personalizado

  10. Personalizar a versão móvel/celular no seu site

  11. Adicionar um blog

  12. Adicionar uma loja à qualquer template ou modelo de site

1. Personalizar cores

Para alterar a paleta de cores global do seu site, expanda o a aba de Estilos à esquerda e verifique se você está na aba de Cores. Escolha uma predefinição preferida ou personalize ela clicando em Alterar cores.

Clique em uma cor para personalizar ela. Você define uma cor arrastando o cursor do seu mouse ao redor da área colorida, assim como usando valores de cor HEX, RGB ou HSL. Você sempre pode voltar para a paleta de cores original clicando em Redefinir cores.

Você também pode personalizar as cores para cada elemento do site individualmente: é só clicar em um elemento e escolher Editar.

2. Personalizar fontes

Para editar fontes globais, expanda a aba de Estilos à esquerda e abra a aba de Texto. Escolha entre os pares de fontes sugeridos ou personalize eles clicando em Editar estilos de texto. Cada par consiste em duas fontes: uma para títulos e outra para parágrafos e links de menu. Essas duas fontes são usadas em todo o seu site.

Você também pode personalizar o estilo de cada elemento de texto localmente: é só selecionar o segmento de texto e alterar seu tamanho, cor, fonte, etc. através das configurações do elemento de texto.

3. Adicionar novos itens: páginas, seções, elementos

Você pode adicionar um número ilimitado de páginas, seções e elementos ao seu site 🧙🏼‍♂️

Para adicionar mais páginas, expanda a aba de Páginas e navegação à esquerda. Abaixo, você verá opções para adicionar uma nova página, um menu suspenso ou um link como item de menu. A seção do menu, ou o cabeçalho, é a seção superior do seu site. Para saber mais sobre a gestão de menus do site, consulte aqui!

Para adicionar mais seções, clique no botão de Adicionar seção – você pode encontrá-lo entre duas seções. Existem muitos tipos de seções para escolher!

Para adicionar mais elementos, expanda a aba de Adicionar elementos à esquerda. Você pode arrastar e soltar um elemento na área desejada ou simplesmente clicar em um elemento e ele será colocado na seção selecionada. Para selecionar (ou ativar) uma seção, basta clicar nela – uma seção ativa sempre tem uma borda azul. Saiba mais sobre os elementos de um site aqui!

4. Personalize os elementos de botão: estilos e opções de link

Clique em um elemento de botão e escolha Editar botão para abrir suas configurações. Lá você verá três guias: Geral, Estilo e Layout.

  • Nas configurações gerais, você pode renomear seu botão e configurar as opções de link. Você pode vincular um botão a uma página interna (dentro do seu site), URL externa (qualquer link), número de telefone ou endereço de e-mail. Saiba mais sobre isso aqui 💡

  • Nas configurações de estilo, escolha entre o estilo do botão principal ou secundário, altere a cor, a cor do texto, o tamanho e a forma do botão. Obs: a forma do botão é uma configuração global, ou seja, todos os elementos de botão em seu site terão a mesma forma para manter a consistência.

  • Na última guia, você pode alterar o alinhamento do botão dentro da área do elemento. Dica: Clique duas vezes na opção central para alinhamento horizontal e o botão será totalmente esticado horizontalmente. Dessa forma, os botões podem parecer mais organizados se seus títulos forem de vários comprimentos.

5. Editar o cabeçalho do seu site (logotipo, menu)

O cabeçalho é a seção superior do seu site. É também o local onde o menu do seu site fica visível. Um cabeçalho pode conter um logotipo um ícone de sacola de compras.

Obs: se você não conseguir ver o seu cabeçalho, pode ser que todas as suas páginas estejam ocultas. Para acessar as configurações do cabeçalho, pelo menos um item de menu (uma página, um link ou um menu suspenso) deve ser atribuído à navegação principal.

Para abrir as configurações do cabeçalho, é só clicar na seção. Você verá ícones de configuração no lado inferior direito do cabeçalho.

6. Copiar e Colar seções e elementos

Para acelerar o processo, você pode copiar e colar elementos e seções em outras seções ou até mesmo em outras páginas do seu site. Basta clicar com o botão direito do mouse em um item e você verá o menu secundário. Você também poderá usar atalhos populares para copiar, cortar, excluir e assim por diante. Saiba mais sobre copiar e colar seções do site aqui 💡

7. Duplicar páginas, seções e elementos

Para duplicar uma página, expanda a aba de Páginas e navegação à esquerda. Encontre uma página em questão, abra suas configurações e clique em Duplicar. Lembre-se de renomear a página duplicada e personalizá-la, se achar necessário.

Para duplicar uma seção, clique nela e pressione o botão de Duplicar à direita.

Para duplicar um elemento, clique nele e aperte o botão de Duplicar.

8. Remover conteúdo desnecessário: apagar páginas, seções e elementos


Para excluir uma página, expanda a aba de Páginas e navegação à esquerda. Encontre uma página em questão, abra suas configurações e clique em Excluir.

Para excluir uma seção, clique nela e pressione o botão de Excluir à direita.

Para excluir um elemento, clique nele e pressione o botão de Excluir.

9. Adicionar um código HTML personalizado

Existem duas maneiras de adicionar código HTML ao seu site Zyro, e isso depende do tipo de código que está adicionando.

Se o código precisar ser adicionado à parte <head></head> do código-fonte do seu site (cabeçalho do código-fonte), faça isso nas configurações de integração do site.

Se o código precisar ser adicionado à parte <body></body> do código-fonte do seu site (corpo do código fonte), use o elemento de código de incorporação embutido.

10. Personalizar a versão móvel/celular do seu site

Por último, mas não menos importante, garanta que a versão móvel do seu site tenha uma boa aparência! Você pode alternar para a visualização móvel clicando no ícone do celular na barra de ferramentas superior.

Na visualização móvel/celular, os elementos são exibidos na ordem em que foram adicionados à visualização da área de trabalho. Você precisa classificar os elementos na visualização móvel manualmente. Reordene os elementos arrastando eles e soltando. Essas alterações não afetarão a visualização da área de trabalho ou desktop. Saiba mais sobre isso aqui 💡

11. Adicionar um blog

Você pode adicionar um blog a qualquer modelo ou template de site! Simplesmente expanda a aba de Blog à esquerda e clique em Iniciar um blog.

Uma nova página de blog será adicionada ao seu site automaticamente.

Você pode gerenciar todas as postagens do seu blog na aba de Blog: saiba mais 💡

12. Adicionar uma loja a qualquer template ou modelo de site

Você pode facilmente adicionar uma loja virtual a qualquer modelo de site!

Obs: diferentes recursos de e-commerce vêm com os planos Business, Online Store e Advanced Store.

Para inserir uma seção ou página da loja em seu site, clique em Adicionar seção e selecione Lite Store (disponível nos planos Business) ou Online Store (disponível nos planos Online Store e Advanced Store).

E é isso! Agora, você pode acessar seu gerenciador de loja 🎉

Aprenda mais:

Encontrou a sua resposta?