ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

¿Quieres un control completo sobre cómo tu Trust Badges mira en tu escaparate? 🎨

Mientras que la pestaña Diseño ofrece amplias opciones de personalización, Custom CSS le da la flexibilidad para hacer ajustes avanzados de estilo que van más allá de la configuración estándar.

Ya sea que esté refinando el espaciado, coincidiendo con las estrictas directrices de marca, añadiendo efectos visuales personalizados, o resolviendo conflictos de estilos específicos para temas, Custom CSS proporciona control creativo completo sobre su diseño de Trust Badge.

⚠️ Antes de empezar

Antes de utilizar CSS personalizado:

• Asegúrate de que ya has creado una Insignia de confianza.
• Tener una comprensión básica de CSS o acceso a un desarrollador.
• Comprende que Custom CSS puede anular los ajustes de diseño estándar.

💡 Si aún no ha creado una Insignia de confianza, cree una antes de proceder con esta guía.

🛠️ Paso 1 - Abra la pestaña de diseño

Abrir el Hoppy Trust Badges app y navegar a la Trust Badge que quieres personalizar.

Entonces:

➡️ Haga clic en Diseño tab.

Desplazarse hasta que encuentres Custom CSS sección.

Esta sección contiene todas las herramientas necesarias para añadir y administrar estilo personalizado.

🎨 Paso 2 - Abra la Sección de CSS Personalizada

Dentro del Custom CSS sección que encontrará:

• Un editor de CSS
• A View Guide botón
• An Aplicar botón
• Una plantilla CSS de inicio

La plantilla de arranque contiene los selectores disponibles que se pueden personalizar para su Trust Badge.

Esto hace que sea más fácil comenzar el estilo sin necesidad de inspeccionar los elementos del escaparate manualmente.

✍️ Paso 3 - Agregue su CSS personalizado

El editor incluye varios selectores preconfigurados que apuntan elementos específicos de Trust Badge.

Selectores disponibles

Container

Selector

Descripción

.futureblink-trust-badge

Entire Trust Badge container

Título

Selector

Descripción

.futureblink-trust-badge .fb-title

Texto del título principal

.futureblink-trust-badge.mobile .fb-title

Movil título de estilo

💡 Para insignias flotantes, el selector de título utiliza .title en lugar de .fb-title.

Subheading

Selector

Descripción

.futureblink-trust-badge .subheading

Descripción del texto

.futureblink-trust-badge.mobile .subheading

Estilo de la descripción móvil

Iconos

Selector

Descripción

.futureblink-trust-badge .icon

Iconos de insignia

.futureblink-trust-badge.mobile .icon

Movil icono de estilo

Call-To-Action Button

Selector

Descripción

.futureblink-trust-badge .cta-button

CTA botón

.futureblink-trust-badge.mobile .cta-button

Botón móvil CTA

Ejemplo CSS

Para añadir padding al contenedor de placa y personalizar el título:

.futureblink-trust-badge {
padding: 20px;
}

.futureblink-trust-badge .fb-title {
color: #2c3e50;
font-size: 18px;
}

💡 Puede agregar selectores adicionales de CSS, consultas de medios, animaciones y reglas de estilo según sea necesario.

📱 Paso 4 - Añadir Mobile-Specific Styling

Para apuntar dispositivos móviles específicamente, utilice .mobile variación de los selectores.

Ejemplo:

.futureblink-trust-badge.mobile .fb-title {
font-size: 14px;
}

La aplicación se envuelve automáticamente .mobile selectores dentro de una consulta de medios móviles al renderizarlos en su escaparate.

Si prefieres escribir tus propias consultas mediáticas, se conservarán exactamente como entraron.

✅ Paso 5 - Aplica tu CSS

Una vez añadido su CSS:

➡️ Haga clic Aplicar.

Las actualizaciones de la vista previa en vivo automáticamente, lo que le permite revisar sus cambios de estilo inmediatamente.

Si desea eliminar su estilo personalizado más adelante:

➡️ Haga clic Reset.

Esto elimina su CSS personalizado y restaura la configuración de diseño estándar.

👀 Paso 6 - Revisar la vista previa

Después de aplicar su CSS:

➡️ Revisa la vista previa del escritorio.

➡️ Revisa la vista previa móvil.

Verificar que:

• El texto aparece correctamente.
• Los íconos permanecen debidamente alineados.
• El espaciamiento parece consistente.
• Los botones se muestran como se esperaba.

Si se requieren ajustes:

➡️ Actualice el CSS.

➡️ Haga clic Aplicar otra vez.

La vista previa se actualiza automáticamente después de cada cambio.

💾 Paso 7 - Guardar y publicar

Una vez satisfecho con el diseño:

➡️ Haga clic Guardar.

➡️ Haga clic Publish.

⚠️ Salvar solo no actualiza el escaparate.

La insignia de confianza también debe publicarse antes de que los clientes puedan ver los cambios.

⚠️ Notas importantes

CSS personalizado anula los ajustes estándar

Custom CSS tiene precedencia sobre la mayoría de la configuración de la pestaña Diseño.

Si un color, un espaciado o un ajuste de tipografía parece ser ignorado, es probable que sea superado por su CSS.

Manejo automático !importante

La aplicación añade automáticamente !important prioridad a las declaraciones de CSS al hacer estilos en el escaparate.

Usted no necesita añadir !important manualmente.

Estilizado

Personalizado CSS se ve automáticamente en la asignación de confianza específica que se está editando.

Esto ayuda a prevenir conflictos de estilo con:

• Otras insignias de confianza
• Elementos temáticos
• Otros componentes del almacén

Se permiten Selectores Empty

Usted no necesita utilizar cada selector proporcionado en la plantilla.

Sólo añadir estilos a los elementos que desea personalizar.

CSS Validation

El editor no valida la sintaxis CSS.

Si un estilo no se aplica correctamente:

➡️ Compruebe los nombres del selector.

➡️ Verifica los frenos y los semicolons.

➡️ Revise el CSS para errores de sintaxis.

❓ Solución de problemas

Si tus estilos no aparecen correctamente:

➡️ Confirmar que Aplicar ha sido pinchado.

➡️ Verificar la insignia de confianza ha sido Guardado y Publicado.

➡️ Compruebe que los nombres de selector coinciden exactamente con la plantilla proporcionada.

➡️ Prueba en una ventana Incognito o navegador privado.

➡️ Refresca el escaparate a los estilos de caché claros.

🎉 Resultado final

✅ Su Insignia de confianza se puede personalizar más allá de la configuración de diseño estándar.

✅ Marcar, espaciar, tipografía y estilo de icono se puede controlar más precisamente.

✅ Los diseños de escritorio y móviles se pueden estilo independientemente.

✅ Los estilos personalizados permanecen aislados a la señal de confianza seleccionada.

Custom CSS proporciona una manera flexible de crear una experiencia de fideicomiso más pulida y coherente al tiempo que conserva la simplicidad de las herramientas de diseño incorporadas de la aplicación. ✨

Actualizado el: 10/09/2026