La Portada es la primera imagen y texto grande que ve tu cliente al entrar a tu sitio. Es la cara visible de tu negocio. La pantalla tiene dos partes: la card «Imágenes de la portada» (la foto o varias fotos en carrusel, más cómo se muestran) y la card «Textos de la portada» (el pre-título, el título, el subtítulo y los ajustes finos). Según tu plantilla, algunos de estos textos son propios de la portada y otros se toman de tu Marca.

Puedes subir una sola foto o varias y MYPES arma un carrusel automáticamente. Cada foto del carrusel puede tener un link propio (ej. la foto del producto en oferta lleva al catálogo, la foto del equipo lleva a la sección Sobre mí). El carrusel se configura con velocidad, tipo de transición, flechas y puntos de paginación.

Las fotos se eligen del banco de 6,300 imágenes profesionales filtrado por tu rubro, o subes tus propias fotos. Recomendación fuerte: una vez que tengas fotos reales de tu negocio (tus productos, tu equipo, tu local), reemplaza las del banco. Las fotos reales convierten más.

El plan gratuito acepta 3 fotos máx en el hero con settings del carrusel por defecto (5 segundos entre slides, transición slide, flechas y puntos visibles). El plan Pro sube a 10 fotos máx y desbloquea los settings avanzados del carrusel (cambiar velocidad, transición fade vs slide, ocultar flechas/puntos, pausa al pasar el mouse).

Manual completo

Subir o elegir foto del hero

Tienes dos opciones:

Opción 1: Elegir del banco

Presiona «Elegir del banco». Se abre un picker con 24 fotos por página filtradas por tu rubro. Puedes:

• Filtrar por subcategoría dentro de tu rubro.
• Cambiar de grupo (explorar fotos de otros rubros si necesitas).
• Buscar por texto libre (mínimo 2 caracteres) — busca en descripción, alt-text y matches IA.

Al hacer click en una foto, se agrega al hero al toque. Detalles en Banco de imágenes.

Opción 2: Subir tu propia foto

Presiona «Subir foto». Formatos aceptados: JPG, PNG, WebP y AVIF (máx 8 MB, dimensiones entre 100×100 y 4000×4000 px). Las fotos de iPhone en HEIC se convierten solas a JPG al subirlas — no tienes que hacer nada.

Recomendaciones:

• Formato horizontal (ej. 1920×1080). El hero es siempre horizontal.
• Calidad alta pero no exagerada — más de 4 MB rara vez aporta visualmente.
• Si la foto tiene texto importante, deja despejada la zona donde va el título (izquierda o centro, según la alineación de tu plantilla) — el título grande se superpone allí.

Hero con una sola foto (single)

Si solo subes una foto, el hero la usa como fondo estático. No hay carrusel, no hay flechas ni puntos. La foto se muestra con el texto encima (pre-título + título + subtítulo + botones).

Hero con múltiples fotos (carrusel automático)

Si subes 2 o más fotos, MYPES arma un carrusel automáticamente. El cliente ve una foto, después de unos segundos pasa a la siguiente, y vuelve al inicio en loop.

Por defecto:

• Cambio cada 5 segundos.
• Transición tipo slide (las fotos se deslizan).
• Flechas prev/next visibles a los costados.
• Puntos de paginación abajo (muestran en qué slide está).
• Pausa al pasar el mouse.

Reordenar fotos del carrusel

Arrastra las imágenes desde la esquina con el ícono ⠿ para cambiar el orden (arrastrar-y-soltar). También tienes botones ← / → en cada foto por si prefieres moverlas de a una. El orden importa: la primera foto es la que se ve al cargar la página (la más importante).

Eliminar una foto del carrusel

Cada slide tiene un botón «Eliminar». Quita esa foto del carrusel sin afectar a las demás. Si eliminas todas, el hero usa el fondo gradient default de la plantilla.

Cómo se muestra la imagen: recortar o completa

Dentro de la card «Imágenes de la portada», bajo el pregunta «¿Cómo se muestra la imagen?», eliges cómo encaja tu foto en el espacio de la portada:

• 🖼️ Recortar para llenar (recomendado): la foto llena todo el espacio de la portada; si sobra por los lados o arriba/abajo, se recorta. Se ve llena y sin bordes, pero puede cortar los extremos de la imagen.
• ↔️ Mostrar completa: se ve la foto entera sin recortar. Puede dejar franjas a los lados según la proporción de tu imagen. Útil cuando el detalle de los bordes importa (ej. un producto que no puedes cortar).

