Crea el contenido de tu página: Hero y secciones

Una página de tu sitio se compone de dos cosas principales:

• El Hero: la primera sección que ven tus clientes al entrar. Tu primera impresión.
• Las Secciones: los bloques de contenido que aparecen debajo del Hero. Aquí muestras tus servicios, instructores, paquetes, testimonios y todo lo que quieras contar.

ℹ️ Tu página de inicio (Landing) tiene Hero y Secciones. Las páginas adicionales solo tienen Secciones, ya que heredan la presentación visual de tu página principal.

El Hero es lo primero que ven tus clientes al entrar a tu sitio. Es el momento donde decides cómo quieres que se sienta tu marca desde el primer segundo.

Cómo entrar

En el menú lateral, haz clic en Hero. Se expande mostrando dos pestañas: Contenido y Estilo.

Contenido del Hero

Etiqueta — Un texto corto que aparece arriba del título principal. Funciona como un "tag" o categoría (ej. "INDOOR CYCLING", "MI ESTUDIO", "BIENVENIDA").

Título — Tu título principal. El más grande y llamativo. Corto, potente y memorable.

Subtítulo — Texto debajo del título que explica brevemente qué haces o cómo lo haces.

Texto adicional — Un texto más largo opcional para describir tu propuesta con más profundidad.

Botones — Hasta dos botones de acción:

• Principal: el más importante (ej. "Reservar tu primera clase")
• Secundario: una segunda opción (ej. "Ver paquetes")

Para cada botón defines el texto y el destino (página interna o URL externa).

Estadísticas — Datos que generan confianza. Activa la opción y agrega números con su descripción:

• "1,200+ Miembros"
• "50+ Clases por semana"
• "4.9 Rating"

💡 Las estadísticas son fijas. Tú las escribes manualmente y se quedan así hasta que las edites.

Imágenes — Sube hasta 5 imágenes. Si subes solo una, se queda fija. Si subes varias, se muestran como slideshow automático que cambia cada 5 segundos, con flechas y dots para navegar.

💡 Para el Hero, usa fotos de alta calidad. Las imágenes profesionales del estudio, instructores en acción o ambiente real funcionan mucho mejor que stock genérico.

Estilo del Hero

Diseño — Elige el layout del Hero:

• Fondo: la imagen ocupa toda la pantalla y el contenido va encima. Look inmersivo y dramático.
• Banner: la imagen va enmarcada y más pequeña, debajo del contenido. Más contenido, menos imagen.
• Dividido: el contenido va a un lado y la imagen al otro. Look editorial y equilibrado.

Enmarcado (solo en diseño Fondo) — Activa esto para que la imagen tenga bordes redondeados en lugar de cubrir toda la pantalla.

Overlay oscuro (solo en diseño Fondo) — Aplica un velo oscuro encima de tu imagen para que el texto se lea mejor. Activado por defecto.

Alineación — Izquierda, centro o derecha. Define dónde se posiciona el texto.

Animación — Define cómo aparece el contenido al cargar:

• Escalonada: los elementos aparecen uno por uno
• Fade in: todo aparece al mismo tiempo con un fade
• Ninguna: sin animación

Tipografía — Personaliza el título:

• Color del título o degradado (combina dos colores con la dirección que elijas — un toque moderno tipo marca premium)
• Fuente del título: puedes elegir una fuente diferente solo para el título del Hero
• Tamaño: pequeño, mediano, grande o extra grande

Color del botón — Personaliza el color de los botones del Hero o déjalo en automático para que use el color primario de tu tema.

Las secciones son los bloques de contenido que arman el cuerpo de tu sitio. Puedes agregar todas las que quieras, en el orden que prefieras.

Cómo agregar una sección

1. En el menú lateral, baja hasta el botón Agregar sección
2. Se abre un menú con todos los tipos disponibles
3. Haz clic en el tipo que quieras
4. La sección se agrega al final de tu página y se expande automáticamente para editarla

Cómo editar una sección

Haz clic en el nombre de la sección en el menú lateral para expandirla. Verás dos pestañas:

• Contenido: lo que se muestra (textos, imágenes, items)
• Estilo: cómo se ve (layout, tamaños, animaciones)

Cómo reordenar secciones

Cada sección tiene un ícono de arrastre a la izquierda. Mantén presionado y arrastra hacia arriba o abajo para cambiar el orden.

Acciones extra de una sección

Haz clic en los tres puntos (···) a la derecha de la sección para ver más opciones:

• Ocultar: la sección desaparece del sitio público sin borrarla. Útil para preparar contenido sin publicarlo todavía.
• Mostrar: vuelve a hacerla visible.
• Duplicar: crea una copia exacta de la sección.
• Eliminar: la borra del todo.

💡 Si quieres probar algo nuevo sin perder lo que tienes, duplica la sección, edita la copia y luego decide cuál mantener.

Aquí va cada tipo en detalle: qué hace, cuándo usarlo y qué puedes configurar.

