Constructor de Pagina de Carrera
El constructor visual te permite crear paginas de carrera profesionales arrastrando y soltando bloques. No requiere conocimientos de programacion.
Interfaz del constructor
Panel izquierdo
Cuatro pestanas de herramientas:
| Pestana | Icono | Funcion |
|---|---|---|
| Bloques | Cuadros | Biblioteca de bloques arrastrables |
| Tema | Paleta | Colores, fuentes y estilos |
| Ajustes | Engrane | Header, footer y SEO |
| Plantillas | Cuadricula | Plantillas predefinidas |
Canvas central
El area de trabajo donde:
- Previsualizas tu pagina en tiempo real
- Arrastras y sueltas bloques
- Seleccionas bloques para editar
- Reorganizas el orden de bloques
Panel derecho
Muestra las propiedades del bloque seleccionado:
- Configuracion de contenido
- Opciones de diseno
- Variantes disponibles
Trabajar con bloques
Agregar un bloque
- Abre la pestana "Bloques" en el panel izquierdo
- Busca el bloque que necesitas
- Arrastralo al canvas
- Sueltalo en la posicion deseada
Seleccionar un bloque
- Haz clic en cualquier bloque del canvas
- El bloque seleccionado muestra un borde azul
- Sus propiedades aparecen en el panel derecho
Mover un bloque
- Selecciona el bloque
- Arrastralo a una nueva posicion
- Una linea azul indica donde se insertara
- Suelta para confirmar
Eliminar un bloque
- Selecciona el bloque
- Presiona la tecla Delete o Suprimir
- O usa el boton de eliminar en el panel de propiedades
Tipos de pagina
Cambiar tipo de pagina
En la barra superior, usa el control segmentado:
[ Pagina Principal ] [ Pagina de Vacante ]
- Pagina Principal: Tu pagina de inicio con todas las vacantes
- Pagina de Vacante: El template para cada vacante individual
Bloques por tipo
Cada tipo de pagina tiene bloques especificos:
Pagina Principal:
- Hero, About, Jobs List, Benefits, CTA, Divider, Spacer
Pagina de Vacante:
- Job Header, Job Section, Job Skills, Job Apply Button, Job Footer
Editar propiedades
Panel de propiedades
Cuando seleccionas un bloque, el panel derecho muestra:
| Seccion | Contenido |
|---|---|
| Nombre del Bloque | Titulo del bloque seleccionado |
| Variante | Selector de variante (ej: Centrado) |
| Contenido | Campos de texto (Titulo, Subtitulo, etc.) |
| Diseno | Altura, Color y otras opciones visuales |
Tipos de propiedades
| Tipo | Descripcion | Ejemplo |
|---|---|---|
| Texto | Campo de texto libre | Titulos, descripciones |
| Select | Lista desplegable | Variantes, tamanos |
| Color | Selector de color | Fondos, textos |
| Switch | Activar/desactivar | Mostrar boton, animacion |
| Slider | Valor numerico | Columnas, espaciado |
Historial de cambios
Deshacer y Rehacer
En la barra superior:
- Deshacer (Ctrl+Z): Revierte el ultimo cambio
- Rehacer (Ctrl+Y): Restaura un cambio revertido
Limite de historial
El historial mantiene los ultimos 50 cambios de la sesion actual.
Guardar cambios
Guardado manual
- Haz clic en el boton "Guardar" en la barra superior
- Espera la confirmacion
- Los cambios se almacenan como borrador
Estados de guardado
- Sin cambios: Boton gris
- Cambios pendientes: Boton azul activo
- Guardando: Indicador de carga
- Guardado: Confirmacion temporal
Vista previa
Abrir vista previa
- Haz clic en el boton "Vista Previa"
- Se abre una nueva pestana con tu pagina
Modos de dispositivo
En la vista previa puedes cambiar entre:
[ Escritorio ] [ Tablet ] [ Movil ]
Esto simula como se vera tu pagina en diferentes pantallas.
Datos de prueba
La vista previa muestra:
- Vacantes reales de tu empresa (si hay publicadas)
- Datos de ejemplo si no hay vacantes
- Tu configuracion de tema actual
Header y Footer
Configurar Header
En la pestana "Ajustes", seccion Header:
| Opcion | Descripcion |
|---|---|
| Estilo | Transparente, Solido u Oculto |
| Logo | Mostrar/ocultar logo de empresa |
| Nombre | Mostrar/ocultar nombre de empresa |
| Navegacion | Activar menu de navegacion |
| Sticky | Header fijo al hacer scroll |
Configurar Footer
Seccion Footer:
| Opcion | Descripcion |
|---|---|
| Estilo | Simple, Detallado, Minimal u Oculto |
| Powered by | Mostrar "Powered by Talivo" |
| Redes sociales | Mostrar iconos de redes |
| Links | LinkedIn, Twitter, Facebook, Instagram |
Consejos de uso
Orden recomendado de bloques
- Hero Block (encabezado impactante)
- About Block (sobre la empresa)
- Benefits Block (beneficios)
- Jobs List Block (vacantes)
- CTA Block (llamado a la accion)
Mejores practicas
- Menos es mas: No uses demasiados bloques
- Jerarquia visual: Hero grande, contenido medio
- Consistencia: Usa el mismo estilo en toda la pagina
- Espaciado: Usa bloques Spacer para respirar
- Mobile first: Verifica siempre en modo movil
Errores comunes
- Sin bloque Hero: La pagina se ve incompleta
- Demasiados CTAs: Confunde al usuario
- Colores inconsistentes: Usar tema ayuda a mantener coherencia
- Ignorar movil: La mayoria de candidatos usa celular
Atajos de teclado
| Atajo | Accion |
|---|---|
| Ctrl+Z | Deshacer |
| Ctrl+Y | Rehacer |
| Delete | Eliminar bloque seleccionado |
| Esc | Deseleccionar bloque |
Problemas comunes
"No puedo arrastrar el bloque"
Causa: El bloque ya existe (algunos solo permiten uno).
Solucion: Elimina el bloque existente primero o usa otro tipo.
"Mis cambios no se guardan"
Causa: Error de conexion o sesion expirada.
Solucion: Recarga la pagina e intenta de nuevo. Guarda frecuentemente.
"La vista previa se ve diferente"
Causa: Cambios no guardados o cache.
Solucion: Guarda cambios y recarga la vista previa.
"Los bloques se ven diferentes en movil"
Comportamiento normal: Los bloques se adaptan responsivamente. Usa el modo de vista previa movil para verificar.