Glossário

• 16:9 = Widescreen (vídeos do YouTube)
• 1:1 = Quadrado (foto de perfil Instagram)
• 4:3 = Clássico (fotos antigas)

aspect-ratio: 16/9; /* Sempre widescreen */

• Pessoas cegas usam leitores de tela que LEEM o alt text
• Google usa para entender a imagem (SEO)
• Aparece se imagem não carregar

• Espessura: 1px, 2px, 3px
• Estilo: solid (sólida), dashed (tracejada), dotted (pontilhada)
• Cor: #000000 (preta), #FF0000 (vermelha)

border: 2px solid #000000; /* Borda preta sólida de 2px */

• 0 = Quadrado (sem arredondamento)
• 0.25rem (4px) = Levemente arredondado
• 0.5rem (8px) = Médio (padrão botões)
• 50% = Círculo perfeito

border-radius: 0.5rem; /* Cantos suaves */

• Desktop: 1025px+ (computadores)
• Tablet: 768-1024px (iPads)
• Mobile: até 767px (celulares)

• Horizontal: quanto desloca para direita
• Vertical: quanto desloca para baixo
• Blur: quão desfocada é
• Cor: cor da sombra

box-shadow: 0 10px 20px rgba(0,0,0,0.1);
/* X: 0, Y: 10px, Blur: 20px, Cor: preto 10% */

• Container principal (seção inteira)
• Container interno (bloco dentro da seção)

• “Comprar Agora”
• “Baixar Grátis”
• “Fale no WhatsApp”
• “Assine a Newsletter”

• easybuilder.com.br
• seunegocio.com
• meusite.net

• block = Ocupa linha inteira (parágrafo, título)
• inline = Fica na mesma linha (link, ícone)
• flex = Flexível, se adapta (layout moderno!)
• grid = Grade organizada (cards, galerias)
• none = Invisível/oculto

display: flex; /* Elementos ficam flexíveis */

• Elementor Free (grátis)
• Elementor PRO (pago - R$ 249/ano)
• Pro Elements (grátis alternativo ao PRO)

• em = relativo ao pai direto
• rem = relativo ao root (sempre)

.icone {
  font-size: 1.2em; /* 120% do tamanho do texto ao redor */
}

• Vídeo do YouTube
• Mapa do Google Maps
• Post do Instagram

• ✅ Responsivo automaticamente
• ✅ Centraliza facilmente
• ✅ Distribui espaço igual

display: flex;
justify-content: center; /* Centraliza horizontal */
align-items: center; /* Centraliza vertical */

• Linear: uma direção (esquerda→direita, cima→baixo)
• Radial: do centro para fora

background: linear-gradient(90deg, blue, purple);
/* Azul na esquerda, roxo na direita */

• H1 = Título principal (APENAS 1 por página!)
• H2 = Títulos de seção (“Sobre Nós”, “Serviços”)
• H3 = Subtítulos (títulos de cards)
• H4, H5, H6 = Títulos menores

• Imagem de fundo impactante
• Título grande (H1)
• Subtítulo
• Botão de ação

• ID = usa UMA VEZ (#hero-principal)
• Class = usa VÁRIAS VEZES (.btn-cta)

#hero-principal {
  background: blue;
}

• Vídeo do YouTube
• Mapa do Google
• Calendário
• Formulário externo

<iframe src="https://youtube.com/embed/VIDEO_ID"></iframe>

• Botão que abre modal
• Scroll suave
• Validar formulário
• Contador regressivo

• Sem menu (sem distração)
• Um CTA claro
• Foco total na conversão

• 1.0 = Linhas grudadas (difícil de ler)
• 1.6 = Confortável para leitura
• 2.0 = Muito espaçado

• Headings: 1.2-1.3
• Texto corrido: 1.6-1.8

• Margin = espaço FORA (entre elementos)
• Padding = espaço DENTRO (entre borda e conteúdo)

margin: 2rem 0; /* 32px em cima e embaixo, 0 nas laterais */

[Elemento 1]
← margin →
[Elemento 2]

• Title: Título que aparece no Google
• Description: Texto abaixo do título no Google
• Keywords: Palavras-chave (não tão importante mais)

• cover = Preenche tudo, pode cortar (mais usado!)
• contain = Cabe inteira, pode sobrar espaço
• fill = Estica/distorce para caber

img {
  object-fit: cover; /* Preenche sem distorcer */
}

• og:title (título do card)
• og:description (descrição)
• og:image (imagem de preview - 1200x630px)

• Comprimir imagens (AVIF/WebP)
• Ativar cache
• Minificar CSS/JS
• Lazy load em imagens
• Limitar fontes (máximo 3)

• Padding = espaço DENTRO
• Margin = espaço FORA

padding: 2rem; /* 32px de colchão em todos lados */

