Galeria Pro Wix: personalizar o design da galeria
9 min de leitura
Faça sua galeria se destacar no seu site adicionando algumas personalizações de design. Você pode dar um toque profissional à sua galeria, personalizando o layout, as cores, as fontes e muito mais.
Para personalizar o design da sua galeria Pro:
- Vá para o seu editor.
- Clique no elemento Galeria Pro na sua página.
- Clique em Configurações.
- Clique na aba Design.
- Escolha o que você gostaria de personalizar:
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 de 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 aparecem 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.
- Gradiente: clique na alavanca para ativar uma sobreposição de gradiente.
- Sobreposição parcial: a sobreposição cobre apenas uma parte do item da galeria.
- Definir tamanho em: gerencie o tamanho da sobreposição em porcentagens 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 de 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 aparecem 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 total: a sobreposição cobre todo o item da galeria.
- Escolha um efeito de sobreposição entre 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ê escolha exibi-los na aba Layout. Se você não vir as opções Textos (etapa 1 abaixo), vá para a aba Layout, clique em Personalizar Layout e marque as caixas de seleção ao lado de Título e Descrição para exibi-los.
- Clique em Textos.
- Personalize o texto usando as opções abaixo:
- Informações para mostrar: marque a caixa de seleção ao lado das informações que você deseja exibir (Título, Descrição, Contador de slides).
Observação: a opção Contador de slides só está disponível no layout Apresentação de slides se você tiver ativado a opção Deslizar automaticamente.
- 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.
- Alinhamento horizontal: escolha alinhar o texto horizontal à esquerda, à direita ou ao centro.
- Alinhamento vertical: escolha alinhar o texto vertical à esquerda, à direita ou ao centro.
- Preenchimento vertical do texto: arraste o slider para alterar a quantidade de espaço entre o texto vertical e a borda.
- Preenchimento horizontal do texto: arraste o slider para alterar a quantidade de espaço entre o texto horizontal e a borda.
- Informações para mostrar: marque a caixa de seleção ao lado das informações que você deseja exibir (Título, Descrição, Contador de slides).
Botões
Essa seção aparecerá se você optar por mostrar o botão Ver mais na aba Layout.
Aqui você pode alterar o texto, a fonte, a cor e o raio da borda do botão Ver mais.
Aqui você pode alterar o texto, a fonte, a cor e o raio da borda do botão Ver mais.
- Clique em Botões.
- Personalize os botões usando as opções abaixo:
- Texto do botão: insira o texto que aparece no botão.
- Estilo e cor da fonte: selecione a fonte e a cor do botão.
- Cor e opacidade do botão: arraste o slider para alterar a cor e a opacidade do botão e clique na caixa de cores para selecionar uma cor.
- Largura e cor da borda: arraste o slider para alterar a largura da borda e clique na caixa de cores para selecionar uma cor.
- Raio do canto: arraste o slider para alterar o raio do canto.
Setas de navegação
Você pode ativar as setas de navegação nos layouts Miniaturas, Slider, Slideshow e Coluna. Você pode personalizar o posicionamento, tamanho e cor para ajudar os visitantes do site a navegar pela galeria com facilidade.
- Clique em Setas de navegação.
- Clique na alavanca para ativar as setas na sua galeria.
- Personalize as setas usando as seguintes opções:
- Estilo da seta: clique para selecionar um design de seta ou clique no ícone Adicionar
para fazer upload do seu próprio. - Background da seta: clique no dropdown para selecionar uma sombra, caixa ou nenhum background.
- Sombra: adiciona uma leve sombra ao redor da seta.
- Caixa: adiciona uma caixa ao redor da seta. Clique na caixa de cores para alterar a cor da caixa e arraste os sliders relevantes para ajustar sua transparência e arredondar seus cantos.
- Nenhum: nenhum background é adicionado à seta.
- Tamanho da seta: arraste o slider para aumentar ou diminuir o tamanho das setas de navegação.
- Cor da seta: clique na caixa de cores para selecionar a cor da seta de navegação. Selecione uma cor entre as cores do seu site ou escolha a sua própria.
- Posição da seta: marque a caixa de seleção relevante para exibir as setas de navegação dentro ou fora da galeria. Observação: a exibição de setas de navegação na sua galeria pode cobrir parte dos itens da sua galeria.
- Centralizar setas para: escolha centralizar suas setas em qualquer lado da galeria, suas imagens ou texto.
- Preenchimento horizontal: arraste o slider para ajustar a quantidade de espaço entre suas setas e a borda da sua galeria.
- Estilo da seta: clique para selecionar um design de seta ou clique no ícone Adicionar
Estilo do item
Cada imagem ou vídeo na galeria é um item. Você pode alterar a aparência dos itens tanto no modo normal quanto no ao passar o mouse.
- Clique em Estilo do Item.
- Personalize a exibição normal do item em Estilo do item:
- Largura e cor da borda: arraste o slider para alterar a largura da borda e clique na caixa de cores para selecionar uma cor.
- Raio do canto: arraste o slider para deixar os cantos mais redondos ou quadrados.
Observação: as opções Largura e cor da borda e Raio do canto só estão disponíveis quando você escolhe recortar suas miniaturas nas configurações do layout e se aplicam apenas à imagem principal (não às miniaturas).
- Sombra: clique na alavanca para ativar ou desativar a sombra:
- Ativada: o item da galeria tem uma sombra ao seu redor. Personalize a opacidade, a cor, o desfoque, a direção da sombra e o tamanho da sombra.
- Desativada: o item da galeria não tem uma sombra ao seu redor.
- Escolha o que acontece quando alguém passa o mouse sobre o item da galeria:
- Sem efeito: nenhum efeito é aplicado ao passar o mouse.
- Aproximar: aumente o zoom na imagem ao passar o mouse.
- Blur (ou desfoque): a imagem fica desfocada ao passar o mouse.
- Tons Cinza: a imagem fica em preto e branco ao passar o mouse.
- Encolher: a imagem fica menor ao passar o mouse.
- Invertido: a cor da imagem é invertida ao passar o mouse.
- Cor: a imagem passa de preto e branco para colorido ao passar o mouse.
- Escurecer: a imagem fica um pouco mais escura ao passar o mouse.
- Escolha o que acontece enquanto a imagem está carregando:
- Imagem desfocada: uma versão desfocada da imagem aparece durante o carregamento.
- Cor do placeholder: um placeholder colorido aparece enquanto a imagem está sendo carregada.
Animações de rolagem/slide
Adicione um efeito animado que aparece enquanto os visitantes navegam pela sua galeria. Você pode dar um toque especial na animação escolhida ao adicionar um estilo de transição e ajustar sua duração.
Observações:
- As animações disponíveis dependem do layout da galeria que você escolher.
- A personalização das configurações de animação só está disponível em layouts com rolagem horizontal.
Adicionar uma animação de rolagem:
- Clique em Animação de rolagem.
- Escolha o que acontece quando os visitantes percorrem sua galeria:
- Sem efeito: nenhum efeito é aplicado à rolagem.
- Aparecer: as imagens aparecem gradualmente durante a rolagem.
- Tons de cinza: a imagem fica em preto e branco durante a rolagem.
- Deslizar: a imagem desliza para cima durante a rolagem.
- Expandir: a imagem fica maior durante a rolagem.
- Encolher: a imagem fica menor durante a rolagem.
- Zoom out: o zoom da imagem diminui durante a rolagem.
- Uma cor: uma única cor é aplicada às imagens durante a rolagem.
Personalizando sua animação:
- Clique em Personalizar animações
- Personalize suas configurações de animação:
- Estilo de transição: clique no dropdown para aplicar um efeito de movimento aos itens da galeria. Esse efeito é aplicado durante a rolagem, à medida que os visitantes se movem de um item para o outro.
- Duração: arraste o slider para ajustar a duração da animação.
Modo expansão
Essa seção será exibida se você tiver escolhido "Abrir modo expansão" no Painel de 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, à direita ou ao centro.
Esse artigo foi útil?
|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
