Presentación destacada

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. MDN Web Docs
3. Documentación de Company XYZ sobre el bloque de diapositiva
4. Documentación de Company XYZ sobre los ajustes de encabezado
5. Documentación de Company XYZ sobre los ajustes de espaciado de sección
6. Documentación de Company XYZ sobre los ajustes de fondos de sección
7. Documentación de Company XYZ sobre los ajustes de separadores
8. Documentación de Company XYZ sobre los ajustes de visibilidad
9. Documentación de Company XYZ sobre los ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: personalización de tu tienda

Vídeo de Shopify Academy: personalización de tu tienda

Use esta sección para convertir una lista de características, detalles o puntos de venta en una presentación guiada. Funciona mejor cuando cada diapositiva se centra en una sola idea, con un encabezado breve, texto conciso y medios opcionales. Para obtener una visión general más amplia de cómo funcionan las secciones y los bloques en el editor, consulte la documentación de Shopify sobre secciones y bloques

Ajustes básicos

Ajustes de presentación

Estos ajustes controlan cómo se mueve la presentación, cuánto de la siguiente diapositiva se ve y cómo navegan los visitantes entre diapositivas. Empiece aquí antes de ajustar el estilo, porque el estilo de animación cambia el comportamiento de toda la sección.

El estilo de animación predeterminado admite un diseño más similar al de un carrusel, incluidas vistas previas parciales de las próximas diapositivas. Fade cambia la sección a una presentación de una sola diapositiva, lo que es mejor cuando desea que los visitantes se centren en un mensaje a la vez.

Fade fuerza un diseño de una sola diapositiva y elimina las vistas previas de las siguientes diapositivas. La paginación tampoco se muestra cuando fade está activo.

La velocidad de la animación afecta a lo pulida o enérgica que se percibe la sección. Las transiciones más rápidas son adecuadas para diapositivas cortas y visuales, mientras que las más lentas suelen ser más fáciles de seguir cuando las diapositivas incluyen más lectura.

El aspecto ratio controla la forma del área multimedia de la diapositiva. Use una proporción fija para un diseño más limpio y coherente entre diapositivas, o déjelo en Default si sus medios deben conservar sus proporciones naturales. La proporción independiente para móviles es útil cuando el recorte de escritorio resulta demasiado ancho o demasiado ajustado en pantallas más pequeñas.

La reproducción automática puede ayudar cuando las diapositivas cuentan una historia breve y sencilla. Si las diapositivas incluyen texto más largo, mantenga la reproducción automática más lenta o desactívela para que los visitantes puedan leer sin prisas. La opción de pausar al pasar el cursor solo se aplica en escritorio, por lo que los usuarios de móviles seguirán dependiendo del retardo y de los controles manuales.

La navegación y la paginación afectan a la claridad con la que la presentación comunica la secuencia. La navegación suele ser suficiente cuando los encabezados o iconos de las diapositivas son distintivos, mientras que la paginación resulta más útil cuando el orden de las diapositivas importa.

Los ajustes de posición de los controles le ayudan a equilibrar la interfaz entre dispositivos. En escritorio, la colocación a la izquierda o a la derecha cambia el peso visual del diseño; en móviles, la colocación arriba o abajo afecta principalmente al escaneo y a la comodidad de pulsación.

Ajustes de color

Estos ajustes anulan los colores del encabezado de la sección usados para el icono, el encabezado y el texto de apoyo que aparecen encima de la presentación. Son más útiles cuando la sección se sitúa sobre un fondo personalizado o necesita un contraste más fuerte del que proporcionan los estilos de la página circundante.

Use las anulaciones de color con moderación. Una combinación sencilla de alto contraste suele ser más fácil de leer que un texto muy estilizado, especialmente cuando las propias diapositivas incluyen imágenes o video.

Consejo

Si añade una imagen o video de fondo a la sección, compruebe el contraste del texto del encabezado tanto en escritorio como en móviles antes de publicar. Para obtener orientación general sobre accesibilidad, consulte MDN Web Docs

Tipos de bloque admitidos

1. Slide

Diapositiva

Cada bloque Slide añade una diapositiva a la secuencia y contribuye a la navegación basada en texto o iconos. Obtenga más información sobre el Diapositiva.

Use cada diapositiva para un único punto claro. Los encabezados breves funcionan mejor porque mantienen fácil de explorar la interfaz de navegación.

1. Use el encabezado como la idea principal.
2. Use el campo de contenido para añadir una explicación breve, no un segundo titular.
3. Añada un icono solo cuando ayude a los visitantes a distinguir las diapositivas más rápidamente.

Ajustes de imagen

