Opa, tudo bem?

No vídeo de hoje, vou te mostrar como criar um carrossel com desfoque no Elementor, que pode ser facilmente adicionado a qualquer widget de carrossel, com apenas algumas linhas de CSS.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=Pkow_cezdKc

Abraço!
Othon Ciparoni

Apesar do Elementor possuir integração com o Active, algumas vezes há a necessidade de incorporarmos o formulário usando HTML.

O que costuma ser um problema, já que a aparência do formulário deles não costuma agradar muito. Quer dizer, costumava ser um problema.

Neste vídeo, vou te ensinar a personalizar o formulário do ActiveCampaign com CSS para deixá-lo bonitinho, do jeito que quiser.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=eYcWWSf-EaY

Entrando ao vivo para o nosso encontro semanal, em que vamos fazer um overview da ferramenta Photopea (que é praticamente um clone gratuito do Photoshop), e criar uma imagem de fundo para landing pages com ela.

Criaremos um BG do zero e faremos todas as etapas de manipulação, como ajustes de cores, iluminação, composição e ambientação.

Tudo isso nessa ferramenta online e gratuita. Bora?

CLIQUE AQUI PARA ASSISTIR À AULA: https://www.youtube.com/watch?v=dC9i0ggxgU8

Abraço!

No vídeo de hoje, vou te mostrar como adicionar uma opção de “dark mode” ao seu site, usando o Elementor e algumas linhas de código CSS e JavaScript.

O dark mode é uma opção cada vez mais popular em aplicativos e sites, pois permite que os usuários alternem a aparência do layout para uma paleta de cores mais escura, que facilita a leitura em ambientes com pouca luz, e também pode ajudar a economizar bateria em dispositivos móveis.

Nesta aula, vamos criar um interruptor de dark mode e usar CSS e JavaScript para alterar as cores e imagens da página, para que fiquem de acordo com a preferência do usuário.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=Xx5NUGm_4eU

Opa, tudo certo?

No último vídeo do ano, veremos como aplicar efeitos em outros elementos quando o usuário passa o mouse (hover) sobre um determinado elemento.

Faremos efeitos de desfoque (blur), zoom, mudança de cor do elemento e muito mais.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=hdI8CNeLwYU

Abraço!

Entrando ao vivo para o nosso encontro semanal!

Para esta última live de 2022, abri uma caixinha no Instagram para que os seguidores me enviassem o link de alguma página feita por eles, para que eu analisasse ao vivo.

Vamos fazer diversas análises, pontuando os erros e acertos de cada uma, e como poderiam elevar a qualidade dessas páginas.

CLIQUE AQUI PARA ASSISTIR À AULA: https://youtu.be/NYPHMqzgrQQ

Abraço!

No vídeo de hoje, você aprenderá, passo a passo, como instalar o WordPress na DigitalOcean, de maneira fácil e rápida.

Vou te mostrar todas as etapas necessárias para que você possa colocar um site WordPress no ar em poucos minutos.

CLIQUE AQUI PARA ASSISTI-LO: https://youtu.be/u1MI7LhwBAI

Abraço!

A ambientação de imagens depende de alguns fatores, como o recorte e a iluminação.

Um desses fatores, e talvez o que mais impacte no resultado, é a cor. Mais especificamente, o ajuste da temperatura das imagens.

No vídeo de hoje, vou te mostrar como fazer esse ajuste de temperatura no Camera Raw e ambientar as suas imagens em menos de 5 minutos.

CLIQUE AQUI PARA ASSISTIR: https://www.youtube.com/watch?v=dHkN8GzO8x0

Abraço!

No vídeo vídeo, vou te mostrar como criar um botão fixo e animado de WhatsApp, com uma mensagem aparecendo para o visitante, chamando atenção para o botão.

Esse botão flutuante ajuda muito na conversão, seja para captar dados dos leads, ou então para que possam tirar dúvidas sobre o produto/serviço.

CLIQUE AQUI PARA ASSISTIR: https://www.youtube.com/watch?v=mwQKrBjrDL0

Abraço!
Othon Ciparoni

Bora fechar a semana com vídeo novo?

Hoje eu vou te ensinar a inserir ícones nos campos de formulário do Elementor.

CLIQUE AQUI PARA ASSISTIR: https://www.youtube.com/watch?v=R845RlQoaRo

Abraço!
Othon Ciparoni

Entrando ao vivo para o nosso encontro semanal, com o tema: Extensões do Chrome para Web Designers.