Banner 🖼️

Una imagen grande con texto opcional encima. Perfecto para promociones, anuncios destacados o llamados a la acción importantes.

Cuándo usarlo: lanzamiento de un nuevo servicio, oferta especial, evento próximo, cualquier cosa que merezca un espacio visual destacado.

Configuración de contenido:

• Imagen de fondo
• Etiqueta opcional (un tag arriba del encabezado)
• Encabezado grande encima de la imagen
• Descripción
• Botón opcional con texto y destino

Configuración de estilo:

• Alineación horizontal (izquierda, centro, derecha) y vertical (arriba, centro, abajo)
• Altura: pequeña, mediana o grande
• Overlay oscuro: activa o desactiva el velo oscuro sobre la imagen

Carrusel 🎠

Tarjetas deslizables horizontalmente. Ideal para mostrar contenido que no necesita ser visto todo de una vez.

Cuándo usarlo: instructores, testimonios de clientes, fotos de tus instalaciones, eventos pasados.

Configuración:

• Título y subtítulo de la sección
• Items: agregas manualmente cada tarjeta (con título, etiqueta, descripción, imagen y botón opcional) o importas desde Nessty
• Modo de tarjeta: Overlay (texto encima de la imagen) o Elevada (texto debajo de la imagen)
• Proporción de las imágenes (cuadrada, vertical, etc.)
• Espaciado entre tarjetas

Grid ▦

Cuadrícula ordenada de tarjetas. Genial cuando quieres mostrar varios elementos de un vistazo.

Cuándo usarlo: disciplinas o servicios, paquetes destacados, tipos de membresía, beneficios.

Configuración:

• Mismas opciones que el Carrusel (modo, proporción, items)
• Columnas: 2, 3 o 4
• Alineación de la última fila si los items no llenan todas las columnas

ℹ️ Grid solo está disponible en tu página principal.

Spotlight 🔦

Destaca un contenido con imagen grande y texto al lado. Para esa clase, instructor o producto que quieres que brille.

Cuándo usarlo: tu clase estrella, tu instructor más popular, un servicio premium que quieres destacar especialmente.

Configuración:

• Items con título, descripción e imagen
• Disposición: imagen a la izquierda o a la derecha
• Ancho de la imagen: angosta o amplia
• Espaciado entre items
• Tarjeta de fondo: activa o desactiva un fondo detrás de los items

ℹ️ Spotlight solo está disponible en tu página principal.

Acordeón 📚

Imágenes que se expanden al pasar el cursor. Muy visual y elegante.

Cuándo usarlo: mostrar tus instalaciones, tus diferentes salas o áreas, una galería curada de fotos importantes.

Configuración:

• Items con imagen y título
• Altura: pequeña, mediana o grande

ℹ️ Acordeón solo está disponible en tu página principal.

FAQ ❓

Preguntas frecuentes con respuestas colapsables. Resuelve dudas comunes sin saturar tu sitio.

Cuándo usarlo: preguntas que tus clientes hacen siempre — cómo reservar, qué llevar, política de cancelaciones, horarios, etc.

Configuración:

• Título y subtítulo de la sección
• Lista de preguntas y respuestas (la pregunta es el título, la respuesta es texto plano)
• Ancho: angosto, medio o amplio

💡 Tener una sección de FAQ reduce dramáticamente las dudas que llegan por WhatsApp. Vale cada minuto que inviertes en armarla bien.

Texto enriquecido 📝

Bloques de texto con imágenes, botones, títulos y más. La sección más versátil del editor.

Cuándo usarlo: tu historia, tu filosofía, "Sobre nosotros", explicar algo a profundidad, un mensaje del fundador.

Configuración:

• Título de la sección
• Editor de bloques: dentro de la sección puedes agregar hasta 8 bloques de distintos tipos:
  • Texto: un párrafo con formato (negritas, itálicas, enlaces)
  • Título: un encabezado destacado
  • Imagen: con opciones de ajuste, posición y altura
  • Botón: con texto y destino
  • Espaciador: un espacio en blanco para respirar entre bloques
• Cada bloque se puede arrastrar para reordenarlo
• Configuración de estilo: tamaño del texto, alineación (izquierda/centro/derecha), animación al hacer scroll, color del texto

Texto infinito ♾️

Un slider continuo de texto que se mueve solo. Le da movimiento y dinamismo a tu página.

Cuándo usarlo: listar disciplinas, valores de tu marca, ciudades donde operas, cualquier lista de palabras potentes que represente tu identidad.

Configuración:

• Texto: separa cada palabra con · (ej. "Spinning · Pilates · Yoga · Fuerza")
• Tamaño del texto
• Dirección: izquierda o derecha
• Velocidad: lenta, normal o rápida
• Color del texto

Máquina de escribir ⌨️

Texto animado que se "escribe" frase por frase. Genera atención inmediata.

