[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/personalizacion-de-wordpress-para-usuarios-de-bricolaje\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/personalizacion-de-wordpress-para-usuarios-de-bricolaje\/","headline":"Personalizaci\u00f3n de WordPress para usuarios de bricolaje","name":"Personalizaci\u00f3n de WordPress para usuarios de bricolaje","description":"\u00bfAlguna vez ha querido editar temporalmente una p\u00e1gina web para ver c\u00f3mo se ver\u00eda con colores, fuentes, estilos, etc. espec\u00edficos? Es posible con una herramienta ... Leer m\u00e1s<\/a>","datePublished":"2021-06-28","dateModified":"2021-06-28","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Personalizacion-de-WordPress-para-usuarios-de-bricolaje.jpg","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Personalizacion-de-WordPress-para-usuarios-de-bricolaje.jpg","height":340,"width":520},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/personalizacion-de-wordpress-para-usuarios-de-bricolaje\/","about":["Tutoriales Wordpress"],"wordCount":943,"articleBody":"\u00bfAlguna vez ha querido editar temporalmente una p\u00e1gina web para ver c\u00f3mo se ver\u00eda con colores, fuentes, estilos, etc. espec\u00edficos? Es posible con una herramienta que ya existe en su navegador llamada Inspect Element. Este es un sue\u00f1o hecho realidad para todos los usuarios de bricolaje cuando se enteran. En este art\u00edculo, le mostraremos los conceptos b\u00e1sicos del elemento inspeccionar y c\u00f3mo usarlo con su sitio de WordPress. \u00bfQu\u00e9 es Inspect Element o Developer Tools?Los navegadores web modernos como Google Chrome y Mozilla Firefox tienen herramientas integradas que permiten a los desarrolladores web depurar errores. Estas herramientas muestran el c\u00f3digo HTML, CSS y JavaScript de una p\u00e1gina y c\u00f3mo el navegador ejecuta el c\u00f3digo.Con la herramienta Inspeccionar elemento, puede editar c\u00f3digo HTML, CSS o JavaSCript para cualquier p\u00e1gina web y ver sus cambios en vivo (solo en su computadora). Para el propietario de un sitio web de bricolaje, estas herramientas pueden ayudarlo a obtener una vista previa de c\u00f3mo se ver\u00eda el dise\u00f1o de un sitio sin hacer los cambios para todos. Para los escritores, estas herramientas son incre\u00edbles porque pueden cambiar f\u00e1cilmente la informaci\u00f3n de identificaci\u00f3n personal al tomar sus capturas de pantalla, lo que elimina la necesidad de difuminar los elementos por completo. Para los agentes de soporte, es una excelente manera de identificar el error que podr\u00eda estar causando que sus galer\u00edas no se carguen o que sus controles deslizantes no funcionen correctamente.Solo estamos rascando la superficie de los casos de uso. Inspeccionar elemento es realmente poderoso.En este art\u00edculo, nos centraremos en Inspect Element en Google Chrome porque ese es nuestro navegador preferido. Firefox tiene sus propias herramientas de desarrollo que tambi\u00e9n se pueden invocar seleccionando inspeccionar elemento en el men\u00fa del navegador.\u00bfListo? Empecemos.Tutorial en videoSi no le gusta el video o necesita m\u00e1s instrucciones, contin\u00fae leyendo.Lanzamiento de Inspect Element y localizaci\u00f3n del c\u00f3digoPuede iniciar la herramienta inspeccionar elemento presionando las teclas CTRL + Shift + I en su teclado. Alternativamente, puede hacer clic en cualquier lugar de una p\u00e1gina web y seleccionar inspeccionar elemento en el men\u00fa del navegador. La ventana de su navegador se dividir\u00e1 en dos y la ventana inferior mostrar\u00e1 el c\u00f3digo fuente de la p\u00e1gina web. La ventana de la herramienta del desarrollador se divide a su vez en dos ventanas. A su izquierda, ver\u00e1 el c\u00f3digo HTML de la p\u00e1gina. En el panel de la derecha, ver\u00e1 las reglas de CSS. A medida que mueva el mouse sobre la fuente HTML, ver\u00e1 el \u00e1rea afectada resaltada en la p\u00e1gina web. Tambi\u00e9n notar\u00e1 que las reglas de CSS cambian para mostrar el CSS del elemento que est\u00e1 viendo. Tambi\u00e9n puede llevar el puntero del mouse a un elemento de la p\u00e1gina web, hacer clic con el bot\u00f3n derecho y seleccionar inspeccionar elemento. El elemento que se\u00f1al\u00f3 se resaltar\u00e1 en el c\u00f3digo fuente. Edici\u00f3n y depuraci\u00f3n de c\u00f3digo en Inspect ElementTanto el HTML como el CSS de la ventana de inspecci\u00f3n del elemento son editables. Puede hacer doble clic en cualquier parte del c\u00f3digo fuente HTML y editar el c\u00f3digo como desee. Tambi\u00e9n puede hacer doble clic y editar cualquier atributo y estilo en el panel CSS. Para agregar una regla de estilo personalizada, haga clic en el icono + en la parte superior del panel CSS.A medida que realice cambios en CSS o HTML, esos cambios se reflejar\u00e1n en el navegador al instante. Tenga en cuenta que los cambios que realice aqu\u00ed no se guardan en ning\u00fan lugar. Inspect element es una herramienta de depuraci\u00f3n y no escribe los cambios en los archivos de su servidor. Esto significa que si actualiza la p\u00e1gina, todos sus cambios desaparecer\u00e1n. Para realizar los cambios, tendr\u00e1 que editar la hoja de estilo de su tema de WordPress o la plantilla relevante para agregar los cambios que desea guardar. Antes de comenzar a editar su tema de WordPress existente con la herramienta Inspeccionar elemento, aseg\u00farese de guardar todos sus cambios creando un tema secundario. Encuentre errores f\u00e1cilmente en su sitioEl elemento Inspeccionar tiene un \u00e1rea llamada Consola que muestra todos los errores que existen en su sitio web. Al intentar depurar un error o solicitar asistencia a los autores de complementos, siempre es \u00fatil mirar aqu\u00ed para ver cu\u00e1les son los errores.Por ejemplo, si fueras un Cliente de OptinMonster pregunt\u00e1ndose por qu\u00e9 su opci\u00f3n de suscripci\u00f3n no se est\u00e1 cargando, entonces puede encontrar f\u00e1cilmente el problema “el slug de su p\u00e1gina no coincide”.Si su barra compartida no funcionaba correctamente, puede ver que hay un error de JavaScript.Herramientas como Inspect Element Console y SupportAlly ayudarlo a obtener una mejor atenci\u00f3n al cliente porque el equipo de soporte t\u00e9cnico adora a los clientes que toman la iniciativa para brindar comentarios detallados sobre el problema.Esperamos que este art\u00edculo le haya ayudado a aprender los conceptos b\u00e1sicos del elemento de inspecci\u00f3n y c\u00f3mo utilizarlo con su sitio de WordPres. Tambi\u00e9n es posible que desee echar un vistazo a la hoja de trucos CSS predeterminada generada por WordPress para acelerar sus habilidades de desarrollo de temas. Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Google+. 4.6 \/ 5 ( 282 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"Personalizaci\u00f3n de WordPress para usuarios de bricolaje","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/personalizacion-de-wordpress-para-usuarios-de-bricolaje\/#breadcrumbitem"}]}]