Utilizar imagenes SVG en DIVI

Sep 3, 2017 | CSS, Diseño, DIVI (Elegant Themes), General

DIVI trae de por sí una gran cantidad de iconos que podemos utilizar en nuestros diseños. Si a estos les sumamos los que también nos proporciona la pagina Font Awesome la cantidad se incrementa enormemente, pero aún así, hay veces que no encontramos ese icono que verdaderamente nos hace falta y queremos colocar en nuestro diseño.

Una buena opción sería utilizar imágenes con formato SVG, las cuales son vectoriales, por lo que no pierden calidad a la hora de ser reescaladas.

Cabe decir que WordPress de por sí no reconoce este tipo de extensión, por lo que habría que incluir un plugin, el cual menciono más abajo.

La forma de tratar este tipo de imágenes difiere un poco en el tema CSS ya que no se tratan de iconos en sí, sino que siguen siendo imágenes, por lo que si queremos escalarlas a un cierto tamaño, por podríamos utilizar font-size sino width, o si queremos cambiarles el color al pasar el ratón sobre ellas no utilizaríamos :hover {color:???}, sino :hover {fill:???}.

Vamos a empezar.

Lo primero sería instalar el plugin SVG support

 

Este plugin lo podréis encontrar en el repositorio de WordPress.

Una vez instalado y activado nos vamos a apariencia Ajustes > SVG support y activamos la opción Enable Advanse Mode y automatically insert class

SVG Advance Mode Namaste Web

Ahora colocaremos nuestra imagen SVG y le daremos una serie de propiedades para que cuando pasemos el ratón por lo alto cambie de color y la rotemos. Para ello voy a escoger una imagen de mi página favorita para encontrar iconos en formato SVG que es Flaticon

Esta página te permite bajar los iconos ya sean en colores o blanco y negro en formato PNG, SVG, EPS, PSD…

En este caso me he bajado uno como es normal en formato SVG.

Como vemos me he descargado una imagen en negro. Lo que voy a hacer es que cuando pase el ratón por lo alto, el color se vuelva rojo y rote 45 grados.

Una cosa bastante importante, es que para que esto funcione, no deberemos colocar el modulo imagen de DIVI, ya que no funcionaría. Por defecto DIVI coloca un contenedor y dentro una imagen, pero no la imagen en sí directamente, por lo que para que esto funcione deberemos colocar la imagen en modulo texto con la opción añadir objeto.

Ejemplo de utilizar SVG

Esto es un ejemplo de como utilizar el pluginSVG support

Como vemos es un módulo blurb, pero hecho a código, lo cual no es nada dificil. Ahora al pasar el ratón sobre la pantalla, se aplicarán todos los efectos. La clase iconosvg la crea el propio plugins y es la que nos permite realizar todos los cambios sobre la imagen, la clase pantalla se la he asignado yo.

Debemos acceder a esta pantalla

.pantalla
{
width: 150px;
height: auto;
transition: all 1s;
}

.pantalla:hover
{
fill: red;
transform: rotate(45deg);
}

Colocamos el código CSS en el lugar correspondiente y listo, nuestro icono cambiará de color y rotará.

Ejemplo de utilizar SVG

Esto es un ejemplo de como utilizar el pluginSVG support

Esto ha sido todo, espero que os haya sido de utilidad, y si tenéis alguna duda, no dudéis en comentarlas en este Post.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Share This
A %d blogueros les gusta esto: