Divi Marco en imagen

Divi marco en imagen

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

 

Suscríbete a nuestros boletines

Mantente informado con las últimas tendencias.

Únicamente enviaremos información altamente interesante y novedosa.

¿Necesitas una auditoría SEO?

Conecta con algunos de nuestros expertos de forma totalmente GRATUITA

Comentarios

¿Qué opinas?

0 comentarios

Enviar un comentario

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

Suscríbete

Recibe noticias semanales

Nulla porttitor pretium blandit. Suspendisse id nulla et erat feugiat vehicula. Nam ac sapien maximus sem auctor sollicitudin sit amet a enim. Nulla facilisi. Donec et commodo tellus.