Como adicionar um widget fixo do WordPress de várias maneiras (incluindo o Elementor).

Como adicionar um widget no WordPress? Não perca todas as informações detalhadas para saber como fazer isso de uma maneira incrível e eficaz, imperdível!

A barra lateral de seu site é uma das maneiras mais eficazes de chamar a atenção dos clientes.

As empresas usam estrategicamente esse espaço valioso para promover ofertas ou colocar anúncios para aumentar a receita.

Colocar conteúdo ou um widget de imagem na barra lateral é uma estratégia inteligente que pode beneficiar seu site de várias maneiras. Algumas vantagens podem ser o aumento das taxas de engajamento, enquanto outras podem manter seus visitantes por mais tempo.

A rolagem da página para baixo removerá o widget da exibição e, como resultado, não utilizará todo o potencial do widget.

Como a otimização dos lucros é um dos aspectos mais importantes de qualquer negócio, precisamos encontrar uma maneira de manter a barra lateral do widget à vista.

Este artigo mostrará a você como criar um widget fixo ou flutuante no WordPress de várias maneiras.

Os widgets do WordPress são ferramentas que permitem adicionar conteúdo e funcionalidades adicionais ao seu site em áreas específicas, como barras laterais, rodapé ou cabeçalho. Há dois tipos de widgets: widgets fixos e widgets flutuantes. Neste artigo, exploraremos as diferenças entre os dois e como eles podem melhorar a experiência do usuário em seu site.

O que são widgets fixos?

Widgets fixos são widgets que permanecem em uma posição estática na página enquanto o usuário rola o conteúdo. Geralmente, eles estão localizados nas barras laterais, no cabeçalho ou no rodapé do site e não se movem, mesmo que o usuário role a página.

Benefícios de um widget fixo ou flutuante do WordPress

Um widget fixo pode ajudar muito seu site WordPress de várias maneiras:

• Em primeiro lugar, chame a atenção de seus clientes para a oferta que você deseja promover.
• Ele está sempre na tela, portanto, é impossível perdê-lo.
• Coloque um anúncio que esteja sempre visível, aumentando a probabilidade de os usuários clicarem nele, o que lhe trará mais receita.
• Os cliques melhorarão suas métricas de engajamento de SEO, aumentando sua classificação nos mecanismos de pesquisa.
• Um widget fixo que leva a outra página interna do seu site reduzirá sua taxa de rejeição. Quanto menor a taxa de rejeição, melhor.

Todos os motivos acima, e muitos outros, são a razão pela qual colocamos o widget em nossas páginas de produtos.

Agora que você sabe por que seu site também pode se beneficiar de um widget fixo, vamos aprender como fazer isso.

Nas seções a seguir, mostraremos como criar uma barra lateral fixa de várias maneiras: usando CSS, instalando um plug-in ou usando o construtor de páginas Elementor.

Como adicionar um widget fixo do WordPress com CSS

Embora seja relativamente simples, o uso do método CSS será melhor se você entender o design da estrutura da Web.

Os widgets fixos funcionam melhor com temas codificados que suportam o layout flexbox em vez de float. No entanto, não existe um código único para todos, pois cada tema é codificado de forma diferente.

Portanto, colar o código a seguir na folha de estilo do seu tema pode não funcionar. Em vez disso, tente entender e imitar o processo de exibição do seu site.

Nosso exemplo demonstrará o processo usando o GeneratePress Premium porque ele é compatível com o contêiner flexbox.

Primeiro, navegue até a página Appearance -> Widgets e adicione o widget (que você deseja que flutue) na parte inferior da barra lateral.

Se o widget flutuante não for o último, ele ocultará os outros widgets ao rolar a tela para baixo.

Depois de adicionado, visite a página ativa e verifique se ele foi adicionado corretamente.

Aplicar CSS

Para que o widget fique fixo ao rolar para baixo, tanto o conteúdo quanto as seções da barra lateral devem ter a mesma altura.

Para verificar se esse é o caso, abra a ferramenta de inspeção clicando com o botão direito do mouse em qualquer lugar da tela e clicando em inspecionar.

Em seguida, navegue pela estrutura DOM e verifique se a altura da barra lateral corresponde à altura do conteúdo.

Se ambos tiverem a mesma altura, ótimo. Você economizou uma etapa. Caso contrário, o primeiro código CSS aumentará a altura da barra lateral até o máximo.

Você pode inserir CSS na folha de estilo do seu tema filho ou na tela de personalização. CSS adicional guia.

Vá para a ID ou classe na barra lateral e adicione a tag altura: 100% Regra CSS.

.sidebar {
height: 100%;
}

Salve suas alterações e verifique se a altura da barra lateral foi expandida para preencher todo o tamanho da página.

Em seguida, selecione o widget (por classe ou ID) que você deseja que seja colado na parte superior da página e adicione o seguinte código:

.sticky-widget {
posição: sticky;
top: 20px;
}

O valor superior controla a distância do widget fixo em relação à parte superior da tela. Defina-o como 0 para colocá-lo na parte superior ou aumentar o número para criar algum espaço.

Depois de aplicado, visite a página e verifique se o widget flutua à medida que você rola a tela para baixo.

O plugin WP Sticky Sidebar

O Barra lateral fixa do WP inicialmente fará o mesmo que o método CSS acima.

