WordPress

HTML Avanzado — Bloques de Características

Cada bloque de la sección "Características" tiene un campo llamado "HTML avanzado" al final.

Si lo completás, reemplaza completamente el layout estándar (imagen + título + texto) de ese bloque. Si lo dejás vacío, el bloque usa los campos normales (Etiqueta, Título, Descripción, Imagen).

Usalo solo cuando necesitás un layout especial

Para la mayoría de los bloques, los campos estructurados son suficientes. El HTML libre es para casos donde necesitás un diseño que los campos normales no pueden hacer.

Reglas que siempre hay que respetar

1. Nunca usar `<h1>`

La página ya tiene un <h1> (el nombre del producto). Dentro del HTML del bloque usá siempre <h2>, <h3> o <h4>.

<!-- ❌ MAL -->
<h1>Potencia profesional</h1>

<!-- ✅ BIEN -->
<h3>Potencia profesional</h3>

2. Siempre poner `alt` en las imágenes

El alt describe la imagen para Google y para usuarios con lectores de pantalla.

<!-- ❌ MAL -->
<img src="https://rcpowerclean.com.ar/wp-content/uploads/bomba.jpg">

<!-- ✅ BIEN -->
<img src="https://rcpowerclean.com.ar/wp-content/uploads/bomba.jpg"
     alt="Bomba de 3 pistones cerámicos de la hidrolavadora LT591"
     loading="lazy">

3. Siempre agregar `loading="lazy"` a las imágenes

Las imágenes en el HTML libre no se optimizan automáticamente. El loading="lazy" evita que frenen la carga de la página.

4. No usar estilos inline para tipografía

La fuente, el tamaño base y los colores ya están definidos globalmente.

<!-- ❌ MAL -->
<p style="font-family: Arial; font-size: 16px; color: black;">Texto</p>

<!-- ✅ BIEN -->
<p class="text-gray-500 text-base leading-relaxed">Texto</p>

5. No usar posicionamiento absoluto ni width fijo en píxeles

Puede romper el layout en mobile.

<!-- ❌ MAL -->
<div style="position: absolute; width: 800px;">

<!-- ✅ BIEN -->
<div class="w-full max-w-2xl">

6. Usar solo imágenes subidas a WordPress

Siempre subí la imagen a la Biblioteca de medios de WordPress y usá esa URL. No uses imágenes de otros sitios (pueden borrarse o bloquearse).

Colores del sitio

Color	Valor	Uso
Rojo marca	`#e31e24`	Etiquetas, acentos, CTAs
Azul oscuro	`#0a1628`	Títulos, textos importantes
Verde	`#00a650`	Confirmaciones, stock
Gris texto	`#6b7280`	Párrafos normales
Fondo gris	`#f9fafb`	Fondos de sección alternos

Clases de Tailwind disponibles

Layout

Clase	Qué hace
`flex`	display flex
`flex-col`	columna vertical
`md:flex-row`	fila horizontal en desktop
`items-center`	alinear al centro vertical
`gap-4` / `gap-8`	espacio entre hijos
`grid`	display grid
`grid-cols-2`	2 columnas
`md:grid-cols-3`	3 columnas en desktop

Tipografía

Clase	Qué hace
`text-sm` / `text-base`	texto pequeño / normal
`text-xl` / `text-2xl`	títulos medianos
`font-bold` / `font-extrabold`	negrita
`text-[#e31e24]`	color personalizado
`uppercase tracking-widest`	etiqueta en mayúsculas
`leading-relaxed`	interlineado amplio

Fondos y bordes

Clase	Qué hace
`bg-white`	fondo blanco
`bg-[#f9fafb]`	fondo gris suave
`bg-[#0a1628]`	fondo azul oscuro
`rounded-xl` / `rounded-2xl`	bordes redondeados
`border border-gray-100`	borde gris claro
`shadow-sm`	sombra suave

Templates listos para copiar

Template 1 — Imagen con texto al costado

<div class="flex flex-col md:flex-row items-center gap-8 lg:gap-16 py-12">
  <div class="w-full md:w-1/2">
    <img
      src="URL_DE_LA_IMAGEN"
      alt="DESCRIPCIÓN DE LA IMAGEN"
      loading="lazy"
      class="w-full max-w-md mx-auto object-contain"
    >
  </div>
  <div class="w-full md:w-1/2">
    <span class="text-xs font-bold text-[#e31e24] uppercase tracking-widest">ETIQUETA</span>
    <h3 class="text-2xl font-bold text-[#0a1628] mt-2 mb-4">Título del bloque</h3>
    <p class="text-gray-500 leading-relaxed">Descripción del bloque.</p>
  </div>
</div>

Template 2 — Grid de 3 cards con ícono

