Gestionar página principal - Personalizar y textos

Personalizar páginas de la tienda web y añadir contenido

Introducción: ¿Qué es personalizar páginas de la tienda web?

Personalizar páginas de la tienda web significa que puedes determinar tú mismo el contenido y diseño de tu tienda web. Puedes añadir textos, imágenes, vídeos, bloques de productos y otros elementos para hacer que tu tienda web se vea exactamente como quieres. Es como decorar tu propia tienda: tú decides qué va dónde.

¿Por qué personalizar páginas de la tienda web?

Quieres personalizar tu tienda web porque:

  • Tienes control sobre lo que ven los clientes
  • Puedes crear una apariencia única y profesional
  • Puedes colocar información importante en el lugar correcto
  • Puedes destacar productos como tú quieres
  • Puedes mostrar de forma prominente promociones u ofertas especiales
  • Hace que tu tienda web sea personal y reconocible
  • Puedes mejorar la experiencia del cliente

¿Qué puedes añadir a las páginas?

Tienes diferentes tipos de bloques y elementos que puedes añadir:

Bloques:

  • Bloques de artículos: Muestran productos específicos
  • Bloques de surtido: Muestran un grupo de productos
  • Bloques de carrusel: Galería de productos rotativa

Otros elementos:

  • Texto: Explicación, mensaje de bienvenida, información
  • Imágenes: Fotos, banners, ilustraciones
  • Vídeos: Insertar vídeos de YouTube
  • Bloque de hora de cierre: Muestra cuándo estás cerrado
  • Bloque de día de pedido: Muestra posibilidades de pedido
  • Bloque de inicio de sesión: Opción de inicio de sesión para clientes
  • Barra de búsqueda: Buscar productos
  • Grupos de lista (botones): Botones de navegación

¿Cómo añades contenido a una página?

Paso 1: A la página

Abrir página

  1. Ve al mosaico „Tienda (Nuevo)"
  2. Haz clic en el botón „Páginas"
  3. Ahora ves una lista de todas las páginas
  4. Haz clic en la página que quieres personalizar (por ejemplo, tu página principal)

Paso 2: Crear sección (opcional)

Las secciones son como capítulos en tu página. Con estas puedes dividir tu página en diferentes partes.

Crear nueva sección/subpágina

  1. Haz clic en „Sección"
  2. Haz clic en „Nuevo"
  3. Introduce un nombre para la sección (por ejemplo „Productos destacados" o „Bienvenida")

Establecer visibilidad

Puedes elegir cuándo esta sección es visible:

  • Marcado (✓): La sección solo es visible cuando el cliente ha iniciado sesión
  • No marcado ( ): La sección solo es visible cuando el cliente NO ha iniciado sesión
  • Guion (-): La sección siempre es visible (con o sin sesión iniciada)

Ejemplo:

  • Ofertas especiales para clientes habituales → Marcar (solo para clientes con sesión iniciada)
  • Texto de bienvenida general → Guion (para todos)

Guardar

  1. Haz clic en „Guardar"
  2. La sección está ahora creada

Paso 3: Añadir elementos a la sección

Ahora vas a añadir el contenido real (textos, imágenes, bloques, etc.).

Abrir menú Elementos

  1. Selecciona la sección o subpágina a la que quieres añadir algo
  2. Haz clic en „Elementos"
  3. Ahora ves las opciones para añadir contenido

Opción A: Añadir texto (con imagen o vídeo)

Añadir nuevo texto

  1. Haz clic en „Nuevo" o „+ Texto"
  2. Se abre un editor de texto
  3. Escribe tu texto

Añadir imagen al texto

