CSS Para Elementor – Othon Ciparoni

CSS Para Elementor – Othon Ciparoni

Home / Cursos / Designer / CSS Para Elementor – Othon Ciparoni

“`html

Dominando CSS no Elementor com Othon Ciparoni

Autor: Othon Ciparoni

Profissão: Designer

Formato dos vídeos: MP4

Língua do curso: Português

Custo total: R$ 69,70

E aí, quantas horas você já perdeu tentando ajeitar o layout no Elementor sem sucesso?

Esse curso quer mudar isso. A grande ideia aqui é te mostrar como usar CSS junto com o Elementor de uma forma prática. E não importa se você nunca lidou com código antes. Tudo é passado em vídeos pelo designer Othon Ciparoni, que tem experiência ampla em projetos variados. São mais de 200 aulas — sim, são muitas! — começando com o básico do HTML e chegando até animações super avançadas usando GSAP.

O que você vai aprender na prática (com exemplos concretos)

  • No módulo sobre seletores, entenda como aplicar estilos especificamente num único botão ou numa série deles.
  • A parte de Flexbox e Grid não é só teoria; você vai resolver aqueles problemas chatos de alinhamento nas sessões responsivas do Elementor.
  • Sente limitações nos carrosséis padrão? Um módulo exclusivo sobre SwiperJS te ensina a criar slides bem personalizados.
  • Bônus pra quem quer ir além: manipule CSS via JavaScript para trazer interatividade extra aos seus projetos.
  • Com DevTools direto no navegador, depure erros ao vivo sem aquela espera chata de testar e torcer pra dar certo. Faça ajustes instantâneos.

Sabe aqueles sites bem organizados, com animações suaves e espaçamentos perfeitos? Aqui você vai aprender a criar isso também. Se investir 30 minutos por dia, em duas semanas poderá aplicar esses efeitos nos seus trabalhos. E se tiver disposição para mais, dominá-los totalmente em menos de dois meses está ao seu alcance.

Público ideal (e quem deve evitar)

  • A galera que trabalha com Elementor e busca aquele toque especial que só vem com CSS vai curtir demais esse curso.
  • Pessoas cansadas de copiar/colar códigos da internet vão descobrir o valor real no entendimento das técnicas aqui ensinadas.
  • No entanto, se quer apenas arrastar blocos sem personalizar nada ou não suporta mexer com código mesmo explicadinho, talvez essa não seja a melhor escolha pra você.

Quem é Othon Ciparoni?

Aqui não tem enrolação ou “modinha”. Com ampla experiência como designer, Othon atua diretamente criando layouts profissionais usando Elementor + CSS todos os dias. Já ajudou centenas de alunos a melhorar significativamente seus próprios projetos web aplicando exatamente os métodos práticos desse curso gravado em português claro e direto ao ponto.

Números reais: até onde dá para chegar?

  • Módulo prático inclui mais de 29 aulas focadas em resolver problemas comuns enfrentados por designers brasileiros: botões desalinhados, menus quebrando responsividade e textos fora do lugar são solucionados assim que você entende as propriedades certas do CSS aplicadas ao Elementor.
  • Dentre dez alunos que seguem fielmente as primeiras quatro semanas do curso, oito conseguem resolver sozinhos suas necessidades básicas sem ficar buscando ajuda em fóruns ou grupos online constantemente.

Diferenciais chamativos deste curso

  • Módulos bônus atualizados frequentemente (incluindo lives práticas abordando situações reais)
  • Totalmente focado em web design para usuários do Elementor – nada genérico nem perda de tempo com teorias excessivas
  • Traz exercícios aplicáveis desde sites corporativos simples até projetos complexos com animações exclusivas
  • Linguagem acessível e direta. Sem tecnicismos desnecessários pra te confundir!
  • Cobertura completa dos principais recursos modernos: Flexbox, Grid Layouts e um toque básico de JS/GSAP pra animações refinadas

No fim das contas… vale a pena?

Pelo preço cobrado (menos que um jantarzinho), você resolve questões que te fazem perder tempo toda semana tentando ajustar elementos manualmente. Se sua ambição é crescer profissionalmente como designer, pode economizar várias horas por mês apenas domando as ferramentas certas dentro do próprio fluxo do Elementor. A solução completa não vem sozinha? Claro que não: tudo depende da sua aplicação prática diária. Mas oferece sim um caminho organizado e didático pra quem busca maior autonomia na criação web personalizada.

E agora? Três passos para começar hoje mesmo:

  • Tire pelo menos três dias essa semana pra ver os módulos iniciais essenciais (HTML + CSS básico).
  • Anote suas dúvidas conforme assiste às aulas práticas porque elas vão aparecer – ninguém aprende tudo na primeira passada!
  • No próximo projeto real que for trabalhar aplique algo novo aprendido aqui (um carrossel diferente ou menu customizado já faz diferença).

.

.
“`

