Galeria do site

O Pixpa oferece muito controle sobre como exibir as imagens em suas galerias.

Utilizando as opções de estilo da galeria, você pode controlar totalmente a exibição de suas imagens na galeria, em conjunto com o layout da galeria.

Dica: As opções de estilo do site da galeria são aplicadas automaticamente a todas as novas galerias que você criar.
Veja também: Como alterar o estilo da galeria padrão do site em uma galeria específica?

Neste artigo:

Você pode personalizar as opções da galeria em todo o site a partir do Design (1) seção.

Quando estiver dentro da seção Design, clique em Galerias (2) aba.

Alternativamente, você também pode usar a opção de pesquisa do estúdio.

Entrar Galerias (1) na barra de pesquisa.
Nos resultados relacionados, clique no botão Design – Galerias opção 2).

galeria de layout

Layout: Escolha um layout que será aplicado à galeria.
Aprenda como alterar o layout da galeria..
Largura : Selecione a largura da galeria.
- 'Largura total'Exibirá a galeria ocupando toda a largura sem deixar nenhuma margem.'
- 'encaixotado' exibirá a galeria deixando um espaço em branco à direita e à esquerda da tela.
- 'Largura do site' pode ser especificado na seção de design. Você pode especificar uma largura fixa aqui.
  A galeria será exibida respeitando a largura fixa especificada.

Estilo de grade

Espaçamento da grade: Especifique o espaço da medianiz entre as imagens em layouts de grade. (0 – 250 pixels)
Raio do canto da imagem: Aplique um raio de borda para tornar os cantos da imagem arredondados nas grades da galeria.

Por exemplo, Lanterna A galeria da página inicial do tema possui espaçamento de grade de 142px.

Após aplicar o Raio de Canto da Imagem, você verá bordas arredondadas nas imagens, como em Pós template.

Cores da Grade

Opacidade básica: Se você selecionou a cor de destaque da imagem como o tipo de efeito ao passar o mouse, defina a opacidade base da grade aqui.

Base: A cor base é usada para a formação da grade e é visível apenas momentaneamente antes de as imagens serem carregadas. Você tem duas opções para a cor base da grade.
- Escolha a cor: Escolha esta opção para definir uma cor específica para a base da grade. Especifique qualquer cor e opacidade para a base da grade.
- Cor de destaque: Use cores de destaque da imagem para a base da grade. Isso fornecerá uma grade multicolorida usando as cores de destaque de cada imagem.
Opacidade básica: Se você selecionou o tipo base como cor de destaque, defina a opacidade base da grade aqui.
Flutuar : Isso afeta a grade quando o cursor passa sobre a imagem.
- Escolha a cor: Defina a cor padrão ao passar o cursor e sua opacidade, caso tenha selecionado "Escolher cor" para as imagens da sua grade.
- Cor de destaque: Use cores de destaque da imagem para a base da grade. Isso fornecerá uma grade multicolorida usando as cores de destaque de cada imagem.
Opacidade ao passar o mouse: Se você selecionou a cor de destaque para o tipo de efeito ao passar o mouse, defina a opacidade da grade base aqui.

A cor de destaque da imagem é a cor dominante de uma imagem, selecionada automaticamente quando você carrega uma imagem.

Efeito de grade ao passar o mouse

O efeito de passar o cursor será usado apenas no layout de grade. Você pode exibir as seguintes opções ao passar o cursor no modo de grade.

Sem Efeito – Sem efeito nas imagens em modo de grade.
Cor – Para exibir a cor apenas ao passar o cursor sobre as imagens no modo de grade.
Cor e Título da Imagem – Para a cor de destaque da imagem ao passar o cursor sobre o título. Você pode definir a cor de destaque e a cor/fonte/tamanho/espessura do texto do título da imagem em próxima opção.
Cor e ícone – Para a imagem, passe o cursor sobre a cor com um ícone.
Cor, título da imagem e ícone – Para a cor de destaque da imagem ao passar o cursor, título da imagem e ícone. Você também pode adicionar ícones às suas imagens, como mais, seta, cruz e olho.

Ícone de foco

Os ícones que aparecem ao passar o cursor são usados apenas em layouts de grade das galerias. Você pode optar por exibir um ícone para suas imagens no modo de grade.
As opções são: mais, seta, cruz e olho. Isso só se aplica quando o ícone está selecionado. efeito de pairar suspenso.

Título da Imagem

Isso é aplicado quando você escolhe mostrar os títulos das imagens ao passar o mouse.

Borda da imagem

Pixpa oferece um recurso versátil de borda de imagem que permite aprimorar o apelo visual do seu site adicionando bordas ao redor das imagens. Clique aqui Para saber mais sobre bordas de imagem

Quando as imagens são exibidas em uma grade, clicar em uma imagem a abre no modo Lightbox (exibição de imagem completa).
Você pode ativar ou desativar isso aqui.

Veja o modo Lightbox em ação.:

2. Ative o Zoom

Ativar/desativar o zoom sobre as imagens no modo Lightbox.
A função de zoom funcionará tanto em sites para computador quanto para dispositivos móveis.

3. Opções de exibição

Escolha como deseja exibir suas imagens na exibição de imagens completas.
Você pode selecionar de mostrar apenas imagens, imagem com miniaturas, imagem com legendas na parte inferior e imagem com legendas à direita.

Por exemplo, uma galeria com Mostrar apenas a imagem.

