{"id":3197,"date":"2024-10-17T22:24:52","date_gmt":"2024-10-17T14:24:52","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=3197"},"modified":"2024-10-19T10:01:58","modified_gmt":"2024-10-19T02:01:58","slug":"how-to-add-a-full-width-slider-in-elementor-a-complete-guide-with-examples","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/pt\/como-adicionar-um-seletor-de-largura-total-no-elementor-um-guia-completo-com-exemplos","title":{"rendered":"Como adicionar um controle deslizante de largura total no Elementor: Um guia completo com exemplos"},"content":{"rendered":"

Largura total<\/strong> Os cursores deslizantes s\u00e3o um elemento de design popular que capta a aten\u00e7\u00e3o e \u00e9 ideal para apresentar imagens em destaque, promo\u00e7\u00f5es e mensagens-chave. Elementor<\/strong> torna simples a cria\u00e7\u00e3o 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.<\/p>

\"\"<\/figure><\/div>

Passo 1: Instale e active o plug-in Elementor<\/h4>

Se o Elementor n\u00e3o estiver instalado, siga estes passos:<\/p>

  1. Inicie sess\u00e3o no painel de controlo do WordPress.<\/li>\n\n
  2. Navegue at\u00e9 Plugins > Adicionar novo<\/strong> Plugins<\/strong>.<\/li><\/ol>
    \"\"<\/figure><\/div>
    1. Na barra de pesquisa, escreva Elementor<\/strong>e, em seguida, clique em Instale<\/strong>.<\/li><\/ol>
      \"\"<\/figure><\/div>
      1. Uma vez instalado, clique em Ativar<\/strong>.<\/li><\/ol>

        Este guia utiliza Elementor Pro<\/strong>, que inclui o Deslizador<\/strong> widget. Se o Elementor Pro n\u00e3o estiver dispon\u00edvel, pode utilizar um plugin de terceiros como o Addons essenciais para o Elementor<\/mark><\/strong> tamb\u00e9m oferece a funcionalidade de deslizamento.<\/p>

        Passo 2: Crie uma nova p\u00e1gina ou edite uma j\u00e1 existente<\/h4>

        Para adicionar o seletor, pode criar uma nova p\u00e1gina<\/strong> ou editar<\/strong> um j\u00e1 existente<\/strong>:<\/p>

        1. Aceda a P\u00e1ginas > Adicionar novo<\/strong> P\u00e1gina<\/strong> para uma nova p\u00e1gina, ou selecione uma p\u00e1gina existente para editar.<\/li><\/ol>
          \"\"<\/figure><\/div>
          1. Clique em Edite com o Elementor<\/strong> para abrir o editor do Elementor.<\/li><\/ol>
            \"\"<\/figure><\/div>

            Passo 3: Adicione o widget Slider<\/h4>

            No Elementor, utilize o widget Slider:<\/p>

            1. Clique no bot\u00e3o Adicionar novo contentor<\/strong> e selecione um layout de uma coluna<\/strong>.<\/li><\/ol>
              \"\"<\/figure>
              1. No painel esquerdo, procure o ficheiro Deslizador<\/strong> e arraste-o para a sec\u00e7\u00e3o.<\/li><\/ol>
                \"\"<\/figure><\/div>

                Passo 4: Configure as defini\u00e7\u00f5es da barra deslizante<\/h4>

                Personalize o conte\u00fado da barra deslizante:<\/p>

                1. Adicionar conte\u00fado de diapositivos<\/strong>: Clique em cada diapositivo, carregue imagens e adicione um t\u00edtulo<\/strong>, descri\u00e7\u00e3o<\/strong>e um apelo \u00e0 a\u00e7\u00e3o<\/strong> bot\u00e3o.<\/li><\/ol>
                  \"\"<\/figure>
                  1. Exemplo<\/strong>: Um blogue de viagens pode apresentar destinos populares com um \"Saiba mais<\/strong>\" ou \"Explore<\/strong>\".<\/li><\/ol>
                    \"\"<\/figure><\/div>
                    1. Definir imagens de fundo<\/strong>: Utilize imagens de alta resolu\u00e7\u00e3o (pelo menos 1920px de largura) para manter a clareza.
                      • Melhores pr\u00e1ticas<\/strong>: Optimize imagens entre 100KB e 300KB para um carregamento mais r\u00e1pido.<\/li><\/ul><\/li>\n\n
                      • Liga\u00e7\u00f5es de bot\u00f5es<\/strong>: Ligue o bot\u00e3o de cada diapositivo a p\u00e1ginas relevantes, como p\u00e1ginas de produtos ou publica\u00e7\u00f5es de blogues.<\/li><\/ol>
                        \"\"<\/figure><\/div>

                        Passo 5: Defina o esquema de largura total<\/h4>

                        Para apresentar o seletor em largura total:<\/p>

                        1. Selecione a sec\u00e7\u00e3o com o widget do cursor e clique em Editar contentor<\/strong>.<\/li><\/ol>
                          \"\"<\/figure><\/div>
                          1. No Disposi\u00e7\u00e3o<\/strong> separador, defina Largura do conte\u00fado<\/strong> para Largura total<\/strong>.<\/li><\/ol>
                            \"\"<\/figure><\/div>
                            1. Conjunto Diferen\u00e7a de coluna<\/strong> para Sem lacuna<\/strong> para que o cursor cubra toda a largura do ecr\u00e3.<\/li><\/ol>
                              \"\"<\/figure>
                              1. Aceda ao Avan\u00e7ado<\/mark><\/strong> e defina Margem<\/strong> e Acolchoamento<\/strong> para zero, assegurando que o cursor se alinha com as margens do ecr\u00e3.<\/li><\/ol>
                                \"\"<\/figure><\/div>
                                1. Um portef\u00f3lio de fotografia pode utilizar barras deslizantes de largura total para imagens de paisagens, cobrindo o ecr\u00e3 sem margens.<\/li><\/ol>

                                  Passo 6: Personalize o aspeto da barra deslizante<\/h4>

                                  Para ajustar o estilo da barra deslizante:<\/p>

                                  1. Defini\u00e7\u00f5es de altura<\/strong>: No Conte\u00fado<\/mark><\/strong> ajuste a altura de acordo com o desenho. Op\u00e7\u00f5es como Adaptar ao ecr\u00e3<\/strong> ou defini\u00e7\u00f5es de altura personalizadas (por exemplo, 600px) est\u00e3o dispon\u00edveis.<\/li><\/ol>
                                    \"\"<\/figure>
                                    1. Sobreposi\u00e7\u00e3o de fundo<\/strong>: No separador Estilo, adicione uma sobreposi\u00e7\u00e3o de fundo semi-transparente para melhorar a legibilidade do texto.
                                      • Utilize uma sobreposi\u00e7\u00e3o escura em imagens claras ou uma sobreposi\u00e7\u00e3o clara em imagens escuras.<\/li><\/ul><\/li><\/ol>
                                        \"\"<\/figure>
                                        1. Tipografia<\/strong>: Pode ajustar os tipos de letra, estilos e cores para corresponder \u00e0 marca do s\u00edtio. O Elementor permite-lhe personalizar a tipografia para t\u00edtulos, descri\u00e7\u00f5es e bot\u00f5es.<\/li><\/ol>
                                          \"\"<\/figure>
                                          1. Efeitos de anima\u00e7\u00e3o<\/strong>: Adicionar Anima\u00e7\u00f5es de entrada<\/strong> ou Efeitos de pairar<\/strong> no Avan\u00e7ado<\/strong> para interatividade.<\/li><\/ol>
                                            \"\"<\/figure><\/div>

                                            Passo 7: Guarde e pr\u00e9-visualize<\/h4>

                                            Depois de finalizar as defini\u00e7\u00f5es do seletor:<\/p>

                                            1. Clique em Publicar<\/strong> ou Atualiza\u00e7\u00e3o<\/strong>.<\/li>\n\n
                                            2. Utilize o Pr\u00e9-visualiza\u00e7\u00e3o<\/strong> (\u00edcone de olho) para ver o aspeto do cursor ao vivo.<\/li><\/ol>
                                              \"\"<\/figure><\/div>

                                              Verifique se a barra deslizante carrega corretamente e \u00e9 bem apresentada em v\u00e1rios dispositivos (computador, tablet e telem\u00f3vel).<\/p>