Duração estimada: 2 horas

Objetivo: Conhecer e praticar a interface do editor visual do Elementor.

📋 LIÇÃO 2.1: A INTERFACE QUE VOCÊ VAI ENCONTRAR

Crie uma página nova com o nome que quiser e publique-a.

Uma vez publicada, edite-a com o Elementor:

• Seja por “Páginas – Todas as páginas – Editar com Elementor”.
• Seja pela parte pública, na página que você quer editar e na barra superior clicar em “Editar com Elementor“.

Quando você entrar pela primeira vez no editor do Elementor, verá esta distribuição:

🔝 BARRA SUPERIOR PRETA (Seu painel de controle principal)

[☰] [➕] [⚙️] [🕒] | [🖥️] [💻] [📱] | [📋] [🆕] [🔍] [📐] [👁️] [🎯]

Explicação de cada elemento:

Esquerda →
• ☰ Menu – Mostra/oculta o painel de widgets.
• ➕ Adicionar elemento – Acesso rápido aos widgets.
• ⚙️ Configurações da página – Configuração geral.
• 🕒 Histórico – Controle de versões.

Centro →
• 🖥️ Desktop – Visualização para computadores.
• 💻 Tablet – Visualização para tablets.
• 📱 Mobile – Visualização para celulares.

Direita →
• 📋 Lista de verificação – Ferramentas de otimização.
• 🆕 Novidades – Atualizações do Elementor.
• 🔍 Buscador – Buscar widgets e configurações.
• 📐 Estrutura – Ver hierarquia dos elementos. É uma lista com todas as colunas, widgets, etc.
• 👁️ Visualizar – Ver como visitante.
• 🎯 Publicar – Publicar/atualizar página.

⬅️ PAINEL ESQUERDO (Sua caixa de ferramentas)

Aqui você encontrará TODOS os widgets organizados por categorias:

🔍 Buscar widget...
───────────────
🏗️ ELEMENTOS BÁSICOS
• Título
• Imagem
• Editor de texto
• Vídeo
• Botão
• Separador
• Espaçador
• Google Maps
• Ícone
───────────────
🚀 ELEMENTOS PRO
(Se você tem a versão Pro)
───────────────
📁 MEUS ELEMENTOS
(Seus modelos salvos)

🎨 ÁREA CENTRAL (Sua tela em branco)

Este é o espaço onde você construirá sua página. No início, você verá:

╔══════════════════════════════════════════╗
║                                          ║
║        🎯 ÁREA DE TRABALHO               ║
║                                          ║
║   [  ➕  ] ← Clique aqui para começar    ║
║                                          ║
║     Seu design aparecerá nesta zona      ║
║                                          ║
╚══════════════════════════════════════════╝

➡️ PAINEL DIREITO

Apenas o painel “Estrutura” flutuará se você o selecionar na barra superior, para a esquerda. É útil tê-lo sempre ativo para poder se localizar esquematicamente em qual widget você está e para reordenar o Elementor arrastando e soltando.

🎯 LIÇÃO 2.2: COMO COMEÇAR A CONSTRUIR

PASSO 1: CRIAR SUA PRIMEIRA SEÇÃO

1. 🖱️ Clique no botão ➕ grande da área central.
2. 🏗️ Selecione a estrutura de “2 Colunas” (50% | 50%).
3. ✅ Pronto! Você já tem sua primeira seção com duas colunas.

O que você verá:

┌───────────────────────────────────────┐
│  SEÇÃO (com borda cinza clara)        │
│                                       │
│  ┌─────────────┐ ┌─────────────┐      │
│  │   COLUNA    │ │   COLUNA    │      │
│  │      1      │ │      2      │      │
│  │             │ │             │      │
│  │     [+]     │ │     [+]     │      │
│  │             │ │             │      │
│  └─────────────┘ └─────────────┘      │
└───────────────────────────────────────┘

PASSO 2: ADICIONAR SEU PRIMEIRO WIDGET

Vamos adicionar um Título na coluna esquerda:

1. 🧰 Abra o painel esquerdo (clique em ☰ se estiver fechado).
2. 🔍 Procure o widget “Título” em “Elementos básicos”.
3. 🖱️ Clique sobre ele e mantenha pressionado.
4. ➡️ Arraste-o para a coluna 1.
5. 🖐️ Solte o botão do mouse.

