Edição da página inicial com o Elementor: adição de módulos (texto, imagens, botões, etc.)

Aprender a adicionar módulos básicos é uma habilidade essencial para projetar páginas com o Elementor. Este capítulo mostrará como adicionar texto, imagens, botões e outros elementos comuns manualmente e ajustar seus estilos para dar à sua página inicial sua primeira forma.

Preparação: entrar no modo de edição do Elementor

1. Faça login no back-end do WordPress, vá para "Pages" → Localize "Home" (ou a página que deseja editar) e clique em "Edit".
2. Clique no botão "Edit with Elementor" (azul com o ícone do Elementor) na parte superior da página para acessar a interface de edição visual.

Ao entrar, a interface é dividida em três seções:

• Esquerda: Painel do módulo(contém todos os elementos que podem ser adicionados)
• Centro: área de edição(Exibição em tempo real dos efeitos da página)
• Direita: Painel de estilo(Os estilos detalhados podem ser ajustados quando um elemento é selecionado)

Etapa 1: Adicione o módulo "Title" (título do texto)

Os títulos são o "esqueleto" da página e são usados para orientar os visitantes na hierarquia do conteúdo.

1. Localizar o módulo de cabeçalhoNo painel esquerdo do módulo, localize o módulo "Title" (Título) (ícone "T") na categoria "Basic" (Básico).
2. Arraste e solte para adicionar à páginaPressione e mantenha pressionado o módulo "Título", arraste-o para a posição "+ Arrastar elemento aqui" na área de edição central e solte o mouse. Nesse ponto, a página aparecerá com um título padrão "Este é o título".
3. Modificar o conteúdo do títuloSelecione o módulo de título que você acabou de adicionar e um painel de edição será exibido à direita:
   • Em "Content" → "Title Text", exclua o texto padrão e digite seu título (por exemplo, "Welcome to my personal blog").
   • Selecione o nível em "Header Level" (H1 é o maior, adequado para títulos principais; H2 é o segundo maior, adequado para subtítulos, e é selecionado de acordo com o nível de conteúdo).
4. Ajuste do estilo do títuloClique na guia "Styles" (Estilos) no painel direito para personalizá-la:
   • estilo caligráficoSelecione sua fonte favorita (por exemplo, "Microsoft Black", "Arial") na caixa suspensa "Font" (Fonte).
   • magnitudeTamanho da fonte: Arraste o controle deslizante "Font Size" (Tamanho da fonte) ou insira o valor diretamente (o tamanho recomendado para o título é entre 24 e 48 px).
   • corCor do texto: Clique na caixa "Cor do texto" para selecionar a cor do título (por exemplo, preto, azul escuro).
   • alinhar-se na ordem corretaAlinhamento do texto: Clique no botão "Alinhamento do texto" para definir o título como à esquerda, centralizado ou à direita (recomenda-se que o título principal da página inicial seja centralizado).

Etapa 2: Adicione o módulo "Paragraph" (texto do corpo)

Os parágrafos são usados para mostrar detalhes, como uma sinopse, descrição, etc.