Cuándo usarlo: mensajes potentes que quieras enfatizar — "Somos FUERZA · Somos PODER · Somos COMUNIDAD". Ideal arriba de tu sitio para reforzar identidad.

Configuración:

• Título y subtítulo opcionales
• Prefijo: una palabra fija que aparece antes de las frases (ej. "SOMOS")
• Frases: una por línea — la animación las va rotando
• Modo: Typewriter (efecto de máquina de escribir) o Vertical (las frases cambian con un fade vertical)
• Tamaño, velocidad y color del texto
• Cursor: muestra u oculta el cursor parpadeante (solo en modo Typewriter)

Planes 💰

Muestra automáticamente los paquetes que tienes activos en tu cuenta. Tus clientes pueden comprarlos directo desde tu sitio.

Cuándo usarlo: siempre que quieras vender tus paquetes desde tu sitio. Idealmente en tu página principal y/o en una página dedicada.

Configuración:

• Título y subtítulo de la sección
• Los paquetes se cargan automáticamente desde tu cuenta de Nessty

💡 Esta es la sección más automática del editor. Solo se puede tener una y los paquetes que se muestran son los que tienes activos en Nessty. Si activas, desactivas o cambias el precio de un paquete en Nessty, se actualiza automáticamente en tu sitio sin que hagas nada.

ℹ️ Si tienes múltiples sucursales, tus clientes podrán filtrar los paquetes por sucursal en tu sitio. Si tus paquetes están organizados por categorías, también podrán filtrar por categoría.

Algunas secciones (Carrusel, Grid, Spotlight, Acordeón) te permiten importar tus datos directamente desde Nessty.

Cómo importar

1. Abre la sección donde quieras importar
2. Haz clic en Importar datos
3. Elige qué quieres importar:
   • Instructores: tu equipo con sus nombres y fotos
   • Servicios: tus servicios con su nombre, categoría, descripción e imágenes
   • Ubicaciones: tus sucursales con su nombre, dirección e imagen de portada

Cómo funciona la importación ⚠️

⚠️ Esto es importante: al importar, los datos se copian al momento. No se sincronizan automáticamente después.
Si actualizas un instructor o servicio en Nessty (por ejemplo, cambias su foto o nombre), el cambio no se refleja en tu sitio web. Tendrás que volver a importar o editar manualmente desde el editor del sitio.

⚠️ Otra cosa importante: al importar se sobreescribe todo lo que ya tenías en esa sección. Si ya tenías items configurados manualmente, se reemplazan por los nuevos importados.

💡 La excepción es la sección de Planes, que sí se mantiene siempre sincronizada con Nessty automáticamente.

Cómo editar items después de importar

Después de importar, cada item se puede editar individualmente:

1. Haz clic sobre el item en la sección
2. Se abre un editor donde puedes cambiar título, etiqueta, descripción, imagen y agregar un botón
3. Los cambios solo aplican a ese item específico

También puedes:

• Reordenar los items arrastrándolos
• Eliminar items específicos sin tocar los demás
• Agregar items manuales mezclando con los importados

Empieza con una historia. No solo listes cosas — cuenta por qué existes, qué problema resuelves, qué hace especial a tu estudio. Una sección de Texto enriquecido tipo "Sobre nosotros" hace mucho.

Muestra a tu equipo. Las personas confían en personas. Una sección de Carrusel con tus instructores y una breve descripción de cada uno construye conexión real.

Las imágenes son todo. Invierte en una sesión de fotos profesional. Tu sitio puede tener el mejor diseño del mundo, pero si las fotos son débiles, todo se ve débil.

No abuses de las animaciones. Una o dos secciones con animaciones potentes (Texto infinito, Máquina de escribir) impactan. Cinco animaciones distintas saturan.

Mantén el ritmo visual. Alterna secciones con imágenes grandes con secciones más simples de texto. Le das respiro a la lectura.

Usa el FAQ desde el inicio. Antes de que te lo pidan tus clientes, anticipa las dudas. Reduces fricción y mejoras conversiones.

El Spotlight es para lo más importante. No metas todo en Spotlight, solo lo que realmente quieres que brille.

Prueba el orden. El orden de las secciones cambia mucho. La regla general: lo crítico arriba, los detalles abajo. Pero prueba qué funciona para tu marca específica.

⚠️ Mientras no des clic en Publicar, los cambios solo se ven en la vista previa. Cuando estés conforme con tu contenido, publica para que tus clientes vean los cambios en tu sitio público.

Ya sabes cómo armar el cuerpo de tu sitio. Ahora puedes profundizar en otros temas:

• Si quieres crear más páginas (Sobre nosotros, Contacto, una por sucursal), lee Crea páginas adicionales para tu sitio
• Si todavía no has personalizado el diseño global, vuelve a Personaliza el diseño global de tu sitio
• Cuando todo esté listo para el mundo, lee Publica y comparte tu sitio web

¡A llenar tu sitio de personalidad! 📐