Base de conocimiento

Obtén hosting web experto

Elija la fiabilidad del sitio web y el conocimiento con SiteGround!

Inicio / Website Builder / Edición de Páginas y Contenido / Cómo usar el componente de código

Cómo usar el componente de código

Lee y resume el articulo:
Última actualización: Jul 02, 2026 1 min de lectura

Website Builder ofrece una amplia gama de componentes que permiten añadir diversas funciones para ampliar la funcionalidad de tus páginas. Sin embargo, puedes ir un paso más allá y añadir componentes de código personalizado para integrar aplicaciones de terceros, JavaScript, CSS, Markdown o HTML que pueden darle a tu sitio web un diseño y herramientas únicos.

Aquí te explicamos cómo hacerlo:

  1. Ve a Site Admin > Website Builder y presiona Editar sitio web.
    Botón Editar sitio web para acceder al editor visual del Website Builder
  2. Abre la sección de Páginas y selecciona una página existente o crea una nueva con el botón Añadir nuevo.
    Sección de Páginas en Website Builder donde puedes seleccionar una página existente o usar Añadir Nueva para crear una nueva página


  3. Pasa el ratón sobre la sección donde añadirás el componente y presiona el botón + AÑADIR en la esquina superior izquierda para abrir la ventana de Añadir componente.
    Una sección de página seleccionada en Website Builder donde se resalta el botón Añadir para añadir un componente
  4. Selecciona el componente Código.
    La ventana Añadir Componente en una página de Website Builder donde puedes seleccionar el componente de Código
  5. Haz clic y mantén presionado el cuadro del componente para activar la vista de cuadrícula de la sección. Luego, mueve el cuadro a tu posición preferida y suéltalo.
    Vista de cuadrícula para una sección de Website Builder donde puedes cambiar la posición de un componente
  6. Haz clic en el componente y selecciona el icono de lápiz (Editar) de la barra de herramientas de arriba.
    Una barra de herramientas de componente que aparece cuando se selecciona un componente. El icono Editar (lápiz) está seleccionado
  7. Se abrirá una nueva ventana de Editar código donde puedes escribir o pegar tu código personalizado.
    Un componente de código en Website Builder donde puedes ver el código y el diseño visual
  8. Si el código es demasiado grande y necesitas más espacio de trabajo, presiona el icono de Expandir en la esquina inferior derecha.
    Un componente de código en Website Builder con un botón de Expandir resaltado para aumentar el área de trabajo
  9. Para volver a la vista estándar, cierra la ventana Editar código.
    Un espacio de trabajo expandido de un componente de código
  10. Usa el interruptor Mostrar código fuente para alternar entre la vista de código y la vista de salida en el bloque del componente.
    Componente de código con un interruptor Mostrar Código Fuente activado que muestra ya sea el código o la salida en el cuadro del componente

¡IMPORTANTE! Los scripts de código personalizado no se ejecutan mientras estás dentro de Website Builder. Para ejecutarlos, abre la página en modo Vista previa.

Comparte este artículo