1. Adicionar módulo de parágrafoLocalize o módulo Parágrafo (o ícone é o símbolo de parágrafo) na categoria "Básico" à esquerda e arraste-o e solte-o sob o módulo Título.
2. Modificar o conteúdo do parágrafoSelecione o módulo de parágrafo e insira o conteúdo (por exemplo, "Aqui eu compartilho minhas lições de vida e notas de estudo, bem-vindo para trocar frequentemente!) Bem-vindo ao compartilhamento!".
3. Otimizar estilos de parágrafoVá para a guia Styles (Estilos):
   • tamanho da fonte: Recomenda-se uma configuração de 16-18px (para facilitar a leitura).
   • A altura da linhaAjuste para 1,5 a 1,8 vezes (para um espaçamento de texto mais confortável).
   • corCor do título: Escolha uma cor que possa ser distinguida do título (por exemplo, cinza escuro para evitar que fique muito próxima da cor do plano de fundo).

Etapa 3: Adicione o módulo "Picture" (inserir imagem)

As imagens dão vida à página e é recomendável escolher imagens claras e relevantes (por exemplo, fotos pessoais, imagens de produtos, paisagens).

1. Fazer upload ou selecionar imagensLocalize o módulo "Pictures" na categoria "Basic" à esquerda e arraste-o para a parte inferior do parágrafo. Selecione o módulo Picture e clique em "Select Picture" em "Content" → "Picture" no lado direito:
   • Se a imagem já estiver em seu computador, clique em "Upload File" → Selecione a imagem → Clique em "Select".
   • Se você já tiver feito o upload anteriormente, poderá selecionar diretamente a imagem existente na Biblioteca de mídia.
2. Ajuste do visor de imagensVá para a guia Styles (Estilos):
   • tamanhosEm "Width" (Largura), defina a proporção da imagem na página (por exemplo, 100% significa largura total da tela, 80% significa mais estreito).
   • canto arredondadoRaio da borda: Arraste o controle deslizante Raio da borda para arredondar os cantos da imagem (quanto maior o valor, mais pronunciados serão os cantos arredondados).
   • fig. uma experiência traumática que assombra alguémSombra de caixa: Ative a opção "Box Shadow" para adicionar uma leve sombra à imagem (para dar a ela uma aparência mais em camadas).
3. Adicionar descrição da imagem (opcional)Inserir descrições de imagens (por exemplo, "Minhas fotos de viagem") em "Conteúdo" → "Texto alternativo" ajuda os mecanismos de pesquisa a entender o conteúdo das imagens e melhora o SEO.

Etapa 4: Adicionar o módulo "Button" (clique guiado)

Os botões são usados com frequência para orientar os visitantes a realizar ações, como "View More" (Ver mais), "Contact Me" (Entre em contato comigo), "Buy Now" (Compre agora) etc.

1. Adicionar módulo de botãoLocalize o módulo "Buttons" na categoria "Basic" à esquerda e arraste-o e solte-o abaixo da imagem.
2. Definição do conteúdo do botão e dos linksVerifique o módulo de botões, no lado direito, em "Content" (Conteúdo):
   • cópiasDigite o texto do botão (por exemplo, "View my posts").
   • linkClique na caixa de entrada ao lado de "Dynamic" e digite o endereço do link (por exemplo, o endereço da página do blogroll ou um link externo).
     • Se estiver criando um link para uma página na estação, você poderá clicar no ícone "Select Page" (Selecionar página) no lado direito da caixa de entrada para selecionar diretamente a página de destino.
3. Criando estilos de botõesPasse para a guia "Style" (Estilo) para criar botões atraentes:
   • corEscolha branco para "Cor do texto" e cores vivas para "Cor do plano de fundo" (por exemplo, azul, laranja, para harmonizar com a cor principal da página).
   • tamanhosTamanho do botão: Selecione "Medium" (Médio) ou "Large" (Grande) em "Button Size" (Tamanho do botão) para facilitar o clique no botão.
   • geometriaRaio da borda: Defina o "Raio da borda" como 5-10px (cantos ligeiramente arredondados são esteticamente mais agradáveis).
   • ** Efeito hover **: Clique na guia "hover" para definir a cor (por exemplo, aprofundar a cor) quando o mouse estiver passando, para melhorar a sensação de interatividade.

Etapa 5: Ajuste o espaçamento do módulo (para uma página mais organizada)

Depois de adicionar vários módulos, pode haver problemas com o espaçamento muito próximo ou muito distante entre eles, e o layout precisará ser ajustado:

1. Módulos selecionadosClique na borda do módulo (aparece uma borda azul).
2. Ajuste das margens externasNo painel direito "Advanced" (Avançado) -> "Margin" (Margem), defina a distância entre o módulo e os elementos superior e inferior (por exemplo, "Top Margin" (Margem superior) é definida como 30px para aumentar o espaçamento com o módulo superior).
3. alinhamentoPressione e mantenha pressionado Ctrl (ou Command chave) Selecione vários módulos ao mesmo tempo e clique no botão "Align" (Alinhar) na barra de ferramentas superior (por exemplo, "Centre Align" (Alinhamento central)) para alinhar os elementos de forma mais organizada.

Etapa 6: Salvar e visualizar

1. Salvar alteraçõesClique no botão "Update" (Atualizar) no canto inferior esquerdo da página (é recomendável salvar as alterações após cada revisão).
2. Efeito de visualizaçãoClique no botão "Preview" (Visualização) no canto superior esquerdo e selecione "Desktop Preview" (Visualização na área de trabalho), "Tablet Preview" (Visualização no tablet) e "Mobile Phone Preview" (Visualização no celular) para verificar o efeito de exibição em diferentes dispositivos (certifique-se de que o texto não se sobreponha e que a imagem não seja distorcida no celular).

Dicas para iniciantes

• Os módulos podem ser adicionados repetidamente: se você precisar de mais de um parágrafo ou imagem, poderá arrastar e soltar diretamente o módulo correspondente várias vezes.
• Excluir módulo: Após selecionar um módulo, pressione o teclado Delete ou clique no ícone "Lixeira" na parte superior do módulo.
• Copiar módulo: Após selecionar um módulo, clique no ícone "Copiar" para copiar rapidamente elementos do mesmo estilo (basta modificar o conteúdo).

Com as etapas acima, você dominou as habilidades de adição do módulo principal do Elementor. Em seguida, você pode tentar adicionar "ícone", "divisor", "lista" e outros módulos para tornar a página inicial mais rica!