No entanto, a única diferença é que ele funcionará com qualquer tema, seja ele compatível com o contêiner flexbox ou com o layout flutuante.

Ele também simplifica o processo de CSS e evita que você tenha que escrever as regras por conta própria. Em vez disso, basta inserir alguns IDs de elementos e o plug-in fará o resto.

Primeiro, vá para a tela de plug-ins do WordPress, procure o WP Sticky Sidebar e instale-o em seu site.

Depois de ativado, navegue até a tela do plug-in em Configurações -> WP Sticky Sidebar.

Você precisará inserir a classe ou o ID do elemento específico e o contêiner que contém a barra lateral e o conteúdo.

Para este exemplo, usaremos a classe OceanWP porque ele foi criado com um layout flutuante e o primeiro método CSS não funcionou.

Portanto, clique com o botão direito do mouse em qualquer lugar do conteúdo da página e abra a ferramenta inspetor.

Primeiro, copiamos o ID do contêiner que contém o conteúdo e a barra lateral. Em nosso exemplo, ele é content-wrap.

Em seguida, copiamos a classe do widget que queremos definir. Em nosso exemplo, ela é widget_media_image.

Quando tivermos os dois IDs, voltaremos à tela do plug-in WP Sticky Sidebar e os colaremos em seus locais correspondentes.

Você também pode aumentar o valor da margem superior para um número maior para adicionar espaço entre a parte superior da tela e o widget.

Salve suas alterações quando terminar e atualize a página para verificar se o widget está fixo.

Como adicionar um widget no WordPress com o Elementor

Se você é um dos muitos usuários do Elementor, está com sorte, pois pode tornar o widget fixo sem usar outro plug-in.

Essa função faz parte do plug-in Elementor Pro, que você pode adquirir no site oficial por $59 ou no PillBanana por apenas $4,99.

Depois de ativar o Elementor Pro, abra o editor visual e navegue até a seção Avançado do widget que você deseja definir como fixo.

Em seguida, expanda a guia Efeitos de movimento e altere a opção Adesivo para a lista suspensa Para cima.

O widget flutuará imediatamente após a alteração das configurações e permanecerá na parte superior da tela em todos os dispositivos.

Além disso, você pode determinar quais dispositivos deseja ativar o widget fixo, removendo os dispositivos indesejados da lista.

Além disso, você pode definir um número de Deslocamento para criar espaço entre a parte superior da página e o widget.

Quando terminar, salve as alterações e visite a página para verificar se está funcionando como esperado.

Às vezes, o widget não fica dentro dos limites da coluna e oculta partes do rodapé.

Para resolver isso, ative a opção Permanecer na coluna para manter a posição do widget em relação à sua barra lateral e permanecer dentro dela.

Por fim, salve as alterações e teste-as novamente para ter certeza de que estão funcionando corretamente.

Conclusão

Agora que você sabe como adicionar um widget no WordPress, pode experimentar como eles podem melhorar a experiência do usuário no seu site WordPress. Ao escolher o tipo certo de widget para seus objetivos, você pode oferecer uma navegação mais fácil e envolvente, incentivar a interação e aumentar a satisfação do visitante.

Neste artigo, mostramos a você como adicionar um widget fixo a um site WordPress de três maneiras diferentes:

• Com regras CSS
• Com um plug-in
• Construtor de páginas Elementor

Informe-nos qual dos métodos acima você usou para realizar essa tarefa ou se precisa que forneçamos as regras CSS apropriadas para o seu tema.

Perguntas frequentes

Como posso adicionar um widget fixo ou flutuante no WordPress?

Para adicionar um widget, vá para o painel de administração do WordPress e depois para Appearance > Widgets. Lá você encontrará uma lista de widgets disponíveis que podem ser arrastados e soltos nas áreas de widgets do seu tema. Alguns plug-ins do WordPress permitem que você adicione widgets flutuantes facilmente.

Posso personalizar o design dos meus widgets?

Sim, você pode personalizar o layout dos seus widgets usando CSS no personalizador de temas do WordPress, em Appearance > Customise > Additional CSS. Há também plug-ins que permitem personalizar a aparência dos widgets sem editar o código.

Posso usar widgets fixos e flutuantes ao mesmo tempo?

Sim, você pode combinar widgets fixos e flutuantes em seu site WordPress de acordo com suas necessidades e objetivos. Por exemplo, você pode ter um widget fixo na barra lateral para facilitar a navegação e um widget flutuante com botões de compartilhamento social.

Há algum plug-in para adicionar widgets flutuantes no WordPress?

Sim, há vários plugins que permitem adicionar facilmente widgets flutuantes ao seu site, como Floating Social Media Icons, WP Floating Menu ou WP-Chatbot. Você pode procurar e instalar esses plugins no painel de administração do WordPress em Plugins > Adicionar novo.

Os widgets afetam o desempenho do meu site?

Os widgets podem afetar o desempenho do seu site se não forem otimizados ou se forem usados em excesso. É importante escolher widgets bem desenvolvidos e manter um equilíbrio entre funcionalidade e desempenho para garantir uma experiência de usuário ideal.

Se você quiser conhecer outros artigos semelhantes a Cómo añadir un widget en WordPress fijo de múltiples maneras (incluyendo Elementor), visite a categoria %tegory%%.