Galeria Slider

Um controle deslizante de galeria emparelha uma imagem de visualização grande com um conjunto clicável de miniaturas, para que os visitantes possam pular direto para a foto que desejam, em vez de clicar em um slide de cada vez Galeria Slider widget em Complementos Mestres para Elementor constrói esse layout em poucos minutos Você escolhe as imagens, escolhe uma grade de miniaturas ou carrossel e estiliza cada parte do painel Elementor.

Este guia percorre todas as configurações, para que você possa construir um Deslizador da galeria do elementor sem adivinhar o que cada controle faz.

O que o widget Gallery Slider faz #

O widget mostra um grande slide de visualização ao lado de uma grade ou carrossel de miniaturas Clicando em uma miniatura ou uma seta altera a visualização Legendas, reprodução automática, loop infinito, transições de desvanecimento ou slide e estados de hover separados para a visualização e miniaturas são todos integrados Ele se encaixa em portfólios, fotos de produtos, listagens imobiliárias, álbuns de eventos ou qualquer página onde os visitantes precisam navegar rapidamente por um conjunto de imagens.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo Precisa de ajuda? veja o guia instalação.
• Um conjunto de imagens carregadas na sua Mediateca, idealmente em proporções semelhantes.

Como adicionar o widget Elementor Gallery Slider #

Abra o editor Elementor e procure Galeria Slider no painel Elementos, ou role para baixo para a seção Master Addons Todo widget Master Addons carrega um pequeno emblema MA, que ajuda quando você tem vários pacotes de complementos instalados Arraste o widget para dentro de sua seção.

Adicione imagens na guia Conteúdo #

Galeria #

O widget começa vazio. No Conteúdo aba, abra o Galeria seção e clique no botão de mais abaixo Adicionar Imagens.

A janela de mídia WordPress é aberta no Criar galeria tela. selecione as imagens que você deseja no controle deslizante, em seguida, clique através de inserir a galeria Tome um minuto aqui para preencher o texto alt e legendas para cada imagem O campo de legenda importa mais do que parece: o widget pode imprimi-lo sob a imagem de visualização mais tarde, e se uma legenda está faltando no frontend, esta tela é o primeiro lugar para verificar.

Depois de inserir a galeria, o editor mostra o layout completo imediatamente: a visualização grande à esquerda com setas de navegação e a grade de miniaturas à direita As imagens selecionadas também aparecem dentro da seção Galeria, onde você pode reordená-las ou removê-las.

Miniaturas #

O Miniaturas a seção controla as pequenas imagens ao lado da visualização.

• Miniaturas: mostrar ou esconder a área da miniatura inteiramente.
• Carrossel/Grade: alterne entre uma grade estática e um carrossel de rolagem.
• Resolução de imagem: o tamanho WordPress serve para miniaturas Miniatura (150 x 150) mantém a luz da página.
• Colunas: escolha de 1 a 12 colunas para a grade Mover de 2 a 3 colunas muda a grade de alta e estreita para um bloco mais apertado.
• Pedido: mantenha a ordem padrão ou altere a forma como as imagens são classificadas.
• Legenda: mostre uma legenda nas miniaturas ou deixe-a em Nenhuma.

Mudando para Carrossel o modo substitui a grade por uma faixa de miniaturas e adiciona seu próprio grupo de configurações: Orientação (horizontal ou vertical), Slides por visualização, um Setas alternar com um Posição da seta dropdown, mais Reprodução automática, Loop Infinito, e Direção controles apenas para a faixa de miniaturas A grade funciona melhor para uma dúzia de imagens ou menos; passado isso, o carrossel economiza muito espaço vertical.

Visualização #

O Visualização seção gerencia o slide grande e como ele se comporta.

• Resolução de imagem: o tamanho servido para a imagem grande Full parece melhor, mas pesa mais, então comprima seus originais.
• Link para: vincule a imagem de visualização a um URL ou arquivo de mídia ou mantenha-o em Nenhum.
• Legenda: exibir a legenda da imagem abaixo da visualização.
• Direção: deslize da esquerda para a direita ou da direita para a esquerda.
• Loop Infinito: volte ao primeiro slide após o último.
• Altura Automática: deixe o controle deslizante ajustar sua altura para cada imagem. útil para proporções mistas, embora a página mude um pouco à medida que os slides mudam.
• Reprodução automática: avance slides automaticamente Clique no ícone de edição para ajustá-lo.
• Efeito: escolha a transição Deslizar ou Desvanecer.
• Velocidade (ms): quanto tempo dura a transição O padrão é 1000.
• Setas: mostre ou oculte as setas de navegação e escolha as delas Posição, como o Top Left.

Projete o controle deslizante na guia Estilo #

Layout #

O Layout a seção decide onde fica a visualização em relação às miniaturas. Posição de visualização oferece Superior, Direita, Inferior e Esquerda Com Superior ou Inferior, as miniaturas se alinham sob ou acima da visualização e a Alinhamento Horizontal o controle aparece com a Largura do carrossel controle deslizante. Com a esquerda ou a direita, você obtém um Largura da visualização (%) deslizante vez.

