El bloque HTML personalizado te permite incrustar cualquier marcado HTML directamente en tus páginas de SeedProd. Tanto si necesitas añadir un widget de terceros, un código de incrustación personalizado, salida HTML sin procesar o cualquier fragmento para el que SeedProd no tenga un bloque específico, este bloque te ofrece una forma directa de insertarlo.
Esto lo hace ideal para integrar herramientas externas, scripts personalizados o cualquier contenido basado en HTML que desee colocar con precisión dentro del diseño de su 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 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 Bloques y suéltalo en la sección de la página que desees.
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 a pantalla completa.
- Código personalizado: pegue o escriba su marcado HTML directamente en el área de texto. Puede ser cualquier código HTML válido, incluidos códigos incrustados, iframes, elementos personalizados o etiquetas de script.
- Expandir editor: Haga clic en este botón para abrir un editor de código más grande a pantalla completa, lo que facilita el trabajo con fragmentos de HTML más largos o complejos.
Introduzca su código HTML en la pestaña Contenido. Utilice el botón Expandir editor para ampliar el espacio de trabajo de edición.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes controlar el diseño y la visibilidad de tu bloque HTML personalizado.
Espaciado:
- Margen: controla el espacio 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 espacio interior dentro de tu bloque HTML personalizado (arriba, derecha, abajo, izquierda). Esto crea un espacio entre tu contenido HTML y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque HTML personalizado. SeedProd crea este ID automáticamente para el estilo personalizado o la orientación de JavaScript.
- Clase personalizada: añade 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 utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-section|html-embed).
Visibilidad del dispositivo:
- Ocultar en escritorio: Ocultar el bloque HTML personalizado en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque HTML personalizado en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque HTML personalizado en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elija entre varios efectos de animación que se reproducen cuando el bloque HTML personalizado aparece en pantalla. Las opciones incluyen rebote, fundido de entrada, zoom, rotación y muchas más.
Utilice la pestaña Avanzado para controlar el espaciado, los atributos, la visibilidad del dispositivo y las animaciones de entrada de su bloque HTML personalizado.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque HTML personalizado, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque HTML personalizado a tu página! Tanto si estás incrustando un widget de terceros, un formulario personalizado o cualquier fragmento de código HTML que necesite tu sitio web, el bloque HTML personalizado te ofrece la flexibilidad de colocar cualquier marcado exactamente donde quieras en tus páginas de SeedProd.