Uma imagem de herói diz uma coisa Um fundo de herói que gira através de suas melhores três ou quatro fotos diz consideravelmente mais, sem adicionar um único widget ao layout O Extensão do controle deslizante de fundo em Complementos Mestres para Elementor substitui o plano de fundo estático de uma seção por uma apresentação de slides de imagem: escolha as fotos, escolha uma transição e o conteúdo fica no topo enquanto o cenário passa por trás dele.
Aqui está o herói finalizado da demonstração, percorrendo suas três fotos com uma transição de redemoinho:
O que a extensão Background Slider faz #
Uma vez habilitado, contêineres, seções e colunas recebem um Deslizador Fundo painel em seus Estilo tab, ao lado da seção de Fundo regular. Ligue-o, adicione imagens da biblioteca de mídia e a seção de fundo se tornará uma apresentação de slides cronometrada Tudo sobre ele é configurável:
- Adicionar imagens: um campo de galeria que contém os slides, reordená-los ou removê-los no editor de galeria padrão do WordPress.
- Transição: 24 efeitos entre slides mais Aleatório: Desvanecer, Deslizar em quatro direções, Aproximar e Desligar, Redemoinho, Queimar, Desfoque e Flash, cada um com uma segunda variante.
- Animação: Movimento de Ken Burns em cada slide, em nove direções, Aleatório ou Nenhum.
- Sobreposição personalizada: uma camada de cor, gradiente ou imagem sobre os slides, além de nove estilos de sobreposição predefinidos que mantêm o texto legível.
- Atraso e temporizador: quanto tempo cada slide é válido (5000 ms por padrão), e se uma barra de progresso fina mostra o tempo restante em cada slide.
- Exibição aleatória, resolução de imagem, capa: embaralhe a ordem quando a página é gerada, escolha o tamanho carregado e controle como as imagens preenchem a seção.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- O Background Slider é uma extensão gratuita, portanto, nenhuma licença Pro é necessária.
- Duas ou mais imagens dimensionadas para exibição em largura total, dimensões idealmente semelhantes.
Como ativar a extensão do controle deslizante de fundo #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. O controle deslizante de fundo fica no Widgets Animação grupo, ao lado de Gradiente Animado BG (Pro).Clique em seu alternador para que fique roxo e depois bata Salvar alterações e aguarde o verde “Configurações salvas com sucesso no aviso de”.
Abra o painel e adicione as imagens #
Selecione o contêiner herói no editor Elementor e abra o Estilo guia. Expandir o Deslizador Fundo seção com o emblema MA roxo e interruptor Habilitar controle deslizante de fundo para Sim. A lista completa de configurações aparece, com um Aplicar botão na parte superior para pressionar as alterações na visualização.
Clique Adicionar Imagens e escolha os slides da biblioteca de mídia A demonstração usa três fotos de serviço O editor da galeria lida com a ordem: arraste para reorganizar, clique no X para soltar um ou Adicione à galeria para mais.
Escolha a transição e o movimento #
O Transição dropdown decide como um slide passa para o próximo A lista dura muito: Desvanecer, Deslizar para a Esquerda, Direita, Cima e Baixo, Aproximar e Reduzir, Redemoinho para a Esquerda e Direita, Queimar, Desfoque e Flash, cada um em duas variantes A demonstração pousa Redemoinho Esquerda.
O Animação a configuração adiciona o movimento de Ken Burns dentro de cada slide, uma panorâmica lenta e zoom que mantém o fundo vivo entre as transições Escolha uma direção ou defina-a para Aleatório e deixe cada slide seguir seu próprio caminho.
Sobreposição, atraso e temporizador #
Texto branco em uma foto ocupada precisa de ajuda Vire Sobreposição Personalizada para mostrar e colocar uma cor, gradiente ou imagem sobre os slides ou escolher uma das nove predefinições Sobreposição estilos com padrões construídos para legibilidade Abaixo disso, Atraso define quantos milissegundos cada slide contém (5.000 na demonstração), Temporizador mostra uma barra de progresso para cada slide (os slides giram de qualquer maneira) e Capa faz com que as imagens preencham a seção de ponta a ponta.
O resultado na página #
Publicar e o herói circula por conta própria, exatamente como no GIF no topo desta página: cada foto vale para o atraso, gira para a próxima e o título e os botões ficam fixos no topo Os visitantes obtêm um cenário móvel sem um widget de controle deslizante separado e a estrutura da seção abaixo nunca muda.
Onde um controle deslizante de fundo funciona bem #
- Secções herói. Gire três fotos fortes em vez de apostar a primeira impressão em uma.
- Serviços negócios. Mostre a equipe trabalhando atrás de uma manchete.
- Restaurantes e locais. Pratos e interiores pedalando atrás do botão de reserva.
- Portfólios. Projetos recentes como pano de fundo da seção de introdução.
- Páginas de destino. Ângulos do produto girando atrás de uma chamada fixa à ação.
Vídeo Tutorial #
Assista ao controle deslizante construído de ponta a ponta, desde habilitar a extensão até o herói do ciclismo na página publicada.
Perguntas frequentes #
Como adiciono uma apresentação de slides em segundo plano a uma seção Elementor?
Habilite a extensão do controle deslizante de fundo na guia Extensões de complementos mestre, selecione a seção e abra o controle deslizante de fundo na guia Estilo. Ligue-o, adicione duas ou mais imagens, escolha uma transição e a seção de fundo será encerrada automaticamente.
Quais efeitos de transição estão incluídos?
Vinte e quatro mais aleatório: desvanecer-se, deslizar para a esquerda, direita, para cima e para baixo, ampliar e diminuir, redemoinho para a esquerda e direita, queimar, desfocar e flash, cada um com uma segunda variante Uma configuração de animação separada adiciona Ken Burns movimento pan-and-zoom dentro de cada slide.
Posso manter o texto legível sobre as fotos?
Sim. Ative a sobreposição personalizada para obter uma camada de cor, gradiente ou imagem acima dos slides ou escolha um dos nove estilos de sobreposição predefinidos. A demonstração usa uma sobreposição escura para que o título branco e os botões mantenham o contraste em cada slide.
Como faço para controlar a velocidade do slide?
O campo Atraso define quantos milissegundos cada slide permanece visível, 5000 por padrão O temporizador mostra apenas uma barra de progresso, porque os slides giram por conta própria de qualquer maneira A exibição aleatória embaralha a ordem dos slides cada vez que a página é gerada, portanto, em uma página em cache, a ordem muda somente quando o cache é limpo.
A extensão do controle deslizante de fundo é gratuita?
Sim. plano de fundo O controle deslizante vem com a versão gratuita de Master Addons para Elementor, no grupo Animation Widgets da guia Extensões A página de preços cobre o que os planos Pro adicionam.
Elementor tem sua própria apresentação de slides em segundo plano?
Sim. Elementor livre tem um tipo de fundo Slideshow com cinco transições, um zoom Ken Burns dentro ou fora, lazyload e posicionamento por dispositivo Slider de fundo adiciona 24 transições, Ken Burns em nove direções, sobreposições de padrões, ordem aleatória e uma barra de temporizador A página do produto tem uma tabela de comparação completa.
Embrulhando #
O Extensão do controle deslizante de fundo transforma um fundo de seção em uma apresentação de slides com uma alternância e um punhado de opções: imagens, transição, sobreposição, atraso O conteúdo permanece colocado, o pano de fundo faz o trabalho e nenhum widget extra deslizante entra no layout Para movimento sem fotos, o Extensão de fundo de gradiente animado (Pro) cobre a mesma seção com cores e o conjunto completo de Widgets e extensões Master Addons está a uma página de distância.
