Panel de elementos
El panel de elementos te permite agregar contenido a tu página. Haz clic en Elementos en la parte superior de la barra lateral izquierda para abrirlo. Tiene tres pestañas: Elementos, Diseños y Componentes.
Arrastra cualquier elemento del panel al lienzo para agregarlo. Se coloca donde lo sueltes.
Elementos
La pestaña Elementos contiene bloques individuales, agrupados en secciones que puedes abrir y cerrar.
| Sección | Elementos |
|---|---|
| Esenciales | Botón, Campo de texto, Encabezado, Párrafo, Contenedor, Tarjeta |
| Diseño y navegación | Menú, Barra lateral, Cuadrícula, Columnas, Filas, Pestañas, Ruta de navegación, Separador |
| Formularios y campos | Formulario, Área de texto, Selector, Casilla de verificación, Interruptor, Botón de opción, Selector de fecha, Barra de búsqueda, Carga de archivos, Control deslizante |
| Visualización de datos | Tabla, Lista, Insignia, Línea de tiempo, Tarjeta de precios |
| Comentarios y estado | Alerta, Ventana modal, Acordeón |
| Multimedia | Imagen, Video, YouTube, Vimeo, Audio, Icono |
| Avanzado | Texto enriquecido, Carrusel |
| Integraciones | Stripe, Google Maps, Calendly, Typeform |
Diseños
La pestaña Diseños contiene secciones prediseñadas. Cada tarjeta muestra un esquema simple de la estructura de la sección, para que puedas elegir según su forma. Arrastra una a tu página, normalmente entre dos secciones existentes.
| Grupo | Diseños |
|---|---|
| Sección principal | Centrado, Diseño dividido, Simple, Alineado a la izquierda, División invertida, Con funciones |
| Funciones | Tarjetas en cuadrícula, Cuadrícula de iconos, Lista de verificación, Dividido con imagen, Cuadrícula simple, Pasos alternados |
| Estadísticas | Simple de 4 columnas, Fondo azul, Tarjetas con borde, Grande con descripciones, Dividido con imagen, Minimalista de 3 columnas |
| Llamada a la acción | Recuadro con borde, Banner con estadísticas, Texto sobre imagen |
| Precios | Planes en 3 columnas, Mensual vs. anual, Plan único |
| Testimonios | Cuadrícula de 3 columnas, Cita destacada, Tarjetas en 2 columnas |
| Contacto | Formulario con información, Simple centrado |
| Pie de página | Varias columnas, Simple centrado |
Cómo se adapta lo que agregas a tu página
Los elementos y diseños no se agregan con un estilo genérico. WebTwizz adapta cada uno a tu sitio web antes de colocarlo:
- Tu estilo. Usa los colores, las fuentes, los botones, las tarjetas y el espaciado que tu página ya tiene.
- El lugar que elegiste. Ajusta su tamaño al lugar donde lo soltaste, por ejemplo, una celda de una cuadrícula o una columna de una fila.
- Tus páginas y tu contenido. Un Menú o una Barra lateral se crea a partir de tu sitio web: el nombre de tu marca, tus páginas y los enlaces que ya están en tu encabezado. Un diseño conserva la distribución que elegiste, y sus elementos pueden usar contenido que tu sitio web ya tiene. Las Pestañas, el Acordeón y el Carrusel se completan con tu contenido cuando es posible. Google Maps muestra tu dirección si tu sitio web incluye una.
- La tarjeta de al lado. Suelta una Tarjeta o un Botón junto a uno que ya tengas, y el nuevo se crea de la misma manera, con su propio contenido.
- Textos e imágenes para tu sitio web. Justo después de soltar el elemento, se redactan los textos de ejemplo y se eligen las fotos y los iconos para tu sitio web.
Un Menú adopta la forma del lugar donde lo sueltes: un encabezado completo en la parte superior de la página, una fila de enlaces dentro de un encabezado o una columna de enlaces en un pie de página. Una Barra lateral que sueltes en la propia página se coloca junto a tu contenido, con enlaces a tus páginas (o a las secciones de un sitio web de una sola página), y se convierte en un botón de menú en los teléfonos. Si tu sitio web ya tiene un encabezado y agregas uno nuevo, un aviso te lo indica para que puedas eliminar el que no quieras.
Deshacer (⌘Z / Ctrl+Z) elimina en un solo paso el elemento agregado y el contenido que se completó.
Componentes
Los componentes son las piezas reutilizables de tu sitio web, como una barra de navegación, una tarjeta de precios o un pie de página. La pestaña Componentes muestra todos los archivos de componentes de la carpeta de componentes de tu proyecto, excepto los bloques pequeños guardados en una carpeta ui.
Cada fila muestra el nombre del componente y su archivo, por ejemplo, Button.tsx. Usa Buscar componentes para filtrar la lista. Arrastra un componente al lienzo para usarlo. Todas las copias de tu sitio web hacen referencia al mismo componente, por lo que cualquier cambio en él se refleja en todos los lugares donde se usa.
Si tu proyecto aún no tiene ninguno, la pestaña muestra No hay componentes.
Crear un componente
Haz clic derecho en cualquier elemento del lienzo o del panel de capas y elige Convertir en componente, o presiona ⌘⇧K / Ctrl+Shift+K.
En el cuadro de diálogo Crear componente, escribe un nombre y haz clic en Crear. Los nombres solo pueden contener letras y números, y la primera letra se convierte automáticamente en mayúscula. El elemento se mueve a su propio archivo de componente, y la página usa el nuevo componente en su lugar.
Convertir en componente no aparece para un elemento que ya es un componente.
Cambiar el nombre y eliminar componentes
Haz clic derecho en un componente de la pestaña Componentes y elige Cambiar nombre o Eliminar.
Eliminar no está disponible mientras el componente se use en cualquier parte de tu sitio web.
Mientras trabaja la IA
El panel queda cubierto por un aviso de La IA está editando mientras la IA modifica tu sitio web, para que tus cambios no entren en conflicto con los suyos. Se desbloquea en cuanto la IA termina.