Por exemplo, uma galeria com Exibir imagem com miniaturas.

Por exemplo, uma galeria com Exibir imagem com legenda no fundo.

Por exemplo, uma galeria com Exibir imagem com legenda em certo.

4. Opções de cores de sobreposição

O processo de Sobreposição de cor é a cor de fundo que aparece quando as imagens são visualizadas no modo lightbox. Ajustar a cor de sobreposição pode ajudar a combinar a aparência com o design do seu site e proporcionar uma apresentação coesa e refinada para suas imagens na visualização lightbox.

Escolha o Cor Personalizada opção para definir uma cor de fundo específica para todas as imagens visualizadas no modo lightbox. Você pode definir sua cor preferida no Sobreposição de cor criação. Saiba Mais.
Escolha Cor de destaque para aplicar uma cor única dos tons de destaque de cada imagem. Você pode personalizar isso individualmente para cada imagem, conforme desejado. Saiba Mais.
Se você selecionar a opção Cor de destaque, poderá ajustar a Opacidade (transparência) da cor de fundo.

5. Visualização da imagem

Especifique o modo de exibição para o Lightbox –

Dimensionar e ajustar – As imagens seriam dimensionadas para caber na área disponível do navegador para que a imagem inteira fique visível.
Sangramento total – As imagens seriam dimensionadas para preencher toda a área disponível do navegador – algumas partes da imagem podem ser cortadas ao atingir essa exibição em tela cheia.

Por exemplo, uma galeria com smodo de ajuste e ajuste onde as imagens se ajustariam à altura disponível do navegador.

Por exemplo, uma galeria com uma sangramento total modo onde as imagens seriam esticadas para preencher a largura disponível do navegador.

6. Controles

Na visualização Lightbox, escolha como deseja exibir os controles de navegação, como ícone de informações da imagem, ícone de informações da galeria, ícone de cruz, ícone de ajuste ao navegador etc. As opções são:

Sempre visível (mostrar sempre os controles de navegação sobre as imagens)
Mostrar ao passar o cursor (Os controles de navegação só serão exibidos quando você mover o cursor na tela)
oculto (Os controles de navegação nunca serão exibidos).

Por exemplo, uma galeria com Sempre visível controles de navegação.

Por exemplo, uma galeria com mostrar ao passar o cursor controles de navegação.

Por exemplo, uma galeria com escondido controles de navegação.

7. Estilo Próximo/Anterior

Na visualização completa da imagem, escolha como deseja exibir as setas de navegação.

Flutuante As setas de navegação ficarão flutuantes. Mova o cursor sobre a imagem e clique na tela quando a seta aparecer para navegar entre as imagens.
Chevron
Setas
Mostrar seta no círculo
oculto Desative completamente as setas de navegação.

8. Nome do arquivo da imagem

Escolha exibir o nome do arquivo quando a imagem for visualizada no modo lightbox.

Veja em ação:

9. Tamanho máximo da imagem

Essa configuração controla a resolução máxima na qual as imagens da sua galeria são exibidas. Modo lightbox. Você pode escolher entre as seguintes opções:

Auto - Ajusta automaticamente o tamanho da imagem com base na tela e na resolução do dispositivo do usuário. O sistema seleciona de forma inteligente a versão mais adequada da imagem para garantir clareza e desempenho ideais.
Tamanhos fixos – 2048px, 1500px, 1000px, 800px ou 500px. Escolher um tamanho fixo significa que todas as imagens da lightbox serão exibidas na resolução máxima especificada, dependendo do dispositivo ou tamanho da tela do usuário.

Observação

Se a imagem original você A imagem enviada tem uma resolução menor. Se o tamanho selecionado não for suficiente, ele será exibido em sua dimensão máxima. resolução originalNão será ampliado nem terá sua escala aumentada.

Configurações da apresentação de slides

Apresentação de slides: Clique em autoplay para iniciar a apresentação de slides automaticamente no visualizador de imagens completo. Você também pode desativar a apresentação de slides.
Rapidez : Selecione a velocidade da transição. Você pode escolher de 1 a 10 segundos.
Transição: Escolha o estilo de transição da apresentação de slides.

Veja a apresentação de slides em ação:

Opções de tonalidade

Este recurso permite que o Cor de destaque de imagens a serem usadas como plano de fundo quando as imagens são visualizadas em Modo LightboxIsso melhora a experiência visual, alinhando o fundo com a cor de destaque da imagem.

Use cor de destaque como matiz:
- Por padrão, o cor de fundo da lightbox Será aplicado ao visualizar imagens no Modo Lightbox.
- Ao ativar esta opção, o Cor de destaque A cor associada às imagens será usada como cor de fundo da Lightbox, oferecendo uma aparência mais dinâmica e visualmente coesa.
Opacidade da Matiz:
- Você pode gerenciar a opacidade do Matiz de cor de destaque usando o controle deslizante de Matiz.
- Ajustar a opacidade mescla os Cor de destaque Com a cor de fundo Lightbox, você consegue uma estética profissional e harmoniosa.

Display para celular

Exibir como: Escolha mostrar a galeria como uma Image Slider ou no modo de grade na exibição móvel.
Colunas da grade: Escolha a partir de Visualização de 1 coluna ou 2 colunas para exibição em grade na visualização móvel.
Espaçamento da grade: Colocou o calha entre imagens em Exibição móvel.

Não consegue encontrar o que procura?

Entre em contato com um especialista da Pixpa.

Entre em contato