vc_raw_html Shortcode
Usa el Custom HTML nativo en Gutenberg, o vc_raw_html para el contenido existente del Page Builder. Ambos aceptan HTML creado con los helpers existentes del tema; ninguno crea una nueva hoja de estilos para el frontend.
Los atributos que se indican a continuación coinciden con los controles actuales del Page Builder y con la salida pública. Usa la sintaxis raw únicamente para contenido revisado que no se pueda mantener mediante los controles visuales.
En el constructor del backend, usa la acción de código del elemento para editar content en el modal CodeMirror dedicado a pantalla completa. La acción de edición estándar sigue disponible para el ID del elemento, la clase extra y los ajustes de visibilidad responsive. Otros parámetros del shortcode que usan un editor de código no se trasladan a este modal.
HTML nativo en Gutenberg
Esto es para editores que mantienen fragmentos HTML pequeños y revisados. Prefiere los bloques Párrafo, Encabezado, Lista, Imagen y los bloques interactivos dedicados cuando puedan expresar el contenido. Usa Code para mostrar código fuente en lugar de renderizarlo.
- Abre Pages → All Pages o Posts → All Posts y, a continuación, edita el elemento deseado.
- Abre el insertador de bloques y selecciona Custom HTML.
- Introduce el marcado en el modo HTML. Coloca los ID, las clases helper y las clases de visibilidad responsive directamente en los elementos correspondientes.
- Elige Preview en la barra de herramientas flotante del bloque para inspeccionar el resultado pasivo con la tipografía, la paleta, la cuadrícula y los helpers básicos de componentes actuales del tema. Elige HTML para reanudar la edición.
- Opcionalmente, abre Organization → Administrative name en la barra lateral del bloque. Este nombre identifica el bloque en la Vista de lista; no es contenido público.
- Guarda el borrador, recarga el editor y abre la vista previa de la página. Comprueba allí los enlaces, el diseño responsive y cualquier componente interactivo.
Por ejemplo:
<div class="p-2 bg-main-2 text-main-13">
<p class="fs-125">A short message using existing theme helpers.</p>
</div>El bloque es estático: WordPress guarda el marcado creado sin un contenedor de presentación adicional de POM. Puede colocarse directamente dentro de una Section sin una Row o una Column. La barra lateral explica los permisos de HTML y los límites de la vista previa; no añade paneles de tipografía, CSS ni JavaScript.
La vista previa no ejecuta scripts, estilos, formularios ni marcos incrustados. Su marco inerte impide la interacción y aísla los ID del editor. Las fuentes grandes siguen siendo editables incluso cuando se alcanza el límite de la vista previa. La vista previa de la página sigue siendo el lugar donde comprobar el comportamiento admitido en el frontend. Las limitaciones de la vista previa no eliminan el código fuente del bloque guardado.
Los permisos de WordPress siguen controlando el HTML permitido al guardar. Los usuarios sin unfiltered_html tienen el marcado no admitido filtrado por WordPress. Eliminar los paneles separados de CSS/JavaScript es una decisión de autoría, no un límite de seguridad: un autor autorizado sin filtro puede seguir introduciendo esas etiquetas en la fuente HTML. Revisa este tipo de contenido con cuidado y prefiere los recursos gestionados del tema.
Uso heredado
El editor HTML del Page Builder codifica el contenido incluido como Base64 de HTML codificado como URL. Conserva esta codificación al mantener shortcodes almacenados. No coloques HTML normal directamente entre las etiquetas del shortcode ni lo pases como atributo content.
[vc_raw_html]JTNDcCUzRUhlbGxvJTNDJTJGcCUzRQ==[/vc_raw_html]Este ejemplo renderiza <p>Hello</p>. El shortcode registrado sigue disponible cuando la interfaz de administración del Page Builder está desactivada.
Atributos
| Atributo | Valor predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
device_visibility |
— | Cadena, salvo que se indique lo contrario | Aplica la regla de visibilidad responsive seleccionada. |
el_id |
— | ID HTML único válido | Introduce el ID del elemento (Nota: asegúrate de que sea único y válido según la especificación w3c). |
el_class |
— | Cadena, salvo que se indique lo contrario | Aplica un estilo diferente a un elemento de contenido concreto: añade un nombre de clase y haz referencia a él en el CSS personalizado. |
Verificación
El renderizador heredado descodifica el contenido y aplica la lista de permitidos de HTML del tema, incluidos los atributos permitidos y los protocolos de URL. El formato pasivo como sup, sub, code, kbd y bdo se conserva; los atributos de controladores de eventos y los protocolos de URL ejecutables se filtran. Un ID opcional, una clase extra o un ajuste de visibilidad crean el contenedor heredado existente. En HTML nativo, coloca esas propiedades directamente en los elementos creados.
El marcado admitido del tema, como un tooltip con data-toggle="tooltip", participa en el descubrimiento condicional de recursos tanto si aparece en HTML nativo como en el contenido heredado codificado. El HTML plano no solicita recursos adicionales. El descubrimiento no ejecuta la fuente, los shortcodes anidados ni los filtros de renderizado personalizados; no puede deducir dependencias arbitrarias de terceros.
Si una interacción no aparece después de cambiar el HTML, guarda la página y borra su caché de página. Para una actualización de todo el sitio, usa el mantenimiento del descubrimiento de recursos documentado. Revisa cualquier aviso sobre fuentes de HTML raw inusualmente grandes en lugar de asumir que se descubrieron todas sus dependencias.
Confirma la fuente guardada, el formato del frontend y los enlaces después de recargar. Las diferencias limitadas a la ejecución de scripts o al contenido incrustado en la vista previa pasiva del editor son esperables. Si WordPress elimina marcado al guardar, revisa los permisos del autor y usa un bloque admitido dedicado en lugar de eludir el filtrado.