Explora nuestro Foro de Soporte en Diseño UX/UI, un espacio dedicado a resolver tus dudas y enriquecer... Ver más
PublicoGrupo
Organizadores:
Organizado por
Descripción del grupo
Explora nuestro Foro de Soporte en Diseño UX/UI, un espacio dedicado a resolver tus dudas y enriquecer tus conocimientos en este campo. Aquí encontrarás discusiones, consejos y recursos sobre las últimas tendencias y mejores prácticas en diseño de experiencia e interfaz de usuario. ¡Sumérgete en el mundo del UX/UI con nosotros!
¡Gracias por tu mensaje! Entiendo que deseas agregar una lista con viñetas en la parte posterior de una Flip Card en Divi Pixel, pero el módulo no tiene un editor de texto completo para esto. Puedes lograrlo utilizando un poco de CSS personalizado. Aquí te explico cómo hacerlo.
Solución con CSS
Abre la página donde estás creando la Flip Card con el Constructor Divi. Selecciona el módulo de Flip Card y ve a la configuración de la parte posterior de la tarjeta (Back).
Añadir el Contenido HTML:
Aunque el módulo no tiene un editor de texto completo, puedes usar el campo de contenido personalizado o HTML para agregar el código de una lista.
Inserta el siguiente código HTML en el campo de contenido de la parte posterior de la Flip Card:
<ul class="flip-card-bullets">
<li>Punto 1</li>
<li>Punto 2</li>
<li>Punto 3</li>
</ul>
Añadir el CSS Personalizado:
Ve a Divi > Opciones del tema > CSS personalizado o utiliza la opción de CSS personalizado dentro de la configuración del módulo si está disponible.
Añade el siguiente código CSS para estilizar la lista con viñetas:
.flip-card-bullets {
list-style-type: disc; /* Esto crea las viñetas */
padding-left: 20px; /* Espaciado para alinear el texto con las viñetas */
margin: 10px 0;
}
.flip-card-bullets li {
margin-bottom: 10px; /* Espaciado entre los elementos de la lista */
font-size: 16px; /* Ajusta el tamaño de la fuente si es necesario */
color: #333; /* Color del texto */
}
Con estos pasos, podrás agregar una lista de viñetas en la parte posterior de la Flip Card usando HTML y CSS personalizados. Esta solución te permitirá tener el control del diseño de las viñetas, y puedes ajustarla según las necesidades de tu proyecto.
Espero que esta guía te sea útil. Si tienes alguna otra pregunta o necesitas más asistencia, no dudes en contactarme.
Saludos, Jefferson 😊🖐
Aprendizaje basado en proyectos reales
Nuestros cursos son hechos trabajando proyectos reales que quedan con una demo en línea. Nuestro sistema de enseñanza se basa un 28% en teoría y 72% en práctica.
Micro Learning
Nuestros cursos están distribuidos en pequeñas clases con objetivos específicos en cada una de ellas.
Certificaciones
Al finalizar cada curso, podrás descargar tu certificado de los conocimientos adquiridos.
Soporte personalizado
Acompañamos a nuestros alumnos en su proceso de aprendizaje, resolviendo dudas a diario.
Siempre actualizados
Mejoramos y actualizamos tanto nuestro contenido como interfaz de aprendizaje constantemente.
Ready to start?
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros 😍