Una diapositiva puede ser solo de texto, basada en imagen o basada en video. Si se añaden tanto imagen como video, el video tiene prioridad y se reproduce cuando esa diapositiva se activa.

Los ajustes de superposición inactiva ayudan a reducir la distracción de las diapositivas vecinas cuando las vistas previas son visibles. Aumente la superposición si las diapositivas adyacentes compiten demasiado con la activa, y redúzcala si la sección empieza a verse demasiado oscura.

Visibilidad del bloque

Puede ocultar diapositivas individuales en escritorio o en móviles. Esto es útil cuando una diapositiva es demasiado detallada para pantallas pequeñas o cuando desea una secuencia móvil más breve sin eliminar la diapositiva por completo.

Ajustes estándar de sección

Ajustes de encabezado

ajustes de encabezado le permiten introducir la presentación con un subtítulo, encabezado, texto de apoyo y un botón opcional. Este es un buen lugar para explicar qué cubre la presentación y dar a los visitantes el siguiente paso claro.

El botón funciona mejor como una sola acción de seguimiento, como ver un producto o una página relacionada. La posición del botón en móviles y el comportamiento de ancho completo son útiles cuando desea que la acción siga siendo fácil de pulsar.

Ajustes de espaciado

ajustes de espaciado controlan el espacio por encima y por debajo de la sección. Úselos para separar la presentación del contenido cercano, especialmente cuando la página incluye otras secciones con mucho contenido multimedia.

Un espaciado más ajustado puede hacer que la sección se sienta más conectada con el diseño circundante. Un espaciado mayor da más énfasis y margen visual a la presentación.

Ajustes de fondo de sección

ajustes de fondo de sección le permiten añadir un color, degradado, imagen o video detrás de toda la sección. Estas opciones pueden hacer que la presentación se sienta más envolvente, pero también afectan a la legibilidad y a la profundidad percibida del diseño.

Las superposiciones son especialmente útiles cuando el encabezado se sitúa sobre contenido multimedia de fondo. Si utiliza tanto contenido multimedia de fondo como contenido multimedia dentro de las diapositivas, mantenga una de las capas visualmente más discreta para que la sección no se sienta recargada.

Ajustes de separador

ajustes de separador añaden una línea en la parte superior o inferior de la sección. Esto puede ayudar a definir la presentación cuando se sitúa entre secciones con fondos similares.

Los separadores sutiles suelen funcionar mejor. Úselos como estructura, no como decoración.

Ajustes de visibilidad

ajustes de visibilidad controlan si toda la sección aparece en escritorio, en móviles o en ambos. Esto es útil cuando desea un flujo de página diferente en pantallas más pequeñas.

Si oculta la sección en un dispositivo, asegúrese de que el mismo mensaje clave aparezca en otro lugar para que no se pierdan detalles importantes.

Ajustes de ancho

ajustes de ancho controlan el ancho total de la sección y el ancho máximo del contenido dentro de ella. En esta presentación, el ancho cambia cuán espacioso se perciben los medios y lo fácil que resulta explorar la navegación.

Los anchos más estrechos suelen ser adecuados para diapositivas basadas en texto, mientras que los diseños más anchos dan más impacto a las imágenes y al video. Compruebe los cambios en la página en vivo cuando sea posible, porque el encuadre del editor puede hacer que el ancho se perciba de forma distinta al resultado final.

Notas de uso

1. Mantenga el foco de las diapositivas. Dé a cada diapositiva una idea principal para que el encabezado, el icono, el texto y los medios apoyen el mismo mensaje.
2. Elija la animación de forma deliberada. Use el estilo predeterminado para una sensación de carrusel más visual, y use fade cuando quiera que los visitantes se concentren en una diapositiva a la vez.
3. Mantenga coherentes las proporciones de los medios. Hacer coincidir las relaciones de aspecto entre diapositivas suele crear un diseño más limpio y tranquilo.
4. Use la reproducción automática con moderación. Actívela solo cuando las diapositivas se comprendan rápidamente y los controles manuales sigan siendo evidentes.
5. Revise con cuidado la versión móvil. Compruebe el recorte, la ubicación de los controles y el contraste del texto en pantallas más pequeñas siempre que utilice colores personalizados, contenido multimedia de fondo o relaciones de aspecto específicas para móviles.
6. Revise ambos diseños de vista. Los controles de escritorio y de móvil pueden cambiar la alineación, la visibilidad y cuánto se muestra de cada diapositiva, así que confirme ambas versiones antes de publicar.
7. Trate los valores predeterminados como alternativa. Los colores vacíos o transparentes suelen conservar el estilo circundante, mientras que los colores explícitos, los degradados o las opciones separadas de contenido multimedia para escritorio y móvil hacen que el área de la presentación sea más autónoma.