Largura total Os cursores deslizantes são um elemento de design popular que capta a atenção e é ideal para apresentar imagens em destaque, promoções e mensagens-chave. Elementor torna simples a criação de um deslizador de largura total num site WordPress. Este guia fornece passos e exemplos detalhados para o ajudar a configurar e personalizar um deslizador de largura total.
Passo 1: Instale e active o plug-in Elementor
If Elementor isn’t installed, follow these steps:
- Inicie sessão no painel de controlo do WordPress.
- Navegue até Plugins > Adicionar novo Plugins.
- Na barra de pesquisa, escreva Elementore, em seguida, clique em Instale.
- Uma vez instalado, clique em Ativar.
Este guia utiliza Elementor Pro, que inclui o Deslizador widget. If Elementor Pro isn’t available, a third-party plugin like Addons essenciais para o Elementor também oferece a funcionalidade de deslizamento.
Passo 2: Crie uma nova página ou edite uma já existente
Para adicionar o seletor, pode criar uma nova página ou editar um já existente:
- Aceda a Páginas > Adicionar novo Página para uma nova página, ou selecione uma página existente para editar.
- Clique em Edite com o Elementor para abrir o editor do Elementor.
Passo 3: Adicione o widget Slider
No Elementor, utilize o widget Slider:
- Clique no botão Adicionar novo contentor e selecione um layout de uma coluna.
- No painel esquerdo, procure o ficheiro Deslizador e arraste-o para a secção.
Passo 4: Configure as definições da barra deslizante
Personalize o conteúdo da barra deslizante:
- Adicionar conteúdo de diapositivos: Clique em cada diapositivo, carregue imagens e adicione um título, descriçãoe um apelo à ação botão.
- Exemplo: A travel blog could showcase popular destinations with a “Saiba mais" ou "Explore” button.
- Definir imagens de fundo: Utilize imagens de alta resolução (pelo menos 1920px de largura) para manter a clareza.
- Melhores práticas: Optimize imagens entre 100KB e 300KB para um carregamento mais rápido.
- Ligações de botões: Link each slide’s button to relevant pages, such as product pages or blog posts.
Passo 5: Defina o esquema de largura total
Para apresentar o seletor em largura total:
- Selecione a secção com o widget do cursor e clique em Editar contentor.
- No Disposição separador, defina Largura do conteúdo para Largura total.
- Conjunto Diferença de coluna para Sem lacuna para que o cursor cubra toda a largura do ecrã.
- Aceda ao Avançado e defina Margem e Acolchoamento para zero, assegurando que o cursor se alinha com as margens do ecrã.
- Um portefólio de fotografia pode utilizar barras deslizantes de largura total para imagens de paisagens, cobrindo o ecrã sem margens.
Step 6: Customize the Slider’s Appearance
To adjust the slider’s style:
- Definições de altura: No Conteúdo ajuste a altura de acordo com o desenho. Opções como Adaptar ao ecrã ou definições de altura personalizadas (por exemplo, 600px) estão disponíveis.
- Sobreposição de fundo: No separador Estilo, adicione uma sobreposição de fundo semi-transparente para melhorar a legibilidade do texto.
- Utilize uma sobreposição escura em imagens claras ou uma sobreposição clara em imagens escuras.
- Tipografia: You can adjust fonts, styles, and colors to match the site’s branding. Elementor allows you to customize typography for titles, descriptions, and buttons.
- Efeitos de animação: Adicionar Animações de entrada ou Efeitos de pairar no Avançado para interatividade.
Passo 7: Guarde e pré-visualize
Depois de finalizar as definições do seletor:
- Clique em Publicar ou Atualização.
- Utilize o Pré-visualização (ícone de olho) para ver o aspeto do cursor ao vivo.
Verifique se a barra deslizante carrega corretamente e é bem apresentada em vários dispositivos (computador, tablet e telemóvel).
Conclusão
Um deslizador de largura total acrescenta impacto visual, destacando conteúdos em destaque, como promoções ou mensagens críticas. O Elementor oferece uma gama de opções de personalização, tornando simples a criação de um deslizador responsivo e atrativo.
Perguntas mais frequentes
1. Why isn’t the slider displaying in full width?
Verifique se o Secção e Coluna os layouts são definidos como Largura total e que a Margem e Acolchoamento são definidos como zero.
2. Como é que posso acelerar os tempos de carregamento dos cursores?
Optimize as imagens, guardando-as em formatos como JPEG ou WebP. Idealmente, o tamanho dos ficheiros deve situar-se entre 100 KB e 300 KB.
3. Como posso tornar o seletor mais interativo?
Utilizar Animações de entrada e Efeitos de pairar in Elementor’s Avançado pode dar um toque dinâmico.