> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Ediciones visuales

> Realiza ediciones de diseño precisas directamente en la interfaz.

Las Ediciones visuales de Lumi te permiten seleccionar cualquier elemento de tu página para modificarlo directamente. Actualiza al instante propiedades como el texto y el color, o utiliza prompts para ajustar la funcionalidad y el diseño. Es la herramienta ideal para realizar cambios rápidos y específicos sin escribir código ni usar IA.

<Note>
  **Nota:** Usar las Ediciones visuales no consume créditos.
</Note>

<img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/VE.gif?s=c13d93006af083d7b1bad8f01ce4cebd" alt="VE Gi" width="1280" height="720" data-path="images/VE.gif" />

## Cuándo usar las Ediciones visuales

Las Ediciones visuales son ideales para cuando quieres:

* Cambiar texto estático o contenido multimedia en tu sitio.
* Actualizar la tipografía, incluyendo fuentes, tamaños y estilos.
* Modificar los colores del texto, botones u otros elementos.
* Seleccionar un elemento específico y usar un prompt para alterar su apariencia visual o funcionalidad. Ten en cuenta que estos prompts consumen créditos al igual que un mensaje estándar.
* Aplica ediciones impulsadas por IA a imágenes existentes en tu sitio a través de prompts. Ten en cuenta que la función "Editar con IA" consume créditos de chat al igual que un mensaje estándar.

  <img src="https://mintcdn.com/blockdance/Si-KBGUqnPsHTPfG/images/%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91.PNG?fit=max&auto=format&n=Si-KBGUqnPsHTPfG&q=85&s=9629b8803fd29e92b4e5002857ab40ca" alt="可视化编辑" width="1280" height="962" data-path="images/可视化编辑.PNG" />

## Cómo usar las Ediciones visuales

<Steps>
  <Step title="Localiza las Ediciones visuales">
    Puedes encontrar esta herramienta en el cuadro de entrada o en la barra de herramientas superior en el modo de Vista previa.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-184540.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=7d2c75ec60807782e3844a5afd94751d" alt="20250911 184540 Jpe" width="3840" height="1916" data-path="images/20250911-184540.jpeg" />
  </Step>

  <Step title="Activa la herramienta">
    Haz clic en el botón para entrar en el modo de Ediciones visuales.
  </Step>

  <Step title="Selecciona un elemento">
    Pasa el cursor sobre el elemento que deseas modificar (un titular, botón, imagen o sección de fondo) y haz clic para seleccionarlo.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-184025.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=9637a2ab63470ab62b99069f401b6b07" alt="20250911 184025 Jpe" width="1905" height="1186" data-path="images/20250911-184025.jpeg" />
  </Step>

  <Step title="Edita mediante un prompt o controles directos">
    Una vez seleccionado un elemento, escribe un comando como "Pon este titular en negrita" o utiliza el editor contextual para cambiar directamente el texto, las fuentes y los colores.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-183835.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=71158959d69d6ca9639c73ceb4bc5e0b" alt="20250911 183835 Jpe" width="1076" height="1344" data-path="images/20250911-183835.jpeg" />
  </Step>

  <Step title="Aplica y revisa">
    Haz clic en "Guardar" para confirmar tus cambios. Lumi actualizará al instante la vista previa en vivo y el código correspondiente.
  </Step>
</Steps>