Es un solo control: cambias, guardas y la portada se actualiza.

Alineación y estilo de la portada

También dentro de la card «Imágenes de la portada» (no en «Textos de la portada») puedes controlar cómo se posan los textos sobre la foto:

• Alineación del hero (en 6 plantillas, las mismas del título por líneas): ⬅ Izquierda o ➡ Derecha. Aplica al título, subtítulo y botones como bloque — útil para no tapar a la persona o producto de tu foto.
• Estilo de la portada (hoy en tienda-moderna): 🌙 Oscuro (recomendado) o ☀️ Claro — una capa sobre la foto para que el texto se lea bien según lo clara u oscura que sea tu imagen.

💡 Nota: para el estilo visual general del sitio y el alto de la cabecera, ve a Diseño. La portada hereda esos ajustes; aquí solo afinas la foto y sus textos.

Link por slide (opcional)

Cada foto del carrusel puede tener un link al hacer click. Presiona «Editar link» en un slide y eliges:

• Sin link (default): el slide no es clicleable.
• Link interno: salta a una sección de tu propio sitio. Opciones: catálogo, página de reservas, sección Sobre mí, sección Contacto, home.
• Link externo: una URL completa (ej. tu Instagram, una página de campaña externa). Decides si abre en la misma pestaña (_self) o en una nueva (_blank).
• WhatsApp: abre un chat de WhatsApp con tu número configurado en Contacto.

Opcionalmente puedes agregar un label que se muestra como botón sobre la imagen.

Textos de la portada

La card «Textos de la portada» reúne todos los textos que se superponen a la foto, en este orden:

1. Pre-título de la portada (frase corta arriba del título).
2. Título de la portada (en algunas plantillas es un campo propio; ver abajo).
3. Título del hero por líneas (en 6 plantillas, un editor de 3 líneas; ver abajo).
4. Subtítulo del hero (en 9 plantillas; ver abajo).
5. Ajustes avanzados de la portada (según la plantilla).

No todas las plantillas muestran todos los campos: la card solo aparece con los que tu plantilla soporta. Lo que no editas aquí (como el slogan) se toma de tu Marca.

Pre-título de la portada

Frase corta arriba del título grande (máx 60 chars). Sirve para categorizar. Ejemplos: «Pan artesanal», «Talleres en mecánica», «Salón de belleza». Aparece en las plantillas que reservan ese espacio.

Título de la portada (campo propio)

En estas 4 plantillas el título grande de la portada es un campo propio que editas directamente aquí:

• landing-conversion
• reserva-salud
• arte-diseno
• mypes-clasica

Si lo dejas vacío, la portada muestra el nombre de tu negocio (el de Marca) — igual que antes, sin romper nada. Llénalo cuando quieras un titular distinto al nombre (ej. «Sonríe con confianza» en vez de «Clínica Dental Sonrisas»).

Subtítulo del hero

En estas 9 plantillas tienes un subtítulo propio de la portada, una descripción corta bajo el título:

casa-lista · instituto-amauta · norte-studio · taller-rpm · valentina-salon · landing-conversion · negocio-local · reserva-salud · tienda-moderna

Si lo dejas vacío, la portada muestra automáticamente un extracto de tu texto de «Sobre mí». Así la portada nunca queda sin subtítulo, aunque no escribas nada. Ver Sobre mí.

Editar el título de la portada línea por línea (6 plantillas)

Si tu plantilla es una de las siguientes, en la card «Textos de la portada» aparece un editor con 3 inputs (uno por línea) para que armes el título grande como tú quieras:

• taller-rpm
• casa-lista
• valentina-salon
• negocio-local
• tienda-moderna
• mypes-clasica

Cada input es una línea independiente del título. Por ejemplo:

Línea 1	Línea 2 (acento)	Línea 3
Bienvenido a	Salón Valentina	tu nuevo estilo

💡 Tip: la línea 2 se pinta automáticamente con el color acento de tu paleta. Es la línea que más llama la atención — pon ahí la palabra fuerte (tu nombre, tu producto estrella, tu propuesta de valor). Si solo llenas 1 o 2 líneas, no se aplica el acento (queda como título único).

Compatible con sitios antiguos: si dejas las 3 líneas vacías, el hero sigue mostrando el nombre del negocio de Marca como antes — no rompe nada, simplemente vuelve al comportamiento previo.

