Elemento de código personalizado

Sobre o elemento Código Personalizado

O elemento Código Personalizado no GemPages Editor V7 oferece a flexibilidade de adicionar seu próprio HTML, APF, JavaScript e Liquid código diretamente na sua página. É um elemento poderoso que permite:

• Personalize com facilidade: Adicione elementos de design exclusivos ou recursos interativos que os elementos regulares do GemPages não suportam.
• Facilmente integrar aplicativos de terceiros: Incorpore aplicativos externos, widgets, códigos de rastreamento ou scripts em sua loja Shopify sem codificação complicada.
• Recursos da loja Boost: Adicione comportamentos e interações personalizados para melhorar a aparência e o funcionamento da sua loja para seus clientes.

Adicione um elemento de código personalizado à sua página

Siga estas etapas simples para inserir o elemento Código Personalizado:

Etapa 1 - Acessar o Painel GemPagese selecione a página de destino para abrir o editor.

Etapa 2: Arraste e solte o Código personalizado elemento da barra lateral esquerda, sob o Avançado seção, para a área desejada.

Clique no elemento para revelar a configuração, incluindo o Configurações aba e Avançado aba. 

Configurar a guia Configurações

O processo de Configurações A aba "Código Personalizado" permite que você configure como o seu elemento de Código Personalizado se comporta e aparece na página. Veja como cada seção funciona:

Code

Insira seu próprio código personalizado clicando em “+ Acrescentar…” botão. Uma caixa de diálogo do Editor de Código será exibida, onde você pode inserir HTML/Líquido, APF, ou JavaScript trecho de código.

Feito isso, acerte o Economize botão.

Observação: Na aba HTML, você também pode inserir o Código de instalação de terceiros para exibir conteúdo.

Contexto

De acordo com o relatório Contexto seção, você tem a opção de modificar a aparência visual selecionando uma cor na paleta fornecida ou inserindo uma imagem de fundo. 

Cor

Escolha uma cor sólida ou gradiente para aplicar como plano de fundo do elemento. Você pode:

• Insira manualmente um código HEX (por exemplo, #E2e2e2)
• Escolha entre cores recentes ou sugeridas
• Ajuste a opacidade usando o controle deslizante de porcentagem

Imagem 

Use esta opção para adicionar uma imagem de fundo, se necessário.

Clique “+ Adicionar…” na seção Imagem para carregar ou selecionar uma imagem de fundo.

Depois que uma imagem for adicionada, você terá opções de configuração avançadas:

• fonte: Exibe o URL da imagem ou permite que você selecione na galeria de mídia.
• Escala: Escolha como a imagem será dimensionada dentro do bloco (por exemplo, Cobrir, Conter, Automático).
• Posição: Defina o ponto focal (centro, superior esquerdo, inferior direito, etc.).
• repetição: Defina se e como a imagem se repete (Sem repetição, Repetir, Repetir-X/Y).
• acessório: Defina o comportamento de rolagem da imagem (Rolagem ou Fixo).
• Otimizar LCP (Pintura com Maior Conteúdo): Rrecomenda que o navegador priorize esta imagem para desempenho, selecione Pré-carga = Sim ise este elemento for carregado acima da dobra.

Nome

Renomeie seu elemento para facilitar a identificação no editor, especialmente útil para layouts complexos ou páginas com várias seções.

Alinhar

Este parâmetro permite que você determine como o elemento é posicionado na sua página. Há três opções para escolher: alinhado à esquerda, centralizado e alinhado à direita.

Configurar a guia Avançado

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

Etapa 1 - Encontre o elemento GemPages onde deseja aplicar o código personalizado, clique com o botão direito e selecione “Código Personalizado”.

Etapa 2 - Localize a aba apropriada para APF e Scripte insira o trecho de código na caixa de diálogo. Clique em “Economize" quando você terminar.

Como remover código personalizado ou líquido personalizado

Se você não precisar mais do código personalizado adicionado, poderá removê-lo de duas maneiras:

1. Remover um elemento de código personalizado

Etapa 1 - No Editor, clique no elemento de Código Personalizado que você deseja excluir.

Etapa 2 - Pressione o ícone da lixeira (Excluir) na barra superior ou clique com o botão direito do mouse no elemento e selecione Apagar.

2. Remova o código líquido/personalizado dentro de um elemento existente

Etapa 1 - Clique com o botão direito do mouse no elemento onde o código personalizado foi adicionado → selecione Código personalizado

Etapa 2 - Exclua o código dentro do campo CSS, Script.

Etapa 3 - Clique Economize.