Centro de Ayuda Wix
    Inicio
  1. Crear tu sitio
  2. Usar el Editor X
  3. Agregar elementos en el Editor X
    4. Editor X: usar repetidores

Editor X: usar repetidores

9 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
Un repetidor es una lista de elementos que tienen el mismo diseño y estilo, pero diferente contenido en cada uno. Es una forma rápida y fácil de mostrar tu contenido. 
En el Editor X, los repetidores se organizan en un estilo flexible que reorganiza automáticamente el contenido cuando se redimensiona, lo que hace que se vea genial en todos los tamaños de pantalla.
En este artículo, aprenderás a hacer lo siguiente:
Ejemplo de un repetidor que puedes diseñar en el Editor X.
Consejo:
También puedes usar repetidores para mostrar contenido dinámico de una colección conectándolos con el CMS (Sistema de gestión de contenido). 

Agregar un repetidor

Tenemos muchas secciones de repetidor prediseñadas para que las agregues a tu sitio y las personalices según tus necesidades. Algunos repetidores contienen imágenes, otros son más de un estilo de "lista" con énfasis en el texto. 

Para agregar un repetidor:

  1. Haz clic en Agregar elementos  en la parte superior del Editor X.
  2. Haz clic en Estilo.
  3. Haz clic en Repetidores.
  4. Arrastra un repetidor a tu página.
Captura de pantalla del panel Agregar elementos en el Editor X, que muestra los repetidores que puedes agregar

Agregar contenido a un repetidor

Todos los elementos del repetidor tienen el mismo diseño. Cuando agregas un elemento a un elemento repetidor, se agrega automáticamente a los otros elementos para mantener la coherencia del diseño. 
Dicho esto, aún puedes personalizar los elementos individuales dentro de un elemento (por ejemplo, texto, imágenes). Por ejemplo, al agregar un botón a un elemento, se agrega al resto, pero puedes cambiar el texto del botón en cada elemento para que diga algo diferente. 

Para agregar contenido a un repetidor:


  1. Haz clic en Agregar elementos en la parte superior del Editor X.
  2. Arrastra el elemento que quieres directamente al repetidor. 
  3. Haz clic en el elemento y personalízalo individualmente para cada elemento. 
Consejo:
Al eliminar un elemento de un elemento repetidor, se elimina de todos los demás elementos. 
Video que muestra que agregar un elemento a un ítem del repetidor lo agrega a todos los demás ítems

Administrar los ítems del repetidor

Puedes duplicar, cambiar el nombre, reordenar y eliminar fácilmente los elementos repetidores desde el panel Inspector profesional. 

Para administrar los ítems:

  1. Haz clic en el repetidor.
  2. Haz clic en el icono Inspector profesional  en la parte superior del Editor X.
  3. (En el Inspector profesional) Haz clic en Administrar junto al número de elementos. 

    A screenshot of the top of the Inspector panel where you can click Manage to manage repeater items
  4. Elige cómo quieres administrar tus elementos repetidores:
    • Duplicar un ítem: haz clic en Duplicar en la parte inferior.
    • Eliminar un ítem: haz clic en el icono Más acciones junto al ítem y luego haz clic en Eliminar.
    • Cambiar el nombre de un ítem: haz clic en el icono Más acciones junto al ítem y luego en Renombrar.
    • Reordenar ítems: haz clic y arrastra los ítems a una nueva posición.
Una captura de pantalla del panel Administrar elementos en el Inspector

Diseñar el repetidor

Personaliza el diseño del repetidor para que tenga el aspecto que quieres. Puedes cambiar el color de fondo de los ítems, agregar bordes, sombras o un cursor interesante que aparece cuando los visitantes pasan el cursor sobre el repetidor. 

