O template Shopik é um exemplo de site TOWeb 13 em que uma imagem parece ter sido cortada em 3 partes quando, na verdade, se trata de uma única imagem reutilizada 3 vezes. Como adicionar este tipo de efeito ao seu site sem ter necessariamente de usar esse template? É o que vamos explicar neste tutorial, para que obtenha o mesmo resultado com as suas próprias imagens em qualquer página do seu site.

  • 1.º caso: se o seu site foi construído a partir do template Shopik e pretende apenas substituir a imagem da página inicial pela sua, basta selecionar um a um cada um dos 3 parágrafos da página inicial e adicionar-lhes sempre o mesmo ficheiro da sua imagem de fundo através do botão "Alterar imagem". E é tudo!
    Atenção: é importante que seja adicionada sempre exatamente a mesma fotografia, sem qualquer retoque, recorte ou a mínima alteração da sua parte.
Definições do parágrafo no TOWeb para o efeito de imagem recortada: fundo de imagem, altura total e efeito de paralaxe
  • 2.º caso: se o seu site não foi construído a partir do template Shopik e/ou pretende que a sua imagem não seja dividida em 3 mas, por exemplo, em 2 ou 4 partes, e eventualmente também noutra página, proceda da seguinte forma:
  1. Comece por adicionar um parágrafo com muito pouco conteúdo, por exemplo sem título, apenas algumas palavras e/ou uma ligação colocada num botão
  2. Depois de criar este parágrafo, aplique-lhe uma largura de 4 em 12, ou seja, 1/3 da largura da página cada um se pretender uma divisão em 3 partes como no Shopik (ou ajuste a largura para 3 em 12, ou seja, 1/4 da largura da página, se pretender uma divisão em 4 partes)
  3. Depois, em "Fundo", selecione "Imagem" para adicionar a sua fotografia
  4. Ative depois as opções "Altura total" e "Efeito parallax". Estas 2 opções combinadas são necessárias para obter o efeito de divisão.
  5. Por fim, utilize o botão "duplicar" para copiar o seu parágrafo as vezes necessárias e preencher assim a largura da sua página.

E pronto: basta agora substituir o texto de cada parágrafo pelo da sua escolha (por exemplo ligações em botões, como no template Shopik), aplicando eventualmente uma alteração da cor do texto e/ou um efeito "Opacidade" consoante a fotografia, para que os textos fiquem bem legíveis sobre a imagem de fundo. Por fim, se a divisão com espaçamento não lhe agradar, pode marcar a caixa "Sem margem" para obter a imagem de fundo completa com os textos dos vários parágrafos colocados por cima.

Para que os seus textos se mantenham adaptados e sempre legíveis em todos os tipos de dispositivos (sobretudo tablets e smartphones), será necessário limitar o conteúdo dos parágrafos a poucas palavras e/ou não utilizar um tamanho de letra demasiado grande. E se mais tarde quiser apenas alterar a imagem de fundo, bastará fazer as substituições indicadas no 1.º caso.

Observações:

  • Certifique-se de que utiliza uma fotografia com uma resolução de ecrã suficientemente elevada, pois, consoante os dispositivos que visitam o seu site, apenas algumas partes poderão ser apresentadas e a imagem de fundo poderá perder nitidez se a resolução não for suficiente. Da mesma forma, para evitar que a imagem de fundo seja demasiado alargada/ampliada, recomendamos utilizar um site de largura fixa: assim evitará que fique desfocada em ecrãs grandes com resoluções superiores à largura da sua fotografia.
  • Para reutilizar uma imagem já existente no seu site, pode manter premida a tecla CTRL enquanto clica no botão de adicionar imagem.