Divi Marco en imagen.

Poner en Divi marco en imágen, pequeños trucos Divi. Vamos a ver como de una forma muy fácil se puede poner un marco alrededor de una imagen en el módulo de Divi para que pueda estar un poco más vistoso.

Añadir un módulo de Imagen

Después de añadir la imagen poner en opciones avanzadas la clase CSS: nube_m-extended_borders

divi añadir marco en imagen 2

Por último y en la parte superior de ajustes pegar el código CSS

divi alinear botones 2


/*————————————————*/
/*————[ NB EXTENDED BORDERS ]————-*/
/*————————————————*/

.nb_m_image_extended_borders .et_pb_image_wrap {
padding: 30px!important;}
.nb_m_image_extended_borders .et_pb_image_wrap:before {
top: 20px;
bottom: 20px;
right: 10px;
left: 10px;
border-top: 10px solid #ccc;
border-bottom: 10px solid #ccc;
position: absolute;
content: ”;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
.nb_m_image_extended_borders .et_pb_image_wrap:after {
right: 20px;
left: 20px;
top: 10px;
bottom: 10px;
border-right: 10px solid #ccc;
border-left: 10px solid #ccc;
position: absolute;
content: ”;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
.nb_m_image_extended_borders:hover .et_pb_image_wrap:before {
right: 0px;
left: 0px;}
.nb_m_image_extended_borders:hover .et_pb_image_wrap:after {
top: 0px;
bottom: 0px;}

Si se desea modificar o personalizar el ancho (grosor) del borde, la altura, efecto hover al pasar por encima, en diferentes colores tenéis el sitio donde hay que modificar.

Este fragmento es el relleno total alrededor de la imagen. Se extenderá más allá de los bordes y nos permitirá cruzarlos en los bordes. Color Azul

Este fragmento de código asigna el margen desde la parte superior, inferior, izquierda y derecha, haciendo que los bordes se crucen. Color Verde

Estos fragmentos controlan hasta qué punto los bordes se extenderán más allá de las demás. Cuanto mayor sea el número, menos se extienden. Color Marrón

Este fragmento es el grosor del borde y el color. Color Rojo

 

Share This