Bloques HTML: Flexibilidad y Personalización Total

Los Bloques HTML son espacios estratégicos distribuidos en el diseño de tu sitio que funcionan como contenedores vacíos. Son una de las herramientas más potentes de Medios CMS, ya que te permiten insertar desde texto y fotos hasta códigos complejos de servicios externos sin necesidad de modificar la estructura de la plantilla.

TABLA DE CONTENIDOS

• Cómo crear y gestionar Bloques HTML
• Ubicaciones disponibles
• Ideas y ejemplos de uso
• Recomendaciones de oro

Cómo crear y gestionar Bloques HTML

El sistema funciona de forma visual directamente sobre la estructura de tu sitio:

1. Activar la Maqueta: En el panel lateral, ve a Contenido > Maqueta de bloques HTML. Verás que en tu sitio aparecen recuadros destacados indicando las posiciones disponibles.
   
2. Agregar Bloque: Elige la ubicación deseada y haz clic en "Agregar bloque HTML".
3. Configurar:
   • Nombre: Asígnale un nombre interno (ej: "Clima" o "Radio en vivo") para identificarlo fácilmente.
   • Contenido: Puedes usar el editor visual (como si fuera una noticia) o insertar código técnico (scripts, iframes) desde el menú Insertar > Código fuente.
4. Organizar: Una vez creado y publicado, volverás a la pantalla de inicio. Usa las flechas para arrastrar y soltar el bloque en diferentes posiciones dentro de la misma zona. También puedes editarlos, eliminarlos o desactivarlos temporalmente sin borrarlos.
   

Ubicaciones disponibles

Los bloques son específicos para cada sección, lo que te permite segmentar qué ve el usuario:

• Vista de Portada: Ideal para elementos informativos generales o destacados. Ve a la portada y activa la maqueta de bloques HTML.
• Vista de Artículo: El bloque que crees aquí aparecerá automáticamente en todos los artículos de tu sitio (ej: una biografía del autor o un banner de suscripción). Ve a un artículo cualquiera de tu sitio y activa la maqueta de bloques HTML.
• Vista de Lista: Se muestra en categorías, etiquetas y resultados de búsqueda. Ve a una categoría cualquier y activa la maqueta de bloques HTML.
• Encabezado y Pie (Comunes): Los bloques ubicados en el Header o Footer son globales; lo que pongas allí se verá en todo el sitio.
  
  

Ideas y ejemplos de uso

Gracias a que aceptan código HTML, CSS y JavaScript, las posibilidades son casi infinitas:

• Servicios de terceros: Widgets de pronóstico del tiempo, cotización de divisas (Dólar, Euro), resultados deportivos en vivo o mapas de Google Maps.
• Multimedia: Reproductores de streaming de radio, listas de reproducción de Spotify o videos destacados de YouTube/Vimeo.
• Redes Sociales: Muros de publicaciones de Instagram, cajas de comentarios de Facebook o botones de "Seguir" de X (Twitter).
• Marketing y Conversión: Formularios de suscripción a Newsletters (Mailchimp), botones de donación (PayPal/Cafecito) o enlaces a tu Mediakit.
• Contenido Estético: Separadores visuales, frases del día o avisos parroquiales urgentes.
  
  

Recomendaciones de oro

1. Cuidado con el peso: Si insertas muchos scripts externos (como 5 widgets diferentes), el sitio puede tardar más en cargar. Prioriza los esenciales.
2. Responsividad: Si pegas un código (iframe) de un video o mapa, asegúrate de que el ancho sea width="100%" para que no se "corte" al verse en celulares.
3. Seguridad: Inserta solo códigos de fuentes confiables. Un código malicioso de un tercero podría comprometer la seguridad de tu sitio.
4. Orden Jerárquico: Usa los bloques en la vista de artículo para reforzar el llamado a la acción. Un bloque con "Síguenos en WhatsApp" al final de cada noticia suele tener excelentes resultados.