✨ Parabéns! Você acabou de colocar seu primeiro widget.

⚙️ LIÇÃO 2.3: COMO EDITAR ELEMENTOS CORRETAMENTE

ERRO COMUM DE INICIANTES:

❌ NÃO dê duplo clique sobre o texto para editá-lo.
❌ NÃO procure botões de formatação como no Word.

MÉTODO CORRETO:

1. 🖱️ Clique UMA VEZ sobre o título que você adicionou.
2. 👁️ Observe o que acontece:

AO REDOR do título aparece um ícone:

[✏️] ← (para editar)

Com o botão direito sobre o lápis, você encontrará opções como:

[📋]      ← (duplicar)
[🗑️]      ← (excluir)

No PAINEL ESQUERDO, com o widget selecionado, agora você verá:

┌────────────────────────────┐
│ 🎯 TÍTULO                  │
│                            │
│  CONTEÚDO      ESTILO      │ ← Abas principais
│     AVANÇADO               │
│                            │
│ - Título: "Este é o..."    │ ← Seu texto aqui
│                            │
│ - Tag HTML: H2             │ ← Tipo de título
│                            │
│ - Link:                    │ ← Para torná-lo clicável
└────────────────────────────┘

PARA EDITAR O TEXTO:

1. 👉 Vá para o painel esquerdo, aba “Conteúdo”.
2. 🖱️ Clique no campo “Título”.
3. 🗑️ Apague o texto padrão.
4. ⌨️ Escreva: “Bem-vindo ao Meu Site”.
5. 👀 Veja! A mudança é instantânea na área central.

🎨 LIÇÃO 2.4: AS 3 ABAS DE CONFIGURAÇÃO

Quando você seleciona QUALQUER widget, no painel esquerdo você verá estas 3 abas:

1. 📋 CONTEÚDO (O que diz)

Aqui você controla o conteúdo do elemento:

• ✏️ Textos – O que é lido.
• 🖼️ Imagens – O que é visto.
• 🔗 Links – Para onde leva.
• ⚙️ Opções – Comportamento básico.

Exercício prático:

1. 🖱️ Selecione seu título.
2. 👉 Vá para a aba “Conteúdo”.
3. 🔽 Procure “Tag HTML”.
4. 🖱️ Altere de “H2” para “H1”

2. 🎨 ESTILO (Como se vê)

Aqui você controla a aparência visual:

• 🎨 Cores – Paleta cromática.
• 🔤 Tipografia – Fontes e tamanhos.
• 📐 Alinhamento – Posição do conteúdo.
• ✨ Efeitos – Sombras, bordas, etc.

Exercício prático:

1. 👉 Clique na aba “Estilo”
2. 🎨 Procure “Cor do texto”.
3. 🖱️ Clique no quadrado de cor.
4. 🎯 Escolha uma cor que você goste.
5. 🔤 Teste alterar o tamanho para 48px.

3. 🚀 AVANÇADO (Controle técnico)

Para ajustes mais específicos:

• 📏 Margens – Espaço externo.
• 🛡️ Preenchimento (Padding) – Espaço interno.
• 🎭 Animações – Efeitos de entrada.
• 🛠️ CSS personalizado – Para especialistas.

Exercício prático:

1. 👉 Clique na aba “Avançado”.
2. 📏 Procure “Margens”.
3. ✏️ Escreva em “Superior”: 20.
4. ✏️ Escreva em “Inferior”: 20.
5. 👁️ Observe como o título ganha espaço acima e abaixo.

🏗️ LIÇÃO 2.5: COMPLETAR SUA PRIMEIRA SEÇÃO

Vamos terminar de construir nossa primeira seção completa:

NA COLUNA 1 (Já temos o título):

1. 🧰 Procure o widget “Editor de texto”.
2. 🖱️ Arraste-o ABAIXO do título.
3. ✏️ Edite o texto para que diga:
   “Este é o meu site criado com Elementor. Estou aprendendo a projetar páginas web de forma visual e profissional.”
4. 🎨 Vá para Estilo > Alinhamento > Justificado.

