Exercício 02
Exercício de grid
Exercício 03
Flexbox e Grid no Elementor
- Fazer um backup do site
- Criar uma nova página para fazer o exercício (aqui)
- Item Nº 3 da lista
01 - Passo a passo
Heading 2
CONFIGURAÇÕES DA PÁGINA:
- Acesse as configurações da página e defina o layout como “Tela do Elementor”.✅
O CONTAINER:
- Adicione um container do tipo Flexbox de linha simples. ✅
- Configure a altura mínima do container como 100vh.✅
- Alinhe os itens para ficarem centralizados verticalmente.✅
- Adicione 1 Infobox e copie-o 4 vezes, totalizando 5 Infoboxes.✅
- Altere o título de cada Infobox com o número correspondente em sequência (1, 2, 3, 4 e 5).✅
- Configure uma cor de fundo diferente para cada Infobox. Para facilitar, acesse o site Coolors e escolha uma paleta de cores (preferencialmente tons claros para evitar alterar a cor dos textos).
- Paleta de cores usada na aula: https://coolors.co/palette/cdb4db-ffc8dd-ffafcc-bde0fe-a2d2ff.
ESTRUTURA DO LAYOUT:
- Primeira linha:
- 3 Infoboxes, com:
- O primeiro ocupando 20% do espaço total.✅
- O segundo ocupando 45%.✅
- O terceiro ocupando 20%, com a configuração de crescer ativada.✅
- Observação: Remova o espaçamento entre as colunas.✅
- 3 Infoboxes, com:
- Segunda linha:
- 2 Infoboxes, ambos ocupando 25% do espaço, mas o primeiro com a configuração de crescer ativada.✅
- Configure o alinhamento dos itens como “Esticar”.
RESPONSIVIDADE:
- Para Tablet:
- Primeira linha:
- O Infobox 1 deve aparecer no final da linha, o Infobox 2 no centro, e o Infobox 3 no início.✅
- Segunda linha:
- Ambos os Infoboxes devem ocupar 50% da largura.✅
- Primeira linha:
- Para Mobile:
- Os Infoboxes devem aparecer na sequência crescente (1 a 5).✅
- Todos os elementos devem estar empilhados, com largura total.✅
- Configure o container para que cada linha tenha uma separação de 20px.✅
Exercício 04
Grid no Elementor
- Fazer um backup do site
- Criar uma nova página para fazer o exercício (aqui)
- Item Nº 3 da lista
INSTRUÇÕES GERAIS PARA REALIZAR O EXERCÍCIO
CONFIGURAÇÕES DA PÁGINA:
- Criar uma nova página ✅
- Acesse as configurações da página e defina o layout como “Tela do Elementor”.✅
O GRID (GRADE):
- O grid deve conter 2 linhas e 4 colunas.✅
- Observação: Este layout não está pré-configurado, então selecione outro layout qualquer e ajuste manualmente.
- ✅ Configure a altura mínima do grid como 100vh.
- Elimine os espaçamentos entre linhas e colunas.✅
- Adicione padding superior e inferior de 100px.✅
- O conteúdo deve ter alinhamento vertical do tipo “Esticar”.✅
- Adicione um Infobox em cada célula do grid.✅
- Altere o título de cada Infobox, numerando-os em sequência (1, 2, 3, 4, 5, 6, 7 e 8).✅
- ✅ Configure uma cor de fundo diferente para cada Infobox. Utilize o site Coolors para escolher uma paleta de cores (preferencialmente tons claros para evitar ajustes nas cores dos textos).
- Paleta de cores usada na aula: https://coolors.co/palette/fbf8cc-fde4cf-ffcfd2-f1c0e8-cfbaf0-a3c4f3-90dbf4-8eecf5-98f5e1-b9fbc0.
- ✅ Adicione padding de 10px em todos os lados de cada Infobox.
ESTRUTURA DO LAYOUT:
- Colunas:
- A primeira e a última colunas devem ser configuradas com proporção de 1 fração.
- As colunas do meio devem ter proporção de 2 frações.
- Linhas:
- A primeira linha deve ter proporção de 3 frações.✅
- A segunda linha deve ter proporção de 2 frações.✅
RESPONSIVIDADE:
- Para Tablet:
- Todas as linhas e colunas devem ter proporção de 1 fração.✅
- Os elementos devem ser reordenados da seguinte forma:
- Primeira linha: 5, 6, 7, 8.✅
- Segunda linha: 4, 3, 2, 1.✅
- Para Mobile:
- Os elementos devem ser exibidos em ordem decrescente: 8, 7, 6, 5, 4, 3, 2, 1. ✅
Exercício 06
Widgets de Imagem e Vídeo
Data: 28/06/226
Exercício 07
Widget de Galeria
Data: 28/06/226
Exercício 08
Widgets Chamada à Ação e Botões de Compartilhamento
Data: 28/06/226
01 – Colocar um botão de chamada para ação
02 – Adicionar uma imagem
03 – Adicione o wdgets de compartilhamento
Exercício 09
Widget Tabela de Preços:
Data: 28/06/226
01 – Adicionar o widget de tabela de preços
02 – Adicionar uma imagem
03 – Adicione o wdgets de compartilhamento
Seu investimento
Preço
R$2049.98
R$
498
99
Anual -
Item da lista #1
-
Item da lista #2
-
Item da lista #3
Clique aqui
Este é um elemento de texto
Popular
Exercício 10
Widget Slides
Data: 28/06/226
01 – Adicionar o widget de tabela de preços
02 – Adicionar uma imagem
03 – Adicione o wdgets de compartilhamento