Editor de Wix Studio: agregar y personalizar repetidores
9 min de lectura
Un repetidor es una lista compuesta por elementos que tienen el mismo diseño y estilo, pero con un contenido diferente en cada uno de ellos. Es una forma rápida y fácil de mostrar contenido, incluido el contenido del CMS (Sistema de gestión de contenido).
En el Editor de Wix Studio, los repetidores cuentan con un estilo flexible, lo que consigue que cada elemento se vea bien en todos los tamaños de pantalla.
Ve a nuestra Academia de Wix Studio (contenido en inglés) para ver otros webinarios, tutoriales y cursos de Wix Studio.
En este artículo, aprende a hacer lo siguiente:
Agregar un repetidor
Tenemos muchos repetidores prediseñados para que los agregues y los personalices según tus necesidades. Algunos repetidores contienen imágenes, otros tienen más bien un estilo de "lista" poniendo el énfasis en el texto.
Después de agregar en repetidor que te guste, comienza a trabajar en el contenido. Cuando agregas un elemento a un 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 cada ítem (por ejemplo, texto, imágenes).
¿Qué elementos no se pueden agregar a un repetidor?
Para agregar un repetidor:
- Haz clic en Agregar elementos
a la izquierda del editor. - Haz clic en Herramientas de estilo.
- Haz clic en Repetidores.
- Arrastra un repetidor a la página.
Consejo:
Al eliminar un elemento de un ítem del repetidor, se elimina de todos los demás elementos.
Administrar los elementos del repetidor
Puedes duplicar, renombrar, reordenar y eliminar fácilmente los ítems de los repetidores desde el panel Inspector profesional.
Para administrar los elementos del repetidor:
- Selecciona el repetidor correspondiente.
- Haz clic en el icono Abrir Inspector profesional
en la parte superior derecha del editor.
- (En el Inspector profesional) Haz clic en Administrar junto al número de ítems.
- Elige cómo quieres administrar los ítems del repetidor:
- Duplicar un ítem: selecciona un ítem y haz clic en Duplicar ítem en la parte inferior.
- Eliminar un ítem: haz clic en el icono Más acciones
junto al ítem y luego haz clic en Eliminar. - Renombrar un ítem: haz clic en el icono Más acciones junto al ítem y luego haz clic en Renombrar. Consejo: Al cambiar el nombre de un elemento, se cambia automáticamente el nombre de los otros elementos del repetidor.
- Reordenar los ítems: mantén pulsado el icono Reordenar
junto a un elemento y arrástralo a una nueva posición.
Diseñar el repetidor
Personaliza el diseño del repetidor para que coincida con el sitio de tu cliente. 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.
Consejo:
Haz que el repetidor sea atractivo y notorio al agregar animaciones. También puedes hacer que los ítems del repetidor se adhieran a la parte superior o inferior de la pantalla.
Para diseñar un repetidor:
- Selecciona un ítem del repetidor.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Usa las opciones disponibles en Diseño para personalizar el repetidor:
- Cambia el color de relleno y la opacidad de todos los ítems.
- Agrega un borde y un sombreado para que los ítems se destaquen.
- Haz que las esquinas del ítem sean angulosas o redondas.
- Agrega un cursor atractivo para que aparezca cuando los visitantes pasen el cursor sobre el repetidor.
Establecer un patrón de diseño AB para los elementos 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 y animaciones.
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 ítems del grupo cambian automáticamente para coincidir con el diseño de su grupo.
Para establecer un patrón de diseño AB para los ítems del repetidor:
- Selecciona el repetidor correspondiente.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Desplázate hacia abajo hasta Estilo.
- Habilita la palanca Configurar patrón de diseño AB.
- Diseña los ítems A y B:
- Haz clic en el ítem A o B en el repetidor.
Consejo: Puede ser cualquier ítem del grupo correspondiente. - (En el Inspector profesional) 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 del relleno de los ítems.
- Agrega una animación desde la pestaña Interacciones
(Nota: Solo las interacciones Pasar el cursor y Hacer clic están disponibles para los ítems del repetidor con patrones AB). - Aplica un cursor personalizado desde la sección Cursor.
- Repite los pasos a-b para el otro grupo de ítems.
- Haz clic en el ítem A o B en el repetidor.
Cambiar el estilo del repetidor
Establece cómo se reorganizan los elementos del repetidor cuando cambia el tamaño de la pantalla. Según el tipo de visualización que elijas (por ejemplo, tarjetas, lista, tipo cinta o cuadrícula), puedes personalizar los márgenes, la alineación, la direccionalidad y otras opciones.
Trabajar con breakpoints:
- Puedes tener un estilo diferente para el repetidor para cada breakpoint.
- Las listas y los controles deslizantes se usan comúnmente en tamaños de pantalla más pequeños, como tabletas y dispositivos móviles.
Para personalizar aún más el estilo de un repetidor:
- Selecciona el repetidor correspondiente.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Desplázate hacia abajo hasta Estilo.
- Personaliza el estilo del repetidor según el tipo de visualización seleccionado:
Tarjetas: opciones de estilo
Lista: opciones de estilo
Tipo cinta: opciones de estilo
Cuadrícula: opciones de estilo
Nota sobre los espacios:
Algunos navegadores antiguos no son compatibles con los espacios en blanco (por ejemplo, Chrome 76-83, Safari 12-14 y Edge 79-83). Esto significa que los visitantes que accedan al sitio desde estos navegadores no verán los espacios que estableciste entre los ítems del repetidor.
¿Te ha sido útil?
|