NA COLUNA 2:

1. 🧰 Procure o widget “Imagem”.
2. 🖱️ Arraste-o para a coluna 2.
3. ⚙️ Configure:
   • Clique em “Selecionar imagem”.
   • Escolha uma imagem do seu computador ou da biblioteca.
   • Clique em “Inserir”.
4. 🎨 Opcional: Vá para Estilo > Borda > Raio: 10px

Abaixo da imagem:

1. 🧰 Procure o widget “Botão”.
2. 🖱️ Arraste-o abaixo da imagem.
3. ✏️ Configure:
   • Texto: “Ver mais informações”.
   • Link: “#” (sem aspas).
   • Alinhamento: Centro.

📱 LIÇÃO 2.6: VISUALIZAÇÃO EM DIFERENTES DISPOSITIVOS

A MAGIA DO ELEMENTOR:

Você pode ver e ajustar seu design para mobile, tablet e desktop separadamente.

COMO FUNCIONA:

Na barra superior, no centro, clique em:

• 📱 MOBILE – Para ver em celulares.
• 💻 TABLET – Para ver em tablets.
• 🖥️ DESKTOP – Para ver em computadores.

EXERCÍCIO PRÁTICO:

Vamos otimizar nosso título para mobile:

1. 🖱️ Clique em 📱 MOBILE.
2. 🖱️ Selecione seu título “Bem-vindo ao Meu Site”.
3. 👉 Vá para a aba “Estilo”.
4. 🔤 Procure “Tamanho” em Tipografia.
5. ✏️ Altere de 48px para 32px.
6. 👁️ Observe como só muda na visualização mobile.

✨ IMPORTANTE:
As alterações que você fizer em 📱 Mobile afetam apenas os celulares.
As alterações que você fizer em 💻 Tablet afetam apenas os tablets.
As alterações que você fizer em 🖥️ Desktop afetam apenas o desktop.

💾 LIÇÃO 2.7: SALVAR E PUBLICAR SEU TRABALHO

DIFERENÇA CHAVE:

• 👁️ VISUALIZAR = Ver alterações sem publicar.
• 🎯 PUBLICAR = Tornar as alterações visíveis para todos.

PASSO A PASSO PARA PUBLICAR:

1. 🔝 Olhe para o canto superior direito.
2. 🖱️ Clique no botão 🎯 PUBLICAR.
3. ✅ Mensagem: “Página atualizada” (sucesso)

PARA VER COMO VISITANTE:

1. 🖱️ Clique em 👁️ VISUALIZAR.
   (ao lado do botão Publicar)
2. 🖥️ Se abre uma nova aba do navegador.
3. 👀 Você pode ver sua página exatamente como seus visitantes a verão.

CONSELHO IMPORTANTE:

Use 👁️ VISUALIZAR frequentemente enquanto trabalha, e use 🎯 PUBLICAR apenas quando estiver satisfeito com o resultado.

🛠️ LIÇÃO 2.8: FERRAMENTAS ÚTEIS DA BARRA SUPERIOR

📐 ESTRUTURA – Seu mapa de navegação

1. 🖱️ Clique na barra escura superior, à direita, em 📐 ESTRUTURA.
2. 🗺️ Aparece um painel com todos os seus elementos organizados.
3. 🖱️ Você pode clicar em qualquer elemento para selecioná-lo.
4. 🎯 Útil quando você tem elementos sobrepostos ou difíceis de selecionar e para arrastar e soltar, alterando a localização dos conteúdos de forma esquemática.

🕒 HISTÓRICO – Seu seguro de erros

1. 🖱️ Clique em 🕒 HISTÓRICO.
2. 📜 Você verá uma lista de todas as alterações recentes.
3. 🖱️ Clique em qualquer versão anterior.
4. 🔄 Essa versão será restaurada automaticamente.
5. ⏰ O Elementor salva até 50 alterações recentes.

🔍 BUSCADOR – Encontre o que precisa

1. 🖱️ Clique em 🔍 BUSCADOR.
2. ⌨️ Escreva o nome de qualquer widget.
3. ⚡ Encontre-o instantaneamente.
4. 🎯 Também busca ajustes e configurações.

