CSS personalizado para el widget de reseñas: guía completa y referencia de clases

CSS personalizado para el widget de reseñas

En esta guía

Comprender el CSS y las clases de los widgets

Cómo utilizar la tabla de contrato de estilo

Cómo crear CSS personalizado para su widget

Los widgets de Mirror App incluyen una amplia gama de opciones de estilo integradas. Sin embargo, si necesita más control, puede utilizar CSS personalizado para ajustar el aspecto y hacer que el widget combine a la perfección con el diseño de su sitio web.

Comprender el CSS y las clases de los widgets

CSS (Hojas de estilo en cascada) es un lenguaje que controla el aspecto de los elementos en una página. Mientras que el HTML define la estructura (texto, imágenes, botones), el CSS se encarga de la presentación visual: colores, fuentes, espaciado, bordes y diseño.

El CSS funciona seleccionando elementos y aplicándoles estilos. Puede dirigirse a los elementos utilizando sus etiquetas HTML, clases o ID.

Para aplicar CSS personalizado a su widget, primero debe saber qué clases están disponibles. Los nombres de estas clases aparecen en la tabla de contrato de estilo de esta página. Utilice solo esas clases: son estables y seguras para aplicar estilos.

Clases de estilo que puede utilizar

✅ Copied!

Cómo utilizar la tabla de contrato de estilo

La tabla contiene todas las clases CSS que puede utilizar para personalizar su widget. Cada fila le proporciona tres datos:

• Componente: la parte del widget (p. ej., widget, encabezado, contenido, valoración)

• Propiedad: el elemento específico dentro de ese componente (p. ej., título, imagen, elementos)

• Clase: el nombre exacto de la clase CSS; cópialo y pégalo en tu CSS personalizado

Para cambiar el color del título del encabezado, abre la tarjeta del encabezado, busca el título en Propiedad y copia la clase que aparece al lado

Cómo crear CSS personalizado para tu widget

Abre el panel de control de tu aplicación Mirror y selecciona el widget que deseas personalizar

Ve a la pestaña CSS

Copia el nombre de la clase de la tabla de contrato de estilos

Pégalo en el campo de CSS personalizado

Añade tus estilos dentro de las llaves

• Utiliza siempre el nombre de clase exacto tal como se muestra en la tabla

• Para anular estilos existentes, añade !important después del valor de la propiedad

.wg-header {
  padding: 20px !important;
  background: #1a1a2e;
}

• Los cambios se aplican al instante en la vista previa

• El elemento que estás personalizando se resaltará en cuanto añadas o edites una regla CSS

Consejos de CSS para escritorio y móvil

Usa consultas de medios para aplicar diferentes estilos según el tamaño de la pantalla.

Para pantallas móviles (hasta 480px de ancho):

@media (max-width: 480px) {
  .wg-card {
    padding: 12px;
    font-size: 14px;
  }
}

Para pantallas de escritorio (481px en adelante):

@media (min-width: 481px) {
  .wg-card {
    padding: 24px;
    font-size: 16px;
  }
}

Puedes ajustar los puntos de interrupción para que coincidan con el sistema de diseño de tu sitio web.

💡 Consejos adicionales

✅ Vista previa en vivo: todos los cambios de CSS aparecen al instante en el editor

✅ Usa solo las clases de la tabla de Contrato de Estilos: son estables y no causarán errores

✅ Prueba antes de publicar: usa la vista previa del editor para asegurarte de que todo se vea bien

✅ Mantén la sencillez: evita el exceso de estilos; los cambios pequeños suelen funcionar mejor

Was This Article Helpful?

Yes, Thanks

Not Really

¿Todavía tienes preguntas? Contáctanos

Consejos de diseño