Autor: Othon Ciparoni

Genero: designer

Formato: MP4

Idioma: Português

Conteudo do Curso

1

01 Comece por aqui 1 AULA

1 aulas
Ver aulas (1)
  • Informações importantes.mp4
2

02 Introdução ao HTML 4 AULAS

5 aulas
Ver aulas (5)
  • 0 elementos HTML.txt
  • 1 O que é HTML.mp4
  • 2 Estrutura básica do HTML.mp4
  • 3 Principais elementos do HTML.mp4
  • 4 Entendendo a árvore DOM.mp4
3

03 Introdução ao CSS 8 AULAS

8 aulas
Ver aulas (8)
  • 1 O que é CSS.mp4
  • 2 Estrutura do CSS.mp4
  • 3 Formas de inserir CSS na página.mp4
  • 4 Hotmart Club - 1920x1080 366K.mp4
  • 5 CSS Box Model.mp4
  • 6 Trabalhando com cores.mp4
  • 7 Unidades de Medida.mp4
  • 8 Hotmart Club - 1920x1080 390K.mp4
4

04 Conhecendo os tipos de seletores | Seletores Básicos

7 aulas
Ver aulas (7)
  • 01_-_Seletores_Básicos.mp4
  • 02_-_Seletores_de_Combinação.mp4
  • 03_-_Seletores_de_Atributos.mp4
  • 04_-_Pseudo-Elementos.mp4
  • 05_-_Pseudo-Classes_de_Estado.mp4
  • 06_-_Outras_Pseudo-Classes.mp4
  • 07_-_Selector_-_A_tag_própria_do_Elementor.mp4
5

05 Principais propriedades do CSS 26 AULAS

26 aulas
Ver aulas (26)
  • 1 Propriedade Display.mp4
  • 10 Propriedade box-shadow.mp4
  • 11 Propriedade cursor.mp4
  • 12 Propriedade overflow.mp4
  • 13 Propriedade clip-path.mp4
  • 14 Propriedades de máscara.mp4
  • 15 Propriedades de transformação.mp4
  • 16 Propriedades de animação.mp4
  • 17 Propriedades de transição.mp4
  • 18 Propriedades SVG.mp4
  • 19 Entendendo e utilizando shorthands.mp4
  • 2 Propriedade Position.mp4
  • 20 Media Queries.mp4
  • 21 Variáveis CSS.mp4
  • 22 Propriedade mix-blend-mode.mp4
  • 23 Propriedade pointer-events.mp4
  • 24 Propriedade white-space.mp4
  • 25 Função clamp().mp4
  • 26 Função calc().mp4
  • 3 Propriedades de texto.mp4
  • 4 Propriedades de cor.mp4
  • 5 Propriedades de dimensão.mp4
  • 6 Propriedades de background.mp4
  • 7 Propriedades de borda.mp4
  • 8 Propriedade z-index.mp4
  • 9 Propriedades de filtros.mp4
6

06 CSS Flexbox 4 AULAS

4 aulas
Ver aulas (4)
  • 1 O que é o Flexbox.mp4
  • 2 Flexbox Container e Flexbox Items.mp4
  • 3 Propriedades do Flexbox Container (pai).mp4
  • 4 Propriedades dos Flexbox Items (filhos).mp4
7

07 CSS Grid 11 AULAS

11 aulas
Ver aulas (11)
  • 1 O que é o CSS Grid.mp4
  • 10 Grid responsivo com auto-fit, auto-fill e minmax.mp4
  • 11 Exemplos práticos.mp4
  • 2 Entendendo a estrutura do CSS Grid.mp4
  • 3 A unidade de medida fr.mp4
  • 4 Propriedades grid-template-rows e grid-template-columns.mp4
  • 5 Propriedades grid-template-areas e grid-area.mp4
  • 6 Propriedades de gap.mp4
  • 7 Propriedades de posicionamento.mp4
  • 8 Propriedades grid-row e grid-column.mp4
  • 9 Propriedades grid-auto-rows e grid-auto-columns.mp4
