Temas y Estilos de Pagina de Carrera
Personaliza la apariencia de tu pagina de carrera para que refleje tu marca corporativa.
Editor de tema
Accede al editor de tema en la pestana "Tema" del panel izquierdo.
Colores
Colores configurables
| Color | Uso | Predeterminado |
|---|---|---|
| Primario | Botones, enlaces, acentos | #3b82f6 (azul) |
| Secundario | Elementos secundarios | #6366f1 (indigo) |
| Acento | Detalles y highlights | #06b6d4 (cyan) |
| Fondo | Fondo de la pagina | #ffffff (blanco) |
| Superficie | Fondo de tarjetas y bloques | #f8fafc (gris claro) |
| Texto | Texto principal | #1e293b (gris oscuro) |
| Texto secundario | Texto menos importante | #64748b (gris) |
Selector de color
Para cambiar un color:
- Haz clic en el campo de color
- Usa el selector visual o escribe el codigo hexadecimal
- El cambio se refleja inmediatamente en el canvas
Colores sugeridos
El selector incluye una paleta de colores predefinidos para facilitar la seleccion.
Aplicar colores de branding
Haz clic en "Aplicar colores de empresa" para importar automaticamente:
- Color primario de tu identidad visual
- Color secundario
- Colores de header
Tipografia
Familia de fuentes
Selecciona la fuente para toda la pagina:
| Fuente | Estilo | Uso recomendado |
|---|---|---|
| Inter | Moderna, limpia | Tecnologia, startups |
| Roboto | Neutral, legible | Uso general |
| Open Sans | Amigable, clara | Corporativo |
| Poppins | Geometrica, moderna | Diseno, creatividad |
| Montserrat | Elegante, profesional | Lujo, premium |
| Lato | Calida, humanista | Recursos humanos |
Tamano base
Ajusta el tamano de fuente base (12-20px):
- 12-14px: Compacto, mas contenido visible
- 15-16px: Equilibrado (recomendado)
- 17-18px: Grande, facil lectura
- 19-20px: Extra grande, accesibilidad
El tamano base afecta proporcionalmente todos los textos.
Estilos
Bordes redondeados
Controla el redondeo de esquinas:
| Opcion | Efecto |
|---|---|
| Ninguno | Esquinas cuadradas |
| Pequeno | Ligero redondeo (4px) |
| Mediano | Redondeo moderado (8px) |
| Grande | Redondeo amplio (12px) |
| Completo | Completamente redondeado |
Espaciado
Controla el espaciado entre elementos:
| Opcion | Efecto |
|---|---|
| Compacto | Espaciado reducido |
| Normal | Espaciado estandar |
| Relajado | Espaciado amplio |
Sombras
Estilo de sombras en tarjetas y bloques:
| Opcion | Efecto |
|---|---|
| Ninguna | Sin sombras, plano |
| Sutil | Sombras muy ligeras |
| Media | Sombras moderadas |
| Fuerte | Sombras pronunciadas |
Animaciones
Activa o desactiva animaciones:
- Activadas: Transiciones suaves, efectos al hacer scroll
- Desactivadas: Pagina estatica, mejor rendimiento
Plantillas predefinidas
Como usar plantillas
- Abre la pestana "Plantillas"
- Explora las opciones disponibles
- Haz clic en una plantilla para previsualizarla
- Confirma para aplicarla
Plantillas disponibles
Modern
- Colores: Indigo a Purpura
- Fuente: Inter
- Sombras: Medias
- Estilo: Limpio y contemporaneo
Minimal
- Colores: Grises neutros
- Fuente: Inter
- Sombras: Ninguna
- Estilo: Simple y elegante
- Espaciado: Relajado
Bold
- Colores: Rojo a Naranja
- Fuente: Poppins
- Sombras: Fuertes
- Estilo: Vibrante y llamativo
- Bordes: Completamente redondeados
Corporate
- Colores: Teal a Turquesa
- Fuente: Open Sans
- Sombras: Medias
- Estilo: Profesional y formal
Startup
- Colores: Purpura a Rosa
- Fuente: Poppins
- Sombras: Medias
- Estilo: Dinamico y juvenil
- Animaciones: Activadas
Que incluye una plantilla
Al aplicar una plantilla obtienes:
- Configuracion completa de tema (colores, fuentes, estilos)
- Bloques preconfigurados para pagina principal
- Bloques preconfigurados para pagina de vacante
- Configuracion de header y footer
Advertencia: Aplicar una plantilla reemplaza tu configuracion actual.
Restablecer tema
Valores predeterminados
Haz clic en "Restablecer predeterminados" para volver a:
- Colores originales del sistema
- Fuente Inter 16px
- Bordes medianos
- Espaciado normal
- Sombras sutiles
- Animaciones activadas
Consejos de diseno
Contraste de colores
Asegurate de que el texto sea legible:
- Texto oscuro sobre fondos claros
- Texto claro sobre fondos oscuros
- Prueba con herramientas de accesibilidad
Consistencia con tu marca
- Usa los colores exactos de tu identidad corporativa
- Manten la misma fuente que en otros materiales
- El estilo debe reflejar la personalidad de tu empresa
Mobile first
- Verifica como se ve en modo movil
- Las fuentes muy grandes pueden causar problemas
- El espaciado relajado puede verse excesivo
Prueba diferentes opciones
- Guarda tu configuracion actual
- Experimenta con diferentes combinaciones
- Usa la vista previa para evaluar
- Puedes deshacer cambios si es necesario
Problemas comunes
"El texto no se lee bien"
Causa: Poco contraste entre texto y fondo.
Solucion: Usa colores de texto mas oscuros o fondos mas claros.
"La pagina se ve diferente en el navegador"
Causa: Diferencias en renderizado de fuentes o cache.
Solucion:
- Limpia cache del navegador
- Las Google Fonts pueden tardar en cargar la primera vez
"Aplique una plantilla y perdi mis cambios"
Causa: Las plantillas reemplazan la configuracion.
Solucion: No hay deshacer para plantillas. Reconfigura manualmente o guarda antes de aplicar plantillas.
"Los colores de mi marca no se ven igual"
Causa: Diferencias en como los monitores muestran colores.
Solucion:
- Usa los codigos hexadecimales exactos de tu guia de marca
- Prueba en multiples dispositivos
Vista previa de tema
El canvas del constructor muestra los cambios de tema en tiempo real:
- Modifica un color o estilo
- Observa el cambio inmediato en el canvas
- Ajusta hasta obtener el resultado deseado
- Guarda cuando estes satisfecho
No necesitas publicar para ver los cambios de tema en el editor.