CSS Para Elementor – Othon Ciparoni

CSS Para Elementor – Othon Ciparoni

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

CSS Para Elementor – Othon Ciparoni

Autor: Othon Ciparoni

Gênero: Designer

Formato: MP4

Idioma: Português

Investimento: R$ 69,70

Pense rápido: quantas horas por semana você perde tentando ajustar o layout no Elementor sem conseguir o resultado que queria?

A proposta desse curso é simples: te ensinar como usar CSS na prática dentro do Elementor, mesmo se você nunca escreveu uma linha de código antes. O curso é todo em vídeo, gravado pelo designer Othon Ciparoni que já trabalhou em projetos para clientes grandes e pequenos. São mais de 200 aulas detalhadas — sim, duzentas! — onde você aprende desde o básico do HTML até animações avançadas com GSAP.

O que você aprende aqui (com exemplos reais)

  • No módulo de seletores, por exemplo, você verá onde realmente usar cada tipo pra estilizar só aquele botão específico ou um grupo inteiro.

  • No conteúdo sobre Flexbox e Grid, vai aprender não só a teoria mas também resolver aqueles problemas chatos de alinhamento que aparecem todo dia quando está montando sessões responsivas no Elementor.

  • Cansado dos carrosséis limitados? Tem módulo só sobre SwiperJS pra criar slides personalizados.

  • Bônus atualizado sobre como manipular CSS direto via JavaScript – perfeito pra quem quer adicionar interatividade além do básico.

  • Dá pra trabalhar com DevTools direto no navegador pra depurar erros de CSS ao vivo enquanto desenvolve. Nada de ficar olhando código e torcendo pra funcionar: aqui o ajuste é na hora.

Sabe aqueles sites com layout limpo, espaçamento certo e animações suaves? Você aprende a montar exatamente isso aqui. Se dedicar 30 minutos por dia, em duas semanas já consegue aplicar efeitos práticos nos seus projetos. E se quiser ir além, tem material suficiente pra dominar detalhes mais avançados em menos de dois meses.

Público certo (e também quem não deveria comprar)

  • Se você trabalha com Elementor e sente falta daquele ajuste fino só possível com CSS, esse curso faz sentido total pra sua rotina.

  • Pessoas que querem sair do Ctrl+C/Ctrl+V de códigos prontos da internet e entender realmente o que estão fazendo vão aproveitar muito o conteúdo.

  • No entanto, se seu foco é criar sites apenas arrastando elementos sem personalização nenhuma ou se detesta mexer com código mesmo explicado no detalhe, esse curso não vai te agradar.

Quem é Othon Ciparoni?

Nada aqui é teórico demais ou “modinha”. Othon trabalha como designer há anos criando layouts profissionais usando Elementor + CSS no dia a dia. Já ensinou centenas de alunos a destravar resultados melhores nos próprios projetos web usando exatamente os métodos apresentados nesse curso gravado em português claro direto ao ponto.

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

  • Só no módulo prático são mais de 29 aulas resolvendo casos comuns relatados por designers brasileiros: botões fora do lugar, menus quebrando responsividade e textos desalinhados somem quando você conhece as propriedades certas do CSS aplicadas ali no Elementor.

  • A cada dez alunos que completam as primeiras quatro semanas do curso seguindo os exercícios propostos, oito relatam conseguir resolver suas demandas básicas sem depender mais de fóruns ou grupos online pra pedir ajuda toda hora.

Diferenciais rápidos desse curso

  • Módulos bônus atualizados constantemente (inclusive lives práticas sobre problemas reais)

  • Totalmente focado em web design para quem usa Elementor — nada genérico nem enrolação sobre teoria pura

  • Traz exemplos e exercícios aplicáveis desde sites institucionais simples até projetos complexos com animações personalizadas

  • Linguagem fácil. Direto ao ponto. Sem enrolação técnica desnecessária

  • Cobertura completa dos principais recursos modernos: Flexbox, Grid Layouts e integração básica com JS / GSAP para animações profissionais

Afinal… vale a pena?

Nesse valor investido aqui (menos do que um jantar para dois), você resolve pendências que te fazem perder tempo toda semana ajustando elementos na unha. Quem está comprometido a avançar profissionalmente como designer pode economizar dezenas de horas por mês só dominando as ferramentas certas dentro do próprio fluxo do Elementor. Não resolve tudo sozinho? Não mesmo: depende da sua aplicação prática diária. Mas entrega sim um caminho organizado e didático para quem busca autonomia real em design web personalizado.

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

  • Separe pelo menos três dias na sua agenda essa semana para assistir os primeiros módulos essenciais (HTML + CSS básico).

  • Anote dúvidas durante as aulas práticas porque elas vão surgir – ninguém precisa decorar tudo na primeira vez!

  • No próximo projeto real que surgir já coloque uma solução aprendida aqui à prova (um carrossel novo ou um menu customizado já mostra resultado rápido).

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