Uma fileira de imagens estáticas come espaço e pede aos visitantes para rolar por cada um Um carrossel mostra o mesmo conjunto em um controle deslizante compacto e deslizável que as pessoas realmente tocam O Carrossel de Imagem widget em Complementos Mestres para Elementor constrói esse controle deslizante a partir de uma galeria WordPress normal e, em seguida, adiciona reprodução automática, uma caixa de luz, vários estilos de navegação e um modo de fluxo de cobertura, tudo a partir do painel Elementor.
Você escolhe as imagens, escolhe quantos mostram de uma vez e decide como os visitantes se movem entre eles Sem códigos de acesso, sem plugin de controle deslizante separado Este guia percorre todas as configurações do widget, desde carregar a galeria até estilizar as setas Para demonstrações e uma comparação com o próprio carrossel da Elementor, veja o Widget carrossel de imagem elementadora página.
Prefere assistir primeiro? este pequeno tutorial cobre o Carrossel de Imagens da galeria ao estilo:
O que o widget Carrossel de Imagens faz #
O widget transforma uma seleção de imagens em um carrossel deslizante Ele mostra uma ou várias imagens por visualização, avança por conta própria ou no clique e abre cada imagem em uma caixa de luz para um visual em tamanho real Legendas, bordas, sobreposições e estilo de seta são todos incorporados.
Ele roda no motor Swiper, então o controle deslizante é amigável ao toque e responsivo desde o início Em um telefone, o mesmo carrossel reflui para menos colunas, e você pode esconder as setas no celular se elas atrapalharem.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Um punhado de imagens carregadas na sua Biblioteca de Mídia, ou prontas para fazer upload.
Como adicionar o widget Carrossel de Imagens #
No editor Elementor, abra o Elementos painel e pesquisa Carrossel de Imagem, ou vá até a seção Complementos mestres Arraste o widget para sua página Ele carrega vazio até que você adicione imagens, para que a galeria seja sempre o primeiro passo.
Adicione e encomende suas imagens #
No Conteúdo aba, abra o Imagens seção e clique no campo galeria para iniciar o selecionador de mídia WordPress Selecione as imagens que você deseja, em seguida, use Editar galeria para arrastá-los em ordem, adicione legendas ou solte qualquer uma com o ícone X.
De volta ao painel, a seção Imagens oferece mais três controles:
- Resolução de imagem: escolha o tamanho que o WordPress serve, desde miniatura até completo, ou defina um tamanho personalizado. Médio ou Grande mantém a luz da página enquanto ainda parece nítida no controle deslizante.
- Habilitar Galeria Lightbox: ligue isto para que os visitantes possam clicar numa imagem para a abrir em tamanho real num popup Com ela desligada, as imagens são apenas exibidas.
- Biblioteca Lightbox: escolha o motor pop-up, seja o Fancybox ou a própria lightbox do Elementor Ambos agrupam as imagens do carrossel para que os visitantes possam passar por elas dentro do pop-up.
Configurar navegação #
O Navegação seção controla como as pessoas se movem através dos slides Comece com o Navegação dropdown, que define o estilo de controle: Setas e pontos, setas e fração, setas, pontos, progresso ou nenhum.
- Mostrar barra de rolagem: adiciona uma barra de progresso arrastável sob o controle deslizante.
- Posição das setas: coloque as setas superior, central ou inferior e esquerda, central ou direita dentro delas.
- Colocação: defina as setas dentro do controle deslizante ou fora dele.
- Esconder a Seta no Mobile: solte as setas em telas pequenas onde deslizar é o gesto natural.
- Próximo Ícone e Ícone Anterior: troque as setas padrão por qualquer ícone da biblioteca de ícones do Elementor.
Sintonize o comportamento do carrossel #
O Configurações Carrossel seção é onde o controle deslizante recebe seu movimento Esta é a parte que decide quantas imagens mostram, quão rápido elas se movem e se o controle deslizante faz loop.
- Slides por coluna: o número de linhas quando você executa o controle deslizante na direção vertical.
- Layout: escolha Carrossel para um controle deslizante plano padrão ou Coverflow para um efeito 3 D.
- Altura Automática: deixe a altura do controle deslizante se adaptar à imagem atual.
- Velocidade de reprodução automática e reprodução automática: ligue o deslizamento automático e defina o atraso entre os slides em milissegundos (5.000 é de cinco segundos).
- Pausa no Hover: pare de reproduzir automaticamente enquanto o cursor estiver sobre o controle deslizante.
- Slides para rolar: quantas imagens avançam por passo.
- Corrediça central, cursor de captura, modo sem arrastar: opções para centralizar o slide ativo, mostrar um cursor de captura e rolagem de arrasto de fluxo livre.
- Loop: execute o carrossel como um loop infinito em vez de parar na última imagem.
Use o layout Coverflow para um efeito 3 D #
Interruptor Layout para Fluxo de cobertura e os slides se inclinam em uma pilha 3 D, com a imagem ativa plana no centro e os vizinhos inclinados para trás A Efeito CoverFlow o controle aparece para que você possa ajustar a profundidade e a rotação Ele se adapta às seções de fotografia e portfólio onde o próprio controle deslizante faz parte do design.
Estilo o carrossel #
O Estilo tab divide-se em quatro seções: Artigos Carrossel, Caixa de luz, Navegação, e Padrões. Juntos, eles cobrem a aparência dos slides, do pop-up e das setas.
Artigos Carrossel #
Esta seção estiliza os slides da imagem Ele tem estados Normal, Hover e Ativo, para que você possa fazer o slide centralizado se destacar do resto.
- Antecedentes, Tipo de borda, Raio de borda, Sombra de caixa: enquadramento padrão para cada slide Border Radius arredonda os cantos da imagem.
- Preenchimento e lacuna de itens: espaço dentro de cada corrediça e o intervalo entre corrediças.
- Modo Sombra e Opacidade: profundidade e transparência extras para os slides inativos.
Lightbox, sobreposição e legendas #
O Caixa de luz a seção estiliza o ícone de visualização que fica em cada imagem e a sobreposição atrás dela, além do texto da legenda.
- Ícone de visualização personalizado: substitua o ícone de zoom padrão e defina sua cor, cor de hover, tamanho e posição com Icon Gap para Esquerda e Superior.
- Sobreposição: adicione uma tonalidade de fundo sobre a imagem, o que ajuda quando você deseja que o ícone e a legenda permaneçam legíveis.
- Título da legenda: tipografia, fundo, cor e cor de hover para as legendas que você adicionou na galeria.
Setas navegação #
O Navegação a seção de estilo controla a aparência das setas, com estados Normal e Hover.
- Cor e Fundo: cor do ícone de seta e o botão atrás dela.
- Tipo de borda, raio de borda, preenchimento, tamanho: moldar e dimensionar os botões de seta, incluindo botões redondos com raio total.
- Sombra e deslocamento da caixa: adicione profundidade e empurre as setas para dentro ou para fora com o deslocamento horizontal.
O resultado na página #
Publicar ou visualizar e o carrossel é executado ao vivo: ele reproduz automaticamente as imagens, faz loop se você ativar e abre cada uma delas na caixa de luz ao clicar Seu estilo continua, desde slides arredondados com bordas até os botões de seta personalizados.
Casos de uso comum #
- Fotografia e portfólio galerias onde a caixa de luz permite aos visitantes ver fotos em tamanho real.
- Sliders de imagem de produto em uma landing page, com reprodução automática chamando a atenção.
- Tiras de logotipo ou parceiro usando vários slides por visualização e um loop.
- Fotos de depoimento ou evento em um bloco compacto e deslizável.
- Deslizadores de fluxo de cobertura de herói para uma seção de design-forward.
Dicas para trabalhar com o Carrossel de Imagens #
- Combine a resolução da imagem com o tamanho do slide. Servir arquivos de tamanho normal em slides pequenos retarda a página; Médio ou Grande geralmente é suficiente.
- Mantenha a velocidade de reprodução automática confortável. Cerca de 4000 a 6000 ms dá às pessoas tempo para olhar sem se sentir apressado.
- Ative Pause on Hover com reprodução automática. Ele impede que o controle deslizante deslize para fora de alguém que está lendo uma legenda.
- Esconder setas no celular. Pular é o gesto natural nas telas sensíveis ao toque, então as setas geralmente ficam desordenadas ali.
- Use o estado Ativo para destacar o slide central. Uma borda sutil ou opacidade total na lâmina ativa guia o olho.
Perguntas frequentes #
O que é o widget Carrossel de Imagens em Master Addons?
É um widget Elementor que transforma uma galeria WordPress em um controle deslizante de imagem responsivo Você seleciona imagens, define quantos mostram por visualização e escolhe opções de navegação e reprodução automática Ele inclui uma caixa de luz integrada, legendas, um layout de fluxo de cobertura e controles completos de estilo.
Como adiciono uma lightbox ao carrossel de imagens Elementor?
Na guia Conteúdo, abra a seção Imagens e ative Ativar Galeria Lightbox Em seguida, escolha uma Biblioteca Lightbox, seja Fancybox ou Elementor Os visitantes podem clicar em qualquer imagem para abri-la em tamanho real em um pop-up e percorrer o resto do carrossel a partir daí.
O carrossel de imagens pode reproduzir e fazer loop automaticamente?
Sim. Nas Configurações do Carrossel, ligue o Autoplay e defina a Velocidade de Reprodução Automática em milissegundos Ative o Loop para fazer o controle deslizante correr indefinidamente em vez de parar na última imagem Ative Pause on Hover para que o jogo automático pare enquanto alguém está olhando.
Qual é o layout do fluxo de cobertura?
O Coverflow é uma opção de layout 3 D sob Configurações de carrossel A imagem ativa fica plana no centro enquanto os slides vizinhos se inclinam para trás em uma pilha Um controle de Efeito Coverflow permite ajustar a profundidade e a rotação Ele se adapta a fotografia e sliders de portfólio.
O widget Image Carousel é responsivo?
Sim. roda no motor Swiper, por isso é amigável ao toque e adapta-se ao tamanho da tela automaticamente Você pode definir diferentes slides por visualização por dispositivo e ocultar as setas de navegação no celular, onde deslizar os substitui.
Embrulhando #
O Widget Carrossel de Imagem constrói um controle deslizante de imagem Elementor completo sem um plugin separado: carregue uma galeria, defina reprodução automática e loop, ligue a caixa de luz e estilize os slides e setas para combinar com seu design Para outras maneiras de mostrar imagens, olhe para o Galeria Slider e Galeria Filtrável widgets. Navegue por completo Widgets e extensões Master Addons para ver o que mais está incluído.
