Añadir contenido personalizado con HTML

Permite añadir código o un contenido insertado que necesite una estructura diferente a los widgets habituales.

En el constructor de páginas, este elemento se llama Bloque HTML.

Cómo acceder

Entra en Sitio web → Páginas, abre la página y selecciona Contenido. Pulsa Crear nuevo widget → Bloque HTML. Para crearlo dentro de un contenedor, utiliza el botón + de ese contenedor.

Cómo utilizarlo

Mira si alguno de los elementos habituales del constructor sirve para el contenido que quieres añadir.
Añade Bloque HTML y asigna un nombre interno.
Pega el código y guarda.
Revisa el contenido y las demás secciones de la página.

Formulario de Bloque HTML

Opciones disponibles

Activo

Deja esta casilla marcada para mostrar el elemento en la página. Si la desmarcas, el elemento deja de verse, pero conserva su contenido para que puedas volver a utilizarlo.

Nombre

Un nombre para localizar el bloque.

HTML

Introduce el código HTML del contenido. Puede incluir CSS y JavaScript. En este bloque, el CSS necesita su etiqueta style.

Diseño

Abre Diseño para ajustar el ancho, la alineación, los colores y el espacio alrededor del contenido. Consulta Ajustar el aspecto de un elemento para entender estos controles.

Ejemplo práctico

Utiliza el ejemplo de pregunta desplegable de este artículo. Al pulsar «¿Qué debo traer?», se abre la respuesta; al pulsar otra vez, se cierra.

Pregunta con su respuesta abierta mediante HTML

Ejemplo de información desplegable

Puedes mostrar una pregunta y permitir que el visitante abra su respuesta. Este contenido se añade como HTML:

<details>
  <summary>¿Qué debo traer?</summary>
  <p>Trae tu confirmación de inscripción y lo necesario para tomar notas.</p>
</details>

Al pulsar la pregunta, se muestra u oculta la respuesta. Prepara el texto para los idiomas que deba utilizar tu contenido personalizado.

Ten en cuenta

Los estilos y scripts pueden afectar al resto de la página. Utiliza clases propias y evita identificadores repetidos al duplicar el bloque. Si no trabajas con código, pide ayuda para adaptar el contenido.

Revisar el resultado

Después de guardar, previsualiza la página en los idiomas que utilices. Prueba la función del contenido insertado y comprueba que no altera las demás secciones. Revisa los idiomas y el tamaño en móvil.