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 Deslizador Fundo extensão 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 habilitados, os contêineres e seções 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: Mais de 20 efeitos entre slides, incluindo Fade, Slide em quatro direções, Zoom In and Out, Swirl, Burn, Blur e Flash, a maioria com uma segunda variante.
- Animação: Movimento de Ken Burns em cada slide, em várias direções ou Aleatório.
- 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 na demonstração, e se a rotação é executada em um temporizador.
- Exibição aleatória, resolução de imagem, capa: embaralhe a ordem, 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. Clique em sua alternância 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 é longa: Fade, Slide Left, Right, Up, and Down, Zoom In and Out, Swirl Left and Right, Burn, Blur e Flash, a maioria em duas variantes. A demonstração continua 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 mantém a rotação automática 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?
Mais de vinte: Desvanecer, Deslizar para a Esquerda, Direita, Cima e Baixo, Aproximar e Desligar, Redemoinho para a Esquerda e Direita, Queimar, Desfoque e Flash, a maioria 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 na demonstração O temporizador mantém a rotação funcionando automaticamente e o Exibição Aleatória embaralha a ordem dos slides em cada carga, se você quiser variedade.
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.
Embrulhando #
A extensão Background Slider 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 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.
