Elementor


  • Código JavaScript para Transformar Imagens da Galeria Padrão do WordPress em Lightbox Slide com Elementor

    O WordPress, nativamente, possui um recurso de Galeria, quando você cria posts para seu blog, como mostra abaixo: Se você tem um site construído com Elementor, você tem habilitado por padrão o lighbox em imagens, e você pode usar isso nas páginas de post, apenas configure a imagem ou galeria do post WordPress para abrir […] ... Continue a ler.

  • Ajustar Ícone para Seguir a Cor da Variável Principal no Elementor (currentColor)

    Para que você consiga exportar um ícone do figma e ele tenha a mesma cor global dos elementos como fonte e ícones, definida por você no código CSS ou no Elementor, você precisa que este ícone esteja configurado com o atributo “fill” em “currentColor”. Com isso, o seu ícone vai seguir sempre a cor principal […] ... Continue a ler.

  • Transformando Checkbox em Switch Personalizado nos Formulários do WordPress com Elementor

    Para transformar visualmente o checkbox em switches sem alterar a estrutura HTML do formulário Elementor, você pode usar um pouco de código CSS personalizado, como mostra a imagem abaixo: Abaixo está um exemplo de como você pode fazer isso. Esse método mantém a estrutura HTML do formulário Elementor original intacta, mas usa CSS para ocultar […] ... Continue a ler.

  • Ajustando Automaticamente Offset Scroll (Distância da Rolagem) do Header no Elementor

    Se você quer implementar em sua página um scroll suave para uma seção especifica com WordPress e Elementor, é possivel fazer isso nativamente, usando um botão com o atributo href configurado com o ID de mesmo nome da seção, exemplo: Porem, quando o Elementor rola a página (scroll page), e você tem um cabeçalho fixo, […] ... Continue a ler.

  • Botão Personalizado CSS para Landing Pages em Elementor com Efeito Pulsar Sombra para Destaque

    Se você quer criar um botão personalizado que chame a atenção do usuário para uma determinada ação (CTA), este código pode lhe ajudar. Este código CSS abaixo, personaliza os botões CTA da página criada com Elementor, trazendo uma estética totalmente diferente. Alem de deixar o botão com 3 tipos de cores em degradê (gradient), ele […] ... Continue a ler.

  • Menu Auto Scroll Horizontal Mobile com Widget List do Elementor + JavaScript

    Neste artigo mostro um código personalizado que possibilita criar um menu horizontal que rola sozinho para a esquerda ou direita, quando a página vai descendo. Isso possibilita que, conforme o usuário vai descendo a tela, e navegando entre as seções, o menu acompanha as seções rolando sozinho e também mudando os itens de cor. Para […] ... Continue a ler.

  • Código JavaScript para Criar Tabs Customizadas com Widget Button + Container no Elementor

    Se você quer criar um sistema de Tabs customizadas no Elementor, para não ficar preso a solução do widget padrão (tabs) do Elementor, segue abaixo uma solução inovadora, que pode te ajudar muito. Basicamente, você vai trazer um container onde vai ficar os botões, e outro container, para ser o principal dos demais container dentro […] ... Continue a ler.

  • [Vídeo] Usando o Atributo “Selector” no Elementor para Aplicar CSS Customizado do Jeito Certo

    Aprenda a utilizar o atributo Selector para customizações precisas em CSS e evite aplicar estilos globalmente por engano ... Continue a ler.

  • [Video] Criando um Flipbox Customizado no Elementor

    Se você esta precisando criar um flipbox no Elementor, mas não tem ideia de como personalizar esse widget, para que ele fique com uma aparência profissional, este video é para você: ... Continue a ler.