┌─────────────────┐
│ ← padding →     │
│     Texto       │
│ ← padding →     │
└─────────────────┘

• Elementor (editor visual)
• Yoast SEO (otimização Google)
• LiteSpeed Cache (velocidade)

• static = Normal (padrão)
• relative = Relativo à posição original
• absolute = Posição fixa na tela (cuidado! quebra responsividade)
• fixed = Fixo mesmo scrollando (menu grudado no topo)

position: fixed;
top: 0; /* Gruda no topo */

• Bordas (border: 1px)
• Sombras

• Fontes (use rem!)
• Espaçamentos (use rem!)

• 0.5rem = 8px
• 1rem = 16px
• 1.5rem = 24px
• 2rem = 32px

font-size: 1rem; /* 16px que se adapta */

• F12 no navegador → Toggle Device Toolbar
• Acessar do celular real
• Elementor: ícone de dispositivo embaixo

• rgb(255, 0, 0) = Vermelho puro
• rgb(0, 0, 0) = Preto
• rgba(0, 0, 0, 0.5) = Preto 50% transparente (A = Alpha/opacidade)

• RGB: rgb(255, 0, 0)
• HEX: #FF0000 (mesma cor!)

• Headings corretos (H1, H2, H3)
• Title e Description otimizados
• Site rápido
• Mobile-friendly
• Conteúdo relevante

• Logos
• Ícones
• Ilustrações simples

• ✅ site.com/sobre-nos (slug: sobre-nos)
• ❌ site.com/p=123 (não amigável!)

.botao {
  background: blue;
  transition: all 0.3s ease; /* Transição de 0.3 segundos */
}

.botao:hover {
  background: red; /* Muda suavemente para vermelho */
}

• all = anima tudo
• 0.3s = duração (300 milissegundos)
• ease = curva de animação (suave)

• 100vh = 100% da altura da tela
• 50vh = metade da altura da tela

.hero {
  min-height: 100vh; /* Altura da tela toda */
}

• 100vw = 100% da largura da tela
• 50vw = metade da largura

font-size: 5vw; /* Tamanho = 5% da largura da tela */

• Widget Heading (título)
• Widget Button (botão)
• Widget Image (imagem)
• Widget Text Editor (texto)

• Gratuito e open-source
• Usado por 40%+ dos sites do mundo!
• Não precisa programar

• Número baixo = mais atrás
• Número alto = mais na frente

.modal {
  z-index: 1000; /* Bem na frente */
}

.fundo {
  z-index: 1; /* Bem atrás */
}

• translate() = Move
• scale() = Aumenta/diminui
• rotate() = Gira
• skew() = Inclina

.botao:hover {
  transform: translateY(-3px); /* Move 3px para cima */
}

.imagem:hover {
  transform: scale(1.1); /* Aumenta 10% */
}

• blur() = Desfoque
• brightness() = Brilho
• contrast() = Contraste
• grayscale() = Preto e branco
• saturate() = Saturação

img {
  filter: grayscale(100%); /* Preto e branco */
}

img:hover {
  filter: grayscale(0%); /* Volta colorida */
}

• pointer = Mãozinha (link clicável)
• default = Seta normal
• text = Cursor de texto (I)
• not-allowed = Proibido
• grab = Mão aberta (arrastar)

.botao {
  cursor: pointer; /* Mãozinha */
}

• Negativo = Letras mais juntas
• Positivo = Letras mais espaçadas

h1 {
  letter-spacing: 0.05em; /* Levemente espaçado */
}

.all-caps {
  letter-spacing: 0.1em; /* Maiúsculas precisam mais espaço */
  text-transform: uppercase;
}

• uppercase = MAIÚSCULAS
• lowercase = minúsculas
• capitalize = Primeira Letra Maiúscula
• none = Normal

.titulo {
  text-transform: uppercase; /* TUDO MAIÚSCULO */
}

• content-box = Padrão (padding e border SÃO ADICIONADOS)
• border-box = Melhor! (padding e border JÁ INCLUSOS)

* {
  box-sizing: border-box; /* Padrão moderno */
}

• width: 100px + padding: 20px
• content-box = 140px total (100+20+20)
• border-box = 100px total (padding JÁ incluído)

1. Design para celular primeiro
2. Depois adapta para telas maiores

/* Mobile (padrão) */
.texto { font-size: 1rem; }

/* Desktop (adiciona) */
@media (min-width: 1025px) {
  .texto { font-size: 1.5rem; }
}

• Imagem de 600px? Exporte em 1200px
• Use @2x no nome (logo@2x.png)
• Ou use SVG (sempre nítido!)

• Botões (mínimo 44px altura)
• Links
• Campos de formulário
• Ícones clicáveis

• Clique em botão
• Download de PDF
• Play em vídeo
• Scroll até 50% da página