<div class="py-12">
  <h3 class="text-2xl font-bold text-[#0a1628] mb-8 text-center">Título de la sección</h3>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
      <div class="text-3xl mb-3">💧</div>
      <h4 class="font-bold text-[#0a1628] mb-2">Subtítulo uno</h4>
      <p class="text-gray-500 text-sm leading-relaxed">Descripción corta del beneficio.</p>
    </div>

    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
      <div class="text-3xl mb-3">⚙️</div>
      <h4 class="font-bold text-[#0a1628] mb-2">Subtítulo dos</h4>
      <p class="text-gray-500 text-sm leading-relaxed">Descripción corta del beneficio.</p>
    </div>

    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
      <div class="text-3xl mb-3">🔧</div>
      <h4 class="font-bold text-[#0a1628] mb-2">Subtítulo tres</h4>
      <p class="text-gray-500 text-sm leading-relaxed">Descripción corta del beneficio.</p>
    </div>

  </div>
</div>

Template 3 — Banner con fondo oscuro

<div class="py-12">
  <div class="bg-[#0a1628] rounded-3xl p-8 md:p-12 flex flex-col md:flex-row items-center gap-8">
    <div class="flex-1 text-white">
      <span class="text-xs font-bold text-[#e31e24] uppercase tracking-widest">ETIQUETA</span>
      <h3 class="text-2xl md:text-3xl font-extrabold mt-2 mb-4">Título sobre fondo oscuro</h3>
      <p class="text-white/70 leading-relaxed">Descripción. Usá este layout para bloques de alto impacto.</p>
    </div>
    <div class="w-full md:w-2/5">
      <img
        src="URL_DE_LA_IMAGEN"
        alt="DESCRIPCIÓN"
        loading="lazy"
        class="w-full object-contain rounded-2xl"
      >
    </div>
  </div>
</div>

Template 4 — Tabla de datos técnicos

<div class="py-12">
  <h3 class="text-2xl font-bold text-[#0a1628] mb-6">Especificaciones destacadas</h3>
  <div class="bg-white rounded-2xl overflow-hidden shadow-sm">

    <div class="flex items-center gap-4 px-6 py-3 border-b border-gray-100">
      <span class="w-2/5 text-xs font-semibold text-gray-400 uppercase tracking-wider">Presión</span>
      <span class="text-sm font-semibold text-[#0a1628]">150 Bar</span>
    </div>

    <div class="flex items-center gap-4 px-6 py-3 border-b border-gray-100">
      <span class="w-2/5 text-xs font-semibold text-gray-400 uppercase tracking-wider">Caudal</span>
      <span class="text-sm font-semibold text-[#0a1628]">8,45 lts/min</span>
    </div>

    <div class="flex items-center gap-4 px-6 py-3">
      <span class="w-2/5 text-xs font-semibold text-gray-400 uppercase tracking-wider">Motor</span>
      <span class="text-sm font-semibold text-[#0a1628]">Inducción 2800W</span>
    </div>

  </div>
</div>

Cómo pedirle a la IA que genere o modifique el HTML

Prompt para generar un bloque nuevo

Copiá este texto, reemplazá las partes en MAYÚSCULAS y pegalo en ChatGPT o Claude:

Necesito el HTML para un bloque de producto de una tienda de equipos
de limpieza llamada RC Powerclean.

El bloque debe mostrar: DESCRIBÍ LO QUE QUERÉS
(imagen a la izquierda con texto a la derecha / grid de 3 features /
banner oscuro / tabla de specs / etc.)

El contenido es:
- Etiqueta roja: ETIQUETA
- Título: TÍTULO
- Descripción: DESCRIPCIÓN
- URL de imagen: URL

Reglas que debe respetar:
- Usar clases de Tailwind CSS (no estilos inline para tipografía ni colores)
- No usar <h1>, usar <h3> o <h4> para títulos
- Poner loading="lazy" y alt="descripción" en todas las imágenes
- Colores del sitio: rojo #e31e24, azul oscuro #0a1628, verde #00a650
- No agregar font-family (ya está definida globalmente)
- No usar posicionamiento absoluto ni anchos fijos en píxeles
- Debe verse bien en mobile y desktop

Devolvé solo el HTML, sin explicaciones.

Prompt para modificar un bloque existente

Tengo este bloque HTML de producto para el sitio RC Powerclean:

[PEGAR EL HTML ACTUAL]

Necesito que: DESCRIBÍ EL CAMBIO
(cambiar el título / agregar un ícono / cambiar el fondo a oscuro /
agregar una segunda columna / etc.)

Respetá las mismas reglas de Tailwind, colores y estructura.
Devolvé solo el HTML modificado.

Checklist antes de guardar

Antes de pegar el HTML en el campo y guardar el producto verificá:

No hay ningún <h1> en el bloque
Todas las imágenes tienen alt descriptivo y loading="lazy"
No hay style="font-family:..." ni style="color:..." en el HTML
Las imágenes son de la biblioteca de WordPress (URL de rcpowerclean.com.ar)
Lo revisaste en mobile (DevTools del navegador → Ctrl+Shift+M)
No rompió el layout de los bloques de arriba y abajo