8

08 DevTools 14 AULAS

14 aulas
Ver aulas (14)
  • 1 O que são as DevTools e como iniciá-las.mp4
  • 10 Console.mp4
  • 11 Sources.mp4
  • 12 Ferramentas de Performance.mp4
  • 13 Simuladores CSS.mp4
  • 14 Exemplo prático - Copiando o CSS de uma página.mp4
  • 2 Conhecendo a interface e algumas funcionalidades.mp4
  • 3 Elements - Aba do Código HTML.mp4
  • 4 Elements - Aba Styles.mp4
  • 5 Elements - Aba Computed.mp4
  • 6 CSS Overview.mp4
  • 7 Rendering.mp4
  • 8 Changes.mp4
  • 9 Animations.mp4
9

09 Estruturas dos Widgets 50 AULAS

50 aulas
Ver aulas (50)
  • 1 Introdução.mp4
  • 10 Google Maps.mp4
  • 11 Ícone.mp4
  • 12 Posts.mp4
  • 13 Portfólio.mp4
  • 14 Formulário.mp4
  • 15 Entrar.mp4
  • 16 Slides.mp4
  • 17 Menu de navegação.mp4
  • 18 Manchete animado.mp4
  • 19 Hotspot.mp4
  • 2 Container.mp4
  • 20 Lista de preços.mp4
  • 21 Tabela de preços.mp4
  • 22 Caixa que vira (flip box).mp4
  • 23 Chamada à ação.mp4
  • 24 Carrossel de mídia.mp4
  • 25 Carrossel de depoimentos.mp4
  • 26 Sumário.mp4
  • 27 Contagem regressiva.mp4
  • 28 Botões de compartilhamento.mp4
  • 29 Caixa de citação.mp4
  • 3 Título.mp4
  • 30 Widgets do Facebook.mp4
  • 31 Widget Modelo.mp4
  • 32 Lottie.mp4
  • 33 Código destacado.mp4
  • 34 Playlist de vídeos.mp4
  • 35 Botões do PayPal e do Stripe.mp4
  • 36 Rastreador de progresso.mp4
  • 37 Caixa de Imagem.mp4
  • 38 Caixa de ícone.mp4
  • 39 Classificação.mp4
  • 4 Imagem.mp4
  • 40 Carrossel de imagens.mp4
  • 41 Galeria básica.mp4
  • 42 Lista de ícones.mp4
  • 43 Contador.mp4
  • 44 Barra de progresso.mp4
  • 45 Depoimentos.mp4
  • 46 Abas.mp4
  • 47 Acordeão e Sanfona.mp4
  • 48 Ícones Sociais.mp4
  • 49 Alerta.mp4
  • 5 Texto.mp4
  • 50 SoundCloud.mp4
  • 6 Video.mp4
  • 7 Botão.mp4
  • 8 Divisor.mp4
  • 9 Espaçamento.mp4
10

10 CSS na prática 27 AULAS

29 aulas
Ver aulas (29)
  • 1 Introdução.mp4
  • 10 Carrossel de textos (marquee).mp4
  • 11 Personalizando a barra de rolagem (scrollbar).mp4
  • 12 Bordas em elementos com clip-path.mp4
  • 13 Botões 3D (estilo russos).mp4
  • 14 Elementos flutuando.mp4
  • 15 Microinterações.mp4
  • 16 Carrossel com fade nas laterais.mp4
  • 17 Painéis com flex grow.mp4
  • 18 Criando SVGs animados.mp4
  • 19 Menu suspenso de tela cheia com clip-path.mp4
  • 2 Botão com brilho animado.mp4
  • 20 Botão pulsando.mp4
  • 21 Botão com máscara no hover.mp4
  • 21 Codepen.txt
  • 22 Botão com luzes (box-shadow).mp4
  • 23 Codepen.txt
  • 23 Efeito de pontos luminosos (vagalumes).mp4
  • 24 Efeito hover com transform scale.mp4
  • 25 Borda animada.mp4
  • 26 Imagem colorida (ou preta e branca) no hover.mp4
  • 27 Efeito hover para exibir páginas na galeria (portfólio).mp4
  • 3 Botão com bordas degradê arredondadas.mp4
  • 4 Criando BGs com degradês.mp4
  • 5 Background com luzes animadas.mp4
  • 6 Criando um checklist.mp4
  • 7 Transição suave em botões com degradê.mp4
  • 8 Linhas do tempo (timelines).mp4
  • 9 Carrossel contínuo.mp4
