O layout do Pro Gallery em seu site mobile é responsivo, o que significa que ele se ajusta automaticamente para se ajustar a diferentes tamanhos de tela e dispositivos. Você pode escolher um layout completamente diferente para o seu Pro Gallery para que ele fique perfeito em dispositivos mobile.
Selecione um layout predefinido com recursos integrados ou um layout personalizado se preferir personalizar o layout por conta própria. Qualquer que seja a opção de layout que você escolher, você sempre pode personalizar o design da galeria.
Neste artigo, saiba mais sobre:
Layouts personalizados
Esses layouts de galeria permitem que você faça o design e personalize seu Pro Gallery a partir do zero. Você pode escolher entre uma ampla variedade de layouts personalizáveis para mostrar sua mídia em dispositivos móveis.
Para personalizar o layout do seu site mobile:
- Vá para o seu Editor mobile:
- Editor Wix: clique no ícone Mobile na parte superior do Editor.
- Editor X: clique no breakpoint relevante na parte superior do Editor X.
- Clique no Wix Pro Gallery no Editor mobile.
- Clique em Configurações.
- Selecione um layout para sua galeria.
- Clique em Personalizar layout para alterar o layout para que fique exatamente como você deseja (consulte Recursos de layout personalizáveis abaixo).
Layouts predefinidos
Os templates predefinidos incluem uma variedade de recursos internos de layout. Esses layouts de galeria prontos permitem que você acelere o processo de mostrar suas imagens em seu site. Enquanto os próprios layouts não são personalizáveis, você pode personalizar o design da galeria a partir da aba Design.
Para escolher um layout predefinido:
- Clique no Wix Pro Gallery no Editor mobile.
- Clique em Configurações.
- Clique na aba Predefinido.
- Selecione um layout para sua galeria.
Recursos de layout personalizáveis
Cada layout personalizável oferece uma variedade de configurações que você pode personalizar, incluindo direção da rolagem, direção da galeria e orientação da imagem.
Clique em uma opção abaixo para obter mais detalhes sobre esse layout:
Use o layout Colagem quando quiser mostrar imagens de orientação diferente (vertical e horizontal) colocadas aleatoriamente dentro da galeria.
- Direção de rolagem: escolha a rolagem vertical ou horizontal.
- Orientação da galeria: escolha se as imagens serão mostradas na vertical ou na horizontal.
- Deslizar automaticamente: escolha exibir seus itens em um slideshow contínuo:
- Intervalos: sua galeria desliza para o próximo item após o período de tempo escolhido. Arraste o slider "Tempo entre as imagens" para alterar o intervalo de segundos entre os itens.
- Contínuo: sua galeria desliza automaticamente. Arraste o slider Velocidade do slideshow para ajustar a velocidade dos slides da galeria.
- Tamanho da miniatura: escolha o tamanho das imagens na galeria.
- Espaçamento: escolha quanto espaço deseja ter entre as imagens.
- Densidade da colagem: escolha quantas imagens serão exibidas de cada vez na galeria.
- Botão "Ver mais": escolha se deseja mostrar ou ocultar o botão Ver mais.
- Quantas imagens carregam?: (Essa opção só é relevante se você tiver ativou um botão Ver mais)
- Todas as imagens
- Mais uma seção (adiciona outra seção do mesmo tamanho que a galeria original)
Use o layout Mosaico quando quiser mostrar imagens de orientação diferente colocadas em colunas ou linhas.
- Orientação da galeria: escolha se as imagens serão mostradas na vertical ou na horizontal.
- Tamanho da miniatura: escolha o tamanho das imagens na galeria.
- Espaçamento: escolha quanto espaço deve haver entre as imagens.
- Botão "Ver mais": escolha se deseja mostrar ou ocultar o botão Ver mais.
- Quantas imagens carregam?: (Essa opção só é relevante se você tiver ativou um botão Ver mais)
- Todas as imagens
- Mais uma seção (adiciona outra seção do mesmo tamanho que a galeria original)
Utilize esse layout quando quiser que suas imagens sejam exibidas dentro de uma grade.
- Direção de rolagem: escolha a rolagem vertical ou horizontal.
- Redimensionar miniatura:
- Recortar: você pode escolher a proporção de imagem.
- Ajustar: adapta o tamanho da imagem ao tamanho da galeria.
Observação: as opções Largura e cor da borda e Raio do canto só estão disponíveis quando você opta por recortar suas miniaturas nas configurações do layout.
- Proporção da imagem: escolha entre as opções de proporção de imagem disponíveis, por exemplo (4:3, 1:1).
- Deslizar automaticamente: escolha exibir seus itens em um slideshow contínuo:
- Intervalos: sua galeria desliza para o próximo item após o período de tempo escolhido. Arraste o slider "Tempo entre as imagens" para alterar o intervalo de segundos entre os itens.
- Contínuo: sua galeria desliza automaticamente. Arraste o slider Velocidade do slideshow para ajustar a velocidade dos itens da galeria.
- Pausar ao passar o mouse: clique na alavanca para ativar ou desativar a pausa do slideshow quando um visitante passa o mouse sobre um item da galeria.
- Ajustar a tela: mostra quantas imagens podem caber dentro da galeria com um tamanho fixo
- Definir itens por linha: arraste o slider para mostrar mais ou menos imagens por linha.
- Tamanho da miniatura: escolha o tamanho das imagens na galeria.
- Imagens por coluna: escolha quantas imagens são mostradas por coluna (somente quando a orientação horizontal é escolhida).
- Espaçamento: escolha quanto espaço deve haver entre as imagens.
- Botão "Ver mais": escolha se deseja mostrar ou ocultar o botão Ver mais (aparece somente se a direção de rolagem vertical for escolhida).
- Quantas imagens carregam?: (Essa opção só é relevante se você tiver ativou um botão Ver mais)
- Todas as imagens
- Mais uma seção (adiciona outra seção do mesmo tamanho que a galeria original)
Utilize o layout Miniaturas quando quiser mostrar várias miniaturas ao lado da imagem selecionada.
- Imagens contínuas: escolha se deseja ou não desativar o botão “Próximo” na última imagem.
Observação: o botão “Voltar” sempre é desativado quando você chega na primeira imagem quando volta para trás. - Deslizar automaticamente: escolha exibir seus itens em um slideshow contínuo:
- Intervalos: sua galeria desliza para o próximo item após o período de tempo escolhido. Arraste o slider "Tempo entre as imagens" para alterar o intervalo de segundos entre os itens.
- Contínuo: sua galeria desliza automaticamente. Arraste o slider Velocidade do slideshow para ajustar a velocidade dos itens da galeria.
- Pausar ao passar o mouse: clique na alavanca para ativar ou desativar a pausa do slideshow quando um visitante passa o mouse sobre um item da galeria.
- Tempo entre as imagens: escolha quanto tempo se passa antes do slide mudar (aparece somente quando "Deslizar automaticamente” é ativado). Observação: se você quiser alterar o efeito de transição, vá para a aba "Animação de slides" nas Configurações de Design.
- Redimensionar miniatura:
- Recortar: adapta o tamanho da imagem ao tamanho da galeria.
- Ajustar: mostra a imagem em sua proporção original e a adapta ao tamanho da galeria. Se houver muito espaço vazio ao redor da imagem, você precisa aumentar a altura da galeria.
Observação: as opções Largura e cor da borda e Raio do canto só estão disponíveis quando você opta por recortar suas miniaturas nas configurações do layout.
- Posição da miniatura: escolha onde deseja que as miniaturas apareçam na tela (abaixo, à esquerda, acima ou à direita da imagem que está sendo exibida).
- Tamanho da miniatura: arraste o slider para escolher o tamanho das imagens na galeria.
Observação: se você tiver apenas algumas imagens e houver um espaço vazio sob a imagem principal, você precisa aumentar o tamanho da miniatura. - Espaçamento da miniatura: arraste o slider para escolher quanto espaço deve existir entre as imagens.
- Número de itens exibidos: arraste o slider para ajustar como as imagens são mostradas de cada vez.
Observação: atualmente, não é possível ajustar o alinhamento das suas miniaturas. Se isso é algo que você gostaria de ver no futuro,
vote nesse recurso.
Utilize o layout Slider se quiser mostrar várias imagens com uma rolagem horizontal.
Observação: o número de imagens mostradas de cada vez nesse layout depende do tamanho da galeria. Se algumas imagens aparecerem cortadas, você precisa alterar o tamanho da galeria. Outra solução é escolher “Recortar” e “Responsiva” nas configurações do layout.
- Imagens contínuas: escolha se deseja por permitir que os visitantes percorram suas imagens continuamente.
- Deslizar automaticamente: escolha exibir seus itens em uma apresentação de slides contínua:
- Intervalos: sua galeria desliza para o próximo item após o período de tempo escolhido. Arraste o slider "Tempo entre as imagens" para alterar o intervalo de segundos entre os itens.
- Contínuo: sua galeria desliza automaticamente. Arraste o slider Velocidade do slideshow para ajustar a velocidade dos itens da galeria.
- Pausar ao passar o mouse: clique na alavanca para ativar ou desativar a pausa do slideshow quando um visitante passa o mouse sobre um item da galeria.
- Tempo entre as imagens: escolha quanto tempo se passa antes do slide mudar (aparece somente quando "Deslizar automaticamente” é ativado).
- Redimensionar miniatura:
- Recortar: escolha se a proporção é fixa ou responsiva.
- Ajustar: mostra a imagem em sua proporção original e a adapta ao tamanho da galeria. Se houver muito espaço vazio ao redor da imagem, você precisa aumentar a altura da galeria.
Observação: as opções Largura e cor da borda e Raio do canto só estão disponíveis quando você opta por recortar suas miniaturas nas configurações do layout.
- Proporção da imagem:
- Responsiva: o tamanho da imagem será ajustado automaticamente dependendo do dispositivo de quem está visualizando.
- Fixa: escolha entre as opções de proporção de imagem disponíveis, por exemplo (4:3, 1:1). As imagens aparecem nessa proporção em todos os dispositivos.
- Número de itens exibidos: arraste o slider para ajustar como as imagens são mostradas de cada vez. (Essa opção só está disponível quando você escolhe a proporção da imagem responsiva)
- Espaçamento: escolha quanto espaço deve haver entre as imagens.
Utilize o layout Slides se quiser mostrar uma imagem de cada vez com uma rolagem horizontal.
- Imagens contínuas: escolha se deseja por permitir que os visitantes percorram suas imagens continuamente.
- Deslizar automaticamente: escolha exibir seus itens em um slideshow contínuo:
- Intervalos: sua galeria desliza para o próximo item após o período de tempo escolhido. Arraste o slider "Tempo entre as imagens" para alterar o intervalo de segundos entre os itens.
- Contínuo: sua galeria desliza automaticamente. Arraste o slider Velocidade do slideshow para ajustar a velocidade dos itens da galeria.
- Pausar ao passar o mouse: clique na alavanca para ativar ou desativar a pausa do slideshow quando um visitante passa o mouse sobre um item da galeria.
- Tempo entre as imagens: escolha quanto tempo se passa antes do slide mudar (aparece somente quando "Deslizar automaticamente” é ativado).
Observação: se você quiser alterar o efeito de transição, vá para a aba “Animação de slides” nas configurações de “Design”. - Barra de informações: adiciona espaço para ícones, título e descrição sob a galeria.
- Botão Reproduzir: adicione um botão para permitir que os visitantes pausem ou reproduzam os slides. (Essa opção só está disponível quando você ativar a opção "Deslizar automaticamente").
- Redimensionar miniatura:
- Recortar: adapta o tamanho da imagem ao tamanho da galeria.
- Ajustar: mostra a imagem em sua proporção original e a adapta ao tamanho da galeria. Se houver muito espaço vazio ao redor da imagem, você precisa aumentar a altura da galeria.
Observação: as opções Largura e cor da borda e Raio do canto só estão disponíveis quando você opta por recortar suas miniaturas nas configurações do layout.
Utilize o layout Faixa se quiser mostrar várias imagens em uma coluna.
- Número de itens exibidos: escolha quantos itens de galeria são exibidos de cada vez.
- Espaçamento: escolha quanto espaço há entre os itens da sua galeria.
- Botão "Ver mais": escolha se deseja mostrar ou ocultar o botão Ver mais.
- Quantas imagens carregam: (somente se o botão Ver mais for mostrado)
- Todas as imagens
- Mais uma seção (adiciona outra seção do mesmo tamanho que a galeria original)
Utilize o layout Coluna se quiser mostrar várias imagens de cada vez em uma linha.
- Imagens contínuas: escolha se deseja por permitir que os visitantes percorram suas imagens continuamente.
- Deslizar automaticamente: escolha exibir seus itens em uma apresentação de slides contínua:
- Intervalos: sua galeria desliza para o próximo item após o período de tempo escolhido. Arraste o slider "Tempo entre as imagens" para alterar o intervalo de segundos entre os itens.
- Contínuo: sua galeria desliza automaticamente. Arraste o slider Velocidade do slideshow para ajustar a velocidade dos itens da galeria.
- Pausar ao passar o mouse: clique na alavanca para ativar ou desativar a pausa do slideshow quando um visitante passa o mouse sobre um item da galeria.
- Espaçamento: escolha quanto espaço deve haver entre as imagens.
Ladrilhos, Misto e Alternar
Utilize esses layouts para exibir itens da galeria de diferentes tamanhos e orientações lado a lado.
- Número de itens exibidos: escolha quantos itens de galeria são exibidos de cada vez.
- Espaçamento: escolha quanto espaço deve haver entre as imagens.
Esse layout permite que você altere o layout para outro com um clique. Basta clicar em Crie layout mágico para deixar o layout da sua galeria aleatório.
Perguntas frequentes
Clique nas perguntas abaixo para saber mais sobre layouts no Pro Gallery:
O Wix Pro Gallery é responsivo?
Seu Wix Pro Gallery se comporta de forma responsiva quando você escolhe determinados layouts e o define como
Largura máxima. Isso significa que a posição e o tamanho dos itens da galeria podem mudar quando a janela do navegador for redimensionada em todos os dispositivos.
Saiba mais sobre responsividade no Wix Pro GalleryPor que algumas das minhas imagens são cortadas quando adicionadas ao Wix Pro Gallery?
Você pode notar que as imagens da sua galeria aparecem cortadas, dependendo do
layout personalizado que você escolher. Isso pode acontecer quando a orientação das miniaturas em um layout é diferente daquelas das imagens que você faz upload.
Por exemplo, você seleciona um layout Coluna, que exibe todas as imagens na orientação retrato (vertical), mas faz upload de imagens com orientação paisagem (horizontal). Isso significa que parte da sua imagem pode ser cortada para garantir que ela caiba dentro dos limites da miniatura.
Para evitar que suas imagens sejam cortadas:
- Clique no Pro Gallery no seu Editor.
- Clique em Configurações.
- Clique na aba Layout.
- Clique em Personalizar layout.
- Selecione Ajustar abaixo de Redimensionar miniatura.
Opções adicionais ao manter suas imagens recortadas:
- Ajuste o ponto focal das suas imagens para controlar melhor as partes das suas imagens que podem ser cortadas.
- Ajuste a proporção da imagem (16:9, 4:3, 1:1, 3:4 ou 9:16) aplicada à sua galeria para combinar melhor com a proporção e a orientação das imagens que você fez upload.