🏆 EXERCÍCIO PRÁTICO FINAL

OBJETIVO: Criar uma seção “Serviços” completa

PASSO 1: Adicionar nova seção

1. Role até o final da sua página.
2. 🖱️ Clique em “➕ Adicionar nova seção”.
3. 🏗️ Escolha a estrutura “3 Colunas” (33% | 33% | 33%).

PASSO 2: Coluna 1 – Serviço 1

1. 🧰 Arraste “Ícone” para a coluna.
2. ⚙️ Escolha um ícone que você goste (ex: ⭐).
3. 🧰 Arraste “Título” abaixo.
4. ✏️ Escreva: “Design Web”.
5. 🧰 Arraste “Editor de texto” abaixo.
6. ✏️ Escreva: “Criação de sites modernos e responsivos”.

PASSO 3: Coluna 2 – Serviço 2

1. 📋 Selecione toda a coluna 1.
2. 🖱️ Clique em duplicar, clicando com o botão direito no ícone do lápis e escolhendo 📋 (duplicar).
3. ➡️ Arraste a coluna duplicada para a coluna 2.
4. ✏️ Altere os textos a seu gosto.

PASSO 4: Coluna 3 – Serviço 3

Repita o processo para completar a terceira coluna.

PASSO 5: Título da seção

1. 🖱️ Clique no ➕ ACIMA das 3 colunas.
2. 🧰 Arraste “Título” ali.
3. ✏️ Escreva: “Nossos Serviços”.
4. 🎨 Estilo: Centro, tamanho 42px, cor de destaque.

PASSO 6: Otimizar para mobile

1. 🖱️ Clique em 📱 MOBILE.
2. 🔍 Verifique se tudo está legível.
3. ⚙️ Ajuste os tamanhos se necessário.
4. 📱 Verifique se as 3 colunas empilham verticalmente nos celulares.

PASSO 7: Publicar

1. 🖱️ Clique em 🎯 PUBLICAR.
2. 👁️ Clique em 👁️ VISUALIZAR.
3. ✅ Verifique se está tudo correto.

🚨 ERROS COMUNS E SOLUÇÕES

“Não consigo selecionar um elemento”

SOLUÇÃO:

• Use 📐 ESTRUTURA para navegar.
• Clique em áreas vazias perto do elemento.
• Certifique-se de não estar no modo 📱 MOBILE se quiser editar a versão desktop.

“As alterações não se aplicam”

SOLUÇÃO:

• Verifique se você clicou em 🎯 PUBLICAR, não apenas em 👁️ VISUALIZAR.
• Limpe o cache do seu navegador.
• Verifique se não há conflito com outros plugins.

“Não vejo o painel esquerdo”

SOLUÇÃO:

• 🖱️ Clique em ☰ MENU (canto superior esquerdo).
• Ou clique em ➕ ADICIONAR ELEMENTO.
• Ou pressione a tecla ESC no seu teclado.

💡 CONSELHOS PROFISSIONAIS

1. Salve versões – Use 🕒 HISTÓRICO antes de grandes alterações.
2. Celular – Verifique sempre em 📱 MOBILE durante o design.
3. Nomeie elementos – Em 🚀 AVANÇADO > CSS, dê nomes descritivos (se você sabe CSS).
4. Use atalhos – Ctrl+S salva, Ctrl+Z desfaz.
5. Experimente sem medo – Você sempre pode usar 🕒 HISTÓRICO para voltar atrás.

✅ RESUMO DO QUE FOI APRENDIDO

Neste módulo, você dominou:

1. ✅ A interface completa do Elementor.
2. ✅ Como adicionar seções e colunas.
3. ✅ Como arrastar e soltar widgets.
4. ✅ Como editar conteúdo corretamente.
5. ✅ As 3 abas de configuração (Conteúdo, Estilo, Avançado).
6. ✅ Como trabalhar com visualizações responsivas.
7. ✅ Como salvar e publicar seu trabalho.
8. ✅ Ferramentas úteis como Estrutura e Histórico.

🎉 EXCELENTE TRABALHO!
Agora você tem as bases para construir um site com o Elementor. No próximo módulo, aprofundaremos widgets específicos e técnicas avançadas de design.