Elemento de imagem do artigo

Sobre o elemento de imagem do artigo

O processo de Elemento de imagem do artigo é usado principalmente dentro do Elemento da lista de artigos para exibir miniaturas de artigos ou imagens em destaque. 

Este elemento ajuda a criar listas de artigos visualmente atraentes, melhorando a experiência geral do usuário. Ele também pode ser adicionado a páginas de artigos individuais, embora seja menos comumente usado nesse contexto.

O elemento de imagem do artigo só pode ser usado quando colocado dentro do elemento da lista de artigos.

Como adicionar uma imagem ao seu artigo?

Etapa 1 - Acessar o Painel GemPages  > PÁGINAS, então clique na página de destino para localizar o editor.

Etapa 2 - Na barra lateral esquerda, procure por Elemento de imagem do artigo e arraste e solte-o na posição preferida na sua página.

Etapa 3 - Clique no elemento para abrir suas configurações para maior personalização.

Configurar a guia Configurações do elemento de imagem do artigo

O processo de Elemento de imagem do artigo inclui várias opções de personalização para atender às suas necessidades de design e funcionalidade:

Fonte do artigo

Clique na caixa para configurar as fontes do artigo no elemento Lista de artigos.

Imagem

Selecione como a imagem em destaque do seu artigo será exibida na página:

• Preencher imagem: A imagem será redimensionada ou cortada para preencher as dimensões do quadro.

Isso pode cortar partes da imagem se sua proporção for diferente do quadro.

• Ajustar imagem: A imagem será reduzida ou aumentada para caber totalmente no quadro, preservando sua proporção original. 

Isso garante que toda a imagem fique visível, mas pode deixar espaço (preenchimento) nas bordas se a proporção não corresponder ao quadro.

Dimensões:

Proporção: Escolha como a imagem será cortada ou exibida:

• Quadrado: Largura e altura iguais.
• vertical:Mais alto do que largo.
• Horizontal:Mais largo do que alto.
• Óptimo estado. Original: Mantém a proporção original da imagem.
• Molduras por Medida: Ajuste manualmente a largura e a altura.

Largura e altura: Defina dimensões precisas para a imagem em pixels.

Shape

• Fronteira: Você pode alterar a cor, a espessura e o traço da borda deste elemento.
• Corner: O canto da seção pode ser quadrado, redondo ou em formato de pílula. Você pode ajustar o raio do canto como preferir.
• Shadow: Você pode adicionar uma sombra da seção Lista de artigos e ajustar a exibição da sombra (tamanho, cor, desfoque e distância)

de vidrio

Por padrão, no de vidrio seção, a ação pós-clique é definida como “Vá para o artigo”. Você pode alterá-lo para “Vá para” e insira a seção de destino conforme preferir. 

SEO

• Alt Texto: Forneça uma descrição da imagem para acessibilidade e SEO. Este texto é exibido se a imagem não carregar e ajuda os mecanismos de busca a entender o conteúdo.
• Título da Imagem: Adicione uma dica de ferramenta que aparece quando um usuário passa o mouse sobre a imagem, fornecendo contexto ou informações adicionais.
  

Otimize o LCP

Esta configuração ajuda a melhorar a aparência da sua página Pintura com maior conteúdo (LCP) pontuação, que é uma métrica essencial do Core Web Vitals para desempenho e SEO.

Qualidade: Escolha o nível correto de compressão de imagem para equilibrar clareza e velocidade de carregamento.

• Melhor: Qualidade superior, tamanho de arquivo maior.
• Alto (padrão): Qualidade e desempenho equilibrados.
• Meio: Carregamento mais rápido, qualidade ligeiramente reduzida para páginas com muitas imagens.
• Personalizadas: Defina suas próprias configurações de compactação para controle avançado.

Pré-carregamento: Habilite esta opção se a imagem aparecer acima da dobra e for um dos principais elementos visuais da página.

Alinhar

Ajuste o alinhamento do título para melhor legibilidade. Você pode escolher entre alinhamento à esquerda, alinhamento centralizado ou alinhamento à direita.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até a guia Avançado e siga as instruções em Este artigo.