En este artículo, aprenderá cómo editar CSS fácilmente en un sitio de WordPress con la ayuda de herramientas gratuitas. Para WordPress, tiene 2 complementos pagos con la ayuda de los cuales puede modificar CSS, a saber, Yellow Pencil y CSS Hero, sin embargo, no nos centraremos en ellos en este texto.
La herramienta que utilizaremos es Inspector visual de CanvasFlip. No lo instalamos en el sitio porque no es un complemento, sino una extensión de Google y solo funciona en Chrome. Puedes usarlo de manera muy fácil y sencilla, a diferencia de los 2 complementos mencionados anteriormente, que son más complejos. lienzoflip Es gratis y simplemente instálalo en tu navegador como una extensión y podrás comenzar a editar.

En cuanto a CanvasFlip, también existe una versión de pago, dentro de la cual tienes más opciones. Puedes guardar múltiples proyectos al mismo tiempo en su nube, puedes ver inmediatamente qué cambios has realizado en el sitio, de esta manera varias personas pueden cambiar un sitio al mismo tiempo, lo cual es muy útil para agencias de diseño web y para algunos proyectos donde trabajan varias personas.
Una de las desventajas de esta extensión es que no existe la opción de editar versiones responsivas para teléfonos móviles y tabletas, pero es bastante útil para realizar cambios en la versión de escritorio del sitio. Lo primero que debemos hacer es buscar la extensión en Google e instalarla. Una vez hecho esto, debe hacer clic en él en su navegador y aparecerá como en la imagen a continuación.

Cuando se hace clic en el botón Inspeccionar y comienza a mover el mouse por la página, notarás cómo puedes seleccionar diferentes secciones y cambiarlas en vivo en el sitio. Cuando haces clic en una sección, tienes la opción de cambiar su tamaño, márgenes, espaciado, color, fuente y muchas cosas más. Por supuesto, puede cambiar todo esto dentro de Elementor y el tema que utilizó para crear el sitio, pero es posible que algunas cosas no pueda cambiar, como el espacio del encabezado, o simplemente desee ver el cambio en vivo en el sitio. lejos. Entonces te resultará más fácil utilizar esta extensión.

Puedes cambiar todo lo mencionado anteriormente en Elementor, pero hay cosas que no puedes y sobre las cuales escribiremos en el resto del texto. Si hace clic en un artículo específico en la sección de artículos recientes de la página, verá que también puede cambiar el sombreado del elemento, lo cual no es el caso en Elementor. Puede cambiar cualquier cosa que desee en el sitio y luego descargar el archivo con los cambios de CSS. Para hacer esto, debe hacer clic en la opción Información y luego hacer clic en el botón Exportar cambios como en la imagen de abajo y descargarás el archivo con los cambios.

Cuando hizo clic en ese botón, recibió un archivo comprimido que contenía un archivo CSS. Ábrelo en un editor de texto y copia el código CSS que necesitas insertar en el sitio. Para hacer esto, debe hacer clic en la opción en el panel de control de su sitio. Personalizar. Luego, cuando hayas hecho eso, deberás abrir la opción. CSS/JS personalizado y dentro de él pegar el código css copiado y hacer clic en el botón Publicar. De esta manera, ha guardado los cambios en su sitio dentro del panel de control del sitio. Puedes comprobar por ti mismo que es bastante rápido y sencillo realizar cambios en el sitio de esta manera.
Fuente: YouTube