Você sabia que você e sua equipe podem criar ótimos sites - e economizar tempo - criando seus próprios templates de site ? As seções de equipe podem ser usadas várias vezes, para vários clientes em diversos segmentos. Não importa se sua equipe tem 10 ou 110 pessoas, as seções de equipe são uma maneira fácil e rápida de usar modelos personalizados e bem feitos, que ficam lindos em qualquer dispositivo.

Para aproveitar ao máximo os templates criados, siga estas dicas:

Um site é para um usuário específico , os templates de site são para vários usuários . Um site será usado uma vez , os modelos serão usados várias vezes . Ao criar um site, você tem um público específico em mente .

Quando você cria um template, está criando para um público em geral . (Por exemplo, quando você cria um site, provavelmente está construindo para um restaurante específico; quando cria um template, está construindo um modelo pronto para os restaurantes que venham a ser seus clientes no futuro.)

Considere elementos como a paleta de cores (trabalhar com no máximo três cores é o ideal) e fontes.

Você pode começar com um dos templates da Duda para criar suas próprias versões personalizadas. Na barra superior do editor, clique em Equipe> Modelos de equipe> Criar modelos. Você pode começar com um modelo em branco ou escolher um com imagens e texto. Ao escolher um modelo, considere o seguinte:

- Estilo de cabeçalho e navegação

- Segmento (restaurante, serviço etc.)

- Finalidade (site completo ou Landing Page) 

- Número de páginas (single page ou várias páginas)

- Recursos e widgets (loja, blog etc.) 

- Esquema de cores (escuro ou claro)

Depois de escolher o template, clique em Criar e personalizar. É a hora de dar um nome ao modelo. Pense em algo significativo que faça sentido para todos da sua equipe. Por exemplo, o "Template de quarta-feira" provavelmente será inútil, enquanto o "Template de consultório odontológico" será muito útil. Se você mudar de idéia sobre o nome do template depois, não se preocupe: você pode renomeá-lo a qualquer momento.

A partir deste ponto, você estará trabalhando no modo de modelo. Quando terminar, clique em Concluído para salvar seu design como um Modelo de equipe, o que significa que qualquer pessoa que crie sites na sua equipe poderá usá-lo como base para outros sites.

Todos os templates são totalmente responsivos, por isso é realmente importante verificar todas as versões (computador, tablet e celular), pois alguns elementos podem precisar ser ajustados. Primeiro, foque no design da versão desktop e, quando estiver perfeito, vá para o tablet e depois para as versões móveis.

Os elementos do site que podem ser personalizados para cada versão incluem:

 

- Menu de cabeçalho e navegação 

-Tamanho da fonte

- Espaços de preenchimento e margem 

- Layout das galerias de fotos

- Tamanho do pop-up 

- Imagens e cores de plano de fundo do site

É aqui que você define os estilos que se aplicam a todas as páginas e widgets no modelo. Defina todos os elementos (mesmo que você não os use nesse momento), para que sejam padronizados quando você e seus colegas de equipe usarem o template. Os elementos controlados aqui incluem: 

Fontes globais: defina o tamanho e a cor da fonte para tudo, de H1 a H6. Esses estilos também se aplicam ao blog.

Botões globais: defina o design para todos os botões. Atenha-se à sua paleta de cores (não mais que três cores; consulte a Etapa 2) e considere adicionar sombras para fazer os botões aparecerem.

Plano de fundo do site: defina uma imagem ou cor de plano de fundo para todas as páginas e por página.

Layout do site: escolha entre três layouts de desktop personalizáveis ​​e escolha a largura da área de trabalho: 960px ou 1200px.

A home do site, ou página inicial, é super importante, pois define todo o fluxo do site. Se o seu modelo tiver várias páginas, deve haver uma seção na página inicial para cada página que aparece na navegação.

Por exemplo, se a navegação incluir: Sobre / Serviços / Equipe / Contato, a página inicial deverá ter uma seção ou linha relacionada a cada uma delas. Se o seu modelo tiver uma única página, a navegação deverá se conectar com as âncoras na página.

Embora muitas (se não todas) as imagens que você usa no template de site sejam substituídas quando usadas para criar um site, ainda recomendamos o uso de imagens relevantes e de alta qualidade que fornecem orientação e inspiração.