11

11 w Bônus 1 - Manipulando CSS com Javascript 🔔 ATUALIZADO 03 02 202315 AULAS

17 aulas
Ver aulas (17)
  • 1 Variáveis.ts
  • 10 Hover dinâmico vinculado à posição do mouse.ts
  • 11 Animações de entrada vinculadas ao scroll.ts
  • 12 Mudar a cor da seção ao fazer scroll.ts
  • 13 Criando um formulário com campo Outro e validando as respostas.ts
  • 14 Destacando partes importantes do texto vinculado ao scroll.ts
  • 15 - Criando um vídeo para VSL (estilo VTurb) com o Youtube.ts
  • 15 - Criando um vídeo para VSL (estilo VTurb) com o Youtube.txt
  • 2 Encontrando os elementos da página.ts
  • 3 Adicionando estilos CSS com Javascript.ts
  • 4 Adicionando ou removendo classes com Javascript.mkv
  • 5 Funções.ts
  • 6 Adicionando eventos.mkv
  • 6 Lista de eventos.txt
  • 7 Condicionais if, else if e else.ts
  • 8 Laços de repetição (loop) - for e forEach.ts
  • 9 Acordeão e Safona fechados (ou abertos) ao abrir a página.mkv
12

12 w Bônus 2 Animações avançadas com GSAP

16 aulas
Ver aulas (16)
  • 10.mp4
  • 11.mp4
  • 12.mp4
  • 13.mp4
  • 14.mp4
  • 15.mp4
  • 3 Delay Repeat Yoyo e Stagger.mp4
  • 4 Eases.mp4
  • 5.mp4
  • 6.mp4
  • 7.mp4
  • 8.mp4
  • 9.mp4
  • Conhecendo os métodos set, to, from e fromTo.mp4
  • O que é o GSAP e como utilizá-lo no Elementor.mp4
  • O_que_é_o_GSAP_e_como_utilizá-lo_no_Elementor_.html
13

13 W Bônus 3 - Carrosséis com SwiperJS 13 02 2023 10 AULAS

11 aulas
Ver aulas (11)
  • 1 O que é o SwiperJS e como instalá-lo no Elementor.txt
  • 1 O que é o SwiperJS e como instalá-lo no Elementor[2].mp4
  • 10 Carrossel vertical com fade.mp4
  • 2 Entendendo a estrutura HTML e recriando-a no Elementor.mp4
  • 3 Script para remover o e-con-inner.mp4
  • 4 Adicionando paginação e navegação.mp4
  • 5 Customizando os elementos com CSS.mp4
  • 6 Conhecendo os parâmetros mais utilizados.mp4
  • 7 Breakpoints tornando o carrossel responsivo.mp4
  • 8 Eventos.mp4
  • 9 Carrossel Coverflow com desfoque.mp4
14

14 w bonus 4 Imersão CSS

4 aulas
Ver aulas (4)
  • Descrição.html
  • Imersão CSS parte 2 .mkv
  • Imersão CSS.txt
  • Imersão CSS1parte 1.mkv
15

15. Bônus - Lives sobre CSS e Javascript

14 aulas
Ver aulas (14)
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
  • 1. Aula.mp4
16

16 W Bônus 5 - Workshop Otimização 2 AULAS

3 aulas
Ver aulas (3)
  • Descrição.html
  • Workshop Otimização de Landing Pages parte 1 .mp4
  • Workshop Otimização de Landing Pages parte 2.mp4
4.6/5 — Avaliacao completa
Ver resenha completa →
CSS Para Elementor – Othon Ciparoni

Comece agora

★★★★★ 4,7+270 alunos

Acesso rapido, suporte pos-compra e conteudo organizado em modulos.

Investimento R$ 69,70
COMPRAR AGORA Tirar duvida no WhatsApp
  • Acesso enviado apos confirmacao
  • Compra simples e segura
  • Suporte para duvidas de acesso
  • Conteudo organizado por modulos

Categorias

Designer

Cursos Relacionados