CSS Para Elementor – Othon Ciparoni

CSS Para Elementor – Othon Ciparoni

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

CSS para Elementor com Othon Ciparoni

Autor: Othon Ciparoni

Gênero: Designer

Formato: MP4

Idioma: Português

Investimento: R$ 69,70

Aprimore seu controle sobre o design no Elementor usando CSS, mesmo sem experiência prévia em programação.

Este curso oferece uma abordagem prática para quem deseja ir além das limitações do editor visual do Elementor. Com mais de 200 aulas em vídeo, o designer Othon Ciparoni conduz o aluno desde os fundamentos de HTML até técnicas avançadas, incluindo animações com GSAP. O foco está em aplicar CSS diretamente dentro do Elementor para conseguir layouts precisos e customizados que atendam a necessidades reais de projetos web.

O que você vai aprender

  • Diferenciação entre seletores CSS para aplicar estilos específicos a botões ou grupos de elementos no Elementor.
  • Manejo prático de Flexbox e Grid para solucionar problemas comuns de alinhamento e criar sessões responsivas.
  • Criatividade na utilização do SwiperJS para construir carrosséis personalizados além das opções padrão.
  • Técnicas básicas para manipulação de CSS através de JavaScript, ampliando as possibilidades interativas dos seus sites.
  • Uso das ferramentas DevTools no navegador para editar e corrigir códigos CSS em tempo real durante o desenvolvimento.

Conteúdo programático

Bases do HTML e Seletores CSS

Nesta etapa inicial, são apresentados os conceitos essenciais da estrutura HTML necessários para aplicar CSS efetivamente. O módulo inclui orientação detalhada sobre como escolher e usar os seletores corretos para estilizar componentes específicos dentro do Elementor.

Flexbox e Grid Layouts

Aqui você estuda recursos modernos de layout que facilitam a construção de páginas responsivas. A aplicação prática dessas técnicas ajuda a resolver desafios diários relacionados ao posicionamento visual nos seus projetos.

Animações e Interatividade com GSAP e JS

Nesta parte avançada são exploradas animações suaves e efeitos dinâmicos por meio da integração entre CSS, JavaScript e a biblioteca GSAP, contribuindo para designs mais atrativos.

Módulo SwiperJS: Carrosséis Personalizados

Dedicado à criação de slides customizados que superam as limitações existentes nas ferramentas nativas do Elementor, ampliando suas possibilidades criativas.

Ajustes Práticos com DevTools

A formação incentiva o uso direto das ferramentas dos navegadores para debugar estilos durante o desenvolvimento, garantindo ajustes rápidos e precisos no código CSS aplicado.

Público indicado

  • Designers e desenvolvedores que utilizam o Elementor e querem aprimorar personalizações por meio do CSS.
  • Pessoas interessadas em compreender profundamente o funcionamento do código por trás das edições visuais no WordPress.
  • Aqueles que desejam superar limitações dos padrões prontos evitando copiar códigos sem entender seu funcionamento.

Público não indicado

  • Pessoas que preferem trabalhar exclusivamente com edição visual sem interesse em lidar com códigos ou personalização detalhada via programação.

Sobre Othon Ciparoni

Othon atua como designer especializado em projetos web usando Elementor aliado ao CSS. Sua experiência abrange trabalhos variados para diferentes clientes, sempre focando na qualidade visual aliada à consistência técnica. Além disso, ele compartilha conhecimento direto e objetivo, facilitando a aprendizagem prática dos alunos interessados em desenvolvimento front-end aplicado ao WordPress.

Diferenciais deste curso

  • Módulos atualizados regularmente com conteúdos extras baseados em dúvidas reais da comunidade.
  • Total concentração nas particularidades do uso do CSS dentro do ambiente Elementor sem dispersão teórica irrelevante.
  • Linguagem acessível voltada à aplicação imediata nos mais variados tipos de site – desde institucionais até páginas com animações sofisticadas.
  • Cobertura completa das ferramentas atuais usadas no design web moderno: Flexbox, Grid Layouts, JS básico integrado a GSAP para movimentos profissionais.

Autor: Othon Ciparoni

Genero: designer

Formato: MP4

Idioma: Português

O que você recebe

  • 16 módulos com 220 aulas no total
  • Aulas em vídeo e materiais incluídos no treinamento
  • Acesso enviado após a confirmação da compra
  • Orientações para dúvidas relacionadas ao acesso

Conteudo do Curso

1

01 Comece por aqui 1 AULA

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

02 Introdução ao HTML 4 AULAS

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

03 Introdução ao CSS 8 AULAS

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

04 Conhecendo os tipos de seletores | Seletores Básicos

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

05 Principais propriedades do CSS 26 AULAS

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

06 CSS Flexbox 4 AULAS

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

07 CSS Grid 11 AULAS

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

08 DevTools 14 AULAS

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

09 Estruturas dos Widgets 50 AULAS

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

10 CSS na prática 27 AULAS

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

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

16 aulas
Ver aulas (16)
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 3 Delay Repeat Yoyo e Stagger
  • 4 Eases
  • 5
  • 6
  • 7
  • 8
  • 9
  • Conhecendo os métodos set, to, from e fromTo
  • O que é o GSAP e como utilizá-lo no Elementor
  • 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]
  • 10 Carrossel vertical com fade
  • 2 Entendendo a estrutura HTML e recriando-a no Elementor
  • 3 Script para remover o e-con-inner
  • 4 Adicionando paginação e navegação
  • 5 Customizando os elementos com CSS
  • 6 Conhecendo os parâmetros mais utilizados
  • 7 Breakpoints tornando o carrossel responsivo
  • 8 Eventos
  • 9 Carrossel Coverflow com desfoque
14

14 w bonus 4 Imersão CSS

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

15. Bônus - Lives sobre CSS e Javascript

14 aulas
Ver aulas (14)
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
  • Aula
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
  • Workshop Otimização de Landing Pages parte 2

Perguntas frequentes

Como recebo o acesso após a compra?

Após a confirmação do pagamento, as informações de acesso são enviadas para os dados informados durante a compra.

E se eu tiver dúvida no acesso?

Caso tenha alguma dificuldade relacionada ao acesso, utilize o canal de atendimento informado após a compra.

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

Explore por categoria