Criando uma Roleta no Elementor com JavaScript

Nesse vídeo eu vou te mostrar como criar uma roleta no Elementor utilizando um widget HTML com Javascript e Photoshop.

Segue o link com os códigos usados no vídeo:
https://luanmontenegro.com/codigos/#r...

Tempo do vídeo:
00:00 Introdução e Exemplo
00:44 Baixando um modelo de roleta no Freepik
01:21 Abrindo arquivo no Illustrator (.eps)
02:30 Copiando e colando direto no Photoshop
02:41 Separando os layers da roleta no Photoshop
03:48 Salvando a imagem da roleta em Webp
04:04 Separando os layers do Ponteiro da roleta
05:00 Salvando a imagem do Ponteiro em Webp
05:14 Preparando a página no Elementor
05:45 Adicionando as imagens e definindo suas Classes
07:06 Adicionando o Botão de girar e definindo sua Classe
07:50 Adicionando um Pop up de Prêmio
09:34 Centralizando elementos no conteiner principal
09:58 Adicionando a música da roleta
10:45 Adicionando a Classe do Ponteiro e do Pop Up
11:14 Checklist dos elementos e das Classes
11:34 Inserindo as imagens da roleta e ponteiro em um contêiner
11:51 Adicionando os Widgets HTML
12:02 Adicionando o Primeiro código (Funcionamento da Roleta)
12:12 Ajustando a altura do contêiner das imagens
12:24 Adicionando o Segundo código (Música da Roleta)
12:50 Testando a Roleta
13:13 Centralizando os elementos do Pop Up
14:08 Definindo o ponto em que a roleta vai parar
15:15 Deixando responsivo para dispositivo móvel
18:36 Aumentando o Z-index do botão para mobile
18:52 Testando a página pra mobile no Dev Tools
19:20 Adicionando distância do padding ao pop up para mobile
19:33 Considerações finais

📌 Me siga nas redes sociais:
📸   / oluanmontenegro  
🔷 https://www.behance.net/luanmontenegro

Está precisando de uma Hospedagem de alta performance?

🚀Conheça a TurboCloud: https://bit.ly/Turbo15Youtube
A TurboCloud é atualmente a MELHOR hospedagem do país, tendo um preço surpreendentemente acessível, e com todas as especificações muito superiores aos concorrentes.

Hospedagem localizada no Brasil
Rede de 1 Gigabit Ethernet
Plugins ORIGINAIS GRATUITOS (Incluindo Elementor Pro)
Certificado SSL Grátis
Subdomínios Ilimitados
Plugins Premium Original Grátis
Backup de 12 em 12 horas
E muitos outros benefícios.

Utilize o cupom: LUANMONTE e tenha 15% de desconto EM QUALQUER PLANO DE ASSINATURA!

#elementorpro #elementor #comocriarumsite #wordpress #site #hospedagem #photoshop #figma #ias #isca #iscas #bait #imagem #formulário #captura #avaliação #avaliar #presell #html #css #elementorpro #elementor #comocriarumsite #wordpress #site #hospedagem #photoshop #figma #ias #isca #iscas #bait #imagem #formulário #captura #avaliação #avaliar #presell #diversidadeeinclusao #html #css #elementor #elementorpro #freelancer #freelance #fidadefreela #vidadesucesso #dev #devweb #webdesigner #designergrafico #designergraficobrasil #dicasdecanva #designgraficobrasileiro #dicasdedesigner #canvabrasil #canva #canvadicas #canvaparainiciantes #pink #purple #dicasparadesigner #inteligenciaartifical #midjourney #photoshoptutorial #photoshop_tutorial #elementortutorial #sereias #marketingdigital #marketingonline #trafegopago #marketingdigitalbrasil #explorar #explorar #ilustrator #figma #tiktok #tiktokvideo #instagram #instatips #aftereffects #brasil