Añadir colores planos a los productos en la tienda divi

Cómo añadir colores planos a los productos en la tienda divi

La semana pasada hablamos de cómo configurar el módulo de tienda WooCommerce en Divi, en este artículo vamos a aprender a añadir colores planos a los productos en la tienda divi.

Pasos previos

Lo primero que tenemos que hacer, lógicamente, tener el instalado el tema Divi. Si no lo tienes instalado aun, puedes descargarlo desde el apartado de Recursos de la web.

Después de terminar este artículo, los productos de tu tienda se verían así:

Añadir colores planos a los productos en la tienda divi

 

Para hacerlo, tenemos que activar el Editor de Divi e ir a la ficha Ajustes avanzados de diseño, y después en CSS personalizado.

Ajustes avanzados de diseño

Vamos al apartado Fuente en título y vamos a seleccionamos la fuente Satisfy a un tamaño de 20 y con el color #ef285a

Configuraciónn de la fuente en divi

También cambiamos el tamaño de la fuente del precio a un tamaño de 14px.

Tamaño de la fuente del precio

CSS personalizado

Continuando con los cambios necesarios, tenemos que irnos a la ficha CSS personalizado y nos desplazamos hasta la opción Producto y pegamos el siguiente código:

background-color: #ffebee;

A continuación vamos al apartado Elemento principal y añadimos la el código necesario para centrar los textos:

text-align: center;

Y por último, para quitar las estrellitas del diseño original, debemos ir a la opción Puntuación y pegamos este código:

display:noche !important;

Conclusión

Como has visto, con unas pocas (y sencillas) líneas de código, podemos crear un efecto visual limpio que le dará otro aspecto a nuestras tiendas creadas con Divi.

Colores planos en la tienda divi

 

 

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puede que también te interese...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *