Não vi o vídeo, mas acho que a forma mais simples e que não envolva o uso de plugins adicionais via CSS mesmo. O código é bem simples de ser feito e vou deixar pronto para caso você queira fazer. Vou explicar abaixo como proceder, mas caso esteja hospedado na Hostnet e tenha disponível o Astra Pro, o tema possui essa configuração nativa, indo em Aparência -> Personalizar -> Cabeçalho -> Cabeçalho fixo, como na print abaixo

Se não tiver ou não quiser usar o Astra, via CSS vais er simples resolver. Você vai ter que adicionar uma imagem ao lado da logo do site (não pode ser outro widget de logo, precisa ser imagem) e trabalhar com CSS de forma que você vai colocar a funcionalidade de “display: none;” em ambas as imagens (na logo original e na logo alternativa) e alternar a visibilidade de acordo com as classes presentes no cabeçalho.
No Elementor, quando é adicionada a funcionalidade de sticky no cabeçalho, ele muda as classes do cabeçalho junto com o scroll da tela, então você pode se aproveitar disso. Fiz um exemplo de teste bem básico com um cabeçalho dos modelos que já vem prontos quando você cria um novo cabeçalho, assim só tive que adicionar a imagem para a logo alternativa e ativar a funcionalidade sticky nas configurações do cabeçalho.

No widget original da logo (KD) coloquei a classe .logo-normal e na imagem que usei como logo alternativa coloquei a classe .logo-sticky. 
Depois, usando o inspetor de elementos do navegador (geralmente tecla F12) verifiquei as classes presentes no cabeçalho antes da rolagem de tela e depois da rolagem de tela para poder usar essas classes como “gatilhos” para esconder/mostrar cada uma das logos.

Finalmente apliquei o CSS adicional no site indo em Aparência -> Personalziar -> CSS Adicional
.elementor-sticky .logo-normal {
display: block;
}
.elementor-sticky .logo-sticky {
display: none;
}
.elementor-sticky.elementor-sticky--active .logo-normal,
.elementor-sticky.elementor-sticky--effects .logo-normal {
display: none;
}
.elementor-sticky.elementor-sticky--active .logo-sticky,
.elementor-sticky.elementor-sticky--effects .logo-sticky {
display: block;
}
Importante: perceba na print do inspetor de elementos que existem números nas classes do cabeçalho (no meu caso elementor-element-7ddc8b2c) . Isso é um identificador único usado pelo Elementor, como se fosse um ID deste elemento. Esse número vai ser diferente para você, mas você pode usar ele quando quiser aplicar essa funcionalidade apenas a um cabeçalho específico. No caso eu usei um CSS mais genérico para funcionar em qualquer cabeçalho com a funcionalidade sticky, então você pode copiar o mesmo código e usar no seu site que vai funcionar.
Existem outras abordagens para resolver essa questão, mas quis trazer essa pois acredito ser a mais simples.
Se ainda assim não quiser usar CSS de jeito nenhum, pesquise plugins do Elementor que adicionem a funcionalidade. Aqui tem um prompt preparado pelo @ramirolobo para facilitar:
https://comunidade.hostnet.com.br/post/60-usando-gemini-para-encontrar-um-plugin-para-wordpress