Uma parede de logotipos de clientes empurra o resto da sua página para baixo e ainda mostra apenas um punhado de marcas Um controle deslizante de logotipo se encaixa em toda a lista em uma faixa compacta que gira por conta própria O livre Widget do controle deslizante de logotipo em Complementos Mestres para Elementor constrói essa faixa a partir de qualquer conjunto de imagens de logotipo e, em seguida, adiciona efeitos de hover, dicas de ferramentas, reprodução automática e setas de navegação sem um plugin de controle deslizante separado.
Cada logotipo pode vincular ao site do cliente, trocar para uma segunda imagem no hover ou revelar o nome da marca e uma breve descrição Este guia percorre o widget desde o primeiro arrasto na tela até o carrossel acabado na página ao vivo.
O que o widget Logo Slider faz #
O widget pega uma lista de imagens de logotipo e o transforma em um carrossel responsivo e de reprodução automática Você controla quantos logotipos aparecem ao mesmo tempo, a rapidez com que eles giram e o que acontece quando um visitante passa o mouse sobre um. Ele roda no motor Swiper, para que o controle deslizante seja compatível com o toque em telefones e tablets desde o início.
Ele fica no grupo de widgets de controle deslizante de complementos mestres, próximo ao Carrossel de Imagem e Galeria Slider widgets. Esses dois são construídos para fotos e galerias O Logo Slider é construído para marcas de marca: os logotipos permanecem pequenos, uniformemente espaçados e alinhados em uma única linha.
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.
- Os logotipos do seu cliente ou parceiro prontos como arquivos de imagem Os logotipos com as mesmas dimensões ficam melhor; algo em torno de 300 por 150 pixels com fundo transparente ou branco funciona bem.
Como adicionar o widget Logo Slider #
No editor Elementor, abra o Elementos painel e pesquisa Deslizador Logo, ou vá até a seção Complementos mestres Arraste o widget para sua página Ele carrega com cinco itens de espaço reservado chamados Brand Name, para que você veja a forma do controle deslizante imediatamente e substitua os espaços reservados um por um.
Adicione seus logotipos na seção Logo Items #
No Conteúdo aba, abra Itens Logo. Cada entrada na lista é um logotipo Clique em um item para expandi-lo, ou use a cópia e excluir ícones à direita de cada linha O Adicionar Item botão na parte inferior estende a lista para quantos logotipos você precisar.
Na lista de itens estão três configurações que se aplicam a todo o controle deslizante:
- Resolução de imagem: o tamanho do WordPress serve para cada logotipo, desde miniaturas até Full. Os logotipos são arquivos pequenos, então Full geralmente fica bem.
- Título HTML Tag: a tag de cabeçalho enrolada em torno do nome da marca no hover, H5 por padrão Escolha uma tag que se encaixe na estrutura de cabeçalho da sua página.
- Selecione Evento: o que aciona o efeito de hover Como observa o painel, isso só é disparado quando um tipo de hover está ativado no Logotipo do Cliente.
Dentro de cada item, clique no Logotipo do cliente campo para abrir a biblioteca de mídia WordPress Carregue seus arquivos de logotipo ou escolha os já lá O painel de anexos mostra as dimensões do arquivo, útil para verificar se todos os logotipos compartilham o mesmo tamanho.
Defina o efeito de link e hover para cada logotipo #
Cada item de logotipo carrega o seu próprio Link campo. Cole o URL do cliente e o logotipo se torna clicável na página ao vivo O ícone de engrenagem abre as opções usuais do link Elementor, como abrir em uma nova guia.
O Pairar? dropdown decide o que acontece quando um visitante move o mouse sobre o logotipo. Possui três modos:
- Nenhum: o logotipo apenas fica lá Limpo e simples.
- Texto: o logotipo desaparece e a Marca Nome mais curto Descrição apareça em seu lugar.
- Imagem: o logotipo é trocado por uma segunda imagem que você escolher.
Com Texto selecionados, aparecem dois campos Digite o nome da marca e uma descrição de uma linha, e o widget mostra-os sobre o logotipo no hover Isso se adapta às agências que querem dizer o que fizeram por cada cliente sem sair do controle deslizante.
Com Imagem selecionado, a Imagem do logotipo do Hover campo aparece em vez disso Um truque comum: use um logotipo em escala de cinza como a imagem principal e a versão colorida como a imagem de pairar, para que os logotipos se iluminem à medida que os visitantes se movem pela faixa.
Adicione uma dica de ferramenta a um logotipo #
Cada item também possui um Dica de ferramenta alternar. Ligue-o e uma pequena bolha aparece quando os visitantes pairam sobre esse logotipo. O Configurações tab controla o comportamento:
- Conteúdo: o texto dentro da dica de ferramenta.
- Colocação: onde a bolha se senta, Topo por padrão.
- Siga Cursor: deixe a dica rastrear o mouse em vez de permanecer fixo.
- Animação e gatilho: como a dica de ferramenta aparece, Escale no Hover por padrão.
O Estilo tab ao lado de Configurações estiliza a bolha em si: cores, tipografia e espaçamento As dicas de ferramentas funcionam bem para rótulos curtos como “Partner desde 2019” que não precisam do modo de pairar de texto completo.
Configure as setas de navegação #
Abrir o Navegação seção para controlar como os visitantes movem o controle deslizante manualmente. O Navegação dropdown define o tipo de controle, com setas como a escolha padrão.
- Mostrar barra de rolagem?: adiciona uma barra arrastável sob o controle deslizante.
- Posição das setas: Centro coloca uma seta em cada lado do controle deslizante Centro superior ou Centro inferior agrupa ambas as setas acima ou abaixo dele.
- Colocação: mantém as setas dentro da caixa deslizante ou as move para fora dela.
- Esconder a seta no celular?: deixa cair as setas em telas pequenas, onde deslizar faz o trabalho.
- Próximo Ícone e Ícone Anterior: troque as divisas padrão por qualquer ícone na biblioteca Elementor.
Sintonize o comportamento do carrossel #
O Configurações Carrossel seção impulsiona o movimento do controle deslizante É aqui que uma linha estática de logotipos se torna a faixa rotativa que os visitantes esperam.
- Slides por coluna: quantos logotipos são exibidos de uma só vez, de 1 a 6. quatro ou cinco se adequam à maioria dos layouts de desktop, e o ícone responsivo permite definir uma contagem menor por dispositivo.
- Layout: Carrossel é o controle deslizante plano padrão e Coverflow inclina os logotipos em torno do centro.
- Altura Automática: deixa a altura do controle deslizante seguir a linha do logotipo.
- Velocidade de reprodução automática e reprodução automática: gire os logotipos automaticamente A velocidade é o atraso em milissegundos, então 5000 significa um novo conjunto a cada cinco segundos.
- Pausa no Hover: interrompe a rotação enquanto o cursor está sobre o controle deslizante, que combina bem com efeitos de hover e dicas de ferramentas.
- Slides para rolar: quantos logotipos avançam por etapa.
- Corrediça central, cursor de captura, modo sem arrastar: centralize o logotipo ativo, mostre um cursor de captura ou deixe os visitantes jogarem a tira livremente.
- Loop: executa o controle deslizante infinitamente, que é o que uma tira de logotipo quase sempre quer Uma coisa a ser observada: o loop precisa de mais logotipos do que a contagem de Slides por Coluna Com cinco colunas e apenas cinco logotipos, não há nada extra para girar.
Estilo o controle deslizante do logotipo #
Mudar para o Estilo guia. Quatro seções cobrem a aparência do controle deslizante: Itens de carrossel, Items de carrossel Hover, Ícone e Navegação.
Artigos Carrossel #
Esta seção enquadra cada célula do logotipo, com estados Normal, Hover e Ativo.
- Antecedentes, Tipo de borda, Raio de borda, Sombra de caixa: dê a cada logotipo uma moldura estilo cartão ou deixe tudo vazio para uma faixa limpa.
- Preenchimento e lacuna de itens: espaço dentro de cada célula e a distância entre os logotipos A lacuna é a maneira mais rápida de fazer uma faixa lotada respirar.
- Modo Sombra e Opacidade: sombras suaves e transparência para os logotipos.
Carrossel Itens Passe o mouse #
Esta seção estiliza o estado de hover escolhido na guia Conteúdo, incluindo a sobreposição de texto.
- Fundo, Fronteira, Sombra de Caixa, Preenchimento, Margem: a moldura em torno de um logotipo pairado.
- Nome Cor, Tipografia de Nome, Espaçamento: o texto da marca que aparece no modo de passagem de texto.
Ícone #
A seção Ícone estiliza o pequeno ícone mostrado com conteúdo hover: sua cor, fundo, borda, preenchimento, margem e tamanho da fonte.
Setas navegação #
A seção Navegação estiliza os botões de seta, com estados Normal e Hover separados.
- Cor e Fundo: o glifo da seta e o botão atrás dele.
- Tipo de borda, raio de borda, preenchimento, tamanho: moldar os botões; um raio completo faz os botões redondos que você vê na maioria dos sites modernos.
- Espaço entre setas: a lacuna entre os dois botões quando eles ficam juntos acima ou abaixo do controle deslizante.
O resultado na página #
Visualize ou publique, e o controle deslizante é executado ao vivo: os logotipos giram no temporizador de reprodução automática, respondem às setas e disparam seus efeitos de pairar e dicas de ferramentas Aqui está a faixa acabada com cinco logotipos por visualização e uma seta de cada lado.
Casos de uso comum #
- Tiras do logotipo do cliente nas páginas iniciais de agências e freelancers, com cada logotipo vinculado a um estudo de caso.
- Carrosséis parceiros e patrocinadores para eventos, organizações sem fins lucrativos e páginas de integração SaaS.
- “As apresentados nas barras de imprensa do” com logotipos de publicações vinculados à cobertura.
- Marca mostra em sites de distribuidores e varejistas listando os rótulos que carregam.
- Pilhas tecnologia em sites de portfólio, usando dicas de ferramentas para nomear cada ferramenta.
Dicas para um controle deslizante de logotipo melhor #
- Mantenha cada logotipo do mesmo tamanho. Dimensões mistas fazem a linha saltar à medida que desliza Exportar todos os logotipos em telas idênticas, como 300 por 150, mantém a tira estável.
- Use o hover escala de cinza para cor. Defina uma imagem principal em escala de cinza e a versão colorida como a Imagem do Logotipo Hover A tira permanece silenciosa até que os visitantes interajam com ela.
- Ative Pause on Hover com reprodução automática. Ninguém consegue ler uma dica de ferramenta em um alvo em movimento.
- Esconder setas no celular. A deslizamento os substitui e a tira permanece limpa em telas pequenas.
- Combine os slides por coluna com a largura do logotipo. Logotipos de marcas de palavras largas precisam de menos colunas do que marcas de ícones compactos Se um logotipo parecer espremido, solte a contagem em uma antes de tocar nos arquivos de imagem.
Perguntas frequentes #
Como adiciono um controle deslizante de logotipo no Elementor?
Instale os complementos mestres para o Elementor e, em seguida, arraste o widget Logo Slider para sua página Abra os itens de logotipo na guia Conteúdo, adicione um item por logotipo e carregue cada imagem da biblioteca de mídia As setas de reprodução automática, loop e navegação são configuradas no mesmo painel.
Cada logotipo pode ser vinculado a um site diferente?
Sim. Cada item do logotipo tem seu próprio campo Link Cole o URL do cliente ou parceiro lá e o logotipo se torna clicável O ícone de engrenagem ao lado do campo adiciona as opções padrão do link Elementor, incluindo abrir o link em uma nova guia.
O logotipo pode mudar ao pairar?
Sim. Defina o Hover? opção dentro de um item de logotipo para Imagem e escolha uma segunda imagem, uma escolha comum para efeitos de escala de cinza para cor Escolha o texto em vez disso para mostrar o nome da marca e uma breve descrição sobre o logotipo no hover.
O controle deslizante do logotipo reproduz e faz loop automaticamente?
Sim. Nas Configurações do Carrossel, ligue a Reprodução Automática e defina a Velocidade de Reprodução Automática em milissegundos, com 5000 significando cinco segundos por etapa Ative o Loop para que a tira gire indefinidamente e adicione Pause no Hover para que ele pare enquanto os visitantes olham.
O widget Logo Slider é gratuito?
Sim. o Logo Slider faz parte do plugin gratuito Master Addons e aparece no grupo Slider Widgets do painel de opções Instale o plugin, certifique-se de que o widget esteja habilitado lá e ele apareça no painel Elementor Elements em Master Addons.
Embrulhando #
O widget Logo Slider cobre todo o trabalho de um carrossel de logotipo do cliente no Elementor: um repetidor para os logotipos, links por logotipo e efeitos de hover, dicas de ferramentas, reprodução automática com loop e estilo até os botões de seta Para controles deslizantes de fotos e galerias, olhe para o Carrossel de Imagem e Galeria Slider widgets. Navegue pelo conjunto completo de Widgets e extensões Master Addons, e veja o página preços para o que o Pro adiciona em cima O Página do widget Logo Slider possui demos ao vivo e comparação com o Elementor Image Carousel.
