Cómo activar y usar la Edición visual en Coderick AI
Describir un cambio visual con palabras a veces es más difícil de lo que parece. Indicarle a una IA que cambie el texto de un encabezado o lo mueva ligeramente a la izquierda puede convertir una corrección de dos segundos en un intercambio de cinco minutos. Hay cosas que se hacen más rápido manualmente.
Para eso sirve la edición visual. En lugar de tener que realizar pequeños ajustes, ahora puedes hacer clic directamente en la vista previa de tu proyecto y hacer cambios al instante.
Aquí te explicamos cómo usarla.
Cómo activar la Edición visual
Dentro de tu proyecto Coderick, haz clic en el botón Edición visual en la barra superior.
Una vez habilitado, los elementos en tu vista previa se vuelven seleccionables y editables. Cualquier cambio realizado con Edición visual se guardará automáticamente. Para deshacer o rehacer estos cambios, tendrás dos nuevos botones junto a Edición visual: Deshacer y Rehacer.
Cómo editar directamente en la pantalla de vista previa
Con la Edición visual activada, haz clic en cualquier elemento de la vista previa para seleccionarlo. Aparecerá una barra de herramientas con las opciones de edición correspondientes a ese tipo de elemento.
Ediciones manuales
Texto
Haz clic en cualquier elemento de texto para editarlo directamente. Desde la barra de herramientas puedes:
- Editar el texto directamente
- Cambiar el tipo de fuente, tamaño y estilo (negrita, cursiva, subrayado)
- Ajustar la alineación
- Añadir un enlace o emoji
- Cambiar el color del texto
- Añadir sombras al texto
- Añadir comillas estilizadas
- Cambiar la capitalización del texto
- Editar texto mediante el editor de código
- Tachar o subrayar el texto
Botones
Los botones que se pueden editar visualmente tienen estas opciones generales:
- Editar directamente el texto del botón
- Cambiar los colores del texto y del fondo
- Añadir o actualizar un enlace
- Modificar la transparencia del botón
- Cambiar el relleno, el grosor y el radio del borde
- Editar los botones mediante el editor de código
Imágenes
Haz clic en una imagen para:
- Reemplázala y sube una imagen desde tu dispositivo
- Añade o actualiza un enlace
- Añade texto alternativo que sirva como descripción de metadatos SEO
- Añade un efecto de transparencia
- Personaliza el relleno, el grosor del borde y el radio
- Editar la imagen mediante el editor de código
Cómo editar con IA
Para elementos que son demasiado complejos para ediciones manuales, como menús de navegación, pies de página o botones de inicio de sesión, verás una opción de Editar con IA en la barra de herramientas. Estos elementos tienen un funcionamiento interno más complejo, por lo que la IA gestiona los cambios para mantener todo intacto.
También puedes elegir Editar con IA para cualquier elemento estándar si prefieres describir el cambio en lugar de hacerlo manualmente.
Cuando haces clic en Editar con IA en un elemento seleccionado:
- El elemento aparece resaltado y debajo de él se muestra un cuadro de chat.
- Coderick AI aplica los cambios exclusivamente al elemento seleccionado.
- En el chat, puedes describir los cambios que deseas realizar, como modificar texto, generar un nuevo elemento HTML o una imagen, cambiar colores, entre otras opciones.
Cómo editar el código
Además de las opciones de edición visual manual y con IA, Coderick AI ofrece un editor de código completamente equipado donde puedes modificar directamente el código de la página generada.
Aunque la edición de código y la edición visual son modos distintos, puedes combinarlos para agilizar el proceso de edición.
En el modo visual, selecciona un elemento y elige la opción Ver código en su menú contextual.
Esto abrirá el editor de código, donde se muestra el código de toda la página, pero con el código del elemento seleccionado resaltado.
Guardar y gestionar tus cambios
No es necesario guardar manualmente las modificaciones realizadas en el proyecto. El editor guarda todos los cambios automáticamente, aunque dispones de opciones para gestionarlos.
Para descartar el cambio más reciente, presiona el botón Deshacer.
Si has deshecho un cambio pero has decidido recuperarlo, usa el botón Rehacer.
