Tutorial Divi: Hacer que todas las esquinas sean redondeadas

Casi todos los módulos de Divi tienen, por defecto, las esquinas cuadradas. Me refiero a elementos como las tablas de precios, el blog en rejilla, las pestañas o las imágenes en los anuncios.

Si prefieres que sean redondeadas puedes conseguirlo añadiendo un poco de CSS desde el personalizador.

Abre el personalizador y, en la pestaña CSS adicional, añade lo siguiente:

/*Esquinas redondeadas en módulos Divi*/
 
@media only screen and ( min-width:768px) and (max-width: 980px ) {
.et_pb_featured_table:nth-child(3), .et_pb_featured_table:nth-child(4){margin-top: 30px;}
 
.et_pb_pricing_table:nth-child(odd){
    -webkit-border-top-left-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-topleft:6px;
    -moz-border-radius-bottomleft:6px;
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}
 
.et_pb_pricing_table:nth-child(odd) .et_pb_pricing_heading{
    -webkit-border-top-left-radius:4px;
    -moz-border-radius-topleft:4px;
    border-top-left-radius:4px;
}
 
.et_pb_pricing_table:nth-child(even){
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-topright:6px;
    -moz-border-radius-bottomright:6px;
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
}
 
.et_pb_pricing_table:nth-child(even) .et_pb_pricing_heading{
    -webkit-border-top-right-radius:4px;
    -moz-border-radius-topright:4px;
    border-top-right-radius:4px;
}
 
}
 
@media only screen and (max-width: 767px){
.et_pb_pricing_table{
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}
 
.et_pb_pricing_heading, .et_pb_tab_active:first-child{
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
 
}
 
 
.et_pb_featured_table{
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}
 
.et_pb_featured_table .et_pb_pricing_heading, .et_pb_tabs_controls, .et_pb_column_1_3 .et_pb_tab_active:first-child, .et_pb_column_1_4 .et_pb_tab_active:first-child, .woocommerce-tabs ul.tabs {
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
 
.et_pb_pricing_table:first-child {
    -webkit-border-top-left-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-topleft:6px;
    -moz-border-radius-bottomleft:6px;
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}
 
.et_pb_pricing_table:first-child .et_pb_pricing_heading, .et_pb_tab_active:first-child{
    -webkit-border-top-left-radius:4px;
    -moz-border-radius-topleft:4px;
    border-top-left-radius:4px;
}
 
.et_pb_pricing_table:last-child {
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-topright:6px;
    -moz-border-radius-bottomright:6px;
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
}
 
.et_pb_pricing_table:last-child .et_pb_pricing_heading{
    -webkit-border-top-right-radius:4px;
    -moz-border-radius-topright:4px;
    border-top-right-radius:4px;
}
 
.et_pb_all_tabs, .nav li ul, .et-search-form{
    -webkit-border-bottom-left-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomleft:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}
 
 .nav li ul ul{
    -webkit-border-bottom-right-radius:4px;
    -moz-border-radius-bottomright:4px;
    border-bottom-right-radius:4px;
 }
 
.et_pb_main_blurb_image img.et-animated, .et_pb_counter_container, .et_pb_slider, .et_pb_testimonial, .et_pb_promo, .et_pb_image, .et_pb_portfolio_item img, .et_pb_post img, .et_pb_blog_grid .et_pb_post, .et_pb_newsletter, .et_pb_toggle, .et_pb_tabs, .et_pb_contact p input, .woocommerce ul.products li.product a img, .woocommerce-page div.product div.images img, .woocommerce-tabs, .et_overlay{
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    border-radius: 6px !important;
}
 
.et_pb_blog_grid .et_pb_post img{
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    -webkit-border-bottom-left-radius:0;
    -webkit-border-bottom-right-radius:0;
    -moz-border-radius-bottomleft:0;
    -moz-border-radius-bottomright:0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
 }

Si quieres ampliar el radio de redondez simplemente amplía los píxeles del ejemplo al que más te guste.

La diferencia en el módulo de tabla de precios sería así:

Y este en el blog en rejilla:

Espero que te haya gustado este truco para Divi y te ayude a crear webs más personalizadas para ti y tus clientes.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.8 / 5. Total de votos: 8

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido