O bloco de HTML Personalizado permite incorporar qualquer marcação HTML diretamente em suas páginas SeedProd. Se você precisa adicionar um widget de terceiros, um código de incorporação personalizado, saída HTML bruta ou qualquer trecho para o qual o SeedProd não tenha um bloco dedicado, este bloco oferece uma maneira direta de inseri-lo.
Isso o torna ideal para integrar ferramentas externas, scripts personalizados ou qualquer conteúdo baseado em HTML que você deseja posicionar precisamente dentro do layout da sua página.
Adicionando o Bloco de HTML Personalizado às Suas Páginas
Siga estas etapas para adicionar um bloco de HTML Personalizado à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco HTML Personalizado na seção desejada da sua página.
Arraste o bloco de HTML Personalizado do painel Blocos e solte-o na seção desejada da página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco de HTML Personalizado para abrir suas configurações. Na aba Conteúdo, você pode inserir seu código HTML e acessar o editor de tela inteira.
- Código Personalizado: Cole ou digite sua marcação HTML diretamente na área de texto. Pode ser qualquer HTML válido, incluindo códigos de incorporação, iframes, elementos personalizados ou tags de script.
- Expandir Editor: Clique neste botão para abrir um editor de código de tela inteira maior, facilitando o trabalho com trechos de HTML mais longos ou complexos.
Insira seu código HTML na aba Conteúdo. Use o botão Expandir Editor para uma área de trabalho de edição maior.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode controlar o layout e a visibilidade do seu bloco de HTML Personalizado.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de HTML Personalizado (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o bloco e os elementos circundantes.
- Preenchimento: Ajuste o espaçamento interno do seu bloco de HTML Personalizado (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o seu conteúdo HTML e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de HTML Personalizado. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento de contêiner do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-section|html-embed)
Visibilidade do Dispositivo:
- Ocultar em Desktop: Oculte o bloco de HTML Personalizado em telas de desktop.
- Ocultar em Tablet: Oculte o bloco de HTML Personalizado em dispositivos tablet.
- Ocultar em Mobile: Oculte o bloco de HTML Personalizado em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando o bloco de HTML Personalizado entra na visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras.
Use a aba Avançado para controlar o espaçamento, atributos, visibilidade do dispositivo e animações de entrada para o seu bloco de HTML Personalizado.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de HTML Personalizado, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de HTML personalizado à sua página! Se você está incorporando um widget de terceiros, um formulário personalizado ou qualquer trecho de HTML que seu site precise, o bloco de HTML personalizado oferece a flexibilidade de colocar qualquer marcação exatamente onde você deseja em suas páginas SeedProd.