Visual Inspector: Nuevo Creador y Editor de CSS

Foto 17-11-17 20 04 17

Escrito por Sebastián Cardozo

Que es Visual Inspector Editor de CSS

Escrito por Sebastián Cardozo

Visual Inspector: Nuevo Creador y Editor de CSS

Que es Visual Inspector Editor de CSS

Si tienes una web en WordPress sabrás que usar un editor de CSS es algo muy util.

A veces queremos editar pequeñas cosas dentro de nuestro Blog o Web como por ejemplo:

  • Algún espacio que queremos reducir (spacing)
  • A veces queremos también cambiar colorestamaños de cuadros (padding)
  • Efectosopacidades y muchas cosas más.

Sinceramente todo lo que tenga que ver con códigos siempre es algo que me cuesta mucho.

Somos muchos los que hemos creado webs en WordPress y que a veces precisamos asistencia técnica en este tipo de asuntos.

Si usas un page builder como ElementorBeaver Builder o cualquier otro, siempre hay cosas que puedes editar ahí mismo, es decir, tienes la opción de hacerlo en el mismo plugin. Como por ejemplo cambiar el color de algún objeto.

Visual Inspector va mas allá. Puedes editar todo lo referente a tu WordPress con unos sencillos pasos. Por algo ya es una herramienta que unos pocos meses tiene aproximadamente 25.000 usuarios que la han probado.

¿Que es Visual Inspector?

Visual Inspector

Visual Inspector es una extensión de Chrome.

Si, así como has escuchado, una extensión.

Actualmente es una de las ideas que esta mejor valorada en Product Hunt, un sitio Web donde se comparten y desarrollan ideas innovadoras.

Si usas Google Chrome sabrás que las extensiones son una herramienta extremadamente práctica y utilizada por todos.

El funcionamiento de este editor de CSS se realiza mediante la extensión, por lo tanto no tendrás que instalar ningún plugin de WordPress que te ocupe espacio ni que tenga que ser actualizado constantemente.

Esto es una gran ventaja.

Tutorial de Visual Inspector: ¿Que puede hacer este Editor de CSS?

Para mostrarte de lo que es capaz esta herramienta, he decidido crear un mini tutorial explicativo.

Tutorial Visual Inspector 1

Acá tenemos el comienzo de uno de nuestros artículos del Blog.

Supongamos que quiero cambiar el estilo que tienen las breadcrumbs (migas de pan).

Además supongamos que quiero cambiar el color del nombre del autor y el estilo de la fuente.

  1. Primero que nada debemos instalar la extensión que se encuentra AQUÍ.
  2. La instalamos como cualquier extensión común y corriente, veremos que se añade a nuestro menú de extensiones.

Ahora viene lo divertido.

3. Elegimos una página de nuestro WordPress que queramos editar. En este caso he optado por editar la parte de arriba de nuestros artículos (también llamada single page post).

Tutorial Visual Inspector 2

4. Abrimos la extensión haciendo click en el icono celeste. (Si lo deseas puedes crearte una cuenta para un mejor uso).

Tutorial Visual Inspector 3

5. Nos abre la ventana donde ya vemos que ha reconocido la entrada en la que estamos posicionados. A continuación hacemos click en Inspect (Inspeccionar).

Con solo apretar Inspect ya tenemos acceso a la edición de cualquier objeto de nuestra web de WordPress.

Así de fácil…

6. Seleccionamos lo que queremos editar, en nuestro caso empezaré por cambiar el estilo de las breadcrumbs.

Simplemente haciendo click nos abre una nueva ventana con las propiedades del elemento. Como ven podemos editar muchísimas cosas, entre ellas el tipo de fuente, el estilo, la alineación, el espaciado, etc.

Como he dicho antes editare el estilo de las migas de pan pasando de ser “negrita” a “regular”.

Tutorial Visual Inspector 4

7. Haré algunos cambios más para que vean el producto inicial y el final. Pondré el nombre del autor subrayado, agregaré una letra negrita a la fecha del post, pondré un borde en el artículo y cambiaré algunos detalles más de las migas de pan.

Reitero, todo al alcance de un clic.

Resultados de los cambios

Como ven son pequeños cambios, pero imaginen poder aplicar todo esto a distintas zonas de sus Blogs con tanta facilidad.

8. Aún no hemos terminado, no hemos guardado los cambios. Para esto nos vamos a la pestaña info (la primera de todas) y ponemos export changes (exportar cambios). 

Nos descargará un archivo con todo el código de nuestros cambios.

¡Posteriormente podemos incluir este código en nuestro theme y listo!

Nota: el archivo que debemos abrir para copiar a nuestro WordPress es el style_change. Puedes abrir dicho archivo con el block de notas (notepad).

¿No les parece genial?

Su único punto negativo es que todavía no hay una edición para móvil. Todavía no es posible visualizar como quedarían los cambios que realicemos en el móvil, pero estoy seguro que si no has tocado mucha cosa quedará como deseas.

Además los desarrolladores de la extensión están trabajando en ello y seguramente pronto lo agregarán.

Tiene pinta de ser una de esas herramientas que se van a volver muy populares así que te recomiendo echarle un vistazo.

Les dejo también un video explicativo de los propios creadores de esta maravilla.

Iremos actualizando el post a medida de que la extensión se vaya actualizando.

Si lo deseas, puedes compartir este artículo:

Leave a Comment

Colaborar