Homepage Banner Grid - Colagem de Imagens Clicáveis com Três Layouts Promocionais

A sua página inicial tem cerca de três segundos para apontar um caminho

Um slider por onde as pessoas passam a correr e uma fila de «produtos em destaque» não são merchandising. Uma grelha de banners é: um punhado de imagens, cada uma delas um caminho pensado para a parte do catálogo onde quer mesmo ter os seus clientes. Este módulo constrói essa grelha a partir do back office, sem tocar num único ficheiro do tema.

Três layouts prontos a preencher

• Feature Split (destaque principal) — um bloco grande de destaque mais quatro blocos de apoio. Cinco blocos, para uma loja com uma mensagem principal e alguns caminhos secundários.
• Mosaic (mosaico) — uma grelha rica ao estilo de revista, com dezasseis blocos, para catálogos com muitas categorias que merecem visibilidade.
• Showcase (montra) — um layout editorial equilibrado de cinco blocos, para quando nada deve dominar.

Cada layout tem uma pré-visualização em direto na página de configuração, por isso escolhe a olhar e não a adivinhar.

Como funciona

• 1. Escolha um layout — clique num dos três cartões de pré-visualização; a página recarrega e mostra os espaços de imagem desse layout.
• 2. Defina as opções de estilo — zoom ao passar o rato, legendas sobrepostas, cantos arredondados, abrir em novo separador e o espaçamento entre blocos, de 0 a 16 px.
• 3. Preencha os blocos — carregue uma imagem para cada um, defina a ligação que abre e acrescente um título se quiser legenda. Guarde e já está na sua página inicial.

Cada bloco é uma ligação a sério

Um bloco pode abrir uma categoria, uma marca, um produto ou qualquer página que queira — um caminho interno como /3-clothes ou um endereço https:// completo. As ligações são validadas, pelo que só são aceites caminhos internos e URLs http(s); tudo o resto é ignorado. Os títulos servem ao mesmo tempo de legenda sobreposta e de etiqueta de acessibilidade da ligação.

Responsivo, a partir de uma só folha de estilos

A versão 1.x incluía uma folha de estilos diferente para cada largura fixa em píxeis — 980, 1000, 1110, 1170 — e um template diferente por versão do PrestaShop. As dez folhas de estilos e os sete templates desapareceram, substituídos por uma única folha de estilos CSS-Grid e um template orientado a dados. Cada layout reorganiza-se sozinho, do computador para uma grelha de duas colunas em tablet e daí para uma coluna única no telemóvel. Deixou de ter de escolher uma largura em píxeis para a sua loja.

Verifica a sua própria configuração

O painel Estado, no topo da página de configuração, diz-lhe se a grelha está mesmo associada à página inicial e se a pasta de imagens tem permissões de escrita — com um botão Mostrar na página inicial de um só clique quando não está. As velhas instruções do género «faça chmod 777 à pasta» e «mova o módulo para a primeira posição» dão lugar a verificações reais.

Mais seguro do que o módulo que substitui

As imagens carregadas são validadas como imagens reais, contra uma lista de extensões permitidas, e guardadas em libs/custom/ com nomes distintos, para que uma futura atualização do módulo nunca possa substituir os seus banners pelas imagens de exemplo — uma falha latente do desenho da versão 1.x. A folha de estilos é carregada através de actionFrontControllerSetMedia em vez do antigo hook displayHeader, e o bloco é apresentado pela interface de widgets do PrestaShop, por isso também o pode colocar onde quiser com {widget name='blockpicturecollagepro'}.

Compatibilidade

PrestaShop 1.7, 8 e 9, em oito idiomas: alemão, espanhol, francês, inglês, italiano, neerlandês, polaco e turco. Compatível com multiloja, para poder carregar banners diferentes em cada loja. Associa-se ao hook Home na instalação e nunca edita nem substitui um ficheiro do tema — ao desinstalar, remove as suas definições, ligações, títulos e imagens carregadas e deixa o seu tema exatamente como estava.

Perguntas frequentes

Que tamanho devem ter os meus banners?

Os blocos recortam a imagem para preencher o espaço, por isso as dimensões exatas não são críticas. Cerca de 1200×800 px nos blocos grandes e 600×400 px nos pequenos ficam nítidos. São aceites JPG, PNG, GIF e WEBP.

Cada bloco pode levar a um sítio diferente?

Sim — cada bloco tem a sua própria imagem, ligação e título opcional, e pode apontar para qualquer categoria, marca, produto ou página.

Funciona no telemóvel?

Sim. Uma única folha de estilos CSS-Grid reorganiza cada layout do computador para uma grelha de duas colunas em tablet e depois para uma coluna única no telemóvel.

Tenho de editar o meu tema?

Não. O módulo associa-se ao hook Home durante a instalação. Se o seu tema usar um hook de página inicial personalizado, coloque-o antes com {widget name='blockpicturecollagepro'}.

A grelha não aparece na minha página inicial — e agora?

O painel Estado diz-lhe se está associada e oferece um botão «Mostrar na página inicial» de um só clique. Também pode verificar o hook displayHome em Design → Posições e mover a grelha para cima do seu slider.

Posso ter banners diferentes em lojas diferentes?

Sim, o módulo é compatível com multiloja — os banners são carregados loja a loja.

O que acontece aos meus banners quando o módulo é atualizado?

Nada. Os ficheiros carregados ficam guardados em libs/custom/ com nomes distintos, precisamente para que uma atualização não os possa substituir pelas imagens de exemplo.