Personalizacion
Personaliza colores, tipografia y estilos de tu pagina de careers.
Acceder a Configuracion
En el builder:
Panel izquierdo → Configuracion → Tema
O click en icono de paleta
Colores
Paleta de Colores
| Color | Valor | Uso |
|---|---|---|
| Primario | #6366f1 | Color principal de marca |
| Secundario | #8b5cf6 | Color complementario |
| Acento | #ec4899 | Highlights y CTAs |
| Fondo | #ffffff | Fondo de pagina |
| Superficie | #f8fafc | Fondo de tarjetas |
| Texto | #1e293b | Texto principal |
| Texto Muted | #64748b | Texto secundario |
[Aplicar Branding Corporativo] [Restaurar Predeterminados]
Descripcion de Colores
COLOR PRIMARIO:
- Botones principales
- Links
- Elementos destacados
- Encabezados (opcional)
COLOR SECUNDARIO:
- Gradientes
- Hover states
- Elementos secundarios
- Iconos
COLOR ACENTO:
- Badges importantes
- Notificaciones
- Elementos de urgencia
- CTAs secundarios
COLOR DE FONDO:
- Fondo general de la pagina
- Generalmente blanco o muy claro
COLOR DE SUPERFICIE:
- Fondo de tarjetas
- Secciones alternadas
- Modales y popups
COLOR DE TEXTO:
- Titulos y parrafos
- Generalmente oscuro
COLOR TEXTO MUTED:
- Subtitulos
- Descripciones
- Texto secundario
- Placeholders
Aplicar Branding
[Aplicar Branding Corporativo]
Sincroniza colores de tu pagina de careers con los colores configurados en el branding de tu empresa.
Si no tienes branding configurado:
- Ve a Empresa → Branding
- Configura tus colores
- Regresa y aplica
Tipografia
Fuentes Disponibles
Familia: [Inter]
Opciones disponibles:
- Inter (recomendado)
- Roboto
- Open Sans
- Poppins
- Montserrat
- Lato
Tamaño base: 16px (ajustable de 12px a 20px)
Escalas de Texto
Basado en tamaño base (16px):
| Elemento | Tamaño |
|---|---|
| H1 | 2.5rem (40px) |
| H2 | 2rem (32px) |
| H3 | 1.5rem (24px) |
| H4 | 1.25rem (20px) |
| Parrafo | 1rem (16px) |
| Small | 0.875rem (14px) |
El slider ajusta proporcionalmente todos los tamaños.
Estilos Visuales
Border Radius
Bordes Redondeados
| Opcion | Descripcion |
|---|---|
| Ninguno | Esquinas rectas |
| Pequeño | 4px de radio |
| Medio | 8px de radio |
| Grande | 12px de radio |
| Completo | 24px de radio |
Afecta:
- Botones
- Tarjetas
- Imagenes
- Inputs
- Badges
Espaciado
| Opcion | Descripcion |
|---|---|
| Compacto | Menos espacio entre elementos |
| Normal | Espaciado estandar |
| Relajado | Mas espacio, mas respiro |
Sombras
| Opcion | Descripcion |
|---|---|
| Ninguna | Sin sombras |
| Sutil | Sombras muy ligeras |
| Media | Sombras moderadas |
| Fuerte | Sombras pronunciadas |
Animaciones
[x] Habilitar animaciones
Incluye:
- Fade in al scroll
- Hover effects
- Transiciones suaves
- Animacion de beneficios
Header y Footer
Configuracion de Header
Estilo:
- Transparente - Fondo transparente sobre hero
- Solido - Fondo con color de superficie
- Oculto - Sin header
Mostrar:
- Logo
- Nombre de empresa
- Navegacion
- Sticky (fijo al scroll)
Links de navegacion:
- [Sobre Nosotros] → #about
- [Vacantes] → #jobs
- [Beneficios] → #benefits
- [+ Agregar link]
Configuracion de Footer
Estilo:
- Simple - Solo creditos
- Detallado - Links y redes sociales
- Minimo - Una linea
- Oculto - Sin footer
Mostrar:
- "Powered by Talivo"
- Links de redes sociales
Redes Sociales:
- LinkedIn: https://linkedin.com/company/...
- Twitter: https://twitter.com/...
- Facebook: https://facebook.com/...
- Instagram: https://instagram.com/...
SEO
Configuracion SEO
Titulo de pagina:
Trabaja con nosotros | Tu Empresa
(Aparece en pestaña del navegador)
Meta descripcion:
Unete a nuestro equipo. Explora vacantes en desarrollo, diseño, marketing y mas.
(Aparece en resultados de Google)
Imagen social:
https://...
(Imagen cuando se comparte en redes)
CSS Personalizado
Agregar CSS
Para usuarios avanzados:
/* Estilos adicionales */
.hero-title {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.job-card:hover {
transform: translateY(-4px);
}
Nota: El CSS se sanitiza por seguridad.
Previsualizar Cambios
Vista Previa en Tiempo Real
Los cambios se reflejan inmediatamente en el canvas.
Para vista previa completa:
- Click [Vista Previa]
- Abre en nueva ventana
- Navega como visitante
- Prueba en diferentes tamaños
Proximos Pasos
- Plantillas - Diseños predefinidos
- Bloques - Tipos de contenido
- Publicar - Poner en linea