El bloque de Shortcode te permite incrustar cualquier shortcode de WordPress directamente en tus páginas de SeedProd. Los shortcodes son pequeños fragmentos de código envueltos en corchetes — como [contact-form-7] o [woocommerce_cart] — que activan funcionalidades específicas cuando se renderiza la página. Este bloque une el editor visual de SeedProd con el ecosistema más amplio de plugins de WordPress.
Cualquier plugin que genere contenido a través de un shortcode puede ser insertado en una página de SeedProd usando este bloque. Ejemplos comunes incluyen formularios de contacto, botones de pago, contenido para miembros, sliders, calendarios de reservas y fragmentos de PHP personalizados. El selector opcional de vista previa en vivo te permite ver la salida renderizada directamente en el editor, para que puedas verificar que tu shortcode funciona antes de publicar.
Añadir el Bloque de Shortcode a tus Páginas
Sigue estos pasos para añadir un bloque de Shortcode a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Shortcode en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Shortcode para abrir su configuración. En la pestaña Contenido, la sección Ajustes te permite introducir tu shortcode y, opcionalmente, previsualizar su salida en el editor.
- Shortcode: Escribe o pega tu shortcode de WordPress en el área de texto. Introduce el shortcode completo, incluyendo sus corchetes y cualquier atributo — por ejemplo,
[contact-form-7 id="1" title="Formulario de contacto"]. El shortcode se procesará y renderizará en la página en vivo. - Mostrar Vista Previa del Shortcode: Activa esta opción para renderizar una vista previa en vivo de la salida del shortcode directamente dentro del editor de SeedProd. Esto te permite verificar que el shortcode funciona y comprobar su apariencia sin salir del constructor. Desactívala para ocultar la vista previa y mantener el editor receptivo mientras editas otros elementos.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes controlar el espaciado alrededor del bloque y gestionar su visibilidad en diferentes dispositivos.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Shortcode (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre la salida del shortcode y los elementos circundantes de la página.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de Shortcode (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre la salida del shortcode y los bordes del bloque.
Atributos:
- ID de CSS: Muestra el identificador único generado automáticamente para tu bloque de Shortcode. Este ID es creado automáticamente por SeedProd para estilos personalizados o para la selección mediante JavaScript.
- Clase Personalizada: Añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado al contenedor del bloque.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una línea nueva con el formato: nombre-del-atributo|valor (ej. data-form|contacto).
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de Shortcode en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de Shortcode en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de Shortcode en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de Shortcode entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Girar entrada y muchas más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Shortcode y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Shortcode a tu página! Este bloque desbloquea todo el poder del ecosistema de plugins de WordPress dentro de tus diseños de SeedProd — desde formularios de contacto y widgets de pago hasta puertas de membresía y funcionalidades personalizadas. Pega cualquier shortcode que tus plugins proporcionen y usa el selector de vista previa en vivo para confirmar que todo se ve exactamente como se pretende antes de que tu página se publique.