(La alineación de estos textos se controla en la card «Imágenes de la portada» — ver «Alineación y estilo de la portada» más arriba.)

Ajustes avanzados de la portada (solo Pro)

En la plantilla con ajustes avanzados (hoy arte-diseno), al pie de «Textos de la portada» aparece un bloque «Ajustes avanzados de la portada» que sobreescribe el estilo visual por campo (deja «Usar el del estilo visual» para que herede lo que definiste en Diseño):

Ajuste	Opciones
Alineación	Usar el del estilo visual / Izquierda / Centrada
Estilo de los botones	Usar el del estilo visual / Botones sólidos / Link minimalista
Capa sobre la imagen	Usar el del estilo visual / Aclarar (texto oscuro) / Oscurecer (texto blanco)
Tamaño del título	Usar el del estilo visual / Estándar / Muy grande
Estilo del carrusel	Usar el del estilo visual / Prominente / Minimalista

Requiere plan Pro. Si tu plan es gratuito, estos campos están visibles pero deshabilitados: manda el estilo visual que elegiste en Diseño.

Settings del carrusel (solo Pro)

Para múltiples fotos, plan Pro puede personalizar:

• Velocidad (autoplay): entre 2,000 y 10,000 ms (2 a 10 segundos por slide). Default 5,000.
• Transición: slide (desliza) o fade (transparencia).
• Mostrar flechas: prev/next visibles a los costados.
• Mostrar puntos: paginación con dots abajo.
• Pausa al pasar el mouse: el auto-rotate se detiene mientras el cliente está leyendo.

Caps por plan

Plan	Fotos en hero	Settings del carrusel personalizables
Gratuito	3	No (usa defaults)
Pro	10	Sí

Si intentas agregar una foto cuando llegas al cap, MYPES muestra el mensaje «Tu plan permite hasta 3 imágenes en el hero». Para subir más, archivas alguna o subes a Pro.

Cómo se ve para tu cliente

• La foto del hero ocupa la pantalla casi completa al cargar la home.
• El texto (pre-título + título + subtítulo/slogan) se superpone con buena legibilidad.
• En mobile, la foto se reduce a una altura razonable (no full screen, no asfixia el contenido).
• Si subiste varias fotos, el carrusel arranca automático al cargar.

Recomendaciones

• Una foto fuerte vs varias mediocres. Mejor 1 foto excelente que 5 regulares.
• Foto con personas reales suele convertir más que foto de producto solo, sobre todo en servicios (peluquería, dentista, taller).
• Evita fotos verticales — el hero es horizontal y las verticales se ven mal cortadas.
• Si usas carrusel, 3 fotos funciona bien (default). Más slides confunden al cliente.
• Pon la mejor foto primero. Es la que se ve al cargar; las demás son bonus.

FAQ

¿Cuántas fotos puedo subir al hero? 3 en plan gratuito, 10 en Pro. Cuando llegas al cap, te avisa al intentar subir más.

¿Las fotos se comprimen automáticamente? Sí. Al subir, MYPES guarda el original y genera versiones optimizadas (webp + dimensiones distintas para mobile/desktop). Tu cliente carga la versión adecuada según su dispositivo.

¿Puedo poner un video en el hero en vez de foto? Hoy no. El hero es solo imágenes. Si necesitas video, considera un screenshot llamativo del video + un slide con link al video real.

¿Por qué mi foto se ve cortada arriba o abajo? Por defecto la portada usa «Recortar para llenar»: la foto se recorta para ocupar todo el espacio. Si no quieres que se corte, cambia a «Mostrar completa» en la card «Imágenes de la portada» (¿Cómo se muestra la imagen?). O recórtala tú antes de subir (Canva, Photoshop) en formato horizontal 16:9 o 21:9 para controlar exactamente qué se ve.

¿Puedo tener fotos distintas en mobile y desktop? Hoy no. La misma foto se sirve a ambos (con tamaño optimizado). Si tu foto necesita versión vertical específica, considera subir una versión que funcione razonable en ambos.

¿Los links de slides funcionan en mobile? Sí. El cliente toca la foto y va al destino. Si pusiste label visible, también es tocable.

¿El hero soporta GIFs? Sí, pero no recomendado. Los GIFs son pesados (1-5 MB típicos) y ralentizan la carga. Mejor usa video externo o foto estática.