Mostrarei todas as extensões que eu utilizo no meu dia a dia, o que cada uma faz e como elas podem te ajudar nos seus trabalhos como web designer.

CLIQUE AQUI PARA ASSISTIR À AULA: https://www.youtube.com/watch?v=ArY7ciYqHVo

Sexta-feira é dia de vídeo novo, e hoje eu vou te mostrar como organizar o seu layout quando alguns elementos possuem mais texto do que os demais, usando um pouco de CSS para criar uma barra de rolagem vertical em qualquer elemento da sua página.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=qSlo3-f4BAs

Entrando ao vivo para o nosso encontro semanal, em que falaremos sobre uma parte importantíssima do processo criativo: a busca por referências.

Onde encontrá-las, o que observar, como encontrar referências de cores, fontes, animações e layouts, o que observar nesses layouts, como montar um moodboard e muito mais.

CLIQUE AQUI PARA ASSISTIR À AULA: https://youtu.be/44DMDubMZHo

A Adobe ouviu as nossas preces e adicionou a opção de salvar as imagens como WebP direto pelo Photoshop.

Neste vídeo, vou te mostrar como você deve exportar as suas imagens, além de fazer um comparativo com as diferentes configurações de exportação que a ferramenta oferece.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=eGKyhe4GUaw

Abraço!

Uma das maiores dores de quem começa a desenvolver páginas com Elementor, é a performance.

A maioria dos desenvolvedores não sabe como extrair o melhor dessa ferramenta, e um dos maiores vilões, quando falamos de otimização, são as más práticas de desenvolvimento de layout.

Neste vídeo, vou te mostrar como criar mais com menos, economizando widgets e diminuindo o tamanho do DOM das suas páginas.

Não sabe o que é DOM e como isso pode impactar na velocidade de carregamento das suas páginas? Então esse vídeo é pra você.

Clique aqui para assisti-lo: https://www.youtube.com/watch?v=OWToOIC1bkc

Fala, meu povo!

No vídeo de hoje, vou te ensinar a criar um efeito de ruído animado nas suas páginas.

CLIQUE AQUI PARA ASSISTI-LO: https://youtu.be/qkEn7KTf8kA

Link para o arquivo GIF: https://drive.google.com/file/d/1CIJxQQTBsDnz048kYhguJvSvf5gYgO5V/view?usp=sharing

Códigos utilizados no vídeo:

HTML:

CSS:
.noise {
display: block;
width: 100vw;
height: 100vh;
opacity: 1;
background-image: url(‘URL-DO-GIF-AQUI.gif’);
overflow: hidden;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 1;
}

Esse código foi postado originalmente no Discord dos Alunos do LPL, pelo aluno Willian Dutras (valeu demais, Willian!).

Bora encerrar a semana com vídeo novo?

Uma das coisas que mais me perguntam é: “Othon, como você fez esse efeito?”, “Othon, como você criou essa animação?”.

No vídeo de hoje, vou te mostrar como roubar estilos, animações e outros códigos CSS de qualquer página, usando o DevTools.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=rjfmJBBG25o

Abraço!
Othon Ciparoni

Segunda à noite é dia de quê?

Se você respondeu vídeo novo no canal do Cipa, merece um “certa resposta!” com a voz do Silvio Santos.

No vídeo de hoje, vou te mostrar 3 dicas que eu utilizo, principalmente nas imagens de fundo das minhas landing pages, para ter um resultado mais bonito e mais real ao criar profundidade de campo nas minhas composições.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=9QZ4pGv5E_s

Abraço!
Othon Ciparoni

Bora de vídeo novo?

Hoje vou te mostrar como aplicar diversos efeitos em um menu fixo, de forma que aconteçam somente após o scroll do usuário, como mudar a cor do menu, mudar a cor do logo, fazer o menu aparecer somente após o scroll e mais alguns macetes.

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=wdRS3r7a8UQ

Se ainda não estiver inscrito no canal, já chegue se inscrevendo e dando aquele like maroto.

Saiu vídeo novo no canal!​ Hoje eu vou te mostrar como criar um botão no Figma, exportá-lo para o Elementor e torná-lo interativo com CSS.

​​Usar botões em SVG nos dá uma infinidade de possibilidades quando o assunto é design, podendo personálizá-los da forma que quisermos para criarmos layouts únicos.

Bora aprender como fazer?

CLIQUE AQUI PARA ASSISTI-LO: https://www.youtube.com/watch?v=2F4vpEkMuJA

Abraço!
Othon Ciparoni