• Preencher formulário
• Comprar produto
• Assistir vídeo
• Tempo no site >2min

• Logos com fundo transparente
• Ícones
• Imagens com texto nítido

• Email válido (tem @)
• Telefone (só números)
• CPF (formato correto)
• Senha forte

1. Campo invisível para humanos
2. Bots preenchem (não sabem que é invisível)
3. Se preenchido = bot = rejeita envio!

<input type="text" name="honeypot" style="display:none;">

• Fade In = Aparece gradualmente
• Fade Out = Desaparece gradualmente

.elemento {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.elemento.visivel {
  opacity: 1; /* Fade in */
}

• Slide Up = De baixo para cima
• Slide Down = De cima para baixo
• Slide Left = Da direita para esquerda
• Slide Right = Da esquerda para direita

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

• Elementor: Motion Effects → Scroll Effects
• JavaScript: Intersection Observer
• Plugin: AOS (Animate On Scroll)

• #FF0000 = Vermelho puro
• #00FF00 = Verde puro
• #0000FF = Azul puro
• #FFFFFF = Branco
• #000000 = Preto

• Azul ↔ Laranja
• Vermelho ↔ Verde
• Roxo ↔ Amarelo

• Sistema legado do Elementor
• Section > Column > Widget

• Sistema moderno (Flexbox)
• Mais flexível
• Aninhamento infinito

1. Crie widget
2. Botão direito → Save as Global
3. Edita em 1 página = atualiza em todas!

• Page = Página inteira
• Section = Seção
• Header = Cabeçalho
• Footer = Rodapé

• Botão direito → Navigator
• Ou ícone no canto

1. Easy Builder → Sessões
2. Escolhe sessão
3. Copiar
4. Cola no Elementor

• Sessões customizadas
• Botões personalizados
• Códigos CSS/JS
• Páginas completas

• Elementor + PRO Elements
• Plugins essenciais
• Otimizações ativadas
• Tema leve

1. Copiar no Easy Builder
2. Elementor: Botão direito → Colar de Outro Site
3. Ctrl + V

• Após instalar/atualizar Elementor
• Se cores/fontes não aplicam
• Após mudar configurações

• Após instalar Elementor
• Se elementos do Easy Builder não colam
• Se ícones não aparecem

• Logo
• Links (Home, Sobre, Serviços, Contato)
• Botão CTA

• Fixa (gruda no topo ao scrollar)
• Normal (some ao scrollar)

• 1 = Totalmente visível (0% transparente)
• 0.5 = Meio transparente (50%)
• 0 = Invisível (100% transparente)

.elemento {
  opacity: 0.8; /* 80% visível, 20% transparente */
}

• visible = Vaza para fora (padrão)
• hidden = Esconde o que não cabe
• scroll = Adiciona barra de rolagem
• auto = Barra só se necessário

.container {
  overflow: hidden; /* Corta o que não cabe */
}

https://easybuilder.com.br/sobre-nos

• https:// = Protocolo (seguro)
• easybuilder.com.br = Domínio
• /sobre-nos = Slug (caminho da página)

• Botões
• Menus
• Formulários
• Layout da página

• Facilidade de usar
• Velocidade
• Se encontra o que busca
• Se converte (compra, cadastra)

• Site rápido ✅
• Navegação clara ✅
• Botões grandes no mobile ✅
• Textos legíveis ✅

• Servidor Apache
• MySQL (banco de dados)
• PHP

• Otimizar Title e Description
• Análise de legibilidade
• Sitemap XML automático
• Preview no Google
• Open Graph para redes sociais

• Otimizar imagem principal (hero)
• Usar AVIF/WebP
• Ativar cache

• Reduzir JavaScript
• Não travar navegador com scripts pesados

• Definir width/height de imagens
• Reservar espaço para anúncios
• Carregar fontes corretamente

• Reduzir JavaScript
• Lazy load em imagens
• Cache ativado

• Headline forte
• Benefício principal
• CTA visível

• Escolha de fontes
• Tamanhos (hierarchy)
• Espaçamento entre linhas (line-height)
• Espaçamento entre letras (letter-spacing)

• Texto normal: 4.5:1
• Texto grande: 3:1

• Preto #000 em branco #FFF = 21:1 ✅

• Cinza claro #CCC em branco #FFF = 1.6:1 ❌

• Sombras interna e externa
• Cores sutis
• Parece “embutido” ou “elevado”

.card-neuro {
  background: #e0e0e0;
  box-shadow:
    5px 5px 10px #bebebe,
    -5px -5px 10px #ffffff;
}

• Site lento
• Não é o que esperavam
• Mobile ruim

• CTA claro
• Prova social
• Site rápido
• Mobile perfeito

• E-book grátis
• Checklist
• Webinar
• Cupom de desconto

1. Topo: Pessoa descobre você (anúncio, Google)
2. Meio: Se interessa (lê conteúdo, vê vídeo)
3. Fundo: Compra!

• Posts e páginas
• Usuários
• Configurações
• Comentários

• URL do site
• Título
• Configurações de plugins

• Google penaliza sites HTTP (sem SSL)
• Navegadores mostram “Não Seguro”
• Formulários não são confiáveis sem SSL

• Hackers
• Bots maliciosos
• Ataques DDoS

• Cloudflare (grátis)
• Plugin Wordfence
• Configuração da hospedagem

• Plugins craqueados
• Temas piratas
• Senha fraca

• Usar só plugins oficiais
• Senha forte
• Manter WordPress atualizado
• Plugin de segurança (Wordfence)

• Senha forte (letras, números, símbolos)
• Limite de tentativas
• Two-Factor Authentication (2FA)
• Trocar URL de login (/wp-admin para /meu-login-secreto)

• Carrinho de compras
• Checkout
• Produtos
• Pagamentos

• Plugin WP Mail SMTP
• Usar Gmail, SendGrid, ou Mailgun
• Configurar autenticação

• :hover = mouse em cima
• :active = enquanto clica
• :focus = campo de formulário selecionado
• :first-child = primeiro filho
• :last-child = último filho

a:hover { color: red; } /* Link fica vermelho ao passar mouse */

• ::before = antes do conteúdo
• ::after = depois do conteúdo

.titulo::before {
  content: "⭐ "; /* Adiciona estrela antes */
}

• ✅ Layouts em UMA direção (linha OU coluna)
• ✅ Centralizar elementos
• ✅ Distribuir espaço
• Exemplo: Menu horizontal, cards em linha

• ✅ Layouts em DUAS direções (linhas E colunas)
• ✅ Galerias de imagens
• ✅ Cards em grade
• Exemplo: Grid 3x3 de produtos

• Conteúdo de blog
• Tem data
• Organizado por categoria/tag
• Aparece em ordem cronológica

• Conteúdo estático
• Sem data
• Hierárquica (pode ter páginas filhas)
• Exemplo: Sobre, Contato, Serviços

• Produtos (WooCommerce)
• Portfólio
• Depoimentos
• Equipe

• Categoria (ampla)
• Tag (específica)
• Custom (personalizada)

• Post sobre WordPress
• Categoria: “Tutoriais”
• Tags: “elementor”, “easy-builder”, “templates”

• /p=123 ❌ (ruim para SEO)
• /sobre-nos ✅ (bom para SEO)
• /2024/01/titulo-post (com data)

• Dados do banco de dados
• Chaves de segurança
• Configurações do WordPress

• Redirecionamentos
• Limites de PHP
• Proteção de diretórios
• URLs amigáveis

• Clara (entende em 3 segundos)
• Benefício óbvio
• Provoca curiosidade

“Crie Sites Profissionais em 2 Horas ao Invés de 2 Dias”

“Easy Builder” (não diz benefício!)

Headline: “Crie Sites em Horas” Subheadline: “Templates prontos, IA integrada, sem programar”

• Depoimentos
• Avaliações (★★★★★)
• Número de clientes (”+ de 5.000 usuários”)
• Logos de empresas
• Cases de sucesso

• Escassez (“Últimas vagas!”)
• Urgência (“Promoção acaba em 24h”)
• Autoridade (“Usado por 10.000+ empresas”)
• Reciprocidade (“E-book grátis”)
• Prova social (“5.000 clientes satisfeitos”)

• “É caro demais”
• “Não vai funcionar para mim”
• “Não tenho tempo”
• “E se não der certo?”

• Carrinho resumido
• Dados de entrega
• Forma de pagamento
• Botão “Finalizar Compra”

• Adicionar/remover produtos
• Alterar quantidade
• Calcular frete
• Ver total

• Mercado Pago
• PagSeguro
• Stripe
• PayPal

• Meta Pixel (Facebook/Instagram Ads)
• Google Analytics
• Google Ads

• A = Básico
• AA = Recomendado (meta!)
• AAA = Avançado

• Contraste mínimo 4.5:1
• Alt text em imagens
• Navegação por teclado
• Textos descritivos

• Alt text em imagens
• Headings corretos
• Labels em formulários
• Links descritivos

• ✅ Barato (R$ 12-27/mês)
• ✅ Fácil de usar

• ❌ Mais lento (divide recursos)
• ❌ Limites de PHP mais baixos

• ✅ Mais rápido
• ✅ Mais controle
• ✅ Recursos dedicados

• ❌ Mais caro (R$ 50-200/mês)
• ❌ Precisa conhecimento técnico

• 99.9% = 43 minutos offline por mês ✅
• 99% = 7 horas offline por mês ⚠️
• 95% = 36 horas offline por mês ❌