El bloque HTML personalizado te permite incrustar cualquier código HTML directamente en tus páginas de SeedProd. Ya sea que necesites agregar un widget de terceros, un código de inserción personalizado, una salida HTML sin procesar o cualquier fragmento para el que SeedProd no tenga un bloque dedicado, este bloque te brinda una forma directa de insertarlo.
Esto lo hace ideal para integrar herramientas externas, scripts personalizados o cualquier contenido basado en HTML que desees colocar con precisión dentro del diseño de tu página.
Añadir el bloque HTML personalizado a tus páginas
Sigue estos pasos para añadir un bloque HTML personalizado a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque HTML Personalizado en la sección deseada de tu página.
Arrastra el bloque HTML Personalizado desde el panel de Bloques y suéltalo en la sección de página deseada.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque HTML Personalizado para abrir su configuración. En la pestaña Contenido, puedes introducir tu código HTML y acceder al editor de pantalla completa.
- Código Personalizado: Pega o escribe tu código HTML directamente en el área de texto. Puede ser cualquier HTML válido, incluyendo códigos de inserción, iframes, elementos personalizados o etiquetas de script.
- Expandir Editor: Haz clic en este botón para abrir un editor de código de pantalla completa más grande, lo que facilita el trabajo con fragmentos de HTML más largos o complejos.
Introduce tu código HTML en la pestaña Contenido. Utiliza el botón Expandir Editor para un espacio de trabajo de edición más grande.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes controlar la disposición y la visibilidad de tu bloque HTML Personalizado.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque HTML Personalizado (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el bloque y los elementos circundantes.
- Relleno: Ajusta el espaciado interior dentro de tu bloque HTML Personalizado (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre tu contenido HTML y los bordes del bloque.
Atributos:
- ID de CSS: Muestra el identificador único generado automáticamente para tu bloque HTML Personalizado. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos Personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea usando el formato: nombre-del-atributo|valor (por ejemplo, data-section|html-embed).
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculta el bloque HTML Personalizado en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque HTML Personalizado en dispositivos tableta.
- Ocultar en Móvil: Oculta el bloque HTML Personalizado 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 HTML Personalizado entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más.
Utiliza la pestaña Avanzado para controlar el espaciado, los atributos, la visibilidad del dispositivo y las animaciones de entrada de tu bloque HTML Personalizado.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque HTML personalizado, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque HTML personalizado a tu página! Ya sea que estés incrustando un widget de terceros, un formulario personalizado o cualquier fragmento de HTML que tu sitio necesite, el bloque HTML personalizado te da la flexibilidad de colocar cualquier marcado exactamente donde lo deseas en tus páginas de SeedProd.