Si quieres añadir una imagen:

  1. Primero sube la imagen al sistema
  2. Recuerda el nombre del archivo (por ejemplo: „banner.png")
  3. Atención: ¡No uses espacios en el nombre del archivo!
  4. Añade el siguiente código en tu texto:
![](banner.png)
  1. Reemplaza „banner.png" con el nombre de tu imagen

Ejemplo:

  • Has subido una imagen „bienvenida2025.jpg"
  • En tu texto escribes: ![](bienvenida2025.jpg)
  • La imagen aparece ahora en ese lugar

Añadir vídeo de YouTube al texto

Si quieres insertar un vídeo de YouTube:

  1. Copia el enlace del vídeo de YouTube (por ejemplo: https://www.youtube.com/watch?v=bCLEnJ8Mm0I)
  2. Añade el siguiente código en tu texto:
![youtube.com](https://www.youtube.com/watch?v=bCLEnJ8Mm0I)
  1. Reemplaza el enlace con tu propio enlace de YouTube

Ejemplo:

Guardar texto

  1. Haz clic en „Guardar"
  2. El texto está ahora añadido a tu página

Opción B: Añadir bloques y elementos especiales

Menú Más opciones

  1. En la pantalla de Elementos haz clic en „Más"
  2. Ahora ves un menú con diferentes opciones

Qué puedes añadir vía „Más":

1. Un bloque creado

  • Es un bloque que has creado anteriormente (bloque de artículos, bloque de surtido, bloque de carrusel)
  • Selecciona el bloque que quieres añadir
  • Aparece en tu página

2. Nuevo bloque de hora de cierre

  • Muestra automáticamente cuándo tu tienda web está cerrada
  • Los clientes ven por ejemplo: „Estamos cerrados, vuelve el lunes"
  • Útil para vacaciones o días festivos

3. Nuevo bloque de día de pedido

  • Muestra las posibilidades de pedido y fechas de entrega
  • Los clientes ven cuándo pueden pedir para qué día
  • Lo hace claro para los clientes

4. Bloque de inicio de sesión

  • Muestra una opción de inicio de sesión para clientes
  • Los clientes pueden iniciar sesión para ver su cuenta
  • Útil en la página principal o en el menú

5. Barra de búsqueda

  • Los clientes pueden buscar productos
  • Escribe el nombre del producto y encuéntralo directamente
  • Mejora la facilidad de uso

6. Grupos de lista (botones)

  • Botones de navegación a diferentes categorías
  • Por ejemplo: „Rosas", „Tulipanes", „Lirios"
  • Los clientes hacen clic y van a esa categoría

Añadir elemento

  1. Haz clic en el elemento que quieres añadir
  2. Sigue los pasos adicionales si los hay (configuración, introducir nombre, etc.)
  3. Guardar
  4. El elemento aparece en la lista

Paso 4: Ajustar el orden de los elementos

El orden en que añades los elementos también es el orden en que aparecen en la tienda web. Puedes ajustar este orden.

Reordenar elementos

  1. Ahora ves una lista con todos los elementos/bloques en tu página
  2. Selecciona el elemento que quieres mover
  3. Ves flechas: arriba (↑) y abajo (↓)

Mover:

  • Flecha arriba (↑): El elemento sube una posición (más hacia arriba en la página)
  • Flecha abajo (↓): El elemento baja una posición (más hacia abajo en la página)

Ejemplo de orden:

  1. Texto de bienvenida (arriba)
  2. Vídeo de YouTube
  3. Bloque de productos destacados
  4. Barra de búsqueda
  5. Texto con información de contacto (abajo)

Verificar resultado

  1. Recarga tu tienda web para ver cómo se ve
  2. Ajusta el orden más si es necesario

¡Listo! Tu página está ahora personalizada con tu propio contenido.

Formato de texto avanzado

Para más posibilidades en el texto (como encabezados, texto en negrita, listas, etc.) puedes usar Markdown.

Códigos Markdown útiles:

Encabezados:

# Encabezado grande (Heading 1)
## Encabezado mediano (Heading 2)
### Encabezado pequeño (Heading 3)

Formato de texto:

**Texto en negrita**
*Texto en cursiva*

Listas:

- Item 1
- Item 2
- Item 3

Enlaces:

[Haz clic aquí](https://www.ejemplo.es)

Más información: Para una explicación detallada de todas las posibilidades de Markdown, ve a: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

Ejemplos prácticos

Ejemplo 1: Página principal con texto de bienvenida y productos

  • Paso 1: Abrir página principal → Sección → Nuevo → „Bienvenida"
  • Paso 2: Elementos → Nuevo → Escribe el texto de bienvenida
  • Paso 3: Elementos → Más → Añade bloque de surtido con productos populares
  • Paso 4: Recarga la tienda web y verifica
  • Resultado: Los clientes ven el texto de bienvenida seguido de productos destacados

Ejemplo 2: Banner con vídeo de YouTube

  • Paso 1: Abrir página → Sección → Elementos → Nuevo
  • Paso 2: Escribe texto introductorio
  • Paso 3: Añade código de YouTube: ![youtube.com](tu-enlace-de-vídeo)
  • Paso 4: Guardar
  • Resultado: Los clientes ven tu vídeo directamente en la página

Ejemplo 3: Añadir botones de categoría

  • Paso 1: Abrir página → Elementos → Más → Grupos de lista
  • Paso 2: Selecciona los grupos de lista que quieres mostrar como botones
  • Paso 3: Guardar
  • Resultado: Los clientes ven botones a diferentes categorías

Ejemplo 4: Sección solo para miembros

  • Paso 1: Crear sección „Ofertas VIP"
  • Paso 2: Marca (✓) solo para clientes con sesión iniciada
  • Paso 3: Añade ofertas especiales
  • Resultado: Solo los clientes con sesión iniciada ven estas ofertas

Consejos importantes

Consejo 1: Planifica la estructura de tu página

  • Piensa de antemano qué debe ir dónde
  • Haz un boceto en papel
  • Trabaja de arriba hacia abajo
  • Así evitas mucho reordenamiento posterior

Consejo 2: Sin espacios en nombres de archivos

  • „banner.png" ✓ Bueno
  • „mi banner.png" ✗ Malo
  • „mi-banner.png" ✓ Bueno
  • Usa guiones (-) en lugar de espacios

Consejo 3: Siempre prueba en móvil

  • Verifica cómo se ve tu página en el teléfono
  • Muchos clientes compran en móvil
  • Ajusta si no es bien legible

Consejo 4: Mantenlo claro

  • No demasiados elementos en una página
  • Los clientes deben encontrar rápido lo que buscan
  • Menos es a menudo más

Consejo 5: Usa secciones lógicamente

  • Crea secciones separadas para diferentes temas
  • Por ejemplo: „Promociones", „Nuevos productos", „Sobre nosotros"
  • Esto mantiene tu página organizada

Consejo 6: Vista previa antes de guardar

  • Recarga tu tienda web regularmente para verificar
  • Así ves inmediatamente si está bien
  • Ajusta donde sea necesario

Consejo 7: Guarda tus códigos Markdown

  • Haz un documento con códigos usados frecuentemente
  • Así no tienes que buscarlos cada vez
  • ¡Ahorra tiempo!

Preguntas frecuentes

Pregunta: ¿En qué orden debo añadir los elementos?

  • El orden en que añades es el orden en la página
  • Así que añadir primero = arriba en la página
  • Siempre puedes ajustar el orden más tarde con las flechas

Pregunta: ¿Puedo eliminar un elemento más tarde?

  • Sí, selecciona el elemento y haz clic en eliminar
  • O edítalo si quieres cambiar algo
  • Los elementos eliminados se han ido, así que ten cuidado

Pregunta: ¿Por qué no veo mi imagen?

  • Verifica si el nombre del archivo es correcto (¡distingue mayúsculas y minúsculas!)
  • Verifica si no hay espacios en el nombre
  • Verifica si la imagen realmente fue subida
  • Actualiza la tienda web con Ctrl+F5

Pregunta: ¿Puedo usar HTML en lugar de Markdown?

  • Depende de tu configuración del sistema
  • Markdown es generalmente más seguro y fácil
  • Verifica la documentación o pregunta al soporte

Pregunta: ¿Cuántas secciones puedo hacer?

  • Tantas como quieras
  • Pero mantenlo claro
  • Demasiadas secciones lo hacen confuso

Pregunta: ¿Funcionan los YouTube shorts también?

  • Generalmente no, solo vídeos normales de YouTube
  • Pruébalo para estar seguro
  • El código es el mismo

¿Qué hacer ante problemas?

Problema: La imagen no aparece

  • Verifica el nombre del archivo (sin espacios, ortografía correcta)
  • Verifica si la imagen fue subida
  • Intenta subir la imagen de nuevo
  • Verifica si la extensión es correcta (.png, .jpg, .gif)

Problema: El vídeo de YouTube no carga

  • Verifica si el enlace está correctamente copiado
  • Prueba el vídeo en un navegador normal
  • El vídeo puede ser privado o eliminado
  • Verifica si usaste el código Markdown correcto

Problema: El orden no cambia

  • Actualiza la página
  • Puede que necesites iniciar sesión de nuevo
  • Verifica si hiciste clic en „Guardar" después de cambiar

Problema: El bloque no aparece

  • Verifica si el bloque existe (en la gestión de bloques)
  • Actualiza la tienda web
  • Verifica si el bloque está correctamente configurado

Problema: Sección no visible en la tienda web

  • Verifica los ajustes de visibilidad (✓, , -)
  • Puede que necesites iniciar sesión para verlo
  • Actualiza la caché de tu navegador

Resumen

Personalizar páginas de la tienda web se hace añadiendo secciones y elementos a tus páginas:

Pasos básicos:

  1. Ve a Tienda → Páginas → selecciona la página que quieres personalizar
  2. Haz clic en Sección → Nuevo → introduce nombre → establece visibilidad (✓ = solo con sesión iniciada, - = siempre) → Guardar
  3. Selecciona sección → haz clic en Elementos para añadir contenido

Añadir contenido (dos opciones):

  • Texto/imagen/vídeo: Haz clic en Nuevo → escribe texto → para imagen usa ![](nombrearchivo.png), para vídeo de YouTube usa ![youtube.com](tu-enlace-de-vídeo) → Guardar
  • Bloques/elementos: Haz clic en Más → elige entre: bloque creado, bloque de hora de cierre, bloque de día de pedido, bloque de inicio de sesión, barra de búsqueda o grupos de lista (botones) → Guardar

Ajustar orden:

  • Selecciona elemento → usa flechas arriba (↑) o abajo (↓) para cambiar la posición
  • El orden en la lista es el orden en la tienda web

Puntos importantes:

  • Sin espacios en nombres de archivos para imágenes (usa „banner.png" no „mi banner.png")
  • Para formato de texto avanzado: usa Markdown (encabezados con #, negrita con **texto**)
  • Más consejos Markdown: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
  • Siempre prueba en móvil y recarga regularmente para verificar el resultado

¿Tiene preguntas o necesita ayuda? No dude en contactarnos por teléfono al +31 (0)71 30 20 310 o envíe un correo electrónico a support@easyflor.nl.