🎯 Objetivo da aula:

Ensinar os conceitos e práticas de responsividade em páginas web, utilizando o plugin Elementor no WordPress, com foco em como adaptar o conteúdo para diferentes tamanhos de tela (desktop, notebook, tablet e celular).

---

📱 O que é responsividade?

É a adaptação da página para diferentes tamanhos de tela. Elementos como textos, imagens e botões precisam ser ajustados para que a visualização seja adequada em qualquer dispositivo, garantindo uma boa experiência do usuário.

---

🛠️ Ferramentas usadas:

• Elementor: Plugin do WordPress para edição visual de páginas.
• Site de exemplo com:
  • Contêiner principal
  • Subcontêiner com logotipo, título, texto e botão

---

🔍 Principais tópicos abordados:

1. Largura de conteúdo

• Cada tela tem uma largura definida para evitar que o conteúdo fique “espalhado”.
• Em vez de usar “largura total”, usa-se “encaixotado” (boxed) para manter o conteúdo centralizado e previsível.
• Padrões sugeridos:
  • Desktop: 1280px
  • Notebook: 961px
  • Tablet: 656px
  • Celular: 359px
  • Tela ampla (wide): mesma do desktop

2. Edição por dispositivo

• Pode-se ajustar texto, alinhamento e layout separadamente para cada tipo de tela.
• Ícone de dispositivo (📱) indica que aquela configuração é específica para um tipo de tela.
• Sem ícone = configuração global (válida para todos os dispositivos).

3. Tamanhos de texto e alinhamento

• Exemplo: Título com fonte 65px no desktop pode ser reduzido para 30px no celular.
• Alinhamento (ex: centralizado) também pode ser diferente em cada dispositivo.

4. Direção dos elementos

• A direção (horizontal ou vertical) dos elementos dentro do contêiner muda conforme o dispositivo.
  • Desktop: horizontal (lado a lado)
  • Tablet e celular: vertical (um em cima do outro)

5. Ordem dos elementos

• A ordem dos itens (imagem, texto, botão) pode ser reorganizada em cada dispositivo.
• Ex: No tablet, a imagem pode aparecer antes do texto, mesmo que no desktop seja o contrário.

6. Margens e preenchimentos (padding)

• Pode-se definir margens e preenchimentos específicos por dispositivo para melhorar o espaçamento.

7. Hierarquia de configuração

• As configurações feitas no desktop são herdadas pelos outros dispositivos.
• Se algo for alterado no tablet, o celular herda essa nova configuração (a não ser que seja sobrescrita no celular também).

---

📌 Encerramento:

A aula foi interrompida para ser dividida em duas partes, devido ao conteúdo extenso. A parte 2 abordará mais conceitos avançados de responsividade.