O bloco de Shortcode permite incorporar qualquer shortcode do WordPress diretamente nas suas páginas do SeedProd. Shortcodes são pequenos trechos de código envoltos em colchetes — como [contact-form-7] ou [woocommerce_cart] — que acionam funcionalidades específicas quando a página é renderizada. Este bloco preenche a lacuna entre o editor visual do SeedProd e o ecossistema mais amplo de plugins do WordPress.
Qualquer plugin que exiba conteúdo por meio de um shortcode pode ser inserido em uma página do SeedProd usando este bloco. Exemplos comuns incluem formulários de contato, botões de pagamento, conteúdo de membros, sliders, calendários de agendamento e trechos de PHP personalizados. A opção de alternância de visualização ao vivo permite ver a saída renderizada diretamente no editor, para que você possa verificar se o seu shortcode está funcionando antes de publicar.
Adicionando o Bloco de Shortcode às Suas Páginas
Siga estas etapas para adicionar um bloco de Shortcode à sua página do SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Shortcode na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco de Shortcode para abrir suas configurações. Na aba Conteúdo, a seção Configurações permite que você insira seu shortcode e, opcionalmente, visualize sua saída no editor.
- Shortcode: Digite ou cole seu shortcode do WordPress na área de texto. Insira o shortcode completo, incluindo seus colchetes e quaisquer atributos — por exemplo,
[contact-form-7 id="1" title="Contact form"]. O shortcode será processado e renderizado na página ao vivo. - Mostrar Pré-visualização do Shortcode: Ative esta opção para renderizar uma pré-visualização ao vivo da saída do shortcode diretamente dentro do editor do SeedProd. Isso permite verificar se o shortcode está funcionando e conferir sua aparência sem sair do construtor. Desative-a para ocultar a pré-visualização e manter o editor responsivo enquanto edita outros elementos.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode controlar o espaçamento ao redor do bloco e gerenciar sua visibilidade em diferentes dispositivos.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Shortcode (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre a saída do shortcode e os elementos da página circundantes.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Shortcode (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre a saída do shortcode e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Shortcode. 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 ao wrapper do bloco.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-form|contato).
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco Shortcode em telas de desktop.
- Ocultar no Tablet: Oculte o bloco Shortcode em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco Shortcode 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 Shortcode entra na visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco Shortcode e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Shortcode à sua página! Este bloco desbloqueia todo o poder do ecossistema de plugins do WordPress dentro de seus layouts SeedProd — de formulários de contato e widgets de pagamento a portões de associação e funcionalidades personalizadas. Cole qualquer shortcode que seus plugins forneçam e use o alternador de visualização ao vivo para confirmar que tudo parece exatamente como pretendido antes que sua página seja publicada.