Galeria Pro Wix: personalizar o design da galeria para o site mobile

17 min de leitura

Otimize a aparência da sua galeria Pro em dispositivos móveis sem afetar a versão desktop do seu site. Isso significa que você pode personalizar o design da galeria Pro para seu site no celular/tablet para que ele fique completamente diferente do seu site para desktop.

Você pode personalizar a sobreposição, os textos, o estilo do item e as animações de rolagem da galeria Pro no mobile. As opções de personalização disponíveis dependem do layout da galeria que você escolher.

Para personalizar o design do seu site mobile:

Editor Wix

Editor do Wix Studio

Vá para o seu editor.
Clique no ícone Alternar para mobile na parte superior do Editor.
Clique no elemento Galeria Pro na sua página.
Clique em Configurações.
Clique na aba Design.
Personalize sua galeria usando as opções disponíveis:

Sobreposição e Ícones

Uma sobreposição fica em cima de uma imagem, isso adiciona um efeito extra quando você passa o mouse sobre uma imagem. Você pode personalizar esse efeito, assim como todos os ícones que você tem.

Clique em Sobreposição e ícones.
Escolha entre uma sobreposição total ou parcial e personalize usando as opções disponíveis:
- Sobreposição total: a sobreposição cobre todo o item da galeria.
  - Gradiente: clique na alavanca para ativar uma sobreposição com gradiente.
    - Cor e opacidade 1 e 2: clique na caixa de cores relevante para personalizar as cores do gradiente. Em seguida, arraste o slider para ajustar a opacidade das cores.
    - Direção do gradiente: arraste o slider para ajustar a direção da sobreposição do gradiente.
    - Cor do ícone: clique na caixa de cores para alterar a cor dos ícones da galeria que aparece ao passar o mouse.
  - Sobreposição de cores: clique na caixa de cores para escolher uma cor. Em seguida, arraste o slider para alterar a transparência da sobreposição de cores.
  - Cor do ícone: clique na caixa de cores e selecione uma nova cor para os ícones da galeria.
- Sobreposição parcial: a sobreposição cobre apenas uma parte do item da galeria.
  - Definir tamanho em: gerencie o tamanho da sobreposição em porcentagem ou pixels.
  - Tamanho: arraste o slider ou insira um valor para escolher o tamanho da sobreposição.
  - Sobreposição começa em: escolha onde sua sobreposição é posicionada.
  - Preenchimento: arraste o slider para ajustar a quantidade de espaço entre a borda da galeria e sua sobreposição.
  - Gradiente: clique na alavanca para ativar uma sobreposição com gradiente.
    - Cor e opacidade 1 e 2: clique na caixa de cores relevante para personalizar as cores do gradiente. Em seguida, arraste o slider para ajustar a opacidade das cores.
    - Direção do gradiente: arraste o slider para ajustar a direção da sobreposição do gradiente.
    - Cor do ícone: clique na caixa de cores para alterar a cor dos ícones da galeria que aparece ao passar o mouse.
  - Sobreposição de cores: clique na caixa de cores para escolher uma cor. Em seguida, arraste o slider para alterar a transparência da sobreposição de cores.
  - Cor do ícone: clique na caixa de cores e selecione uma nova cor para os ícones da galeria.
Escolha um efeito de sobreposição entre as opções disponíveis:
- Sem efeito: a sobreposição não aplica nenhum efeito.
- Aparecer: a sobreposição aparece gradualmente ao passar o mouse.
- Expandir: a sobreposição se expande ao passar o mouse.
- Deslizar: a sobreposição desliza para cima ao passar o mouse.
- Deslizar para a direita: a sobreposição desliza para a direita ao passar o mouse.

Textos

Você pode personalizar o design do título e do texto da descrição, desde que você opte por exibi los na aba Design. Se você não vir as opções de Textos (etapa 1 abaixo), vá para a aba Design, clique em Textos e marque as caixas de seleção ao lado de Título e Descrição para exibi-los.

Observação: as opções de design de texto disponíveis dependem do layout que você escolher.

Clique em Textos.
Personalize o texto usando as opções abaixo:
- Estilo e cor do título: selecione a fonte e a cor do texto do título.
- Estilo e cor da fonte da descrição: selecione a fonte e a cor do texto da descrição.
- Posição das informações: escolha mostrar as informações da sua galeria acima, abaixo ou nos itens da galeria.
- O que acontece com a informação no primeiro toque?: escolha se suas informações aparecem, desaparecem ou não são alteradas no primeiro toque.
- Alinhamento horizontal: escolha alinhar o texto horizontal à esquerda, ao centro ou à direita.
- Alinhamento vertical: escolha alinhar o texto vertical à esquerda, ao centro ou à direita.

Observações:

Se o título ou a descrição estiverem cortados no mobile, diminua o tamanho da fonte, ajuste as imagens da galeria para serem maiores no painel Layout.
As configurações de preenchimento horizontal e vertical do texto podem fazer com que o texto seja cortado no mobile. Essas configurações são transferidas do desktop. Para ajustar essas configurações, vá para a versão desktop do seu site e altere as configurações de preenchimento de texto na aba Texto do painel Design.
O efeito ao passar o mouse para títulos e descrições na galeria Pro não funciona na visualização mobile. Se você ativou esse efeito, os visitantes que visualizam sua galeria a partir de um dispositivo móvel precisam tocar uma vez para ver o texto e tocar uma segunda vez para abrir a imagem completa ou o link. Para garantir que as imagens abram no primeiro toque, siga as instruções aqui.

Estilo do item

Botões

Animação de rolagem

Modo expansão

Essa seção será exibida se você tiver escolhido "Abrir modo expansão" no painel Configurações da galeria Pro, quando um usuário clica em um item de galeria. Aqui você pode personalizar o modo expansão da sua galeria para que ele combine com o design e a marca do seu site.

Clique em Modo expansão.
Clique em Personalizar e personalize o modo expansão da galeria usando as seguintes opções:
- Qual informação é mostrada? Escolha mostrar um título, descrição e/ou link.
- Onde aparece? Escolha onde deseja posicionar as informações:
  - Lado: as informações são exibidas à direita do item da galeria.
  - Parte inferior: as informações são exibidas abaixo do item da galeria.
- Quando é mostrada? Escolha quando as informações são exibidas:
  - Sempre: as informações são sempre mostradas.
  - Ao clicar no ícone de informações: as informações só aparecem quando um visitante clica no ícone de informações no canto superior esquerdo do Modo Expansão.
- Permitir tela inteira: escolha permitir que os visitantes visualizem itens de galeria no modo de tela inteira.
- Cor do background: clique na caixa de cores para selecionar uma cor de background para o modo expansão. Escolha entre as cores do seu site ou adicione uma cor.
- Cor do ícone: clique na caixa de cores para selecionar uma cor para os ícones no modo expansão. Escolha entre as cores do seu site ou adicione uma cor.
- Estilo do título:
  - Clique no menu dropdown para personalizar a fonte, o estilo e o tamanho na Seleção de fontes.
  - Clique na caixa de cores para alterar a cor do título.
- Estilo da descrição:
  - Clique no menu dropdown para personalizar a fonte, o estilo e o tamanho na Seleção de fontes.
  - Clique na caixa de cores para alterar a cor do texto da descrição.
- Alinhamento do texto: escolha o alinhamento do texto: esquerda, centro ou direita.

Está tendo problemas com a galeria Pro no celular?

Confira nosso guia de solução de problemas para a galeria Pro no mobile e encontre as soluções para os problemas mais comuns.

Para personalizar o design do seu site mobile:

Esse artigo foi útil?