• Empilhar: escolha quando o layout for empilhado verticalmente, como Tablet e celular.
• Largura da visualização (%): quanto espaço horizontal a visualização leva Em algum lugar entre 60 e 70 por cento fica bem ao lado de uma grade de três colunas.
• Espaçamento: a lacuna entre a visualização e as miniaturas.

Visualização #

A guia Estilo Visualização estilos de seção o grande recipiente deslizante.

• Altura personalizada: substitua a altura automática.
• Cor de fundo: preenche a área atrás da imagem.
• Tipo de borda: Padrão, Nenhum, Sólido, Duplo, Pontilhado, Tracejado ou Ranhura, com controles de largura e cor quando ativo.
• Raio de borda e sombra de caixa: arredonde os cantos e levante o slide da página.
• Setas: um grupo dedicado com Tamanho, Preenchimento, Raio Fronteira, Transição, e separe Padrão, Pairar, e Deficiente estados, cada um com sua própria cor e cor de fundo.

Visualizar legendas #

Se você ativou legendas na guia Conteúdo, esta seção as posiciona e as estiliza. Alinhamento Vertical coloca a legenda na parte superior, central ou inferior do slide e Alinhamento Horizontal ofertas esquerda, centro, direita, e justificar Você também obter Tipografia, Preenchimento, Margem, Tipo de fronteira, e Raio Fronteira controles.

Visualizar efeitos do Hover #

Visualizar efeitos do Hover anima a legenda quando os visitantes passam o mouse sobre o slide Escolha um Efeito, defina o Transição, então estilize o Padrão e Pairar estados com cor, tipo de fundo, opacidade e sombra de texto.

Miniaturas #

A guia Estilo Miniaturas seção trata das pequenas imagens: Alinhamento Vertical para o bloco inteiro, Espaçamento horizontal e Espaçamento vertical entre miniaturas, mais Tipo de fronteira e Raio Fronteira.

Efeitos de passagem de miniaturas #

Esta seção estiliza miniaturas em três estados: Padrão, Pairar, e Ativo (a miniatura que corresponde ao slide atual). O Imagens o grupo cobre a cor de fundo, Opacidade, Escala, Sombra Caixa, e Filtros CSS. Fora da caixa, miniaturas inativas sentam-se em 0,65 opacidade para que o ativo se destaca O Sobreposição grupo adiciona uma cor ou camada gradiente com Modo mistura, Margem, Opacidade, e controlos fronteiriços.

Há também um Padrões seção na parte inferior da guia Estilo com predefinições de estilo prontas A mesma seção aparece em muitos widgets Master Addons.

Veja o resultado ao vivo #

Clique no ícone de olho para visualizar a página Os visitantes veem a grade de miniaturas ao lado da visualização grande Clicar em uma miniatura troca a visualização imediatamente, as setas passam pelos slides em ordem e a legenda segue cada imagem.

Casos de uso comum #

• Vitrines de portfólio: uma grande imagem de herói com o resto do projeto a um clique de distância.
• Páginas do produto: o layout clássico da loja com uma visualização ampliada e um selecionador de miniaturas.
• Listagens imobiliárias: deixe os compradores folhearem os quartos sem sair da página.
• Álbuns de eventos ou casamentos: destaque uma foto mantendo o conjunto completo visível.

Dicas para um controle deslizante de galeria melhor #

• Corresponder às proporções da imagem. A altura automática evita surpresas de corte, mas proporções consistentes parecem mais limpas e impedem que o layout salte.
• Sirva as resoluções certas. Completo para a visualização, Miniatura (150 x 150) para a grade. Comprimir antes de fazer o upload; veja nosso guia para o melhores plugins otimizador de imagem WordPress.
• Escreva legendas na Biblioteca de Mídia antes de inserir a galeria para que cada slide esteja pronto.
• Mantenha a velocidade de reprodução automática razoável. Dê tempo aos visitantes para realmente ver cada imagem.
• Usar o estado Activo. A opacidade padrão de 0,65 em miniaturas inativas já guia o olho; uma borda ou escala leve na miniatura ativa torna ainda mais claro.

Vídeo Tutorial #

Prefere assistir à configuração? Este vídeo cobre todo o processo, desde arrastar o widget até o controle deslizante finalizado na página ao vivo:

Perguntas frequentes #

Embrulhando #

Os complementos mestres Galeria Slider o widget cobre todo o padrão de visualização mais miniaturas: miniaturas de grade ou carrossel, visualização de qualquer lado, legendas e estilo por estado, tudo em um painel e sem código personalizado.

Para mais formas de exibir imagens, verifique o Carrossel de Imagem, Galeria Filtrável, e Imagem Avançada docs, ou comparar opções em nosso Guia carrossel imagem Elementor. Para ver todo o resto no plugin, navegue pelo Widgets e extensões Master Addons coleção ou o planos preços.