A principal é a imagem superior da página - selecione uma imagem ótima, relevante e de alta qualidade para ela. Quanto ao restante das imagens, use imagens em HD de 1920px com um peso máximo de 450k.

Nunca use imagens que contenham texto. Se você quiser texto na imagem principal (um slogan, por exemplo), adicione-o usando um widget de parágrafo.

Adicione os widgets que você deseja na barra lateral esquerda. Para adicionar páginas, clique na guia Páginas e clique em Nova página. Para adicionar seções, passe o cursor sobre o sinal de mais que aparece entre as seções e clique nele para selecionar as seções.

Widgets, páginas e seções assumem automaticamente os Estilos Globais do site (e são completamente personalizáveis).

Quando você adiciona um blog ao seu template, uma nova página do blog é automaticamente adicionada à navegação. Você pode personalizar o nome desta página; por exemplo, Notícias, Atualizações, Histórias, etc.

Depois que um blog for adicionado, os widgets relacionados ao blog, como “Todas as postagens” e “Pesquisa”, ficarão disponíveis.

Como o blog, quando você adiciona uma loja ao seu site, ela é automaticamente adicionada à navegação do site. A loja padrão permite até dez itens. Se o modelo for usado para criar um site que tenha uma loja mais rica, a loja poderá ser atualizada a partir do site.

 Quando o design da versão desktop estiver concluído, vá para a versão do tablet e faça os ajustes necessários. Observe que as duas visualizações são quase idênticas, com duas exceções: a versão para tablet possui apenas duas versões de layout (a de desktop possui três) e existem opções de layout diferentes para o widget Galeria de Imagens. 

Quando o design das versões de desktop e tablet estiver perfeito, vá para a versão móvel. Lembre-se de que, na maioria dos casos, é assim que os visitantes experimentam o site, portanto, torne esta versão excelente. 

Você tem vários layouts para escolher, embora recomendamos os dois primeiros. Revise todos os elementos do Design global (tamanho da fonte, botões, etc.) para garantir uma ótima aparência no celular; caso contrário, você pode fazer ajustes com facilidade. Você também pode alterar o espaçamento e a posição de linhas, colunas e widgets. Recomendamos que você não use mais de duas colunas no celular.

Em áreas com várias colunas, anote a ordem das colunas no celular. Se as colunas não estiverem organizadas como você desejar, você poderá reverter a ordem delas.

Não há fundos de vídeo no celular, portanto, se o modelo tiver um vídeo no computador, defina uma imagem no celular.

Por fim, verifique os ícones e a largura do divisor para garantir que tudo esteja ótimo.

Lighthouse é a ferramenta automatizada do Google para melhorar a qualidade da página da web. Para otimizar seu template, siga estas dicas:

- Para imagens de fundo, verifique se elas não são maiores que 450k - 1920px.

- Para imagens pequenas (galeria de imagens, imagens de equipe), carregue imagens com o tamanho certo desde o início (evite imagens grandes, se não precisa delas).

- Evite usar código personalizado, especialmente JavaScript no cabeçalho.

- Coloque os widgets que podem diminuir o carregamento do site (por exemplo, o widget de mapa e o widget HTML) abaixo da dobra.

Veja o que são os Core Web Vitals, métricas Google para melhorar a experiência dos usuários na Internet.

Agora é a hora de dar aquela revisada no template para que quem o utilize depois tenha um modelo limpo e agradável para trabalhar. Fácil assim:

- Exclua imagens desnecessárias da biblioteca de imagens.

- Verifique se todos os links do site estão corretos (menu de navegação, botões, âncoras e mais).

- Verifique se o URL de cada página corresponde ao nome da página.

- Verifique se os Projetos globais correspondem aos modelos (tamanhos e cores de texto, botões e mais).

- Verifique a paleta de cores para garantir que apenas as cores do template sejam usadas.

É isso aí. Seu template de site está pronto. Agora é só contar pra sua equipe que eles têm um modelo prontinho para ser usado, quando quiserem!

Aproveite e convide seu time para experimentar gratuitamente os lindos templates da Duda!