Slider da Galeria Elementor com Miniaturas (Pro): Widget de Layout Dividido
Gallery Slider é um widget Master Addons Pro que mostra uma imagem de visualização grande com um conjunto de miniaturas ao lado, acima ou abaixo dela Os visitantes clicam em uma miniatura, ou usam as setas, para alterar a visualização As miniaturas podem sentar-se em uma grade de até 12 colunas ou rolar em um carrossel horizontal ou vertical. Ele se adapta a portfólios, fotos de produtos, listagens imobiliárias e álbuns de eventos.
Como adicionar um controle deslizante de galeria com miniaturas no elementor
O widget precisa do Master Addons Pro, e as imagens vêm da sua Mediateca.
- Com o Master Addons Pro ativo, verifique isso Galeria Slider está ligado nas configurações do widget Master Addons.
- Edite sua página com Elementor, procure por Galeria Slider e arraste-o para dentro.
- Em Galeria, clique Adicionar Imagens e escolha suas fotos Adicione legendas na janela de mídia se quiser que sejam mostradas.
- Em Miniaturas, escolha Grade e uma contagem de colunas, ou Carrossel com orientação horizontal ou vertical.
- Em Visualização, defina o efeito, reprodução automática, setas e se a imagem abre uma lightbox.
- Na guia Estilo, abra Layout, escolha o Posição de visualização e largura, em seguida, atualizar a página.
Para um passo a passo mais longo, incluindo o case da galeria de vídeo, leia nosso guia deslizante galeria.
Disposição Dividida: Visualização em Qualquer Lado
Na guia Estilo, Layout define o Posição de visualização para Cima, Direita, Inferior ou Esquerda, com Esquerda como padrão Com Esquerda ou Direita você define Largura da visualização (%)70 por padrão, e com Superior ou Inferior você define a largura e o alinhamento do carrossel. Empilhar muda para um layout vertical no Tablet & Mobile ou apenas no Mobile.
- Grade em miniatura: 1 a 12 colunas, com espaçamento horizontal e vertical.
- Carrossel de miniaturas: horizontal ou vertical, 1 a 12 slides por visualização, com setas próprias, reprodução automática, loop e direção.
- Espaçamento: a lacuna entre a visualização e as miniaturas, 24 por padrão.
Estilizando a visualização e as miniaturas
O Visualização a seção de estilo tem altura personalizada, ajuste de imagem (cobrir ou conter), cor de fundo, borda, raio de borda e sombra de caixa, além de tamanho de seta, preenchimento e cores padrão, pairar e desativado. Efeitos de passagem de miniaturas estiliza cada miniatura nos estados Padrão, Hover e Ativo com cor de fundo, opacidade (0,65 por padrão), escala e filtros CSS e adiciona uma camada de sobreposição.
- Miniatura ativa: dê à imagem atual uma borda ou opacidade total para que os visitantes vejam onde estão.
- Legendas: separar o estilo da legenda para a visualização e as miniaturas, incluindo a posição vertical e horizontal.
- Sobreposição: uma camada de cor ou gradiente sobre miniaturas com um modo de mistura.
Efeitos de slides, Ken Burns e efeitos de caption hover
Efeito define como a visualização se move para a próxima imagem: Slide, Fade, Cube, Flip ou Coverflow, com Velocidade (ms) a 1000 por omissão Quando o efeito é Fade, a Ken Burns opção adiciona um zoom lento com Escala, Transformar Origem (padrão, aleatório ou um ponto de ancoragem personalizado), Duração e Facilitação. Visualizar efeitos do Hover anima legendas quando os visitantes pairam, com efeitos como Fade In, From Top ou From Left.
- Cinco efeitos: Deslize, desbote, cubo, inverta e fluxo de cobertura.
- Ken Burns: disponível apenas com o efeito Fade.
- Opção hover: desvanece a legenda para dentro ou para fora, ou desliza-a para dentro de um lado.
Reprodução automática, setas, links e Lightbox
A antevisão tem Reprodução automática (ligado por padrão, a cada 5.000 ms), Pausa no Hover, Desativar na interação, Loop Infinito e Altura Auto. Setas pode sentar-se em sete posições. Link para abre o arquivo de mídia, com uma lightbox opcional ou uma URL personalizada. Ordenação pode embaralhar as imagens aleatoriamente.
- Resolução de imagem: tamanhos separados para a visualização (Full by default) e as miniaturas (Thumbnail by default).
- Legendas: Título, Legenda ou Descrição da biblioteca de mídia, definida separadamente para a visualização e miniaturas.
Carrossel de mídia Elementor Pro vs controle deslizante da galeria Master Addons
O Media Carousel da Elementor Pro tem uma skin de Apresentação de Slides com miniaturas (verificada no Elementor 4.2.4 com Pro) O Carrossel de Imagens no Elementor livre não tem miniaturas.
| Característica | Carrossel Elementor Pro Media | Slider da Galeria Master Addons |
|---|---|---|
| Preço | Elementor Pro | Master Addons Pro |
| Posição da unha do polegar | Faixa abaixo do slide principal | Superior, direito, inferior ou esquerdo da antevisão |
| Layout miniatura | Tira carrossel | Grade de 1 a 12 colunas, ou carrossel horizontal ou vertical |
| Efeitos | Deslize, desbote, cubo | Deslize, desbote, cubo, inverta, fluxo de cobertura |
| Ken Burns | Não | Sim, com o Fade |
| Vídeo slides | Sim | Não, apenas imagens |
| Caixa de luz | Sim | Sim, ao vincular ao arquivo de mídia |
Escolha Media Carousel se alguns slides forem vídeos Para galerias de imagens, o Gallery Slider oferece mais opções de layout: miniaturas de qualquer lado, uma grade ou faixa vertical e mais efeitos de transição.
Outros widgets de imagem: Carrossel de Imagem (gratuito) e Galeria de imagens filtráveis (grátis).
Perguntas frequentes para o controle deslizante da galeria
O widget Gallery Slider é gratuito?
No. Gallery Slider faz parte do Master Addons Pro. O gratuito Carrossel de Imagem o widget cobre controles deslizantes de imagem simples sem um painel de miniaturas.
Posso fazer a exibição das miniaturas em uma grade em vez de uma única linha?
Sim. Defina Carrossel/Grade para Grade na seção Miniaturas e escolha de 1 a 12 colunas Mude para Carrossel para uma única linha de rolagem ou uma faixa vertical.
O efeito Ken Burns é aplicado a todas as imagens?
Aplica-se à imagem de antevisão, e apenas quando Efeito está definido como Desvanecer - se Ligou Ken Burns, depois defina Escala, Transformar Origem, Duração e Facilitação As miniaturas não são afectadas.
Como isso funciona com muitas imagens de alta resolução?
Sirva arquivos menores onde puder Defina a resolução de imagem de visualização como Grande em vez de Completa quando a visualização for mais estreita que 1024 px, mantenha as miniaturas no tamanho da miniatura e comprima as imagens antes de fazer o upload.
Posso usar isso para uma galeria de imagens de produtos em uma loja online?
Sim, para imagens que você escolher à mão O widget não puxa imagens de produtos WooCommerce por conta própria, então adicione as fotos para a galeria você mesmo.
O que acontece no celular com o recurso "Stack on"?
Empilhe nos conjuntos quando o layout lado a lado ficar vertical: no Tablet & Mobile, que é o padrão, ou apenas no Mobile. A visualização e as miniaturas são empilhadas para que ambas permaneçam grandes o suficiente para serem usadas em uma tela sensível ao toque.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