Para diseñar el repetidor:

  1. Haz clic en el repetidor.
  2. Haz clic en el icono Inspector profesional  en la parte superior del Editor X.
  3. Haz clic en la pestaña Diseño . 
  4. Usa las opciones disponibles para diseñar el repetidor:
    • Cambia el color y la opacidad del relleno de todos los ítems.
    • Agrega un borde y un sombreado para que los ítems se destaquen.
    • Haz que las esquinas del ítem sean rectangulares o redondeadas. 
    • Agrega un cursor atractivo para que aparezca cuando los visitantes pasen el cursor sobre el repetidor. 
¿Estás usando un patrón de diseño AB?
Estos cambios de diseño se aplican a todos los ítems de los repetidores, independientemente del patrón AB. 
Captura de pantalla de un repetidor y las opciones disponibles en la pestaña de diseño en el panel Inspector profesional

Establecer un patrón de diseño AB para ítems del repetidor

Divide los ítems de los repetidores en 2 grupos para crear un diseño más elaborado. El patrón AB te permite crear dos versiones del mismo diseño, con diferentes estilos e interacciones.
Una vez que habilitas el patrón AB, los ítems del repetidor se dividen en los grupos A y B. Puedes ver qué ítems pertenecen a cada grupo en el Editor. Al diseñar cualquiera de los ítems A o B, los otros elementos del grupo cambian automáticamente para coincidir con el diseño. 
Captura de pantalla de un repetidor y el panel Inspector profesional, que diseñan todos los elementos B

Para establecer un patrón de diseño AB para los ítems de los repetidores:

  1. Haz clic en el repetidor.
  2. Haz clic en el icono Inspector profesional  en la parte superior del Editor X.
  3. Desplázate hacia abajo hasta Visualización.
  4. Habilita la palanca Configurar patrón de diseño AB.
    A screenshot of the Display section in the Inspector panel, enabling the AB pattern toggle
  5. Diseña los ítems A y B:
    1. Haz clic en el elemento A o B en el repetidor.
      Consejo: Puede ser cualquier ítem del grupo correspondiente.
    2. (En el Inspector profesional) Selecciona la pestaña Diseño .
    3. Elige cómo quieres personalizar este grupo de elementos:
      • Elige un diseño preestablecido en la sección Diseño.
      • Cambia el color y la opacidad de los ítems.
      • Agrega una interacción al hacer clic o al pasar el cursor desde la pestaña Interacciones . 

Cambiar el estilo del repetidor

Establece cómo se reorganizan los elementos del repetidor cuando cambia el tamaño de la pantalla. Dependiendo del tipo de visualización elegido (es decir, tarjetas, lista, control deslizante, celdas de cuadrícula), puedes personalizar los márgenes, la alineación, la direccionalidad y otras configuraciones. 
Captura de pantalla de un menú desplegable que aparece al hacer clic en un repetidor, lo que te permite cambiar rápidamente el estilo
Trabajar con breakpoints:
  • Puedes tener un estilo diferente para tu repetidor para cada breakpoint.
  • Las listas y los controles deslizantes suelen usarse en pantallas más pequeñas, como tabletas y dispositivos móviles.

Para personalizar aún más el estilo de un repetidor:

  1. Haz clic en el repetidor.
  2. Haz clic en el panel Inspector profesional  en la parte superior del Editor X.
  3. Personaliza el estilo del repetidor en función del tipo de visualización seleccionado:
Nota sobre los espacios:
Algunos navegadores antiguos no son compatibles con esta función (por ejemplo, Chrome 76-83, Safari 12-14 y Edge 79-83). Esto significa que los visitantes que acceden a tu sitio desde estos navegadores no ven los espacios que estableces entre los ítems del repetidor. 
Captura de pantalla del panel Inspector profesional en el Editor X, mientras se ajusta la visualización de un repetidor
Más información sobre repetidores:
Dirígete a Academia X para acceder a nuestra lección y ejercicios sobre repetidores. 

¿Te ha sido útil?

|

En este artículo

  • Agregar un repetidor
  • Agregar contenido a un repetidor
  • Administrar los ítems del repetidor
  • Diseñar el repetidor
  • Establecer un patrón de diseño AB para ítems del repetidor
  • Cambiar el estilo del repetidor