{"id":40198,"date":"2021-03-25T12:43:13","date_gmt":"2021-03-25T11:43:13","guid":{"rendered":"https:\/\/kinsta.com\/?p=90115"},"modified":"2025-02-14T12:46:23","modified_gmt":"2025-02-14T11:46:23","slug":"imagenes-fondo-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/","title":{"rendered":"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema"},"content":{"rendered":"<p>Las im\u00e1genes de fondo de WordPress vienen en todas las formas. Puedes subir una imagen de fondo para todo tu sitio web, colocarla detr\u00e1s de los botones o establecer un fondo de color s\u00f3lido para tu p\u00e1gina de inicio de sesi\u00f3n. Independientemente de d\u00f3nde quieras ponerlas, es esencial entender los fundamentos para <a href=\"https:\/\/kinsta.com\/es\/blog\/aumentar-tamano-maximo-subida-archivos-wordpress\/\">subir una imagen<\/a>, incluyendo una imagen de fondo.<\/p>\n<p>En este art\u00edculo te explicaremos qu\u00e9 es una imagen de fondo y c\u00f3mo puedes editarla para obtener un mejor resultado. Tambi\u00e9n repasaremos c\u00f3mo conseguir r\u00e1pidamente que las im\u00e1genes de fondo se activen en tu sitio y <a href=\"https:\/\/kinsta.com\/es\/blog\/errores-wordpress\/\">resolver cualquier problema<\/a> que pueda ocurrir en el camino.<\/p>\n<p>\u00bfListo? \u00a1Pong\u00e1monos manos a la obra!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p>Echa un vistazo a nuestra <a href=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\">gu\u00eda de v\u00eddeo<\/a> para a\u00f1adir im\u00e1genes de fondo de WordPress:<\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\"><\/kinsta-video>\n<h2>\u00bfQu\u00e9 Es una Imagen de Fondo de WordPress?<\/h2>\n<p>Una imagen de fondo de WordPress sirve como fondo completo de tu sitio web. Tambi\u00e9n se llama fondo personalizado.<\/p>\n<figure style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WordPress-Background-Image-Example-e1614937251379.png\" alt=\"Un ejemplo de imagen de fondo de WordPress\" width=\"1100\" height=\"671\"><figcaption class=\"wp-caption-text\">Un ejemplo de imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>El fondo tambi\u00e9n puede ser de un color s\u00f3lido.<\/p>\n<p>Independientemente de la opci\u00f3n que elijas, el archivo <strong>functions.php <\/strong>se encarga de la imagen de fondo en un tema de WordPress. Tambi\u00e9n es mostrada por el archivo <strong>header.php <\/strong>de WordPress.<\/p>\n<p>Como resultado, los desarrolladores de temas tienen un mayor control sobre la activaci\u00f3n o no de la funci\u00f3n de fondo personalizado para tu <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">tema de WordPress<\/a>. Todav\u00eda puedes <strong>activar <\/strong>o <strong>desactivar <\/strong>la funcionalidad, pero el tema de tu sitio suele dictar la configuraci\u00f3n por defecto.<\/p>\n<p>Hay varios tipos de fondos que puedes implementar en WordPress. Puedes optar por un fondo est\u00e1ndar para todo el sitio web o por uno que se sit\u00fae detr\u00e1s de elementos espec\u00edficos como las barras laterales y los art\u00edculos.<\/p>\n<p>Tambi\u00e9n es posible crear fondos personalizados para lugares m\u00e1s espec\u00edficos del sitio de WordPress:<\/p>\n<ul>\n<li>Detr\u00e1s de una p\u00e1gina o entrada de WordPress<\/li>\n<li>En una p\u00e1gina de categor\u00eda de WordPress<\/li>\n<li>Dentro de un bloque de contenido para una p\u00e1gina o una entrada<\/li>\n<li>En la <a href=\"https:\/\/kinsta.com\/es\/blog\/encontrar-wordpress-url\/\">p\u00e1gina de inicio de sesi\u00f3n<\/a><\/li>\n<li>Detr\u00e1s del men\u00fa de navegaci\u00f3n<\/li>\n<li>En las p\u00e1ginas de Mantenimiento o Pr\u00f3ximamente<\/li>\n<\/ul>\n<p>En general, si el soporte de fondo personalizado est\u00e1 habilitado en un tema, el usuario tiene la posibilidad de subir una imagen o elegir un color para llenar la totalidad del fondo del sitio.<\/p>\n<p>Los ajustes se encuentran en el panel de control de WordPress en <strong>Apariencia &gt; Personalizar &gt; Imagen de fondo. <\/strong>Sin embargo, es posible utilizar otros tipos de fondos a trav\u00e9s de <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/\">constructores de p\u00e1ginas de arrastrar y soltar<\/a>, plugins y diferentes opciones.<\/p>\n<p>Subir una imagen de fondo en el panel de control es solo una parte del proceso. Despu\u00e9s, tienes que configurar los ajustes de la imagen de fondo. A veces puedes dejar los ajustes como est\u00e1n, mientras que otras veces, es importante reconfigurar los ajustes para asegurar que la imagen se vea excelente.<\/p>\n<p>Los ajustes para una imagen de fondo de WordPress incluyen:<\/p>\n<ul>\n<li>Colores de fondo<\/li>\n<li>Dimensionamiento<\/li>\n<li>Posici\u00f3n de la imagen<\/li>\n<li>Si la imagen debe repetirse o no<\/li>\n<li>Opciones para llenar la pantalla o estirar la imagen<\/li>\n<\/ul>\n<p>Primero repasaremos las mejores pr\u00e1cticas al usar im\u00e1genes de fondo de WordPress. A continuaci\u00f3n, vamos a entrar en c\u00f3mo establecer una imagen de fondo de WordPress en varias situaciones.<\/p>\n\n<h2>Los Numerosos Estilos de Fondos<\/h2>\n<p>Una verdadera ventaja de los fondos de WordPress es que no todos son <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-archivos-de-imagen\/\">im\u00e1genes<\/a> est\u00e1ticas. Puedes encontrarte con varios tipos de fondos, que van desde v\u00eddeos a patrones de fotos o presentaciones de diapositivas.<\/p>\n<figure style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Kinsta-Background-Example-e1615198933785.png\" alt=\"Un ejemplo de imagen de fondo en el sitio de Kinsta\" width=\"1100\" height=\"693\"><figcaption class=\"wp-caption-text\">Un ejemplo de imagen de fondo en el sitio de Kinsta<\/figcaption><\/figure>\n<p>A menudo se pueden implementar fondos \u00fanicos con la ayuda de CSS personalizado o plugins (o ambos). En este art\u00edculo te mostramos ambos m\u00e9todos.<\/p>\n<p>Aqu\u00ed tienes algunos estilos de fondo a tener en cuenta:<\/p>\n<ul>\n<li><strong>Im\u00e1genes de fondo est\u00e1ndar:<\/strong> Son im\u00e1genes est\u00e1ticas (PNG, JPG y otros formatos de imagen) que se extienden por la mayor parte del espacio del sitio web y se sit\u00faan detr\u00e1s del contenido principal. Sus ventajas son la simplicidad, las opciones para las fotos de alta resoluci\u00f3n y la compatibilidad por defecto con el n\u00facleo de WordPress. Las desventajas van desde su tendencia a interferir con la visibilidad de los elementos en primer plano hasta la ralentizaci\u00f3n del sitio por una imagen grande y de alta resoluci\u00f3n.<\/li>\n<li><strong>Fondos de color s\u00f3lido: <\/strong>La imagen de fondo de <a href=\"https:\/\/kinsta.com\/es\/blog\/combinaciones-colores-sitios-web\/\">color s\u00f3lido<\/a> es muy \u00fatil cuando quieres a\u00f1adir algo de vitalidad a tu sitio, pero no tienes una imagen que se ajuste a tu marca o una que se vea bien como fondo. El fondo de color tambi\u00e9n presenta una imagen m\u00e1s limpia y profesional, y no lleva mucho tiempo implementarlo. Son estupendos para que coincidan con tu marca sin necesidad de c\u00f3digo personalizado o de un plugin.<\/li>\n<li><strong>Fondos degradados:<\/strong> Un fondo degradado pasa de un color a otro. Es m\u00e1s atractivo visualmente que un color s\u00f3lido, no lleva mucho tiempo a\u00f1adirlo, y puedes a\u00f1adir uno con muchos plugins. El principal inconveniente es que un primer plano puede aparecer bien en un extremo del degradado pero no en el otro.<\/li>\n<li><strong>Fondos de patrones o texturas:<\/strong> Todos los fondos de patrones y texturas son fotos, pero se centran en elementos repetitivos de la imagen o en una textura de primer plano, como un panel de madera o un trozo de hierba. Lo bueno de un patr\u00f3n o una textura es que funciona de maravilla como fondo, ya que puedes alargarlo y la mayor\u00eda de la gente no se dar\u00e1 cuenta si hay una interrupci\u00f3n en el patr\u00f3n cuando la imagen no es lo suficientemente grande.<\/li>\n<li><strong>Fondos de presentaci\u00f3n de im\u00e1genes: <\/strong>Un fondo de <a href=\"https:\/\/kinsta.com\/es\/blog\/slider-wordpress\/\">presentaci\u00f3n de im\u00e1genes<\/a> permite a los propietarios de sitios compartir m\u00faltiples tipos de dise\u00f1os o fotos en el fondo, impulsando los esfuerzos para ajustar el estado de \u00e1nimo cuando un cliente se desplaza a trav\u00e9s de tu sitio. Sin embargo, los pases de diapositivas pueden distraer o ralentizar su sitio.<\/li>\n<li><strong>Fondos de v\u00eddeo:<\/strong> Los fondos de v\u00eddeo son atractivos, divertidos de ver y f\u00e1ciles de retratar la naturaleza de tu marca. Sin embargo, tambi\u00e9n provocan problemas de rendimFento si no se hacen correctamente y podr\u00edan restarle atenci\u00f3n a tu embudo de ventas. Adem\u00e1s, los v\u00eddeos de fondo deben tener las dimensiones perfectas y reproducirse en los momentos adecuados. Tambi\u00e9n pueden resultar caros de hacer, a menos que opte por v\u00eddeos de stock gratuitos.<\/li>\n<\/ul>\n<h2>Mejores Pr\u00e1cticas para Utilizar las Im\u00e1genes de Fondo de WordPress<\/h2>\n<p>Establecer una imagen de fondo personalizada parece una tarea f\u00e1cil. Basta con subir la imagen en el lugar adecuado y ver c\u00f3mo aparece en el frontend, \u00bfverdad?<\/p>\n<p>La mayor\u00eda de las veces es as\u00ed, pero otras veces te encontrar\u00e1s con que la imagen de fondo puede ser un poco problem\u00e1tica. Por eso recomendamos seguir las <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\">mejores pr\u00e1cticas<\/a> para las im\u00e1genes de fondo de WordPress para eliminar el mayor n\u00famero de problemas posible.<\/p>\n<p><strong>Consejos para Utilizar las Im\u00e1genes de Fondo de WordPress<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=RLR1vILiE98\"><\/kinsta-video>\n<h3>Utiliza Im\u00e1genes de Alta Calidad<\/h3>\n<p>La resoluci\u00f3n de la imagen de fondo que quieres utilizar suele ser el factor decisivo para tu presentaci\u00f3n. Puede que pienses que una imagen que tomaste con tu smartphone es perfecta para una imagen de fondo, pero lo m\u00e1s probable es que necesites una calidad mucho mayor.<\/p>\n<figure style=\"width: 1139px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Unsplash-Free-Stock-Photos.png\" alt=\"Fotos de archivo gratuitas en Unsplash\" width=\"1139\" height=\"729\"><figcaption class=\"wp-caption-text\">Fotos de archivo gratuitas en Unsplash<\/figcaption><\/figure>\n<p>Puedes pagar por una imagen libre de derechos en un sitio como Shutterstock. Esos sitios suelen tener im\u00e1genes de nivel profesional que est\u00e1n preparadas y listas para subir como imagen de fondo grande. Tambi\u00e9n puedes encontrar muchas en <a href=\"https:\/\/kinsta.com\/es\/blog\/imagenes-gratis-para-wordpress\/\">sitios de im\u00e1genes de stock gratuitas<\/a>.<\/p>\n<p>Es posible que la imagen de fondo no se muestre en su totalidad en tu sitio web, ya que gran parte de ella est\u00e1 cubierta por el contenido. Aun as\u00ed, la imagen real se muestra en toda la pantalla.<\/p>\n<p>Si no utilizas una imagen de alta calidad, corres el riesgo de ver un fondo estirado.<\/p>\n<h3>Aseg\u00farate de que las Im\u00e1genes de Fondo Tienen el Tama\u00f1o Adecuado<\/h3>\n<p>Junto con la resoluci\u00f3n de la imagen, el tama\u00f1o f\u00edsico de la misma importa mucho.<\/p>\n<p>Todas las <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/\">pantallas tienen distintas relaciones de aspecto<\/a>. Y los dispositivos m\u00f3viles lo complican a\u00fan m\u00e1s. Pero el objetivo es utilizar una imagen que se vea bien en la mayor de las pantallas. De lo contrario, corres el riesgo de que la imagen se estire o no se muestre correctamente.<\/p>\n<p>En general, una buena regla es mantener un tama\u00f1o m\u00ednimo de imagen de fondo de WordPress de <strong>1024 x 768 <\/strong>p\u00edxeles. Sin embargo, otros expertos recomiendan usar algo como <strong>1920 x 1080 <\/strong>p\u00edxeles. En general, lo mejor es mantener el ancho entre 1000 y 3000 p\u00edxeles, dependiendo de d\u00f3nde se muestre.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/starting-large.png\" alt=\"Dimensiones de la imagen de fondo de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Dimensiones de la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>El siguiente factor que hay que tener en cuenta es la relaci\u00f3n de aspecto. \u00bfLa imagen de fondo cubre toda la p\u00e1gina web, o solo la cuarta parte superior?<\/p>\n<p>T\u00e9cnicamente, un sitio web tiene una relaci\u00f3n de aspecto vertical (mayor altura que anchura). Por lo tanto, puedes buscar ese tipo de im\u00e1genes. Sin embargo, los fondos seccionales &#8211; como los de las cabeceras o los <a href=\"https:\/\/kinsta.com\/es\/blog\/tamanos-anuncios-banners\/\">banners<\/a> &#8211; deben permanecer en formato horizontal (m\u00e1s largo de ancho que de alto).<\/p>\n<p>Adem\u00e1s, la relaci\u00f3n de aspecto m\u00e1s com\u00fan para los ordenadores de sobremesa hoy en d\u00eda es <strong>16:9<\/strong>. Permanecer alrededor de ese objetivo ayuda. Un tema o plugin responsivo puede ajustar la imagen de fondo autom\u00e1ticamente para la visualizaci\u00f3n m\u00f3vil.<\/p>\n<p>En \u00faltima instancia, probar las im\u00e1genes de fondo en un sitio real y en varios tipos de dispositivos deber\u00eda facilitar la decisi\u00f3n final.<\/p>\n<h3>Optimiza Antes de Crear una Imagen de Fondo de WordPress<\/h3>\n<p>Al igual que con todas las im\u00e1genes que se suben a WordPress, te haces un flaco favor si no <a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\">las optimizas antes de publicarlas en Internet<\/a>. Esto es especialmente importante en el caso de las im\u00e1genes de fondo, ya que suelen aparecer en varias p\u00e1ginas de tu sitio web. Adem\u00e1s, son fotos grandes y cubren una cantidad significativa de espacio en la pantalla.<\/p>\n<p>Las im\u00e1genes de mayor tama\u00f1o suponen una carga importante para tu servidor. Mant\u00e9n la resoluci\u00f3n de tu imagen, pero optimiza su tama\u00f1o para que tu <a href=\"https:\/\/kinsta.com\/es\/aprender\/acelerar-wordpress\/\">sitio web se cargue r\u00e1pidamente<\/a>.<\/p>\n<p>Tienes dos opciones para optimizar las fotos:<\/p>\n<ol>\n<li>Optimiza las im\u00e1genes de fondo (y todas las im\u00e1genes del sitio web) antes de subirlas a WordPress. Completa este proceso manual con la ayuda de herramientas como Photoshop Express, GIMP y Pixlr.<\/li>\n<li>Automatiza el proceso de optimizaci\u00f3n instalando un plugin de WordPress que redimensione y reduzca las fotos al subirlas.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\">Lee nuestra gu\u00eda de optimizaci\u00f3n de im\u00e1genes en profundidad<\/a> sobre c\u00f3mo optimizar las im\u00e1genes para mejorar el rendimiento de la web.<\/p>\n<h3>Comprueba la Compatibilidad con el Fondo Antes de Instalar un Tema<\/h3>\n<p>Por desgracia, no todos los temas admiten im\u00e1genes de fondo personalizadas. A menudo, esto se debe a que el fondo no encaja en el dise\u00f1o general del tema, por lo que el desarrollador opt\u00f3 por desactivarlo por completo.<\/p>\n<p>Sin embargo, si realmente quieres un fondo en tu sitio web, es prudente comprobar la lista de caracter\u00edsticas al descargar un nuevo tema, especialmente si planeas <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-tema-de-wordpress\/\">pagar por un tema premium<\/a>. Muchos <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">sitios web de venta de temas<\/a> ofrecen informaci\u00f3n sobre si un tema admite fondos o no.<\/p>\n<p>Por ejemplo, los temas listados en la <a href=\"https:\/\/wordpress.org\/themes\/\">Biblioteca de Temas de WordPress<\/a> indican el soporte para fondos personalizados como etiquetas. Tambi\u00e9n puedes encontrar una referencia a un fondo personalizado en la descripci\u00f3n del tema.<\/p>\n<figure style=\"width: 1237px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/01\/the-feature-for-custom-background.png\" alt=\"Soporte de \"Fondos personalizados\" para los temas\" width=\"1237\" height=\"1321\"><figcaption class=\"wp-caption-text\">Soporte de \u00abFondos personalizados\u00bb para los temas<\/figcaption><\/figure>\n<p>Otros sitios de temas suelen incluir informaci\u00f3n similar sobre las im\u00e1genes de fondo personalizadas. Si no es as\u00ed, ponte en contacto con el <a href=\"https:\/\/kinsta.com\/es\/blog\/contratar-desarrollador-de-wordpress\/\">desarrollador<\/a> para averiguar si es posible de alguna manera y si anular el bloque de imagen de fondo (que se explica a continuaci\u00f3n) causar\u00e1 alg\u00fan problema con el tema.<\/p>\n<h3>Considera la Utilizaci\u00f3n de un Constructor de P\u00e1ginas Visual para Facilitar las Im\u00e1genes de Fondo<\/h3>\n<p>Los constructores de p\u00e1ginas como Gutenberg, WPBakery, <a href=\"https:\/\/kinsta.com\/es\/blog\/divi-vs-elementor\/\">Divi y Elementor<\/a>, ofrecen impresionantes listas de bloques y m\u00f3dulos para insertar elementos como im\u00e1genes y cuadros de texto en cualquier lugar de una p\u00e1gina web.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Constructor de sitios web Elementor\" width=\"1324\" height=\"435\"><figcaption class=\"wp-caption-text\">Constructor de sitios web Elementor<\/figcaption><\/figure>\n<p>Sin un <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/\">constructor de arrastrar y soltar<\/a>, resulta un poco m\u00e1s dif\u00edcil configurar una imagen de fondo. Es especialmente duro intentar resolver cualquier problema que te puedas encontrar.<\/p>\n<p>Los constructores de p\u00e1ginas tambi\u00e9n tienden a reemplazar la funcionalidad de la imagen de fondo por defecto proporcionada a trav\u00e9s de WordPress. Puedes anular las restricciones del tema o cualquier elemento que falte para mostrar una imagen de fondo en el c\u00f3digo.<\/p>\n<h3>Aseg\u00farate de que Tu Imagen de Fondo es Legal<\/h3>\n<p>La legalidad siempre surge cuando se habla de im\u00e1genes, especialmente las publicadas en Internet. Existe una tendencia creciente en las <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-plugins-redes-sociales\/\">redes sociales<\/a> en la que la gente parece asumir que a\u00f1adir un cr\u00e9dito a una foto hace que autom\u00e1ticamente se pueda utilizar esa foto.<\/p>\n<p>Eso es falso.<\/p>\n<p>Quien hace la foto es el due\u00f1o. Incluso si esa imagen procede de una r\u00e1pida instant\u00e1nea del iPhone, tiene inmediatamente la protecci\u00f3n de los derechos de autor de esa foto en Estados Unidos y en muchos otros pa\u00edses.<\/p>\n<p>Si quieres tener los derechos legales para utilizar la foto de otra persona, necesitar\u00e1s una declaraci\u00f3n escrita del titular de los derechos de autor que te permita utilizar sus im\u00e1genes: un simple correo electr\u00f3nico es suficiente. Aun as\u00ed, es posible que tengas que atribuir la foto si la persona te lo pide.<\/p>\n<p>Tenemos una <a href=\"https:\/\/kinsta.com\/es\/blog\/proteger-imagenes\/\">gu\u00eda completa sobre la protecci\u00f3n de las im\u00e1genes en tu sitio<\/a>, pero el art\u00edculo tambi\u00e9n esboza informaci\u00f3n valiosa para aquellos interesados en utilizar fotos de otras fuentes.<\/p>\n<p>La parte dif\u00edcil de las im\u00e1genes de fondo es que normalmente no es pr\u00e1ctico a\u00f1adir una atribuci\u00f3n, ya que WordPress no tiene lugar para incorporar una leyenda visible para las im\u00e1genes de fondo. Y no, no puedes a\u00f1adir la atribuci\u00f3n en una entrada o p\u00e1gina del blog al azar y esperar que eso sirva como cr\u00e9dito para una imagen de fondo de un sitio web completo.<\/p>\n<p>Para protegerte y respetar a quienes toman las fotos, considera una de las siguientes opciones cuando busque una imagen de fondo para WordPress:<\/p>\n<ul>\n<li>Haz la foto t\u00fa mismo. Es la forma m\u00e1s f\u00e1cil de asegurarte de no infringir los derechos de autor de nadie.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/fotos-de-archivo-wordpress\/#2-pixelrockstar-premium-yet-insanely-affordable\">Paga por fotos<\/a> en sitios web como Shutterstock e iStockPhoto. A veces son caras, pero para una imagen de fondo, puede entrar en tu presupuesto.<\/li>\n<li>Considera un <a href=\"https:\/\/kinsta.com\/es\/blog\/imagenes-gratis-para-wordpress\/\">sitio web de im\u00e1genes gratuitas<\/a> como Unsplash o Pexels. Sin embargo, \u00a1aseg\u00farate de que la atribuci\u00f3n no es obligatoria! En ocasiones puedes encontrar im\u00e1genes en estos sitios donde se sugiere la atribuci\u00f3n, pero no se exige.<\/li>\n<li>Ponte en contacto con el fot\u00f3grafo o el artista y preg\u00fantale si puedes utilizarlo gratuitamente. Esto puede ser todo lo que necesitas, especialmente si ofreces algo a cambio.<\/li>\n<li>Piensa en omitir la imagen de fondo, o considera optar por un fondo de color en lugar de una foto.<\/li>\n<\/ul>\n<h2>\u00bfC\u00f3mo Puedo Configurar una Imagen de Fondo en WordPress?<\/h2>\n<p>Hay varias maneras de establecer una imagen de fondo en WordPress. Estos m\u00e9todos suelen cambiar en funci\u00f3n de la ubicaci\u00f3n en la que quieras poner la imagen.<\/p>\n<p>Por ejemplo, puedes decidir que te gustar\u00eda que la imagen de fondo fuera la misma en todo tu sitio web. Por otro lado, es posible que prefieras encontrar una forma de mostrar im\u00e1genes de fondo \u00fanicas para todas tus p\u00e1ginas.<\/p>\n<p>Dado que existen tantas posibilidades, cubriremos c\u00f3mo a\u00f1adir una imagen o color de fondo en las siguientes secciones:<\/p>\n<ul>\n<li>Todo el sitio<\/li>\n<li>Una p\u00e1gina de WordPress<\/li>\n<li>Una entrada de WordPress<\/li>\n<li>Un <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-0\/\">bloque de contenido<\/a> individual<\/li>\n<li>La cabecera de WordPress<\/li>\n<li>Una p\u00e1gina de archivo de categor\u00edas<\/li>\n<li>La p\u00e1gina de inicio de sesi\u00f3n de WordPress<\/li>\n<li>El men\u00fa de navegaci\u00f3n<\/li>\n<li>Una p\u00e1gina de mantenimiento<\/li>\n<\/ul>\n<p><strong>C\u00f3mo A\u00f1adir una Imagen de Fondo a la Cabecera y Men\u00fas de WordPress<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=5bSeC5NQjp0\"><\/kinsta-video>\n<h3>Antes de Empezar: Activa el Soporte de Fondo Personalizado en WordPress (Si es Necesario)<\/h3>\n<p>Los desarrolladores de temas deciden el destino de las caracter\u00edsticas de fondo de un sitio. WordPress tiene la funcionalidad incorporada en el n\u00facleo, pero un desarrollador de temas podr\u00eda desactivarla, dej\u00e1ndote sin un ajuste en el panel de control para activarla.<\/p>\n<p>Si en alg\u00fan momento de los siguientes tutoriales te das cuenta de que <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-tema-de-wordpress\/\">tu tema es la raz\u00f3n<\/a> por la que te falta la opci\u00f3n de <strong>fondo personalizado<\/strong>, considera los siguientes pasos para solucionarlo r\u00e1pidamente.<\/p>\n<p>El principal soporte de fondo personalizado para WordPress es manejado por el archivo <strong>functions.php<\/strong>. Abre ese archivo e inserta el siguiente c\u00f3digo si no lo tienes:<\/p>\n<pre><code class=\"language-css\">$defaults = array(\n\u00a0\u00a0\u00a0\u00a0'default-color'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-image'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-repeat'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-position-x'\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-attachment'\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'wp-head-callback'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '_custom_background_cb',\n\u00a0\u00a0\u00a0\u00a0'admin-head-callback'\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'admin-preview-callback' =&gt; ''\n);\nadd_theme_support( 'custom-background', $defaults );<\/code><\/pre>\n<p>Ten en cuenta que el elemento que realmente activa el soporte de fondo es la funci\u00f3n <code>add_theme_support()<\/code> con todo lo que contiene. Ese c\u00f3digo activa la funci\u00f3n de fondo en el <a href=\"https:\/\/kinsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">tablero de WordPress<\/a>, que puedes utilizar dentro de muchos de los siguientes tutoriales en este art\u00edculo.<\/p>\n<p>Tambi\u00e9n es posible a\u00f1adir una imagen de fondo por defecto para todo el tema a trav\u00e9s del archivo <strong>functions.php<\/strong>. Simplemente dir\u00edgete al \u00e1rea del c\u00f3digo anterior con el valor de <code>default-image<\/code> y a\u00f1ade la URL de la imagen en el espacio en blanco entre el <code>' '<\/code> despu\u00e9s del<code> =&gt;<\/code>.<\/p>\n<p>Esta es una forma r\u00e1pida y sencilla de activar los fondos personalizados dentro del panel de control de WordPress.<\/p>\n<p>Dicho esto, te\u00a0 recomendamos <a href=\"https:\/\/kinsta.com\/es\/blog\/cambiar-tema-wordpress\/\">cambiar el tema<\/a> si no tienes soporte de fondo en primer lugar. La eliminaci\u00f3n de la funci\u00f3n de fondo personalizado podr\u00eda tener su propio prop\u00f3sito, o tal vez el desarrollador del tema encontr\u00f3 que estaba causando demasiados problemas con el dise\u00f1o.<\/p>\n<h3>C\u00f3mo A\u00f1adir una Imagen de Fondo a Todo Tu Sitio de WordPress<\/h3>\n<p>Si tu tema ofrece la posibilidad de a\u00f1adir una imagen de fondo personalizada (y muchos lo hacen), te lo pone mucho m\u00e1s f\u00e1cil.<\/p>\n<p>Para empezar, dir\u00edgete a tu panel de control de WordPress y haz clic en <strong>Apariencia &gt; Personalizar.<\/strong><\/p>\n<figure style=\"width: 1090px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-ize.png\" alt=\"Haga clic en el enlace \"Personalizar\" en el men\u00fa Apariencia\" width=\"1090\" height=\"912\"><figcaption class=\"wp-caption-text\">Haz clic en el enlace \u00abPersonalizar\u00bb en el men\u00fa Apariencia<\/figcaption><\/figure>\n<p>Eso te lleva al <strong>personalizador de temas de WordPress<\/strong>, con los ajustes de personalizaci\u00f3n a la izquierda y una vista previa del sitio web a la derecha.<\/p>\n<p>Aqu\u00ed, busca y haz clic en la pesta\u00f1a <strong>Imagen de f<\/strong><strong>ondo<\/strong>.<\/p>\n<figure style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/background-tab.png\" alt=\"Imagen de fondo de WordPress en el editor\" width=\"1885\" height=\"940\"><figcaption class=\"wp-caption-text\">Imagen de fondo de WordPress en el editor<\/figcaption><\/figure>\n<p>Como alternativa, si puedes seleccionar <strong>Apariencia &gt; Fondo<\/strong>, puedes utilizarlo para una ruta m\u00e1s r\u00e1pida a este ajuste.<\/p>\n<figure style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-back.png\" alt=\"Haga clic en el enlace \"Fondo\" en el men\u00fa Apariencia\" width=\"1302\" height=\"905\"><figcaption class=\"wp-caption-text\">Haz clic en el enlace \u00abFondo\u00bb en el men\u00fa Apariencia<\/figcaption><\/figure>\n<p>El \u00e1rea de personalizaci\u00f3n de la <strong>Imagen de\u00a0fondo <\/strong>gestiona los elementos de fondo de toda tu p\u00e1gina web.<\/p>\n<p>Haz clic en el bot\u00f3n <strong>Seleccionar imagen <\/strong>para continuar.geEn la ventana <strong>Seleccionar imagen<\/strong>, elige una imagen que se adapte bien como fondo a tu <a href=\"https:\/\/kinsta.com\/es\/blog\/principales-tendencias-de-diseno-web\/\">marca y al estilo de tu sitio web<\/a>. En general, un patr\u00f3n de color neutro con un tono negro, o blanco, o gris suele ayudar a garantizar que la mayor parte de tu texto y contenido siga vi\u00e9ndose bien con el fondo detr\u00e1s.<\/p>\n<p>Una vez seleccionada la imagen, haz clic en el bot\u00f3n <strong>Elegir imagen <\/strong>para continuar.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choose-the-im.png\" alt=\"Elija la imagen de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elige la imagen de fondo<\/figcaption><\/figure>\n<p>El fondo que has implementado aparece ahora en la vista previa del sitio web.<\/p>\n<p>Comprueba si tu contenido sigue destacando y parece presentable con la imagen elegida. A veces, es posible que tengas que cambiar completamente el fondo o cambiar cosas como el texto o los colores de los enlaces.<\/p>\n<p>Tambi\u00e9n aparece una peque\u00f1a <a href=\"https:\/\/kinsta.com\/es\/blog\/regenerar-las-miniaturas\/\">miniatura<\/a> del fondo en el panel de <strong>Ajustes<\/strong>, que te indica que la imagen ha sido implementada.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/thats-where-it-is.png\" alt=\"Las miniaturas de las im\u00e1genes de fondo de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Las miniaturas de las im\u00e1genes de fondo de WordPress<\/figcaption><\/figure>\n<p>Hay algunos ajustes adicionales disponibles para los fondos de WordPress, incluyendo el campo <strong>Preajuste<\/strong>.<\/p>\n<p>Haz clic en el campo <strong>Preajuste\u00a0<\/strong>para cambiar el formato de la imagen utilizando dise\u00f1os y alineaciones preestablecidos.<\/p>\n<figure style=\"width: 1890px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/preset.png\" alt=\"La opci\u00f3n 'Preset' para las im\u00e1genes de fondo de WordPress\" width=\"1890\" height=\"940\"><figcaption class=\"wp-caption-text\">La opci\u00f3n &#8216;Preajuste&#8217; para las im\u00e1genes de fondo de WordPress<\/figcaption><\/figure>\n<p>Puedes elegir entre los siguientes preajustes:<\/p>\n<ul>\n<li><strong>Por defecto<\/strong>: Suele ser lo mismo que <strong>Repetir<\/strong>, pero puede depender de tu tema. La configuraci\u00f3n por defecto suele funcionar mejor, pero depende de la imagen que se utilice.<\/li>\n<li><strong>Rellenar pantalla:<\/strong> Este ajuste estira la imagen para asegurar que todas las partes de la pantalla queden cubiertas, incluso si esto significa recortar la imagen, por lo que se desborda de la pantalla. Funciona bien con muchas im\u00e1genes de alta resoluci\u00f3n, pero podr\u00eda causar desenfoque con im\u00e1genes de baja resoluci\u00f3n.<\/li>\n<li><strong>Ajustar<\/strong> <strong>a la pantalla<\/strong>: Mantiene la relaci\u00f3n de aspecto de la foto original e intenta utilizar esa relaci\u00f3n para ajustarse a la imagen de la pantalla actual. Hace un buen trabajo al mantener la imagen cerca de su estado original, pero puede no cubrir toda el \u00e1rea de fondo.<\/li>\n<li><strong>Repetir: <\/strong>Utiliza partes de la funci\u00f3n <strong>Rellenar pantalla<\/strong>, expandiendo y estirando la imagen, pero tambi\u00e9n repite la imagen cuando no puede cubrir toda la pantalla con \u00e9xito. En el caso de los patrones, esto suele quedar muy bien. Pero para algunas im\u00e1genes, puede producir una l\u00ednea dura entre las im\u00e1genes repetidas.<\/li>\n<li><strong>Personalizado:<\/strong> Esta configuraci\u00f3n te da el mayor control sobre el fondo, ofreciendo varias opciones para personalizar el tama\u00f1o de la imagen de fondo de WordPress, como la forma en que se repite en la p\u00e1gina, se estira o se mueve a medida que el usuario se desplaza.<\/li>\n<\/ul>\n<p>No hay una regla que indique cu\u00e1l de los preajustes funciona mejor porque las im\u00e1genes tienen diferentes tama\u00f1os, resoluciones y detalles. Por lo tanto, lo mejor es comenzar con el preajuste <strong>Por defecto <\/strong>y luego probar cada uno de los otros preajustes para ver cu\u00e1l se ve mejor para tu imagen de fondo.<\/p>\n<p>Si todo lo dem\u00e1s falla, dir\u00edgete a la configuraci\u00f3n <strong>personalizada <\/strong>para ser realmente espec\u00edfico con tus opciones.<\/p>\n<figure style=\"width: 1406px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fill.png\" alt=\"Preajuste 'Fill Screen' para las im\u00e1genes de fondo de WordPress\" width=\"1406\" height=\"940\"><figcaption class=\"wp-caption-text\">Preajuste &#8216;Rellenar la pantalla&#8217; para las im\u00e1genes de fondo de WordPress<\/figcaption><\/figure>\n<p>El ajuste preestablecido <strong>Ajustar a la pantalla <\/strong>no es suficiente para esta imagen, principalmente porque la imagen original es mucho m\u00e1s larga que ancha, dejando una cantidad significativa de espacio a la derecha. Podr\u00edas cambiar la <strong>Posici\u00f3n de la Imagen <\/strong>al <strong>Centro<\/strong>, pero lo m\u00e1s probable es que deje espacio en blanco a los lados.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fit-to.png\" alt=\"El preajuste \"Ajustar a la pantalla\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">El preajuste \u00abAjustar a la pantalla\u00bb<\/figcaption><\/figure>\n<p>El siguiente ajuste a tener en cuenta es la herramienta <strong>Posici\u00f3n de la imagen<\/strong>. Haz clic en las flechas para mover tu imagen de fondo, ajustando la orientaci\u00f3n para colocar el foco de la imagen hacia el centro o llenando la pantalla.<\/p>\n<p>Al igual que la configuraci\u00f3n de los<strong> preajustes<\/strong>, la herramienta <strong>Posici\u00f3n de la imagen <\/strong>requiere un proceso de adivinaci\u00f3n y revisi\u00f3n de tu trabajo, ya que la imagen original y su contenido dictan su aspecto.<\/p>\n<figure style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/moves-around.png\" alt=\"Posici\u00f3n de la imagen de fondo de WordPress\" width=\"1886\" height=\"940\"><figcaption class=\"wp-caption-text\">Posici\u00f3n de la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, hay un campo de selecci\u00f3n para que la imagen de fondo se <strong>desplace con la p\u00e1gina<\/strong>.<\/p>\n<p>Con esta casilla marcada, la imagen de fondo se adhiere al contenido en primer plano y se desplaza junto con el usuario cuando \u00e9ste se desplaza hacia arriba o hacia abajo en la p\u00e1gina.<\/p>\n<figure style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/scroll.png\" alt=\"Activaci\u00f3n de la opci\u00f3n 'Desplazamiento con la p\u00e1gina'\" width=\"1885\" height=\"940\"><figcaption class=\"wp-caption-text\">Activaci\u00f3n de la opci\u00f3n &#8216;Desplazamiento con la p\u00e1gina&#8217;<\/figcaption><\/figure>\n<p>Desmarcar esa casilla tiende a cambiar la orientaci\u00f3n general de la imagen de fondo, aunque su funci\u00f3n principal es indicar que el fondo permanezca est\u00e1tico mientras el usuario se desplaza por la p\u00e1gina.<\/p>\n<p>Los elementos de contenido en primer plano (como los <a href=\"https:\/\/kinsta.com\/es\/blog\/conversiones-woocommerce\/\">productos<\/a> en este caso) se deslizan sobre la imagen de fondo, creando un efecto atractivo.<\/p>\n<figure style=\"width: 1878px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-scroll.png\" alt=\"Desactivaci\u00f3n de la opci\u00f3n 'Desplazamiento con la p\u00e1gina'\" width=\"1878\" height=\"940\"><figcaption class=\"wp-caption-text\">Desactivaci\u00f3n de la opci\u00f3n &#8216;Desplazamiento con la p\u00e1gina&#8217;<\/figcaption><\/figure>\n<h4>Trabajar con un Preajuste Personalizado<\/h4>\n<p>Cuando se opta por algo m\u00e1s que el preajuste <strong>personalizado<\/strong>, no hay muchos ajustes adicionales para configurar.<\/p>\n<p>Sin embargo, al elegir el preajuste Personalizado se abren otros campos a tener en cuenta.<\/p>\n<p>Por ejemplo, puede elegir <strong>Llenar la pantalla <\/strong>o <strong>Ajustar a la pantalla<\/strong>, y luego combinar eso con una imagen de fondo repetida o no repetida, combinando los elementos de los preajustes de antes. Y sigue teniendo la opci\u00f3n de <strong>Desplazamiento con la p\u00e1gina<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-one.png\" alt=\"Preselecciones y tama\u00f1os de imagen para las im\u00e1genes de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Preselecciones y tama\u00f1os de imagen para las im\u00e1genes de fondo<\/figcaption><\/figure>\n<p>Comprueba si es posible utilizar la imagen original sin ninguna edici\u00f3n o ajuste. A veces, la foto original es casi perfecta para usarla como fondo, as\u00ed que \u00bfpor qu\u00e9 estropear lo que ya est\u00e1 listo?<\/p>\n<p>Sin embargo, su tama\u00f1o tambi\u00e9n puede ser <a href=\"https:\/\/kinsta.com\/es\/blog\/prueba-de-velocidad\/\">demasiado grande para tu sitio web<\/a>, o tal vez la relaci\u00f3n de aspecto no sea la adecuada. En cualquier caso, te sugerimos que experimentes con esta configuraci\u00f3n para saber si es la adecuada para ti.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-repeat-or.png\" alt=\"Ajuste del tama\u00f1o de la imagen de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Ajuste del tama\u00f1o de la imagen de fondo<\/figcaption><\/figure>\n<p>Una vez que decidas la configuraci\u00f3n perfecta del fondo (para este tutorial, la opci\u00f3n predeterminada se ve bien), haz clic en el bot\u00f3n <strong>Publicar <\/strong>para hacer los cambios en tu sitio web.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/publish-to-page.png\" alt=\"Pulsa el bot\u00f3n \"Publicar\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Pulsa el bot\u00f3n \u00abPublicar\u00bb<\/figcaption><\/figure>\n<p>Dir\u00edgete al frontend de tu sitio web para ver la im\u00e1gen de fondo en acci\u00f3n.<\/p>\n<p>La <a href=\"https:\/\/kinsta.com\/es\/blog\/cambiar-pagina-inicio-wordpress\/\">p\u00e1gina de inicio<\/a> es un lugar maravilloso para empezar. Ver\u00e1s que la zona de la cabecera y la imagen de bienvenida no tienen fondo. Esto se debe a que la imagen de bienvenida en la parte superior del sitio ya est\u00e1 cubriendo toda la parte horizontal de la pantalla como una imagen heroica a pantalla completa.<\/p>\n<p>En cuanto a la cabecera y el <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-de-menu-de-wordpress\/\">men\u00fa<\/a>, aprender\u00e1s a configurar esos fondos en algunos de los siguientes tutoriales.<\/p>\n<figure style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-back.png\" alt=\"Viendo la imagen de fondo de WordPress\" width=\"1548\" height=\"1885\"><figcaption class=\"wp-caption-text\">Viendo la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>Ten en cuenta que el fondo general personalizado de WordPress se activa en todas las p\u00e1ginas y entradas de tu sitio web. Es una caracter\u00edstica global para aquellos que quieren una forma r\u00e1pida de marcar su sitio y a\u00f1adir algo de brillo.<\/p>\n<p>Por ejemplo, al ir a la p\u00e1gina de la<strong> tienda <\/strong>de este sitio se puede ver el trasfondo de la selecci\u00f3n de productos.<\/p>\n<figure style=\"width: 1571px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/every-page.png\" alt=\"La imagen de fondo de WordPress en otra p\u00e1gina\" width=\"1571\" height=\"1266\"><figcaption class=\"wp-caption-text\">La imagen de fondo de WordPress en otra p\u00e1gina<\/figcaption><\/figure>\n<h4>C\u00f3mo Establecer un Color de Fondo en Lugar de una Imagen para Todo Tu Sitio Web<\/h4>\n<p>El proceso de activar un color de fondo en todo el sitio web no es muy diferente al de activar una imagen de fondo. Empieza por ir a <strong>Apariencia &gt; Fondo <\/strong>en el panel de control, y luego busca el campo<strong> Color de fondo<\/strong>.<\/p>\n<p>Haz clic en el bot\u00f3n <strong>Seleccionar color <\/strong>para abrir m\u00e1s ajustes para elegir y alternar diferentes colores para tu fondo.<\/p>\n<figure style=\"width: 1906px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bacgkround-select.jpg\" alt=\"Seleccionar un color s\u00f3lido como fondo\" width=\"1906\" height=\"940\"><figcaption class=\"wp-caption-text\">Selecciona un color s\u00f3lido como fondo<\/figcaption><\/figure>\n<p>El panel de colores te ofrece m\u00faltiples opciones para <a href=\"https:\/\/kinsta.com\/es\/blog\/combinaciones-colores-sitios-web\/\">decidir un color<\/a>. La primera es escribir o pegar un c\u00f3digo de color. Todos los colores tienen c\u00f3digos de color \u00fanicos, y puedes encontrar estos colores y sus c\u00f3digos asociados con una r\u00e1pida b\u00fasqueda en Internet.<\/p>\n<p>La otra opci\u00f3n es hacer clic en el panel de colores para encontrar el color perfecto para el fondo. Incluso tienen muestras de colores comunes hacia la parte inferior del panel si prefieres tomar uno de los colores m\u00e1s simples.<\/p>\n<p>Para activar un color de fondo, aseg\u00farate de que el color est\u00e1 seleccionado y se muestra en la vista previa de <strong>Seleccionar color<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bg-col.jpg\" alt=\"Elegir un \"color de fondo\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elegir un \u00abcolor de fondo\u00bb<\/figcaption><\/figure>\n<p>Deber\u00edas ver el fondo de color en la vista previa del <a href=\"https:\/\/kinsta.com\/es\/blog\/como-personalizar-tema-wordpress\/\">personalizador de WordPress<\/a>. Si no es as\u00ed, lo m\u00e1s probable es que tengas instalado un fondo de imagen que est\u00e1 anulando el fondo de color.<\/p>\n<p>Todo lo que tienes que hacer para revelar el fondo de color es hacer clic en el bot\u00f3n <strong>Eliminar <\/strong>debajo de la vista previa de la<strong> Imagen de fondo<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/remove-image.jpg\" alt=\"Eliminar la imagen de fondo de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Eliminar la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>Ahora el color aparece en la totalidad de tu sitio, detr\u00e1s del contenido. Al igual que con un fondo de imagen, es prudente mirar a trav\u00e9s de tu sitio web para asegurarte de que todo el texto, las im\u00e1genes y los enlaces siguen siendo visibles con el nuevo fondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/once-removed.jpg\" alt=\"Vista previa de un fondo naranja s\u00f3lido de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Vista previa de un fondo naranja s\u00f3lido de WordPress<\/figcaption><\/figure>\n<h3>C\u00f3mo A\u00f1adir una Imagen de Fondo a una P\u00e1gina de WordPress<\/h3>\n<p>\u00bfPero qu\u00e9 pasa si quiere insertar una imagen en WordPress para que aparezca como fondo en una sola p\u00e1gina de WordPress? En la secci\u00f3n anterior se describen los ajustes globales para una imagen de fondo para todo el sitio.<\/p>\n<p><strong>Echa un Vistazo a Nuestro <a href=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\">Videotutorial<\/a> para A\u00f1adir Im\u00e1genes de Fondo a P\u00e1ginas \u00danicas, Entradas y Bloques de Contenido de WordPress<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\"><\/kinsta-video>\n<p>Mucha gente disfruta a\u00f1adiendo fondos a sus p\u00e1ginas porque se puede incorporar un determinado tema o sensaci\u00f3n a una p\u00e1gina que se aplica al contenido. Por ejemplo, una p\u00e1gina <a href=\"https:\/\/kinsta.com\/es\/sobre-nosotros\/\">sobre nosotros<\/a> podr\u00eda tener un fondo de Los \u00c1ngeles si la empresa est\u00e1 en esa ciudad. O una introducci\u00f3n a un libro de un autor podr\u00eda incluir un fondo que se ajuste al tema de la historia.<\/p>\n<p>En esta secci\u00f3n, veremos c\u00f3mo a\u00f1adir una imagen de fondo de WordPress a una p\u00e1gina utilizando un m\u00e9todo principal y algunas alternativas si no te importa gastar dinero en un plugin u optar por un constructor de p\u00e1ginas.<\/p>\n<p><strong>Nota: <\/strong>No importa si usas el editor Gutenberg o el cl\u00e1sico de WordPress.<\/p>\n<p>Para los fondos de p\u00e1ginas espec\u00edficas, estos m\u00e9todos parecen funcionar mejor:<\/p>\n<ul>\n<li>A\u00f1adir un fondo de p\u00e1gina \u00fanico con <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">CSS personalizado<\/a>.<\/li>\n<li>Utilizar un plugin que permita crear fondos de p\u00e1gina individuales.<\/li>\n<li>Incorporar un fondo personalizado en cada p\u00e1gina con la ayuda de un constructor de p\u00e1ginas.<\/li>\n<\/ul>\n<p>A\u00f1adir tu propio CSS personalizado a una p\u00e1gina implica encontrar el ID de clase de esa p\u00e1gina y pedir una URL de fondo, dentro del m\u00f3dulo de CSS personalizado, en la configuraci\u00f3n de la p\u00e1gina de WordPress. Por suerte, no es tan dif\u00edcil averiguar el ID de clase de una p\u00e1gina, teniendo en cuenta que podemos buscarlo, o puede que ya sepas cu\u00e1l es.<\/p>\n<p>Dir\u00edgete a la p\u00e1gina de tu sitio para la que quieres una imagen de fondo solo para esa p\u00e1gina.<\/p>\n<figure style=\"width: 1473px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/this-is-the-page.png\" alt=\"A\u00f1adir una imagen de fondo de WordPress espec\u00edfica de la p\u00e1gina\" width=\"1473\" height=\"835\"><figcaption class=\"wp-caption-text\">A\u00f1adir una imagen de fondo de WordPress espec\u00edfica de la p\u00e1gina<\/figcaption><\/figure>\n<p>Haz clic con el bot\u00f3n derecho del rat\u00f3n en cualquier parte de la p\u00e1gina para que aparezca un men\u00fa desplegable en tu pantalla. Selecciona la herramienta Inspeccionar en la parte inferior del men\u00fa desplegable.<\/p>\n<p>El m\u00f3dulo Inspeccionar muestra la codificaci\u00f3n de la propia p\u00e1gina, junto con el CSS personalizado utilizado globalmente para tu sitio web. Es un \u00e1rea \u00fatil para localizar informaci\u00f3n sobre una p\u00e1gina o una entrada en tu sitio.<\/p>\n<figure style=\"width: 1106px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inspect-the-page.png\" alt=\"Inspecci\u00f3n de una p\u00e1gina web\" width=\"1106\" height=\"825\"><figcaption class=\"wp-caption-text\">Inspecci\u00f3n de una p\u00e1gina web<\/figcaption><\/figure>\n<p>El cuadro de inspecci\u00f3n tiene l\u00edneas de c\u00f3digo de la p\u00e1gina, pero solo nos interesa la etiqueta de clase asignada a esta p\u00e1gina en particular. Para aclarar, cada p\u00e1gina de WordPress tiene una etiqueta de clase como c\u00f3digo de identificaci\u00f3n.<\/p>\n<p>Utiliza la funci\u00f3n de b\u00fasqueda y escribe <code>body<\/code> o <code>class<\/code> para localizar la l\u00ednea de c\u00f3digo con la etiqueta <code>page-id<\/code>.<\/p>\n<p>En este caso, el ID es <code>page-id-352<\/code>, pero el tuyo ser\u00e1 diferente.<\/p>\n<p>Querr\u00e1s copiar toda la parte del c\u00f3digo con la palabra clave <code>page-id-#<\/code>, incluyendo los guiones.<\/p>\n<figure style=\"width: 1251px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/body-class.png\" alt=\"Encontrar el ID de la p\u00e1gina en WordPress\" width=\"1251\" height=\"657\"><figcaption class=\"wp-caption-text\">Encontrar el ID de la p\u00e1gina en WordPress<\/figcaption><\/figure>\n<p>Con el <a href=\"https:\/\/kinsta.com\/es\/blog\/encontrar-id-entradas-wordpress\/\">ID de la p\u00e1gina<\/a> guardado en alg\u00fan lugar para usarlo en los pr\u00f3ximos pasos, vuelve a tu panel de control de WordPress y haz clic en <strong>Apariencia &gt; Personalizar.<\/strong><\/p>\n<figure style=\"width: 1348px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/custom-is-s-s.png\" alt=\"Ir al personalizador de temas\" width=\"1348\" height=\"905\"><figcaption class=\"wp-caption-text\">Ir al personalizador de temas<\/figcaption><\/figure>\n<p>Selecciona la pesta\u00f1a <strong>CSS adicional <\/strong>en el personalizador de WordPress.<\/p>\n<figure style=\"width: 1508px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css.png\" alt=\"Secci\u00f3n 'CSS adicional' en el personalizador\" width=\"1508\" height=\"916\"><figcaption class=\"wp-caption-text\">Seccan &#8216;CSS adicional&#8217; en el personalizador<\/figcaption><\/figure>\n<p>Esta secci\u00f3n te permite escribir o pegar cualquier CSS personalizado que desee para manipular elementos en todo tu sitio web. En este caso, resulta \u00fatil para anular la imagen de fondo por defecto y habilitar una imagen de fondo para una p\u00e1gina y no para las dem\u00e1s.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Pega el siguiente c\u00f3digo en el campo CSS adicional, pero recuerda sustituir el \u00ab<strong>#<\/strong>\u00bb por el n\u00famero real que sacaste como ID de la p\u00e1gina en los pasos anteriores. Adem\u00e1s, debes poner una URL de imagen real en lugar del texto de relleno que tenemos ah\u00ed (<\/span><code>http:\/\/YOURIMAGEURL.jpeg<\/code><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">).<\/span><\/p>\n<pre><code class=\"language-html\">body.page-id-# { \nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\"); \nbackground-position: center center; \nbackground-size: cover; \nbackground-repeat: no-repeat; \nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>En este ejemplo, el ID de la p\u00e1gina se ha rellenado como 352, y tenemos una URL de imagen de fondo pegada desde <a href=\"https:\/\/kinsta.com\/es\/blog\/biblioteca-multimedia-wordpress\/\">nuestra biblioteca multimedia<\/a>.<\/p>\n<p>Si es necesario, cambia la configuraci\u00f3n del fondo personalizado si tiene problemas para adaptar la imagen de fondo de la pantalla. Por ejemplo, es posible que quieras modificar elementos como el tama\u00f1o de la imagen de fondo de WordPress, su fijaci\u00f3n o su posici\u00f3n. Si no es as\u00ed, d\u00e9jalos todos como est\u00e1n en el c\u00f3digo de ejemplo.<\/p>\n<figure style=\"width: 1485px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insert-it.png\" alt=\"A\u00f1adir CSS personalizado a un sitio de WordPress\" width=\"1485\" height=\"923\"><figcaption class=\"wp-caption-text\">A\u00f1adir CSS personalizado a un sitio de WordPress<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n <strong>Publicar <\/strong>cuando est\u00e9s satisfecho con el CSS personalizado.<\/p>\n<figure style=\"width: 1512px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-the-thing.png\" alt=\"Haga clic en el bot\u00f3n \"Publicar\"\" width=\"1512\" height=\"827\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abPublicar\u00bb<\/figcaption><\/figure>\n<p>Con ese CSS personalizado, la p\u00e1gina especificada incluye una imagen de fondo utilizando los ajustes de tama\u00f1o y posicionamiento del c\u00f3digo. Ninguna otra p\u00e1gina de tu sitio mostrar\u00e1 el mismo fondo a menos que repita el CSS para diferentes <a href=\"https:\/\/kinsta.com\/es\/blog\/encontrar-id-entradas-wordpress\/\">ID de p\u00e1gina<\/a>.<\/p>\n<figure style=\"width: 1335px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-just-for-page.png\" alt=\"La imagen de fondo ahora se muestra en la p\u00e1gina\" width=\"1335\" height=\"899\"><figcaption class=\"wp-caption-text\">La imagen de fondo ahora se muestra en la p\u00e1gina<\/figcaption><\/figure>\n<p>Como se mencion\u00f3 anteriormente, tus otras opciones para agregar un fondo \u00fanico a una p\u00e1gina de WordPress incluyen el uso de un constructor de p\u00e1ginas o un plugin que permite im\u00e1genes de fondo en p\u00e1ginas individuales.<\/p>\n<p>Sin embargo, la forma m\u00e1s barata y r\u00e1pida de colocar una imagen de fondo en una p\u00e1gina individual es utilizar el m\u00e9todo de c\u00f3digo CSS mostrado anteriormente.<\/p>\n<h3>C\u00f3mo A\u00f1adir una Imagen de Fondo a una Entrada de WordPress<\/h3>\n<p>La mayor\u00eda de las im\u00e1genes de fondo se insertan detr\u00e1s de las p\u00e1ginas de WordPress o en cada p\u00e1gina de un sitio web.<\/p>\n<p>La funci\u00f3n de im\u00e1gen de fondo personalizado por defecto en WordPress no tiene nada que ver con las entradas individuales, adem\u00e1s del hecho de que este fondo se mostrar\u00e1 para las entradas del blog tambi\u00e9n. Esto no es ideal para todas las organizaciones, ya que diferentes entradas del blog podr\u00edan tener temas dr\u00e1sticamente diferentes.<\/p>\n<p>Estos blogs podr\u00edan beneficiarse de sus propias im\u00e1genes de fondo. Sin embargo, las entradas de WordPress no tienen su propia configuraci\u00f3n de imagen de fondo, lo que hace que sea un poco m\u00e1s complicado.<\/p>\n<p>Por lo tanto, tenemos unas cuantas opciones a tener en cuenta a la hora de a\u00f1adir una imagen de fondo a una entrada (ver\u00e1s que son las mismas que cuando se trabaja con im\u00e1genes de fondo espec\u00edficas de la p\u00e1gina):<\/p>\n<ul>\n<li>Insertar una imagen de fondo usando CSS personalizado.<\/li>\n<li>Utilizar un plugin para implementar un fondo en las entradas individuales.<\/li>\n<li>Instalar un constructor de p\u00e1ginas visual para los fondos de los posts.<\/li>\n<\/ul>\n<p>Al igual que en la secci\u00f3n anterior sobre los fondos de p\u00e1gina \u00fanicos, puedes a\u00f1adir un fondo espec\u00edfico para un puesto utilizando un constructor de p\u00e1ginas o un plugin.<\/p>\n<p>Dado que la creaci\u00f3n de un fondo espec\u00edfico para una entrada no es muy diferente a la de uno espec\u00edfico para una p\u00e1gina, solo tocaremos brevemente los pasos para manejar este proceso para una entrada individual.<\/p>\n<p>Cuando se utiliza el CSS personalizado para implementar un fondo espec\u00edfico para una entrada, se utiliza el mismo c\u00f3digo que para el fondo de la p\u00e1gina, con una diferencia: se debe encontrar el ID de la entrada en lugar del ID de la p\u00e1gina.<\/p>\n<p>Por lo tanto, abre el frontend de una entrada de WordPress en la que quieres insertar una im\u00e1gen de fondo.<\/p>\n<figure style=\"width: 1294px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-actual-post.png\" alt=\"Imagen de fondo de WordPress para las entradas\" width=\"1294\" height=\"883\"><figcaption class=\"wp-caption-text\">Imagen de fondo de WordPress para las entradas<\/figcaption><\/figure>\n<p>Haz clic con el bot\u00f3n derecho del rat\u00f3n en la entrada y elige la opci\u00f3n Inspeccionar. Realiza una b\u00fasqueda dentro del c\u00f3digo para localizar la secci\u00f3n de la clase body en el c\u00f3digo. Busca la parte <code>postid-#<\/code>, que es el ID de la entrada que debes insertar en el CSS personalizado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-91278 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/find-post-id-1.png\" alt=\"find post id\" width=\"735\" height=\"767\"><br \/>\nNotar\u00e1s que el formato del ID de la entrada es ligeramente diferente en este ejemplo comparado con el ID de la p\u00e1gina, donde la etiqueta <code>postid-#<\/code> no tiene un gui\u00f3n entre \u00abpost\u00bb e \u00abid\u00bb como ocurre con <code>page-id-#<\/code>. Adem\u00e1s, no se trata de reglas estrictas. Puedes encontrar formatos variados para las etiquetas.<\/p>\n<p>Ahora, ve a tu panel de control de WordPress y haz clic en <strong>Apariencia &gt; Personalizar. <\/strong>Ve a la pesta\u00f1a <strong>CSS adicional<\/strong>.<\/p>\n<figure style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css-s.png\" alt=\"Gio a la secci\u00f3n 'CSS adicional'\" width=\"1190\" height=\"842\"><figcaption class=\"wp-caption-text\">Dir\u00edgete a la secci\u00f3n &#8216;CSS adicional&#8217;<\/figcaption><\/figure>\n<p>Pega el siguiente c\u00f3digo en ese campo CSS personalizado:<\/p>\n<pre><code class=\"language-html\">body.postid-# { \nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\"); \nbackground-position: center center; \nbackground-size: cover; \nbackground-repeat: no-repeat; \nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Despu\u00e9s de eso, apunta el n\u00famero de identificaci\u00f3n del puesto que has encontado en la entrada deseada antes. Sustituye el \u00ab#\u00bb en el c\u00f3digo CSS por el n\u00famero. Adem\u00e1s, cambia el texto <code>http:\/\/YOURIMAGEURL.jpeg<\/code> con la URL real de la imagen de fondo que deseas mostrar, manteniendo las comillas alrededor de ella.<\/p>\n<figure style=\"width: 1141px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-css-typed-in.png\" alt=\"A\u00f1adiendo el CSS personalizado para un id de entrada espec\u00edfico\" width=\"1141\" height=\"820\"><figcaption class=\"wp-caption-text\">A\u00f1adiendo el CSS personalizado para un id de entrada espec\u00edfico<\/figcaption><\/figure>\n<p>Aseg\u00farate de pulsar el bot\u00f3n <strong>Publicar <\/strong>antes de salir de la pesta\u00f1a CSS adicional, ya que esto guarda tus cambios en el sitio web y te permite ver la im\u00e1gen de fondo en el frontend.<\/p>\n<figure style=\"width: 1161px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-but.png\" alt=\"Pulse el bot\u00f3n \"Publicar\" para guardar los cambios\" width=\"1161\" height=\"816\"><figcaption class=\"wp-caption-text\">Pulsa el bot\u00f3n \u00abPublicar\u00bb para guardar los cambios<\/figcaption><\/figure>\n<p>Con esos cambios CSS, ahora puedes volver al frontend de esa entrada de blog de WordPress para ver la nueva im\u00e1gen de fondo. <a href=\"https:\/\/kinsta.com\/es\/blog\/prueba-de-velocidad\/\">Prueba<\/a> las otras entradas del blog y las p\u00e1ginas en tu sitio para ver que ninguno de los otros tienen un fondo a menos que implementar el mismo c\u00f3digo para los ID de los puestos.<\/p>\n<figure style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-post-now-has-it.png\" alt=\"Ver la imagen de fondo en el post\" width=\"1316\" height=\"883\"><figcaption class=\"wp-caption-text\">Ver la imagen de fondo en la entrada<\/figcaption><\/figure>\n<h3>C\u00f3mo A\u00f1adir una Imagen de Fondo a un Bloque de Contenido Individual<\/h3>\n<p>Los bloques de contenido individuales del editor de bloques de WordPress <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a> permiten una amplia gama de opciones de visualizaci\u00f3n de contenido, incluyendo cuadros de texto, im\u00e1genes y galer\u00edas.<\/p>\n<p>Estos bloques dividen el contenido en secciones separadas. As\u00ed, puedes a\u00f1adir un color o imagen de fondo solo para ese bloque.<\/p>\n<p>Por ejemplo, digamos que est\u00e1s escribiendo un post en tu blog sobre el estado de la industria de la ropa al por menor. Quieres terminar o empezar el post con una llamada a la acci\u00f3n para que la gente se inscriba en <a href=\"https:\/\/kinsta.com\/webinars\/\">tu pr\u00f3ximo seminario web<\/a>. Tendr\u00eda sentido que esta secci\u00f3n destacara utilizando un color o imagen de fondo.<\/p>\n<p>Lamentablemente, el editor de bloques de WordPress no ofrece una configuraci\u00f3n completa en la que se pueda a\u00f1adir un fondo a cualquier bloque. Sin embargo, algunos bloques tienen la opci\u00f3n de incorporar un fondo de color.<\/p>\n<p>Tambi\u00e9n hay un bloque, llamado bloque de portada, que es lo m\u00e1s parecido a a\u00f1adir una imagen de fondo para un bloque en un post o p\u00e1gina. La portada permite superponer texto y algunos elementos multimedia, por lo que es adecuada para nuestro objetivo final.<\/p>\n<p>A continuaci\u00f3n se muestran las t\u00e9cnicas que se deben utilizar para establecer una imagen o un color de fondo para un bloque individual de WordPress.<\/p>\n<h4>Establecer un Fondo de Color para un Bloque<\/h4>\n<p>La forma m\u00e1s sencilla de a\u00f1adir algo de vivacidad a un bloque individual es a\u00f1adir un fondo de color. No es tan elegante como una imgen fondo, pero el fondo de color es en realidad el \u00fanico tipo de fondo en el editor de bloques de WordPress disponible para los bloques est\u00e1ndar.<\/p>\n<p><strong>Nota: <\/strong>Algunos bloques no tienen ninguna configuraci\u00f3n de fondo. Si ese es el caso, lo mejor es que utilices un bloque de portada y superpongas otros bloques sobre \u00e9l, como te explicaremos m\u00e1s adelante en este art\u00edculo.<\/p>\n<p>El bloque <strong>P\u00e1rrafo<\/strong>, por ejemplo, tiene un ajuste para activar un fondo de color.<\/p>\n<p>Para activarlo, selecciona el bloque y, a continuaci\u00f3n, localiza la <strong>Configuraci\u00f3n del color <\/strong>en la pesta\u00f1a <strong>Bloque <\/strong>del lado derecho.<\/p>\n<figure style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-block.png\" alt=\"Cambiando el fondo 'Ajustes de color'\" width=\"1901\" height=\"885\"><figcaption class=\"wp-caption-text\">Cambiando el fondo &#8216;Ajustes de color&#8217;<\/figcaption><\/figure>\n<p>Esta secci\u00f3n revela los campos <strong>Color de texto <\/strong>y <strong>Color de fondo<\/strong>.<\/p>\n<p>Dir\u00edgete al \u00e1rea de <strong>Color de fondo <\/strong>y seleccioa un color de la lista de opciones disponibles. Tambi\u00e9n puedes elegir el enlace <strong>Color personalizado <\/strong>para insertar tu propio c\u00f3digo de color o elegir un color \u00fanico.<\/p>\n<p>Como puedes ver, una vez que la configuraci\u00f3n est\u00e1 en su lugar, el fondo del bloque de p\u00e1rrafo se convierte en un color diferente, en este caso, azul.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-back.png\" alt=\"Elegir un color de fondo\" width=\"1900\" height=\"896\"><figcaption class=\"wp-caption-text\">Elegir un color de fondo<\/figcaption><\/figure>\n<h4>A\u00f1adir un Fondo de Color a Cualquier Bloque de WordPress<\/h4>\n<p>Como se ha mencionado antes, no todos los bloques de WordPress tienen esta funci\u00f3n de fondo incorporada. \u00bfQu\u00e9 debes hacer si quieres hacer una galer\u00eda, o alg\u00fan otro elemento del bloque, que no ofrezca la opci\u00f3n de fondo?<\/p>\n<p>La soluci\u00f3n m\u00e1s r\u00e1pida es utilizar la funci\u00f3n de bloques de <strong>grupos <\/strong>de WordPress.<\/p>\n<p>Para ello, selecciona varios bloques ya en tu contenido. Para este ejemplo, seleccionar\u00e9 simult\u00e1neamente un bloque de <strong>P\u00e1rrafo <\/strong>y un bloque de <strong>Galer\u00eda<\/strong>.<\/p>\n<p>Haz clic en el icono del cuadrado apilado en el men\u00fa que aparece.<\/p>\n<figure style=\"width: 1561px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-both.png\" alt=\"La secci\u00f3n \"Nuestro equipo\" en una p\u00e1gina\" width=\"1561\" height=\"940\"><figcaption class=\"wp-caption-text\">La secci\u00f3n \u00abNuestro equipo\u00bb en una p\u00e1gina<\/figcaption><\/figure>\n<p>Elige la opci\u00f3n <strong>Grupo <\/strong>en el men\u00fa desplegable.<\/p>\n<p>Esto toma los bloques que tengas seleccionados en ese momento y <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-3\/#editing-experience\">los combina en un grupo<\/a>, lo que te permite moverlos o editarlos todos juntos en lugar de los bloques separados.<\/p>\n<figure style=\"width: 1575px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/group-theme.png\" alt=\"Agrupar las secciones como un bloque\" width=\"1575\" height=\"927\"><figcaption class=\"wp-caption-text\">Agrupar las secciones como un bloque<\/figcaption><\/figure>\n<p>Esto establece el <strong>Grupo <\/strong>como su propio bloque. Esto significa que puedes ir a la pesta\u00f1a de <strong>Configuraci\u00f3n del bloque <\/strong>en la parte derecha de la p\u00e1gina para encontrar tu configuraci\u00f3n.<\/p>\n<p>Busqca la pesta\u00f1a <strong>Configuraci\u00f3n de color <\/strong>y haz clic en ella.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-sets.png\" alt=\"Cambiar la \"Configuraci\u00f3n de colores\" del bloque agrupado\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Cambiar la \u00abConfiguraci\u00f3n de colores\u00bb del bloque agrupado<\/figcaption><\/figure>\n<p>Al igual que un bloque de p\u00e1rrafo est\u00e1ndar, el bloque de grupo tambi\u00e9n tiene una funci\u00f3n de color de fondo.<\/p>\n<p>Elige el color que m\u00e1s te guste para esta situaci\u00f3n para ver que todo dentro de ese grupo debe tener ahora ese color de fondo.<\/p>\n<p>Lo bueno del bloque Grupo es que toma otro bloque que no tiene fondo (como el bloque Galer\u00eda) y te permite activar un fondo de todas formas.<\/p>\n<figure style=\"width: 1454px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-color-in-group.png\" alt=\"Estableciendo el color de fondo como azul\" width=\"1454\" height=\"894\"><figcaption class=\"wp-caption-text\">Estableciendo el color de fondo como azul<\/figcaption><\/figure>\n<h4>A\u00f1adir una Imagen de Fondo a un Bloque de WordPress<\/h4>\n<p>Los bloques de WordPress est\u00e1n tanto en las p\u00e1ginas como en las entradas. Por lo tanto, podemos implementar esta t\u00e1ctica en cualquiera de ellos. Puedes insertar casi cualquier contenido por encima del fondo del bloque agrupado &#8211; o solo en un bloque de WordPress.<\/p>\n<p>Para comenzar con este proceso, haz clic en el bot\u00f3n <strong>A\u00f1adir bloque <\/strong>o en el icono \u00ab<strong>+<\/strong>\u00bb y busca el bloque de la<strong> portada<\/strong>.<\/p>\n<p>Elige ese bloque para insertarlo en tu entrada o p\u00e1gina.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/go-for-cov.png\" alt=\"A\u00f1adir un bloque de imagen de portada\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">A\u00f1adir un bloque de imagen de portada<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, debes hacer clic en el bot\u00f3n <strong>Subir o Seleccionar medios<\/strong>, que te permite buscar im\u00e1genes que puedas utilizar como fondo.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-med.png\" alt=\"Haga clic en el bot\u00f3n \"Seleccionar medios\"\" width=\"1865\" height=\"836\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abSeleccionar medios\u00bb<\/figcaption><\/figure>\n<p>Elige la imagen que quieras y haz clic en el bot\u00f3n <strong>Seleccionar<\/strong>.<\/p>\n<figure style=\"width: 1777px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/sel.png\" alt=\"Elija la imagen y haga clic en el bot\u00f3n \"Seleccionar\"\" width=\"1777\" height=\"834\"><figcaption class=\"wp-caption-text\">Elige la imagen y haz clic en el bot\u00f3n \u00abSeleccionar\u00bb<\/figcaption><\/figure>\n<p>Ahora puedes ver esa imagen como fondo del bloque de la portada.<\/p>\n<p>No dudes en hacer clic en ese bloque para empezar a escribir el contenido de los p\u00e1rrafos, ya que la funci\u00f3n principal es la de superponer el texto.<\/p>\n<p>Lo mejor del bloque de la portada es que ofrece varias opciones de <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/\">formato<\/a>, lo que te permite pasar de un t\u00edtulo a un formato de p\u00e1rrafo en segundos.<\/p>\n<figure style=\"width: 1902px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-res-ult.png\" alt=\"Imagen de fondo de WordPress en la secci\u00f3n\" width=\"1902\" height=\"892\"><figcaption class=\"wp-caption-text\">Imagen de fondo de WordPress en la secci\u00f3n<\/figcaption><\/figure>\n<p>Para a\u00f1adir otros bloques sobre ese fondo, haz clic en el bot\u00f3n del icono \u00ab<strong>+<\/strong>\u00bb dentro del propio bloque de la portada. Es posible que tengas que pulsar la tecla Enter una vez para revelar el bot\u00f3n.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/blurring.png\" alt=\"Haga clic en el signo m\u00e1s dentro de la secci\u00f3n de bloques\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Haz clic en el signo m\u00e1s dentro de la secci\u00f3n de bloques<\/figcaption><\/figure>\n<p>De forma similar a la adici\u00f3n de un bloque de contenido en un art\u00edculo normal, el bloque de portada te permite desplazarte por todos los posibles bloques de contenido en WordPress.<\/p>\n<p>Esto significa que puedes colocar una imagen, una <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-galeria-fotos-wordpress\/\">galer\u00eda<\/a>, columnas o cualquier tipo de bloque de WordPress dentro del bloque de la portada, lo que lo convierte en la soluci\u00f3n ideal para los fondos de imagen con un bloque individual.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/search-for-block-1.png\" alt=\"b\u00fasqueda de bloque\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">B\u00fasqueda de bloque<\/figcaption><\/figure>\n<p>Para este ejemplo, he insertado una imagen y la he formateado un poco para que parezca aceptable dentro del bloque de la portada.<\/p>\n<p>Cada bloque que coloques delante del fondo tiene sus propios ajustes personalizados en la pesta\u00f1a Bloque del lado derecho, as\u00ed que considera la posibilidad de editarlos mientras los colocas en el bloque de la portada.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-block-complete.png\" alt=\"Un ejemplo de bloque con la imagen de fondo de WordPress\" width=\"1920\" height=\"883\"><figcaption class=\"wp-caption-text\">Un ejemplo de bloque con la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>En alg\u00fan momento, es posible que quieras editar o personalizar la propia imagen de fondo. Si ese es el caso, elige el bloque de la portada y luego ve a la pesta\u00f1a Configuraci\u00f3n del bloque en la parte derecha de la p\u00e1gina.<\/p>\n<p>Esto revela una mir\u00edada de configuraciones para ajustar la imagen de fondo, incluyendo las siguientes:<\/p>\n<ul>\n<li>Fondo fijo<\/li>\n<li>Antecedentes repetidos<\/li>\n<li>Recogida de puntos focales<\/li>\n<li>Dimensiones<\/li>\n<li>Superposici\u00f3n<\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-de-menu-de-wordpress\/#responsive-menu\">Opacidad<\/a><\/li>\n<li>Avanzado<\/li>\n<\/ul>\n<figure style=\"width: 1680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-clock-sets.png\" alt=\"Cambio de la configuraci\u00f3n del bloque\" width=\"1680\" height=\"940\"><figcaption class=\"wp-caption-text\">Cambio de la configuraci\u00f3n del bloque<\/figcaption><\/figure>\n<p>Una de las configuraciones m\u00e1s importantes a tener en cuenta se encuentra hacia la parte inferior del panel de <strong>Configuraci\u00f3n de Bloqueo<\/strong>.<\/p>\n<p>Despl\u00e1zate hacia abajo para encontrar la secci\u00f3n <strong>Superposici\u00f3n<\/strong>. Abre la secci\u00f3n para revelar una lista de superposiciones de color y opciones para hacer esos colores s\u00f3lidos o degradados.<\/p>\n<p>Esta es una gran opci\u00f3n para cambiar ligeramente el color de fondo para que coincida con tu marca o resalte su contenido en primer plano. Tambi\u00e9n puedes ajustar la <strong>Opacidad <\/strong>para asegurarte de que la superposici\u00f3n de color no abrume el fondo por completo.<\/p>\n<figure style=\"width: 1905px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/new-color.png\" alt=\"Cambiar el color de fondo del bloque\" width=\"1905\" height=\"895\"><figcaption class=\"wp-caption-text\">Cambiar el color de fondo del bloque<\/figcaption><\/figure>\n<p>Como alternativa, considera el <a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">plugin Stackable Page Builder Gutenberg Blocks<\/a> para abrir herramientas m\u00e1s avanzadas para los fondos en bloques individuales.<\/p>\n<h3>C\u00f3mo Poner una Imagen de Fondo Detr\u00e1s de la Cabecera de WordPress<\/h3>\n<p>Hasta ahora, hemos hablado de c\u00f3mo a\u00f1adir una imagen de fondo a todo tu sitio de WordPress, junto con m\u00e9todos para fondos en \u00e1reas espec\u00edficas como bloques de WordPress, entradas y p\u00e1ginas. Pero, \u00bfqu\u00e9 pasa con el \u00e1rea que contiene el men\u00fa y el logotipo?<\/p>\n<p>A veces, un fondo detr\u00e1s de tu cabecera es todo lo que necesitas.<\/p>\n<p>Poner una imsagen de fondo en la cabecera da un <a href=\"https:\/\/kinsta.com\/es\/blog\/cambiar-tema-wordpress\/\">nuevo aire<\/a> a tu sitio, sobre todo si hay alguna festividad o alguna gran venta que puedas destacar.<\/p>\n<p>Para empezar, dir\u00edgete a <strong>Apariencia &gt; Cabecera <\/strong>en el panel de control de WordPress.<\/p>\n<p><strong>Nota: <\/strong>Tambi\u00e9n puedes encontrar la configuraci\u00f3n de la cabecera yendo a <strong>Apariencia &gt; Personalizar &gt; Cabecera<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/head-here.png\" alt=\"Panel de control de WordPress &gt; Apariencia &gt; Cabecera\" width=\"1920\" height=\"910\"><figcaption class=\"wp-caption-text\">Panel de control de WordPress &gt; Apariencia &gt; Cabecera<\/figcaption><\/figure>\n<p>Ahora deber\u00eda ver una vista previa de tu p\u00e1gina de inicio en la parte derecha de la pantalla, junto con la configuraci\u00f3n del encabezado a la izquierda de la misma.<\/p>\n<p>Elz\u00f3dulo de cabecera explica las dimensiones preferidas para cualquier imagen de fondo de la cabecera, por lo que puedes optar por recortar tu imagen antes de subirla o esperar a tenerla en tu panel de WordPress.<\/p>\n<p>Bajo el t\u00edtulo de la<strong> cabecera actual<\/strong>, haz clic en el bot\u00f3n <strong>A\u00f1adir nueva imagen<\/strong>.<\/p>\n<figure style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/add-news.png\" alt=\"Haga clic en el bot\u00f3n \"A\u00f1adir nueva imagen\"\" width=\"1886\" height=\"940\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abA\u00f1adir nueva imagen\u00bb<\/figcaption><\/figure>\n<p>Las cabeceras son complicadas porque hay que asegurarse de que todos los <a href=\"https:\/\/kinsta.com\/es\/blog\/enlaces-ancla\/\">enlaces<\/a> y elementos de texto (por no mencionar el logotipo) se vean con claridad sobre la imagen de fondo.<\/p>\n<p>Por lo tanto, te recomendamos que pruebe las im\u00e1genes de fondo y considera las que se ci\u00f1en a colores y patrones m\u00e1s s\u00f3lidos. No dificultar\u00e1n tanto la visi\u00f3n de los elementos del men\u00fa y el logotipo.<\/p>\n<p>Selecciona una imagen que te parezca ideal y haz clic en el bot\u00f3n <strong>Seleccionar y Recortar <\/strong>para continuar.<\/p>\n<figure style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-func.png\" alt=\"Elija una imagen\" width=\"1860\" height=\"880\"><figcaption class=\"wp-caption-text\">Elige una imagen<\/figcaption><\/figure>\n<p>Nos gusta la herramienta de recorte incorporada, ya que proporciona autom\u00e1ticamente las dimensiones adecuadas para la imagen de fondo de la cabecera. Esto deber\u00eda acelerar el proceso en comparaci\u00f3n con la edici\u00f3n de una foto de antemano en algo como Photoshop.<\/p>\n<p>Mueve el cuadro de recorte a la ubicaci\u00f3n que tenga m\u00e1s sentido para tu imagen de fondo. Si\u00e9ntate libre de arrastrar una de las esquinas si necesita recortar la imagen a\u00fan m\u00e1s.<\/p>\n<p>Una vez que tengas el recorte perfecto, haz clic en el bot\u00f3n <strong>Recortar imagen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-im.png\" alt=\"Recortar la imagen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Recortar la imagen<\/figcaption><\/figure>\n<p>La imagen de fondo de la cabecera se activa inmediatamente en la vista previa del personalizador de WordPress, ayud\u00e1ndote a ver exactamente lo que tus clientes ver\u00e1n con este tipo de fondo.<\/p>\n<p>Observar\u00e1s que la imagen de fondo de la cabecera no se traslada al resto del contenido de la p\u00e1gina. En cambio, permanece en la cabecera, detr\u00e1s de todo lo que se encuentra all\u00ed, como el logotipo, el eslogan, el men\u00fa y la <a href=\"https:\/\/kinsta.com\/es\/blog\/busqueda-wordpress\/\">barra de b\u00fasqueda<\/a>.<\/p>\n<figure style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-actual-thing.png\" alt=\"Seleccione la imagen de fondo de la cabecera\" width=\"1901\" height=\"940\"><figcaption class=\"wp-caption-text\">Selecciona la imagen de fondo de la cabecera<\/figcaption><\/figure>\n<p>Otra opci\u00f3n para el fondo de tu cabecera es subir varias im\u00e1genes y hacerlas rotar aleatoriamente, a\u00f1adiendo un poco de brillo y sorpresa a tu sitio web cada vez que un usuario aterrice en la p\u00e1gina de inicio.<\/p>\n<p>Para que esto funcione, primero debes tener varias im\u00e1genes cargadas en el cuadro de configuraci\u00f3n de la cabecera. Haz clic en el bot\u00f3n <strong>A\u00f1adir nueva imagen <\/strong>para completar ese proceso.<\/p>\n<p>Una vez que tengas m\u00e1s de una imagen, haz clic en el bot\u00f3n <strong>Aleatorizar cabeceras cargadas <\/strong>para activar la funci\u00f3n que muestra un fondo de cabecera diferente cada vez.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/random.png\" alt=\"A\u00f1adir m\u00e1s cabeceras\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">A\u00f1adir m\u00e1s cabeceras<\/figcaption><\/figure>\n<p>Puedes notar que a\u00f1adir una imagen de fondo a la cabecera hace que sea dif\u00edcil ver algunos de los elementos de la cabecera, como el men\u00fa o el carrito de la compra.<\/p>\n<p>Si ese es el caso, le sugerimos que no elimine inmediatamente la imagen de la cabecera. En su lugar, vaya a los campos <strong>Color del texto <\/strong>y <strong>Color del enlace <\/strong>para ver si alg\u00fan ajuste puede ayudar.<\/p>\n<p>La configuraci\u00f3n del color del texto controla cualquier texto en la cabecera que no est\u00e9 hipervinculado a otra p\u00e1gina interna o externa. Muchas veces eso solo significa el eslogan, si tienes uno, pero a veces puedes tener otros elementos como el total del carrito de la compra o los iconos de las redes sociales que tambi\u00e9n cambian de color con el texto.<\/p>\n<p>La otra casilla es para el Color de los enlaces. Lo m\u00e1s probable es que vea m\u00e1s cambios cuando ajuste este color, ya que incluye todos los elementos del men\u00fa vinculados a otras p\u00e1ginas.<\/p>\n<figure style=\"width: 1921px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/lino-color.png\" alt=\"Color del texto sobre la imagen de fondo de WordPress\" width=\"1921\" height=\"941\"><figcaption class=\"wp-caption-text\">Color del texto sobre la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>Este es un ejemplo de lo que ocurre cuando se elige un nuevo color tanto para el <strong>Color del Texto <\/strong>como para el <strong>Color del Enlace<\/strong>. Puedes ver que el eslogan y el nombre del sitio han cambiado, el men\u00fa ha cambiado a blanco y tambi\u00e9n la mayor\u00eda de los dem\u00e1s elementos de la cabecera, como el icono del carrito de la compra.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/text-and-link.png\" alt=\"Comprobaci\u00f3n de los elementos de la cabecera\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Comprobaci\u00f3n de los elementos de la cabecert<\/figcaption><\/figure>\n<p>Para aquellos que no est\u00e9n interesados en utilizar una imagen de fondo para su cabecera, tambi\u00e9n tienen la opci\u00f3n de utilizar un fondo de color s\u00f3lido.<\/p>\n<p>Para ello, busca el campo Color de fondo en la misma \u00e1rea de Configuraci\u00f3n de la cabecera.<\/p>\n<p>Haz clic en el bot\u00f3n <strong>Seleccionar color <\/strong>y elige en el panel de colores para ver los resultados de la vista previa. Tambi\u00e9n puedes cambiar los colores del texto cuando se utiliza un color de fondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/do-the-back-color.png\" alt=\"Establecer un color de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Establecer un color de fondo<\/figcaption><\/figure>\n<p>Despu\u00e9s de probar lo que funciona mejor para su cabecera, y de decidir la imagen de fondo perfecta para esa cabecera, haz clic en el bot\u00f3n <strong>Publicar <\/strong>para que todos vean los cambios.<\/p>\n<p>Y si tienes alg\u00fan problema para visualizar los cambios en el frontend, considera la posibilidad de <a href=\"https:\/\/kinsta.com\/es\/blog\/borrar-cache-wordpress\/\">borrar la cach\u00e9 de WordPress<\/a>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/hit-pub.png\" alt=\"Haga clic en el bot\u00f3n \"Publicar\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abPublicar\u00bb<\/figcaption><\/figure>\n<p><strong>C\u00f3mo A\u00f1adir Im\u00e1genes de Fondo a la Categor\u00eda de WordPress y a la P\u00e1gina de Inicio de Sesi\u00f3n<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=7z3l5tsU3nU\"><\/kinsta-video>\n<h3>C\u00f3mo A\u00f1adir una Imagen de Fondo a una Categor\u00eda de WordPress<\/h3>\n<p>Una p\u00e1gina de archivo de categor\u00edas de WordPress recopila todas las entradas listadas bajo una determinada categor\u00eda. Por ejemplo, muchos sitios web tienen categor\u00edas para tipos de entradas personalizadas como Productos. Por defecto, todos los sitios web de WordPress tienen categor\u00edas para las entradas. Las que no se categorizan se etiquetan con la categor\u00eda <strong>Sin categor\u00eda<\/strong>.<\/p>\n<p>Dado que las p\u00e1ginas de archivo de las categor\u00edas agregan contenido similar, tiene sentido incluir una imagen de fondo relevante en esas p\u00e1ginas para mostrar mejor la categor\u00eda. Por ejemplo, podr\u00edas tener un fondo orientado a la tecnolog\u00eda para una categor\u00eda de Dise\u00f1o Web o un fondo con conchas marinas o motivos de playa para una categor\u00eda de Viajes.<\/p>\n<p>El m\u00e9todo de CSS personalizado (descrito a continuaci\u00f3n) es la opci\u00f3n m\u00e1s barata. Sin embargo, tambi\u00e9n puedes buscar en los diferentes constructores de p\u00e1ginas y plugins para ver cu\u00e1les de ellos permiten fondos en las p\u00e1ginas de categor\u00edas.<\/p>\n<p>Para completar esta tarea con CSS, abre tu panel de control de WordPress y dir\u00edgete a <strong>Apariencia &gt; Personalizar.<\/strong><\/p>\n<p>Selecciona la pesta\u00f1a <strong>CSS adicional <\/strong>para abrir el m\u00f3dulo que permite introducir tu propio CSS.<\/p>\n<figure style=\"width: 1538px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/additonal.png\" alt=\"Vaya a la secci\u00f3n \"CSS adicional\"\" width=\"1538\" height=\"940\"><figcaption class=\"wp-caption-text\">Dir\u00edgete a la secci\u00f3n \u00abCSS adicional\u00bb<\/figcaption><\/figure>\n<p>Abre una de sus p\u00e1ginas de archivo de categor\u00edas en tu sitio de WordPress. Normalmente, estas p\u00e1ginas tienen URLs como esta: <code>http:\/\/yourwebsitedomain.com\/category\/travel<\/code>. Tienes que cambiar la parte de <strong>viajes <\/strong>por la categor\u00eda que tengas en tu propio sitio y cambiar la parte de <strong>yourwebsitedoman <\/strong>por tu nombre de dominio real.<\/p>\n<p>Haz clic con el bot\u00f3n derecho en cualquier parte de la p\u00e1gina de la categor\u00eda y haz clic en Inspeccionar. Aparecer\u00e1 la herramienta de inspecci\u00f3n en su navegador, con el c\u00f3digo de esa p\u00e1gina presentado para que lo veas.<\/p>\n<figure style=\"width: 1433px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insepting.png\" alt=\"Haga clic con el bot\u00f3n derecho del rat\u00f3n en la p\u00e1gina web y seleccione \"Inspeccionar\"\" width=\"1433\" height=\"812\"><figcaption class=\"wp-caption-text\">Haz clic con el bot\u00f3n derecho del rat\u00f3n en la p\u00e1gina web y seleccione \u00abInspeccionar\u00bb<\/figcaption><\/figure>\n<p>Busque \u00abbody\u00bb o \u00abclass\u00bb para localizar la clase CSS de las p\u00e1ginas de categor\u00eda, junto con la clase de esta categor\u00eda en particular.<\/p>\n<p>Para esta situaci\u00f3n, nuestra clase CSS es \u00abcategory-travel\u00bb, ya que tengo una categor\u00eda llamada \u00abTravel\u00bb en el sitio.<\/p>\n<p>Guarda la etiqueta CSS para m\u00e1s tarde.<\/p>\n<figure style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/travel-cat.png\" alt=\"Anote la categor\u00eda que aparece\" width=\"986\" height=\"771\"><figcaption class=\"wp-caption-text\">Apunta la categor\u00eda que aparece<\/figcaption><\/figure>\n<p>Despu\u00e9s de eso, navega de nuevo a la secci\u00f3n de <strong>CSS adicional <\/strong>en su personalizador de WordPress.<\/p>\n<p>Pega el siguiente c\u00f3digo en ese cuadro, cambiando la clase <code>category-travel<\/code> por la Tuya propia y colocando una URL de imagen real en el lugar que dice <code>http:\/\/YOURIMAGEURL.jpeg<\/code>.<\/p>\n<pre><code class=\"language-html\">body.category-travel {\nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\");\nbackground-position: center center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Pulsa el bot\u00f3n <strong>Publicar <\/strong>para guardar los cambios.<\/p>\n<figure style=\"width: 1160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/go-and-pub.png\" alt=\"A\u00f1adiendo el c\u00f3digo 'Custom CSS'\" width=\"1160\" height=\"778\"><figcaption class=\"wp-caption-text\">A\u00f1adiendo el c\u00f3digo &#8216;Custom CSS&#8217;<\/figcaption><\/figure>\n<p>Por \u00faltimo, vuelve a la p\u00e1gina del archivo de categor\u00edas en el frontend de tu sitio de WordPress. Ahora deber\u00eda mostrar la misma p\u00e1gina de antes, pero con el fondo especificado en el c\u00f3digo CSS. Si tienes alg\u00fan problema con el formato de la imagen de fondo de WordPress, vuelve al panel de CSS adicional para ajustar elementos como la posici\u00f3n, el tama\u00f1o y la funci\u00f3n de repetici\u00f3n del fondo.<\/p>\n<figure style=\"width: 1597px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-cat-page.png\" alt=\"Vaya a la p\u00e1gina de la categor\u00eda y vea el fondo\" width=\"1597\" height=\"904\"><figcaption class=\"wp-caption-text\">Dir\u00edgete a la p\u00e1gina de la categor\u00eda y vea el fondo<\/figcaption><\/figure>\n<h3>C\u00f3mo A\u00f1adir una Imagen de Fondo a Tu P\u00e1gina de Inicio de Sesi\u00f3n de WordPress<\/h3>\n<p>La p\u00e1gina de inicio de sesi\u00f3n de WordPress tiene dos versiones: una para los usuarios normales que llegan a tu sitio y quieren registrarse e iniciar sesi\u00f3n en tu sitio web, y la otra para los usuarios internos, como los administradores y los autores.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/encontrar-wordpress-url\/\">Estas p\u00e1ginas de inicio de sesi\u00f3n<\/a> est\u00e1n separadas del funcionamiento principal de tu sitio web (la mayor\u00eda de los archivos se encuentran en el archivo <strong>wp-login.php<\/strong>). Por lo tanto, la herramienta de imagen de fondo personalizada no se extender\u00e1 a los m\u00f3dulos de inicio de sesi\u00f3n.<\/p>\n<p>Puedes hacerlo utilizando un plugin llamado <a href=\"https:\/\/wordpress.org\/plugins\/loginpress\/\">Custom Login Page Customizer<\/a>. Para empezar, instala y activa el plugin en tu sitio de WordPress.<\/p>\n<figure style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/Custom-Login-Page-Customizer.png\" alt=\"Plugin LoginPress\" width=\"1329\" height=\"434\"><figcaption class=\"wp-caption-text\">Plugin LoginPress<\/figcaption><\/figure>\n<p>A la izquierda, aparece una nueva pesta\u00f1a en el men\u00fa del panel de control de WordPress para LoginPress.<\/p>\n<p>Dir\u00edgete a <strong>LoginPress &gt; Configuraci\u00f3n.<\/strong><\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/loginpresss.png\" alt=\"Ir a la configuraci\u00f3n de LoginPress\" width=\"1900\" height=\"912\"><figcaption class=\"wp-caption-text\">Ir a la configuraci\u00f3n de LoginPress<\/figcaption><\/figure>\n<p>Aqu\u00ed, puedes ajustar la configuraci\u00f3n del plugin antes de a\u00f1adir tu imagen de fondo y personalizar cualquier otra parte de tu p\u00e1gina de inicio de sesi\u00f3n.<\/p>\n<p>Por ejemplo, ofrece configuraciones para recordar autom\u00e1ticamente a los usuarios, mostrar campos de contrase\u00f1a personalizados y expirar las sesiones despu\u00e9s de un determinado per\u00edodo de tiempo.<\/p>\n<figure style=\"width: 1413px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-sets.png\" alt=\"Cambiar la configuraci\u00f3n de LoginPress\" width=\"1413\" height=\"940\"><figcaption class=\"wp-caption-text\">Cambiar la configuraci\u00f3n de LoginPress<\/figcaption><\/figure>\n<p>Para activar un fondo de imagen personalizado para la p\u00e1gina de inicio de sesi\u00f3n, haz clic en <strong>LoginPress &gt; Customizer.<\/strong><\/p>\n<figure style=\"width: 1352px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/customizer-o.png\" alt=\"Ir a 'LoginPress &gt; Customizer'\" width=\"1352\" height=\"940\"><figcaption class=\"wp-caption-text\">Ir a &#8216;LoginPress &gt; Customizer&#8217;<\/figcaption><\/figure>\n<p>Esto te env\u00eda al Personalizador de WordPress, donde se ha a\u00f1adido una nueva p\u00e1gina para las herramientas de LoginPress. Ver\u00e1s que hay pesta\u00f1as para Temas, Logotipo, Fondo y muchos m\u00e1s.<\/p>\n<p>Tambi\u00e9n es posible personalizar la p\u00e1gina de inicio de sesi\u00f3n haciendo clic en los botones de la vista previa.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/setting-to-go.png\" alt=\"Configuraci\u00f3n de un tema de LoginPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Configuraci\u00f3n de un tema de LoginPress<\/figcaption><\/figure>\n<p>No cubriremos todos los dem\u00e1s ajustes, ya que ahora nos centramos principalmente en el fondo.<\/p>\n<p>Haz clic en la pesta\u00f1a <strong>Fondo <\/strong>para continuar.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-the-back.png\" alt=\"Ir a la pesta\u00f1a de fondo 'LoginPress'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Dir\u00edgete a la pesta\u00f1a de fondo &#8216;LoginPress&#8217;<\/figcaption><\/figure>\n<p>Lo primero es decidir si quieres un fondo de color o de imagen.<\/p>\n<p>Si prefieres un fondo de color, localiza el campo <strong>Color de fondo <\/strong>y haz clic en <strong>Seleccionar color<\/strong>. Esto revela un panel de colores para que elijas exactamente qu\u00e9 color tiene sentido para tu negocio.<\/p>\n<p>Como puedes ver, el cambio entra en vigor tambi\u00e9n en la vista previa del Personalizador de WordPress.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-color.png\" alt=\"Seleccione el color de fondo de 'LoginPress'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Selecciona el color de fondo de &#8216;LoginPress&#8217;<\/figcaption><\/figure>\n<p>Justo debajo de la configuraci\u00f3n del<strong> color de fondo<\/strong>, hay una secci\u00f3n de <strong>imagen de fondo<\/strong>.<\/p>\n<p>Activa el interruptor de <strong>Habilitar Imagen de Fondo <\/strong>para mostrar una colecci\u00f3n de im\u00e1genes de fondo ya hechas.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enable-this.png\" alt=\"Habilitar la imagen de fondo de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Habilitar la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>No hay muchos para elegir en la versi\u00f3n gratuita, pero el plugin a\u00f1ade m\u00e1s si decides actualizar a la versi\u00f3n premium.<\/p>\n<p>Prueba estos fondos prefabricados para ver si pueden funcionar para tu marca.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/changing-the-back.png\" alt=\"C\u00f3mo configurar una galer\u00eda de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">C\u00f3mo configurar una galer\u00eda de fondo<\/figcaption><\/figure>\n<p>El camino m\u00e1s probable es subir tu propia imagen como fondo de la p\u00e1gina de inicio de sesi\u00f3n.<\/p>\n<p>Busca el apartado Imagen de fondo y haz clic en el bot\u00f3n <strong>Seleccionar imagen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-image-s-s-s.png\" alt=\"Elija la opci\u00f3n \"Seleccionar imagen\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elige la opci\u00f3n \u00abSeleccionar imagen\u00bb<\/figcaption><\/figure>\n<p>Se te llevar\u00e1 a la biblioteca multimedia de WordPress para que suba una imagen desde tu ordenador o elijas una de las que ya est\u00e1n dentro de WordPress.<\/p>\n<p>Selecciona la foto que desees y haz clic en el bot\u00f3n <strong>Elegir imagen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choosing-that.png\" alt=\"Elija la imagen de fondo de inicio de sesi\u00f3n de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elige la imagen de fondo de inicio de sesi\u00f3n de WordPress<\/figcaption><\/figure>\n<p>La imagen de fondo activada aparece como una miniatura en el panel del Personalizador y en la vista previa real de tu p\u00e1gina de acceso.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-result-s-s.png\" alt=\"Establecer las opciones de la imagen de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Establecer las opciones de la imagen de fondo<\/figcaption><\/figure>\n<p>Ahora tienes la opci\u00f3n de hacer clic en el bot\u00f3n <strong>Publicar <\/strong>y quedarte con lo que hay en la pantalla. O bien, puedes desplazarte hacia abajo hasta los ajustes adicionales para asegurarte de que la mejor vista de la imagen cargada est\u00e1 actualmente activa.<\/p>\n<p>Haz clic en el campo desplegable <strong>Repetici\u00f3n de fondo <\/strong>y prueba opciones como <strong>Repetir<\/strong>, <strong>No repetir <\/strong>y <strong>Repetir-x<\/strong>.<\/p>\n<p>Dependiendo del tama\u00f1o de tu foto, puede que veas que la imagen se mueve un poco o no.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/repeating.png\" alt=\"Elija la configuraci\u00f3n de \"Repetici\u00f3n de fondo\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elige la configuraci\u00f3n de \u00abRepetici\u00f3n de fondo\u00bb<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, busca en las opciones de Seleccionar posici\u00f3n para mover a\u00fan m\u00e1s la imagen de fondo.<\/p>\n<p>Por defecto, colocan la imagen en el centro de la pantalla, pero a veces queda mejor si la tienes situada en alg\u00fan lugar como la parte inferior derecha o la superior izquierda. Prueba todos ellos para averiguar cu\u00e1l funciona mejor para tu imagen de fondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-pos.png\" alt=\"Seleccione la posici\u00f3n del fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Selecciona la posici\u00f3n del fondo<\/figcaption><\/figure>\n<p>Avanzando, el men\u00fa desplegable de Tama\u00f1o de la Imagen de Fondo de WordPress tiene la configuraci\u00f3n de c\u00f3mo la imagen cubre el espacio de la pantalla, ajustando su tama\u00f1o con cada opci\u00f3n preestablecida.<\/p>\n<p>De nuevo, prueba estos ajustes para decidir cu\u00e1l es el que mejor se ve. Es posible que descubras que algo como el ajuste Contain ofrece una vista mejorada en lugar de los ajustes Auto o Cover.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enabling.png\" alt=\"Establecer el tama\u00f1o de la imagen de fondo de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Establecer el tama\u00f1o de la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>Y eso es todo lo que hay que hacer para subir y activar una imagen de fondo para tu p\u00e1gina de acceso.<\/p>\n<p>El \u00faltimo ajuste est\u00e1 ah\u00ed si quieres mostrar un v\u00eddeo como fondo en lugar de una imagen. Activa esta opci\u00f3n si tienes un v\u00eddeo interesante relacionado con tu negocio y que no desv\u00ede demasiado la atenci\u00f3n de las personas que se conectan al sitio.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/video-on.png\" alt=\"Activar el \"v\u00eddeo de fondo\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Activar el \u00abv\u00eddeo de fondo\u00bb<\/figcaption><\/figure>\n<p>Una vez que todo est\u00e9 hecho, haz clic en el bot\u00f3n <strong>Publicar <\/strong>para activar el fondo de tu p\u00e1gina de inicio de sesi\u00f3n y ver que se muestra cada vez que un usuario intenta registrarse o iniciar sesi\u00f3n en el sitio.<\/p>\n<h3>C\u00f3mo A\u00f1adir una Imagen de Fondo a Tu Men\u00fa de Navegaci\u00f3n<\/h3>\n<p>Es posible que hayas observado algunos sitios web con men\u00fas extravagantes que incluyen im\u00e1genes de fondo o iconos. Esta es una pr\u00e1ctica com\u00fan en el mundo del eCommerce, donde la marca puede tener un mega men\u00fa con categor\u00edas e im\u00e1genes de fondo para cada bot\u00f3n de categor\u00eda.<\/p>\n<p>Si est\u00e1s interesado en a\u00f1adir fondos a tu men\u00fa, mira <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-de-menu-de-wordpress\/\">nuestro art\u00edculo sobre los mejores plugins de men\u00fa para WordPress<\/a>. Muchos de estos plugins de men\u00fa ofrecen opciones para incluir fondos de imagen y de color dentro de tu men\u00fa.<\/p>\n<p>Dado que existen varios plugins para a\u00f1adir un fondo determinado a los men\u00fas de navegaci\u00f3n, proporcionaremos tutoriales para dos de ellos, uno de los cuales permite crear fondos detr\u00e1s de tu submen\u00fa. En cambio, el otro a\u00f1ade un fondo a tu men\u00fa m\u00f3vil.<\/p>\n<p>Para a\u00f1adir una imagen de fondo a diferentes submen\u00fas, instala y activa el <a href=\"https:\/\/wordpress.org\/plugins\/wp-megamenu\/\">plugin WP Mega Menu<\/a>. Este plugin te permite activar y gestionar un mega-men\u00fa con m\u00faltiples niveles desplegables. Es ideal para grandes tiendas online, pero tambi\u00e9n sirve para men\u00fas m\u00e1s peque\u00f1os, especialmente si quieres a\u00f1adir una imagen de fondo o iconos.<\/p>\n<figure style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/wp-mega-menu.png\" alt=\"WP Mega Menu plugin\" width=\"1402\" height=\"374\"><figcaption class=\"wp-caption-text\">WP Mega Menu plugin<\/figcaption><\/figure>\n<p>Comienza por encontrar la pesta\u00f1a WP Mega Menu en el panel de control de WordPress.<\/p>\n<p>Haz clic en la opci\u00f3n de men\u00fa <strong>Temas<\/strong>.<\/p>\n<figure style=\"width: 1240px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themes-s-s.png\" alt=\"Ir al panel de 'Temas'\" width=\"1240\" height=\"905\"><figcaption class=\"wp-caption-text\">Haz click en el menu &#8216;Temas&#8217;<\/figcaption><\/figure>\n<p>Aqu\u00ed puedes ver una lista de temas por defecto creados para tu men\u00fa por el plugin.<\/p>\n<p>Puedes hacer clic para editar cualquiera de los temas o a\u00f1adir tu propio dise\u00f1o desde cero.<\/p>\n<figure style=\"width: 1867px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/see-themes.png\" alt=\"Los numerosos temas del Mega Men\u00fa\" width=\"1867\" height=\"841\"><figcaption class=\"wp-caption-text\">Los numerosos temas del Mega Menu<\/figcaption><\/figure>\n<p>Cada tema tiene su propia configuraci\u00f3n donde se especifican elementos como el t\u00edtulo del tema, las opciones de la barra de men\u00fas y el logotipo de la marca. Casi todas las partes de tu men\u00fa son personalizables, desde el men\u00fa desplegable hasta los submen\u00fas.<\/p>\n<p>Sin embargo, para el fondo del men\u00fa, solo tienes que saber qu\u00e9 tema quieres elegir.<\/p>\n<figure style=\"width: 1757px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/main-sets.png\" alt=\"Establecer la configuraci\u00f3n del tema del Mega Men\u00fa\" width=\"1757\" height=\"843\"><figcaption class=\"wp-caption-text\">Establecer la configuraci\u00f3n del tema del Mega Men\u00fa<\/figcaption><\/figure>\n<p>Dir\u00edgete a <strong>Apariencia &gt; Men\u00fas <\/strong>en el panel de control.<\/p>\n<figure style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/app-menu.png\" alt=\"Ir a 'Apariencia &gt; Men\u00fas'\" width=\"1470\" height=\"737\"><figcaption class=\"wp-caption-text\">Ir a &#8216;Apariencia &gt; Men\u00fas&#8217;<\/figcaption><\/figure>\n<p>Ver\u00e1s un nuevo m\u00f3dulo que enlaza con la <strong>configuraci\u00f3n del Mega Men\u00fa<\/strong>.<\/p>\n<p>Haz clic para <strong>habilitar <\/strong>el mega men\u00fa y luego elige el que m\u00e1s te guste para tu sitio web.<\/p>\n<p>Por \u00faltimo, haz clic en el bot\u00f3n <strong>Guardar<\/strong>.<\/p>\n<figure style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/enable-it-s.png\" alt=\"Haga clic en el bot\u00f3n \"Activar\"\" width=\"1471\" height=\"901\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abActivar\u00bb<\/figcaption><\/figure>\n<p>Ahora, desplaza tu atenci\u00f3n hacia el \u00e1rea de la <strong>Estructura del Men\u00fa<\/strong>.<\/p>\n<p>Si se desplaza sobre cualquiera de tus elementos de men\u00fa actuales, aparecer\u00e1 un bot\u00f3n de <strong>WP Mega Menu<\/strong>. Aqu\u00ed es donde se personaliza la disposici\u00f3n y el dise\u00f1o de cada secci\u00f3n desplegable.<\/p>\n<p>Haz clic en el bot\u00f3n <strong>WP Mega Menu <\/strong>para cualquier elemento del men\u00fa que desees. Para este caso, vamos a a\u00f1adir un mega men\u00fa desplegable a la pesta\u00f1a Tienda.<\/p>\n<p><strong>Nota: <\/strong>Asumimos que ya tienes un men\u00fa configurado en tu sitio de WordPress. Lee nuestra <a href=\"https:\/\/kinsta.com\/es\/blog\/menu-desplegable-wordpress\/\">gu\u00eda de men\u00fas desplegables de WordPress<\/a> si necesitas ayuda con eso.<\/p>\n<figure style=\"width: 1455px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/selected-on.png\" alt=\"A\u00f1adir el mega men\u00fa a su sitio\" width=\"1455\" height=\"857\"><figcaption class=\"wp-caption-text\">A\u00f1adir el mega men\u00fa a tu sitio<\/figcaption><\/figure>\n<p>En la nueva ventana emergente, acciona el interruptor para activar el Mega Men\u00fa para ese elemento de men\u00fa en particular.<\/p>\n<p>A continuaci\u00f3n, puedes a\u00f1adir una fila desplegable y arrastrar algunos de los muchos widgets del lado izquierdo a esa fila. Por ejemplo, arrastraremos una lista de productos para que aparezcan cuando alguien se desplace sobre el elemento del men\u00fa Tienda.<\/p>\n<figure style=\"width: 1855px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row.png\" alt=\"Haga clic en el bot\u00f3n \"A\u00f1adir ahora\"\" width=\"1855\" height=\"918\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abA\u00f1adir ahora\u00bb<\/figcaption><\/figure>\n<p>Para a\u00f1adir un fondo a esta zona desplegable, haz clic en el bot\u00f3n <strong>Opciones <\/strong>de la esquina inferior izquierda.<\/p>\n<figure style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/options-s-s.png\" alt=\"Seleccione el enlace \"Opciones\"\" width=\"1701\" height=\"916\"><figcaption class=\"wp-caption-text\">Selecciona el enlace \u00abOpciones\u00bb<\/figcaption><\/figure>\n<p>Busca el campo <strong>Cargar imagen de fondo<\/strong>.<\/p>\n<p>Haz clic en el bot\u00f3n <strong>Cargar <\/strong>para encontrar la foto adecuada en tu biblioteca multimedia y utilizarla como fondo.<\/p>\n<figure style=\"width: 1751px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-bg-up.png\" alt=\"Seleccione el bot\u00f3n \"Cargar imagen\"\" width=\"1751\" height=\"785\"><figcaption class=\"wp-caption-text\">Selecciona el bot\u00f3n \u00abCargar imagen\u00bb<\/figcaption><\/figure>\n<p>Una imagen en miniatura aparece despu\u00e9s de seleccionarla en la biblioteca de medios.<\/p>\n<p>Hay otros ajustes a tener en cuenta, as\u00ed que no dudes en comprobarlos si quieres.<\/p>\n<figure style=\"width: 1768px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-image-uploaded.png\" alt=\"Verificar la miniatura\" width=\"1768\" height=\"728\"><figcaption class=\"wp-caption-text\">Verificar la miniatura<\/figcaption><\/figure>\n<p>Aseg\u00farate de hacer clic en el bot\u00f3n <strong>Guardar cambios <\/strong>en la parte inferior del panel de <strong>opciones<\/strong>.<\/p>\n<figure style=\"width: 1767px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-them-s-s.png\" alt=\"Haga clic en el bot\u00f3n \"Guardar cambios\"\" width=\"1767\" height=\"864\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abGuardar cambios\u00bb<\/figcaption><\/figure>\n<p>Tambi\u00e9n tienes que hacer clic en Guardar men\u00fa de nuevo en el \u00e1rea de la estructura del men\u00fa del panel de control de WordPress.<\/p>\n<figure style=\"width: 1887px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-menu-s.png\" alt=\"Haga clic en el bot\u00f3n \"Guardar men\u00fa\"\" width=\"1887\" height=\"877\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abGuardar men\u00fa\u00bb<\/figcaption><\/figure>\n<p>Ahora, navega al frontend de tu sitio web para ver el men\u00fa. Si te desplazas sobre el elemento que acabamos de personalizar, deber\u00edas ver una secci\u00f3n desplegable con el fondo.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-shop-bg.png\" alt=\"El men\u00fa tiene ahora una imagen de fondo\" width=\"1900\" height=\"867\"><figcaption class=\"wp-caption-text\">El men\u00fa tiene ahora una imagen de fondo<\/figcaption><\/figure>\n<p>Otra forma de a\u00f1adir una imagen de fondo a un men\u00fa es utilizando un men\u00fa m\u00f3vil y responsivo que se muestra cuando alguien accede a tu sitio web a trav\u00e9s de un dispositivo m\u00f3vil.<\/p>\n<p>Puedes colocar un fondo detr\u00e1s del men\u00fa m\u00f3vil con la ayuda del plugin <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-plugin-movil\/#wp-mobile-menu\">WP Mobile Menu<\/a>.<\/p>\n<figure style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WP-Mobile-Menu.png\" alt=\"WP Mobile Menu plugin\" width=\"1640\" height=\"433\"><figcaption class=\"wp-caption-text\">WP Mobile Menu plugin<\/figcaption><\/figure>\n<p>Despu\u00e9s de instalar y activar el plugin WP Mobile Menu, dir\u00edgete a las opciones de men\u00fa m\u00f3vil en el panel de control de WordPress.<\/p>\n<figure style=\"width: 1361px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/mobile-menu-options.png\" alt=\"Vaya al enlace \"Opciones de men\u00fa para m\u00f3viles\"\" width=\"1361\" height=\"906\"><figcaption class=\"wp-caption-text\">Dir\u00edgete al enlace \u00abOpciones de men\u00fa para m\u00f3viles\u00bb<\/figcaption><\/figure>\n<p>El plugin ofrece varias formas de configurar tu men\u00fa m\u00f3vil. El requisito general es habilitar uno de los formatos de men\u00fa e indicar qu\u00e9 men\u00fa de WordPress quieres usar para ese men\u00fa m\u00f3vil.<\/p>\n<p>Por ejemplo, podemos hacer clic en el interruptor de <strong>Habilitar Men\u00fa Izquierdo <\/strong>(activando un men\u00fa m\u00f3vil que se sit\u00fae en el lado izquierdo de la pantalla) y elegir la opci\u00f3n de <strong>Men\u00fa Principal<\/strong> en el desplegable de <strong>Men\u00fa Izquierdo<\/strong>. Esto enlaza nuestro Men\u00fa Principal actual con el men\u00fa m\u00f3vil, de modo que los visitantes ven las mismas pesta\u00f1as.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/turn-on-a-menu.png\" alt=\"Configurar las opciones del men\u00fa del m\u00f3vil\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Configurar las opciones del men\u00fa del m\u00f3vil<\/figcaption><\/figure>\n<p>Depende del tipo de men\u00fa m\u00f3vil que crees, pero como estamos haciendo un men\u00fa del lado izquierdo, podemos hacer clic en la pesta\u00f1a Men\u00fa izquierdo para revelar la configuraci\u00f3n adecuada para a\u00f1adir un fondo.<\/p>\n<p>Despl\u00e1zate hasta el campo <strong>Imagen de fondo del panel <\/strong>y haz clic en el signo \u00ab<strong>+<\/strong>\u00bb para abrir la biblioteca multimedia.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-panel.png\" alt=\"A\u00f1adir una imagen de fondo al men\u00fa del m\u00f3vil\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">A\u00f1adir una imagen de fondo al men\u00fa del m\u00f3vil<\/figcaption><\/figure>\n<p>Selecciona una imagen de tu biblioteca multimedia y a\u00f1\u00e1dela al campo.<\/p>\n<p>Deber\u00edas ver una versi\u00f3n en miniatura de la imagen de fondo como confirmaci\u00f3n.<\/p>\n<p>Selecciona el bot\u00f3n <strong>Guardar cambios <\/strong>para activar el fondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-the-change.png\" alt=\"Verificar la imagen de fondo con la miniatura\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Verificar la imagen de fondo con la miniatura<\/figcaption><\/figure>\n<p>Dado que el plugin genera men\u00fas para m\u00f3viles, es posible que el men\u00fa solo aparezca cuando tu navegador est\u00e9 configurado con un ancho reducido o cuando vayas a su sitio en un tel\u00e9fono o una tableta.<\/p>\n<p>El nuevo men\u00fa se consolida bajo un icono de hamburguesa (tres l\u00edneas horizontales).<\/p>\n<p>Haz clic en eso para probar el nuevo men\u00fa con el fondo.<\/p>\n<figure style=\"width: 1196px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/click-on-it-now.png\" alt=\"Haga clic en el icono del men\u00fa hamburguesa\" width=\"1196\" height=\"844\"><figcaption class=\"wp-caption-text\">Haz clic en el icono del men\u00fa hamburguesa<\/figcaption><\/figure>\n<p>Como se muestra en la captura de pantalla, el fondo se coloca detr\u00e1s de todo el men\u00fa del m\u00f3vil para que todos lo vean.<\/p>\n<figure style=\"width: 1195px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-finished-product-background.png\" alt=\"Men\u00fa m\u00f3vil con una imagen de fondo\" width=\"1195\" height=\"826\"><figcaption class=\"wp-caption-text\">Men\u00fa m\u00f3vil con una imagen de fondo<\/figcaption><\/figure>\n<h3>C\u00f3mo A\u00f1adir una Imagen de Fondo de WordPress a una P\u00e1gina de Mantenimiento<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/mantenimiento-de-wordpress\/\">Todos los sitios web requieren ocasionalmente mantenimiento<\/a>, y a veces ese mantenimiento dura tanto que mostrar una p\u00e1gina de mantenimiento ayuda.<\/p>\n<p>Las im\u00e1genes de fondo juegan un papel importante cuando se trabaja con <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-modo-de-mantenimiento\/\">p\u00e1ginas de mantenimiento<\/a>. La mayor\u00eda de las p\u00e1ginas de mantenimiento consisten en una imagen de fondo a pantalla completa y quiz\u00e1s alg\u00fan texto o enlaces con m\u00e1s recursos.<\/p>\n<p>Si ya tienes una p\u00e1gina de mantenimiento y no incluye una imagen de fondo, considera los siguientes pasos para generar un entorno bonito para cuando necesites cerrar tu sitio web al p\u00fablico durante un periodo de tiempo.<\/p>\n<p>Puedes a\u00f1adir una imagen de fondo a una p\u00e1gina de mantenimiento con la ayuda del <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">plugin de Maintenance<\/a>. Instala y activa el plugin en tu sitio web.<\/p>\n<figure style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance.png\" alt=\"Plugin de mantenimiento\" width=\"1328\" height=\"431\"><figcaption class=\"wp-caption-text\">Plugin de Maintenance<\/figcaption><\/figure>\n<p>Una vez que est\u00e9 activo, busca el bot\u00f3n <strong>Maintenance is On\/Off<\/strong> \u00a0en la parte superior del panel de control.<\/p>\n<p>Haz clic en el bot\u00f3n para ir a la p\u00e1gina de configuraci\u00f3n del plugin de Maintenance.<\/p>\n<p>Otra forma de llegar a la p\u00e1gina de Configuraci\u00f3n es haciendo clic en el elemento de men\u00fa de <strong>Mantenance <\/strong>en el men\u00fa lateral del panel de control.<\/p>\n<figure style=\"width: 1614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-on-bottom.png\" alt=\"Haga clic en la opci\u00f3n de men\u00fa \"Mantenimiento\"\" width=\"1614\" height=\"909\"><figcaption class=\"wp-caption-text\">Haz clic en la opci\u00f3n de men\u00fa \u00abMaintenance\u00bb<\/figcaption><\/figure>\n<p>La p\u00e1gina de Configuraci\u00f3n del plugin de Maintenance tiene una buena colecci\u00f3n de opciones para personalizar, pero el \u00e1rea principal a considerar es el m\u00f3dulo de <strong>Configuraci\u00f3n General<\/strong>. Aqu\u00ed, puedes escribir un Titular y una Descripci\u00f3n, ambos sirven como texto que se superpone sobre el fondo que vamos a insertar.<\/p>\n<p>El t\u00edtulo de la p\u00e1gina se muestra en la pesta\u00f1a del navegador, por lo que deber\u00eda considerar personalizarlo tambi\u00e9n.<\/p>\n<p>Puedes utilizar el plugin de mantenimiento para cualquier cosa, desde p\u00e1ginas de mantenimiento hasta p\u00e1ginas de pr\u00f3xima aparici\u00f3n, por lo que podr\u00edas escribir algo como \u00abNuestro sitio est\u00e1 en mantenimiento\u00bb, o podr\u00edas mostrar un poco de informaci\u00f3n sobre tu empresa e incluir un formulario para que la gente escriba sus direcciones de correo electr\u00f3nico.<\/p>\n<figure style=\"width: 1622px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-ss.png\" alt=\"A\u00f1adir un titular para la p\u00e1gina de mantenimiento\" width=\"1622\" height=\"940\"><figcaption class=\"wp-caption-text\">A\u00f1adir un titular para la p\u00e1gina de mantenimiento<\/figcaption><\/figure>\n<p>Adem\u00e1s, el plugin ofrece una opci\u00f3n para subir tu logotipo, que tambi\u00e9n se superpone a la imagen de fondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-up.png\" alt=\"Bot\u00f3n \"Cargar logotipo\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Bot\u00f3n \u00abSubir logotipo\u00bb<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n <strong>Subir logotipo <\/strong>y elige tu logotipo para ver su miniatura en el panel de control.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-in.png\" alt=\"Logotipo de la p\u00e1gina de mantenimiento\" width=\"1618\" height=\"940\"><figcaption class=\"wp-caption-text\">Logotipo de la p\u00e1gina de mantenimiento<\/figcaption><\/figure>\n<p>Por \u00faltimo, el campo Imagen de fondo te pide que haz clic en el bot\u00f3n Subir imagen de fondo.<\/p>\n<p>Cargue una imagen desde su ordenador o busque en su biblioteca multimedia un fondo adecuado para la p\u00e1gina de mantenimiento.<\/p>\n<p><strong>Nota: <\/strong>Las mejores im\u00e1genes de fondo de mantenimiento son grandes, de alta resoluci\u00f3n y en orientaci\u00f3n horizontal. Una alternativa de fondo en \u00abmodo vertical\u00bb est\u00e1 disponible en la configuraci\u00f3n de abajo.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/upload-back.png\" alt=\"Haga clic en el bot\u00f3n \"Cargar fondo\"\" width=\"1616\" height=\"940\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abSubir fondo\u00bb<\/figcaption><\/figure>\n<p>Una vez que elijas el fondo, aparecer\u00e1 como una vista previa en miniatura m\u00e1s peque\u00f1a en el panel de control.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-one.png\" alt=\"La imagen de fondo en miniatura\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">La imagen de fondo en miniatura<\/figcaption><\/figure>\n<p>Aunque una imagen de fondo con orientaci\u00f3n horizontal tiene m\u00e1s sentido para los ordenadores de sobremesa y las pantallas m\u00e1s anchas, muchas personas terminan en tu sitio utilizando pantallas con orientaci\u00f3n vertical, como cuando se sostiene un tel\u00e9fono en posici\u00f3n vertical.<\/p>\n<p>Por lo tanto, una imagen de fondo m\u00e1s amplia no se ver\u00e1 tan bien. Por ello, el plugin ofrece una imagen de fondo en modo vertical que sirve como alternativa, y que se cambia de forma responsiva cada vez que un usuario visita la p\u00e1gina utilizando una pantalla orientada al vertical.<\/p>\n<p>Es importante incluir una imagen en este campo, as\u00ed que haz clic en el bot\u00f3n <strong>Subir imagen para la orientaci\u00f3n vertical del dispositivo<\/strong>.<\/p>\n<figure style=\"width: 1615px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port.png\" alt=\"Sube una imagen de fondo con orientaci\u00f3n vertical\" width=\"1615\" height=\"912\"><figcaption class=\"wp-caption-text\">Sube una imagen de fondo con orientaci\u00f3n vertical<\/figcaption><\/figure>\n<p>Esta vez, busca una imagen que sea m\u00e1s alta que ancha (modo retrato). Siempre puedes recortar la imagen de fondo original para convertirla en un retrato, o tienes la opci\u00f3n de subir una imagen completamente diferente para ocupar el lugar.<\/p>\n<p>Resalta la imagen que desee y haz clic en el bot\u00f3n <strong>Seleccionar imagen <\/strong>para insertarla en el panel de control.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port-mode.png\" alt=\"Elija la imagen de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elige la imagen de fondo<\/figcaption><\/figure>\n<p>Todos estos ajustes no significan nada si no se activa el modo de mantenimiento.<\/p>\n<p>Para ello, localiza el interruptor de activaci\u00f3n\/desactivaci\u00f3n del mantenimiento en la parte superior de la p\u00e1gina de configuraci\u00f3n.<\/p>\n<figure style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/offff.png\" alt=\"Activaci\u00f3n o desactivaci\u00f3n de la p\u00e1gina de mantenimiento\" width=\"1620\" height=\"940\"><figcaption class=\"wp-caption-text\">Activaci\u00f3n o desactivaci\u00f3n de la p\u00e1gina de mantenimiento<\/figcaption><\/figure>\n<p>Activa el interruptor para que se lea \u00abOn\u00bb, y luego selecciona el bot\u00f3n <strong>Guardar cambios<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-theme.png\" alt=\"Habilitaci\u00f3n de la p\u00e1gina de mantenimiento\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Habilitaci\u00f3n de la p\u00e1gina de mantenimiento<\/figcaption><\/figure>\n<p>Ve al frontend de tu sitio web para asegurarte de que la imagen de fondo y la p\u00e1gina de mantenimiento se muestran correctamente.<\/p>\n<p>Es muy probable que no lo haga.<\/p>\n<p>Hay dos razones para esto: En primer lugar, debes salir de la cuenta de administraci\u00f3n de WordPress para ver el sitio web en modo de mantenimiento. En segundo lugar, es posible que tengas que <a href=\"https:\/\/kinsta.com\/es\/blog\/borrar-cache-wordpress\/\">borrar la cach\u00e9 del sitio<\/a> para actualizar el cambio de contenido.<\/p>\n<figure style=\"width: 1270px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/nothing-show.png\" alt=\"Ver el sitio web en \"Modo de mantenimiento\"\" width=\"1270\" height=\"836\"><figcaption class=\"wp-caption-text\">Ver el sitio web en \u00abModo de mantenimiento\u00bb<\/figcaption><\/figure>\n<p>Por ejemplo, cuando salgo de la cuenta de administrador, ahora aparece la p\u00e1gina de mantenimiento cuando voy a cualquier p\u00e1gina.<\/p>\n<p>La imagen de fondo est\u00e1 ah\u00ed, junto con mis personalizaciones como el logotipo y la descripci\u00f3n del texto.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-page.png\" alt=\"La imagen de fondo de la p\u00e1gina de mantenimiento\" width=\"1920\" height=\"1040\"><figcaption class=\"wp-caption-text\">La imagen de fondo de la p\u00e1gina de mantenimiento<\/figcaption><\/figure>\n<p>Adem\u00e1s, al cambiar el tama\u00f1o de las ventanas del navegador a una orientaci\u00f3n m\u00e1s vertical, el fondo del modo vertical se ajusta a tu lugar.<\/p>\n<p>Tambi\u00e9n deber\u00edas ver el modo vertical cuando visite el sitio en un tel\u00e9fono o una tableta.<\/p>\n<figure style=\"width: 889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/portrait-example.png\" alt=\"La imagen de fondo en modo retrato\" width=\"889\" height=\"1006\"><figcaption class=\"wp-caption-text\">La imagen de fondo en modo retrato<\/figcaption><\/figure>\n<p>Otro tipo de imagen de fondo con el plugin se llama Preloader Image. Esto esencialmente carga una imagen r\u00e1pida con un efecto animado antes de revelar la p\u00e1gina de mantenimiento real, el fondo y el contenido.<\/p>\n<p>Al igual que la imagen de fondo normal, haz clic en el bot\u00f3n <strong>Subir Preloader <\/strong>para encontrar una imagen que se vea bien y a\u00f1adirla al panel de control.<\/p>\n<p>Una vez m\u00e1s, haz clic en el bot\u00f3n <strong>Guardar cambios <\/strong>y borra la cach\u00e9.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/preload.png\" alt=\"Haga clic en el bot\u00f3n \"Cargar precarga\"\" width=\"1616\" height=\"940\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abSubir Preloader\u00bb<\/figcaption><\/figure>\n<p>Por defecto, el efecto de la <strong>Preloader Image<\/strong><strong>\u00a0<\/strong>gira durante un momento y luego desaparece para presentar la p\u00e1gina de mantenimiento y la imagen de fondo.<\/p>\n<p>Depende de ti si quieres mantener este tipo de efecto o no.<\/p>\n<figure style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/2021-02-03_11-55-51.gif\" alt=\"A\u00f1adir un efecto de introducci\u00f3n a la imagen de fondo\" width=\"1280\" height=\"720\"><figcaption class=\"wp-caption-text\">A\u00f1adir un efecto de introducci\u00f3n a la imagen de fondo<\/figcaption><\/figure>\n<p>En el panel de configuraci\u00f3n del plugin de mantenimiento hay disponibles otros elementos de fondo para que puedas experimentar.<\/p>\n<p>Por ejemplo, puedes querer a\u00f1adir un color de fondo en lugar de una imagen de fondo.<\/p>\n<p>Si ese es el caso, dir\u00edgete al campo <strong>Color de fondo <\/strong>y selecciona un color que se ajuste a tu marca.<\/p>\n<figure style=\"width: 1617px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-col.png\" alt=\"Abrir el campo del color de fondo\" width=\"1617\" height=\"940\"><figcaption class=\"wp-caption-text\">Abrir el campo del color de fondo<\/figcaption><\/figure>\n<p>El color de fondo no se muestra para la p\u00e1gina de mantenimiento a menos que desactives todas las dem\u00e1s im\u00e1genes de fondo.<\/p>\n<p>Por lo tanto, aseg\u00farate de eliminar la imagen de fondo.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-s.png\" alt=\"Eliminaci\u00f3n de la imagen de fondo\" width=\"1618\" height=\"940\"><figcaption class=\"wp-caption-text\">Eliminaci\u00f3n de la imagen de fondo<\/figcaption><\/figure>\n<p>Tambi\u00e9n debes eliminar la imagen de fondo del Modo Retrato.<\/p>\n<figure style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-both.png\" alt=\"Establecer la imagen de fondo del Modo Retrato\" width=\"1620\" height=\"940\"><figcaption class=\"wp-caption-text\">Establecer la imagen de fondo del Modo Retrato<\/figcaption><\/figure>\n<p>Guarda los cambios y borre la cach\u00e9. A continuaci\u00f3n, dir\u00edgete al frontend de tu sitio para ver el color de fondo en efecto.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-color.png\" alt=\"Compruebe el frontend de su sitio web\" width=\"1920\" height=\"1040\"><figcaption class=\"wp-caption-text\">Comprueba el frontend de tu sitio web<\/figcaption><\/figure>\n<p>Otros ajustes a tener en cuenta son elementos como el color de la fuente, la familia de la fuente y el desenfoque del fondo.<\/p>\n<p>Tambi\u00e9n te recomendamos que pienses si necesitas tener un inicio de sesi\u00f3n en el frontend o no. Esto proporciona una forma de que los usuarios inicien sesi\u00f3n en sus cuentas y accedan a los perfiles si es necesario.<\/p>\n<p>Una vez que todo est\u00e9 hecho, haz clic en el bot\u00f3n <strong>Guardar cambios<\/strong>.<\/p>\n<figure style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-setttings.png\" alt=\"Establecer el color de la fuente\" width=\"1366\" height=\"926\"><figcaption class=\"wp-caption-text\">Establecer el color de la fuente<\/figcaption><\/figure>\n<p>El plugin Maintenance tambi\u00e9n ofrece varios temas prefabricados con bellas im\u00e1genes de fondo y dise\u00f1os y textos profesionales.<\/p>\n<p>Puedes encontrar temas para la p\u00e1gina \u00abPr\u00f3ximamante y dise\u00f1os de mantenimiento, junto con p\u00e1ginas para recoger direcciones de correo electr\u00f3nico y otra informaci\u00f3n de contacto.<\/p>\n<p>Debes comprar los temas para utilizarlos.<\/p>\n<figure style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themess.png\" alt=\"Comprar un tema premium\" width=\"1471\" height=\"940\"><figcaption class=\"wp-caption-text\">Comprar un tema premium<\/figcaption><\/figure>\n<p>Dependiendo de tu presupuesto, son bastante econ\u00f3micos y quedan muy bien.<\/p>\n<figure style=\"width: 1775px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/example-3.png\" alt=\"Un ejemplo de plantilla\" width=\"1775\" height=\"924\"><figcaption class=\"wp-caption-text\">Un ejemplo de plantilla<\/figcaption><\/figure>\n<p>Para aquellos que no est\u00e9n interesados en comprar un tema, todos los ajustes mencionados anteriormente est\u00e1n a su disposici\u00f3n. Tambi\u00e9n puedes entrar en el m\u00f3dulo de CSS personalizado para configurar la p\u00e1gina de mantenimiento y la imagen de fondo como quieras.<\/p>\n<figure style=\"width: 1391px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/other-setss.png\" alt=\"Ir al m\u00f3dulo 'Custom CSS'\" width=\"1391\" height=\"940\"><figcaption class=\"wp-caption-text\">Ir al m\u00f3dulo &#8216;Custom CSS&#8217;<\/figcaption><\/figure>\n<p>Recuerda que la configuraci\u00f3n de la p\u00e1gina de mantenimiento rara vez entra en vigor a menos que salga de la cuenta de administrador y has clic en el bot\u00f3n <strong>Borrar cach\u00e9<\/strong>.<\/p>\n<p>Puedes encontrar el bot\u00f3n de <strong>Borrar Cach\u00e9 <\/strong>en la esquina superior derecha del panel de control cuando usas Kinsta. Si usas un host diferente, considera uno de los muchos <a href=\"https:\/\/kinsta.com\/es\/blog\/borrar-cache-wordpress\/\">plugins de cach\u00e9 que hay en el mercado<\/a>.<\/p>\n<figure style=\"width: 1830px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/clear-cache-sss.png\" alt=\"Haga clic en el bot\u00f3n \"Borrar cach\u00e9\"\" width=\"1830\" height=\"777\"><figcaption class=\"wp-caption-text\">Haga clic en el bot\u00f3n \u00abBorrar cach\u00e9\u00bb<\/figcaption><\/figure>\n<p>Una vez que borres la cach\u00e9 y guardes la configuraci\u00f3n, deber\u00edas ver una hermosa imagen de fondo que complementa la p\u00e1gina de mantenimiento.<\/p>\n<figure style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/regular-programing.png\" alt=\"Comprobaci\u00f3n de la p\u00e1gina de mantenimiento\" width=\"1701\" height=\"888\"><figcaption class=\"wp-caption-text\">Comprobaci\u00f3n de la p\u00e1gina de mantenimiento<\/figcaption><\/figure>\n<h3>C\u00f3mo A\u00f1adir un Fondo a WordPress con un Constructor de P\u00e1ginas de Terceros<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/\">Nuestro art\u00edculo sobre los mejores constructores de p\u00e1ginas<\/a> ofrece una lista de opciones para elegir un constructor de p\u00e1ginas con funciones de arrastrar y soltar. WordPress ya incluye un constructor de p\u00e1ginas en Gutenberg, pero muchos propietarios de sitios web prefieren otras soluciones.<\/p>\n<p>La siguiente secci\u00f3n explica c\u00f3mo implementar un fondo utilizando algunos constructores de p\u00e1ginas populares, incluyendo Elementor, Beaver Builder y Page Builder by SiteOrigin.<\/p>\n<h4>A\u00f1adir un Fondo a WordPress con Elementor<\/h4>\n<p>Elementor, el popular constructor de p\u00e1ginas destinado a acelerar la producci\u00f3n de sitios web de forma espectacular, ofrece un plugin gratuito con varias herramientas de imagen de fondo.<\/p>\n<p>Adem\u00e1s, Elementor presenta flexibilidad de fondos visuales para varias partes de tu sitio web en lugar de restringir los fondos a todo el sitio web. Por ejemplo, puedes a\u00f1adir un fondo detr\u00e1s de casi cualquier secci\u00f3n de bloques de construcci\u00f3n y mostrar diferentes fondos de p\u00e1gina a p\u00e1gina.<\/p>\n<p>Para empezar, <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/#elementor\">instala y activa el plugin Elementor<\/a>.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Plugin de Elementor\" width=\"1324\" height=\"435\"><figcaption class=\"wp-caption-text\">Plugin de Elementor<\/figcaption><\/figure>\n<p>Elementor dispersa sus ajustes de fondo por todo el constructor, lo que facilita la selecci\u00f3n de un elemento y la implementaci\u00f3n de un fondo si es necesario. Por lo tanto, t\u00e9cnicamente se puede ir a cualquier p\u00e1gina o post con la expectativa de tener acceso a un bot\u00f3n de carga de fondo.<\/p>\n<p>En este caso, vamos a la p\u00e1gina de inicio de nuestro sitio de prueba. Visita la p\u00e1gina de tu elecci\u00f3n seleccionando de la lista en <strong>P\u00e1ginas &gt; Todas las p\u00e1ginas<\/strong>. Tambi\u00e9n puedes hacer lo mismo con las<strong> Entradas<\/strong>.<\/p>\n<p>Una vez en el editor de p\u00e1ginas por defecto de WordPress, haz clic en el bot\u00f3n de <strong>Editar con Elementor<\/strong>.<\/p>\n<figure style=\"width: 1889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-with.png\" alt=\"Haz clic en el plugin 'Editar con Elementor'\" width=\"1889\" height=\"880\"><figcaption class=\"wp-caption-text\">Haz clic en el plugin &#8216;Editar con Elementor&#8217;<\/figcaption><\/figure>\n<p>Esto cambia la vista en tu pantalla al Editor de Elementor. Aqu\u00ed, el lado izquierdo tiene un men\u00fa con m\u00f3dulos de arrastrar y soltar para construir y editar tu p\u00e1gina.<\/p>\n<p>La funcionalidad de fondo no est\u00e1 disponible en una secci\u00f3n o bloque, sino en la <strong>Configuraci\u00f3n <\/strong>principal de esa p\u00e1gina.<\/p>\n<p>Por lo tanto, haz clic en el peque\u00f1o icono de Configuraci\u00f3n (parece un engranaje) en la esquina inferior izquierda del editor.<\/p>\n<figure style=\"width: 1526px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/settings-gear.png\" alt=\"Haga clic en el icono de configuraci\u00f3n\" width=\"1526\" height=\"935\"><figcaption class=\"wp-caption-text\">Haz clic en el icono de configuraci\u00f3n<\/figcaption><\/figure>\n<p>Esto muestra una secci\u00f3n para la configuraci\u00f3n general de la p\u00e1gina.<\/p>\n<p>Haz clic en la pesta\u00f1a <strong>Estilo <\/strong>en la parte superior de la secci\u00f3n <strong>Configuraci\u00f3n de la p\u00e1gina<\/strong>.<\/p>\n<figure style=\"width: 1861px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/style-of.png\" alt=\"Ir a la pesta\u00f1a \"Estilo\"\" width=\"1861\" height=\"910\"><figcaption class=\"wp-caption-text\">Ir a la pesta\u00f1a \u00abEstilo\u00bb<\/figcaption><\/figure>\n<p>En Estilo, localiza el campo <strong>Tipo de fondo <\/strong>y haz clic en el icono <strong>Pincel <\/strong>para a\u00f1adir un fondo est\u00e1ndar.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/classic.png\" alt=\"Configuraci\u00f3n del campo \"Tipo de fondo\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Configuraci\u00f3n del campo \u00abTipo de fondo\u00bb<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, elige el tipo de fondo que deseas que aparezca. Por ejemplo, el campo <strong>Color <\/strong>te permite cambiar el fondo a un color s\u00f3lido. Tambi\u00e9n hay una opci\u00f3n de <strong>degradado <\/strong>en el campo <strong>Tipo de fondo <\/strong>si es m\u00e1s tu estilo.<\/p>\n<figure style=\"width: 1826px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-color.png\" alt=\"Configuraci\u00f3n del campo de color de fondo\" width=\"1826\" height=\"940\"><figcaption class=\"wp-caption-text\">Configuraci\u00f3n del campo de color de fondo<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n <strong>Elegir imagen <\/strong>bajo el campo \u00abImagen\u00bb para que aparezca tu <strong>biblioteca multimedia <\/strong>y elige una imagen de fondo adecuada para esta p\u00e1gina.<\/p>\n<figure style=\"width: 1560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-image-s-s.png\" alt=\"Haga clic en el bot\u00f3n \"Elegir imagen\"\" width=\"1560\" height=\"857\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abElegir imagen\u00bb<\/figcaption><\/figure>\n<p>Como siempre, prueba tus im\u00e1genes de fondo y qu\u00e9date en las dimensiones \u00f3ptimas y las mejores pr\u00e1cticas (alta resoluci\u00f3n y orientaci\u00f3n vertical para la mayor\u00eda), luego seleccione la imagen que funciona bien y haga clic en el bot\u00f3n <strong>Insertar medios<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inserting.png\" alt=\"Haga clic en el bot\u00f3n \"Insertar medios\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abInsertar medios\u00bb<\/figcaption><\/figure>\n<p>La imagen de fondo seleccionada aparece ahora en la vista previa del sitio web de Elementor a la derecha. Es posible que tengas que ajustar otras partes de tu contenido para asegurarte de que elementos como el texto y las im\u00e1genes se muestren cuando est\u00e9n sobre el fondo.<\/p>\n<p>Elementor proporciona ajustes de fondo de imagen como Posici\u00f3n, Adjuntar, Repetir y Tama\u00f1o de la imagen de fondo de WordPress. Modifica los ajustes para determinar si tu fondo puede quedar mejor como un adjunto fijo, o quiz\u00e1s con una orientaci\u00f3n superior derecha o un tama\u00f1o alternativo.<\/p>\n<p>Pulsa el bot\u00f3n <strong>Actualizar <\/strong>para guardar todos los cambios en la p\u00e1gina y publicar el nuevo fondo de tu sitio web.<\/p>\n<figure style=\"width: 1728px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/updateing.png\" alt=\"A\u00f1adir un nuevo fondo\" width=\"1728\" height=\"890\"><figcaption class=\"wp-caption-text\">A\u00f1adir un nuevo fondo<\/figcaption><\/figure>\n<h5>Secci\u00f3n de Fondos con Elementor<\/h5>\n<p>Elementor ofrece una funcionalidad de fondo avanzada para la mayor\u00eda de las secciones a\u00f1adidas a tus p\u00e1ginas.<\/p>\n<p>Todo lo que tienes que hacer es seleccionar una secci\u00f3n en una p\u00e1gina de Elementor y modificar los ajustes de Fondo para limitar el fondo solo a esa \u00e1rea.<\/p>\n<p>Por ejemplo, podemos seleccionar esta secci\u00f3n del<strong> Editor de Texto <\/strong>para ver la configuraci\u00f3n de la secci\u00f3n de Texto.<\/p>\n<p>Elige la pesta\u00f1a <strong>Avanzado <\/strong>y encuentra la secci\u00f3n <strong>Fondo <\/strong>dentro de esa pesta\u00f1a.<\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-ad.png\" alt=\"Ir a la secci\u00f3n \"Antecedentes\"\" width=\"1440\" height=\"831\"><figcaption class=\"wp-caption-text\">Ir a la secci\u00f3n \u00abAntecedentes\u00bb<\/figcaption><\/figure>\n<p>La configuraci\u00f3n del fondo incluye el <strong>tipo de fondo<\/strong>, el <strong>color<\/strong>, la <strong>imagen, <\/strong>etc., de forma muy parecida a la configuraci\u00f3n que vimos para la configuraci\u00f3n general del fondo de la p\u00e1gina. La \u00fanica diferencia es que limita estos ajustes a la secci\u00f3n seleccionada.<\/p>\n<p>Elige el icono del <strong>Pincel <\/strong>para el <strong>Tipo de Fondo<\/strong>, y luego haz clic en el bot\u00f3n <strong>Elegir Imagen <\/strong>bajo el campo <strong>Imagen<\/strong>.<\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choosing-it.png\" alt=\"Haga clic en el bot\u00f3n \"Elegir imagen\"\" width=\"1440\" height=\"811\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abElegir imagen\u00bb<\/figcaption><\/figure>\n<p>Elige una imagen de la <strong>biblioteca de medios <\/strong>y haz clic en el bot\u00f3n <strong>Insertar medios<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inset-media-3.png\" alt=\"Elija la imagen y haga clic en el bot\u00f3n \"Insertar medios\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elige la imagen y haz clic en el bot\u00f3n \u00abInsertar medios\u00bb<\/figcaption><\/figure>\n<p>Como puedes ver, la imagen de fondo se mantiene dentro de los l\u00edmites de esa secci\u00f3n mientras que se sit\u00faa detr\u00e1s del contenido ya creado para esa secci\u00f3n.<\/p>\n<p>Utiliza los selectores de <strong>Posici\u00f3n<\/strong>, <strong>Adhesi\u00f3n<\/strong>, <strong>Repetici\u00f3n <\/strong>y <strong>Tama\u00f1o <\/strong>para modificar c\u00f3mo se presenta la imagen de fondo en la secci\u00f3n.<\/p>\n<p>Por \u00faltimo, haz clic en el bot\u00f3n <strong>Actualizar <\/strong>para guardar los cambios.<\/p>\n<figure style=\"width: 1752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-t-e.png\" alt=\"Haga clic en \"Actualizar\" para ver los cambios\" width=\"1752\" height=\"940\"><figcaption class=\"wp-caption-text\">Haz clic en \u00abActualizar\u00bb para ver los cambios<\/figcaption><\/figure>\n<h4>A\u00f1adir una Imagen de Fondo con Beaver Builder<\/h4>\n<p>El plugin Beaver Builder incluye una versi\u00f3n Lite con algunas herramientas b\u00e1sicas de fondo. Es uno de los constructores de p\u00e1ginas m\u00e1s populares del mercado, que ofrece muchos m\u00f3dulos de contenido para elementos como v\u00eddeo, im\u00e1genes, p\u00e1rrafos y muchos m\u00e1s.<\/p>\n<p>Adem\u00e1s de todo eso, te permite implementar una imagen, color o v\u00eddeo de fondo, utilizando herramientas visuales y CSS para colocar el elemento de fondo en todo tu sitio web, una p\u00e1gina o una secci\u00f3n individual en una p\u00e1gina.<\/p>\n<p>Primero, <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/#beaver-builder\">instala el plugin Beaver Builder<\/a> para empezar.<\/p>\n<figure style=\"width: 1331px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bb-s.png\" alt=\"Plugin Beaver Builder\" width=\"1331\" height=\"435\"><figcaption class=\"wp-caption-text\">Plugin Beaver Builder<\/figcaption><\/figure>\n<p>Ve a cualquier p\u00e1gina o entrada para editarla con Beaver Builder.<\/p>\n<p>Debes convertir las p\u00e1ginas creadas anteriormente al formato de Beaver Builder. Como alternativa, tienes la opci\u00f3n de crear una p\u00e1gina desde cero y elegir editar la p\u00e1gina en Beaver Builder.<\/p>\n<p>Para convertir una p\u00e1gina actual en Beaver Builder, abre el editor de esa p\u00e1gina y haz clic en el icono de tres puntos para abrir el men\u00fa Ver en la esquina superior derecha.<\/p>\n<figure style=\"width: 1903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/three-dots.png\" alt=\"Ir al men\u00fa de configuraci\u00f3n de la p\u00e1gina\" width=\"1903\" height=\"854\"><figcaption class=\"wp-caption-text\">Ir al men\u00fa de configuraci\u00f3n de la p\u00e1gina<\/figcaption><\/figure>\n<p>Despl\u00e1zate hacia abajo para encontrar y elegir el enlace <strong>Convertir a Beaver Builder<\/strong>.<\/p>\n<p>Intenta compilar todo el contenido que tienes en tu p\u00e1gina y cambiar esos elementos en m\u00f3dulos compatibles de Beaver Builder.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/convert-to-beaver.png\" alt=\"Haga clic en el enlace \"Convertir a Beaver Builder\"\" width=\"1616\" height=\"821\"><figcaption class=\"wp-caption-text\">Haz clic en el enlace \u00abConvertir a Beaver Builder\u00bb<\/figcaption><\/figure>\n<p>Para crear una p\u00e1gina desde cero, dir\u00edgite <strong>P\u00e1ginas &gt; A\u00f1adir nueva.<\/strong><\/p>\n<p>A continuaci\u00f3n, haz clic en el bot\u00f3n <strong>Lanzar Beaver Builder<\/strong>.<\/p>\n<figure style=\"width: 1854px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/launch-bb.png\" alt=\"Haga clic en el bot\u00f3n \"Iniciar Beaver Builder\"\" width=\"1854\" height=\"884\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abIniciar Beaver Builder\u00bb<\/figcaption><\/figure>\n<p>El plugin <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/#beaver-builder\">Beaver Builder<\/a> te lleva a una vista frontal de la p\u00e1gina web. Ocupa la mayor parte de la pantalla actuando como un verdadero editor frontend, donde se hace clic en los elementos y se mueve alrededor de las cajas con el rat\u00f3n.<\/p>\n<p>La primera forma de a\u00f1adir un fondo a trav\u00e9s de Beaver Builder es subiendo un fondo a un bloque de secci\u00f3n. Esto podr\u00eda ocupar la mayor parte de la p\u00e1gina o una fracci\u00f3n de la p\u00e1gina, dependiendo del tama\u00f1o de su bloque de secci\u00f3n.<\/p>\n<p>Una vez seleccionado, busca el bot\u00f3n de <strong>configuraci\u00f3n de filas <\/strong>(el icono \u2699).<\/p>\n<p>Haz clic en ese icono para revelar la configuraci\u00f3n de esa fila. Tambi\u00e9n puede hacer esto con secciones y columnas, y otros tipos de bloques.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/row-sets.png\" alt=\"Editar la configuraci\u00f3n de la fila\" width=\"1900\" height=\"813\"><figcaption class=\"wp-caption-text\">Editar la configuraci\u00f3n de la fila<\/figcaption><\/figure>\n<p>En la parte superior de la vista previa de su sitio web aparece un panel de configuraci\u00f3n. Haz clic en la pesta\u00f1a <strong>Estilo <\/strong>y busca la secci\u00f3n Fondo.<\/p>\n<p>En <strong>Fondo<\/strong>, haz clic en el men\u00fa desplegable para mostrar todos los tipos de fondo.<\/p>\n<figure style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/finishing.png\" alt=\"Ir a la pesta\u00f1a \"Estilo\"\" width=\"1316\" height=\"775\"><figcaption class=\"wp-caption-text\">Dir\u00edgete a la pesta\u00f1a \u00abEstilo\u00bb<\/figcaption><\/figure>\n<p>Tienes que considerar varios tipos de fondo, uno de los cuales es para una foto. Los otros incluyen:<\/p>\n<ul>\n<li>Color<\/li>\n<li>Gradiente<\/li>\n<li>V\u00eddeo<\/li>\n<li>C\u00f3digo integrado<\/li>\n<\/ul>\n<figure style=\"width: 1315px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-type.png\" alt=\"Establecer el tipo de imagen de fondo de WordPress\" width=\"1315\" height=\"742\"><figcaption class=\"wp-caption-text\">Establece el tipo de imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>No dudes en probar los diferentes tipos de fondos.<\/p>\n<p>Por ejemplo, puedes encontrar que un fondo de degradado se ve mejor que una imagen. Cada uno de los tipos de fondo incluye sus propios ajustes. El tipo <strong>Gradiente<\/strong>, en este caso, pide dos colores para que el gradiente se mueva de uno a otro.<\/p>\n<figure style=\"width: 1780px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-gradient.png\" alt=\"Secci\u00f3n \"Sobre la empresa\"\" width=\"1780\" height=\"837\"><figcaption class=\"wp-caption-text\">Secci\u00f3n \u00abAbout The Comapny\u00bb<\/figcaption><\/figure>\n<p>Si se opta por el fondo de foto, se presentan los campos para elegir de la biblioteca de medios o pegar una URL para la imagen. Haz clic en el enlace <strong>Seleccionar foto <\/strong>si utilizas la fuente de fotos de la biblioteca multimedia.<\/p>\n<figure style=\"width: 1811px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-photo.png\" alt=\"Haga clic en el enlace \"Seleccionar foto\"\" width=\"1811\" height=\"795\"><figcaption class=\"wp-caption-text\">Haz clic en el enlace \u00abSeleccionar foto\u00bb<\/figcaption><\/figure>\n<p>Busca tu foto de fondo favorita y haz clic en el bot\u00f3n <strong>Seleccionar foto<\/strong>.<\/p>\n<figure style=\"width: 1871px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-a-phot.png\" alt=\"Elija el medio de comunicaci\u00f3n\" width=\"1871\" height=\"894\"><figcaption class=\"wp-caption-text\">Elige el medio de comunicaci\u00f3n<\/figcaption><\/figure>\n<p>Beaver Builder coloca la foto en el espacio de fondo elegido anteriormente. La secci\u00f3n de configuraci\u00f3n de la foto le pregunta c\u00f3mo le gustar\u00eda formatear la foto. Elige entre opciones como <strong>Tama\u00f1o<\/strong>, <strong>Repetici\u00f3n<\/strong>, <strong>Posici\u00f3n <\/strong>y <strong>Adjuntar<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-sets.png\" alt=\"Establecer el tama\u00f1o de la imagen de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Establece el tama\u00f1o de la imagen de fondo<\/figcaption><\/figure>\n<h5>Fotos de Fondos Globales y de P\u00e1gina Completa de Beaver Builder<\/h5>\n<p>Beaver Builder trabaja con las herramientas de dise\u00f1o por defecto de WordPress para aprovechar las caracter\u00edsticas de fondo incorporadas.<\/p>\n<p>Por lo tanto, puedes ir a la pesta\u00f1a<strong> Apariencia &gt; Fondo <\/strong>para activar un fondo de foto para todo tu sitio web.<\/p>\n<p>Como alternativa, abra cualquier p\u00e1gina web en Beaver Builder y haga clic en el men\u00fa desplegable <strong>Herramientas <\/strong>en la esquina superior izquierda.<\/p>\n<p>Aqu\u00ed, haz clic en la opci\u00f3n <strong>Configuraci\u00f3n global<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/global.png\" alt=\"'Ajustes globales' para Beaver Builder\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">&#8216;Ajustes globales&#8217; para Beaver Builder<\/figcaption><\/figure>\n<p>El panel de configuraci\u00f3n global ofrece la posibilidad de cambiar todo el sitio web, anulando o modificando la codificaci\u00f3n integrada de WordPress. Por lo tanto, nos gustar\u00eda insertar un bloque de c\u00f3digo CSS para cambiar la imagen de fondo de todo el sitio web (globalmente).<\/p>\n<p>Haz clic en la pesta\u00f1a CSS en la Configuraci\u00f3n Global, y pega el siguiente segmento de c\u00f3digo en el campo:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Sustituye el texto de la<strong> URL de la imagen <\/strong>por la URL de la foto de fondo deseada. Tambi\u00e9n puedes cambiar cosas como la funci\u00f3n de repetici\u00f3n, la fijaci\u00f3n y el tama\u00f1o del fondo con el c\u00f3digo CSS.<\/p>\n<\/div>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/css-to-bg.png\" alt=\"Ir a la pesta\u00f1a CSS\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Dir\u00edgete a la pesta\u00f1a CSS<\/figcaption><\/figure>\n<p>Tiene m\u00e1s sentido utilizar Beaver Builder para los fondos de p\u00e1gina personalizados, ya que cada p\u00e1gina tiene tu propia imagen como fondo.<\/p>\n<p>En tu editor de p\u00e1ginas, abra de nuevo el men\u00fa <strong>Herramientas<\/strong>.<\/p>\n<p>Selecciona la opci\u00f3n<strong> Layout CSS &#038; Javascript<\/strong>.<\/p>\n<figure style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/layout.png\" alt=\"Bot\u00f3n de dise\u00f1o CSS y JavaScript\" width=\"1370\" height=\"881\"><figcaption class=\"wp-caption-text\">Bot\u00f3n de dise\u00f1o CSS y JavaScript<\/figcaption><\/figure>\n<p>Pega el mismo c\u00f3digo en la pesta\u00f1a CSS, cambiando el texto de<strong> URL a Imagen <\/strong>por la URL real y ajustando los par\u00e1metros que desee:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Como puedes ver, todo el fondo cambia a la imagen URL que tiene en la codificaci\u00f3n CSS. Ten en cuenta que el panel de <strong>Layout CSS \/ Javascript <\/strong>controla solo la p\u00e1gina actual. No ver\u00e1s el fondo en ninguna otra p\u00e1gina aparte de \u00e9sta.<\/p>\n<\/div>\n<div><\/div>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/only-this-page.png\" alt=\"A\u00f1adir CSS personalizado\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">A\u00f1ade CSS personalizado<\/figcaption><\/figure>\n<h4>A\u00f1ade una Simple L\u00ednea o Fondo de Widget con Page Builder By SiteOrigin<\/h4>\n<p>El <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/#siteorigin\">Page Builder de SiteOrigin<\/a> es otra herramienta visual de creaci\u00f3n de sitios web de arrastrar y soltar. Es limitada en su capacidad para insertar fondos para todo el sitio web (tendr\u00edas que recurrir a la herramienta est\u00e1ndar de fondos personalizados de WordPress). Sin embargo, proporciona ajustes para a\u00f1adir im\u00e1genes y colores de fondo para las l\u00edneas y los widgets utilizados por SiteOrigin.<\/p>\n<p>Primero, descarga y activa el plugin Page Builder by SiteOrigin.<\/p>\n<figure style=\"width: 1520px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/siteor.png\" alt=\"Plugin Page Builder by SiteOrigin\" width=\"1520\" height=\"493\"><figcaption class=\"wp-caption-text\">Plugin Page Builder by SiteOrigin<\/figcaption><\/figure>\n<p>Navega a una nueva p\u00e1gina o considera la posibilidad de a\u00f1adir una fila de SiteOrigin a una p\u00e1gina actual del sitio web.<\/p>\n<p>Cada secci\u00f3n de SiteOrigin te pide que <strong>A\u00f1adas un widget <\/strong>o una <strong>L\u00ednea<\/strong>. Tambi\u00e9n tienes la oportunidad de navegar a trav\u00e9s de los <strong>dise\u00f1os pre-construidos <\/strong>si prefieres no empezar un dise\u00f1o desde cero.<\/p>\n<p>La buena noticia es que tanto los widgets como las filas en SiteOrigin tienen ajustes para incluir im\u00e1genes de fondo.<\/p>\n<p>Por lo tanto, haz clic en el bot\u00f3n <strong>A\u00f1adir Widget <\/strong>o <strong>A\u00f1adir L\u00ednea <\/strong>para proceder.<\/p>\n<figure style=\"width: 1896px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row-or-widget.png\" alt=\"A\u00f1adir un nuevo widget o fila\" width=\"1896\" height=\"822\"><figcaption class=\"wp-caption-text\">A\u00f1adir un nuevo widget o l\u00ednea<\/figcaption><\/figure>\n<p>En este ejemplo, veremos la biblioteca <strong>Widgets<\/strong>.<\/p>\n<p>Aqu\u00ed podr\u00e1s elegir uno de los muchos widgets que proporciona SiteOrigin, desde men\u00fas de navegaci\u00f3n y p\u00e1ginas hasta contenido de publicaciones y listas de productos.<\/p>\n<p>Elegiremos el widget <strong>Productos <\/strong>para este ejemplo, pero puedes elegir uno de los muchos otros widgets seg\u00fan las <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\">necesidades de tu dise\u00f1o<\/a>. Adem\u00e1s, puedes agrupar estos widgets con una L\u00ednea, y luego a\u00f1adir una imagen de fondo a esa l\u00ednea para que el fondo aparezca detr\u00e1s de varios widgets.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-a-widg.png\" alt=\"Elija el widget \"Productos\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elige el widget \u00abProductos\u00bb<\/figcaption><\/figure>\n<p>El nuevo <a href=\"https:\/\/kinsta.com\/es\/blog\/widgets-wordpress\/\">widget<\/a> o fila termina en el editor de p\u00e1ginas de SiteOrigin. La mayor parte de SiteOrigin permanece en el panel de control de WordPress, por lo que no hay tanto editor frontal como en otros constructores de p\u00e1ginas.<\/p>\n<p>Para a\u00f1adir un fondo a cualquier elemento de SiteOrigin, despl\u00e1zate sobre el elemento y haz clic en el enlace <strong>Editar<\/strong>.<\/p>\n<figure style=\"width: 1516px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-the-row.png\" alt=\"Haga clic en el enlace \"editar\"\" width=\"1516\" height=\"808\"><figcaption class=\"wp-caption-text\">Haz clic en el enlace \u00abeditar\u00bb<\/figcaption><\/figure>\n<p>He elegido el widget <strong>Productos <\/strong>para este ejemplo, pero cada widget tiene sus propios ajustes para configurar su aspecto en tu sitio web.<\/p>\n<p>Las herramientas de fondo est\u00e1n debajo del men\u00fa desplegable de <strong>Dise\u00f1o<\/strong>. Haz clic en \u00e9l para avanzar.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/design-it.png\" alt=\"La pesta\u00f1a \"Dise\u00f1o\" para la imagen de fondo de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">La pesta\u00f1a \u00abDise\u00f1o\u00bb para la imagen de fondo de WordPress<\/figcaption><\/figure>\n<div class=\"mceTemp\"><\/div>\n<p>Busca el campo <strong>Imagen de fondo <\/strong>y haz clic en el bot\u00f3n <strong>Seleccionar imagen<\/strong>.<\/p>\n<p>Tambi\u00e9n tienes la opci\u00f3n de pegar una <strong>URL externa <\/strong>para la imagen de fondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-bg-image.png\" alt=\"Elegir la imagen y el color de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Elegir la imagen y el color de fondo<\/figcaption><\/figure>\n<p>La <a href=\"https:\/\/kinsta.com\/es\/blog\/biblioteca-multimedia-wordpress\/\">biblioteca de medios<\/a> te muestra las im\u00e1genes actuales que has subido a WordPress. Haz clic en la imagen que mejor funcione para este fondo y selecciona el bot\u00f3n <strong>Hecho <\/strong>para soltarla en el m\u00f3dulo SiteOrigin.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-it-o-o.png\" alt=\"Haga clic en el bot\u00f3n \"Hecho\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abHecho\u00bb<\/figcaption><\/figure>\n<p>Ahora el campo Imagen de fondo presenta una versi\u00f3n en miniatura de esa foto.<\/p>\n<p>Despl\u00e1zate por los ajustes para configurar todo, desde la <strong>visualizaci\u00f3n de la imagen de fondo <\/strong>hasta el <strong>color de la fuente <\/strong>para el texto superpuesto.<\/p>\n<p>En general, deber\u00edas ser capaz de obtener los resultados deseados mediante la elecci\u00f3n de la pantalla de la cubierta. Parece que el plugin de SiteOrigin tiene por defecto la visualizaci\u00f3n en mosaico, por lo que es posible que tengas que cambiarla.<\/p>\n<p>Aseg\u00farate de hacer clic en el bot\u00f3n <strong>Hecho <\/strong>cuando hayas completado los ajustes personalizados para el fondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/adding-in.png\" alt=\"La configuraci\u00f3n de la \"Imagen de fondo\" de WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">La configuraci\u00f3n de la \u00abImagen de fondo\u00bb de WordPress<\/figcaption><\/figure>\n<p>El widget (en este caso, el widget de Productos) va en el <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/\">editor<\/a> de SiteOrigin WordPress para esa p\u00e1gina. Puedes arrastrar este elemento a cualquier lugar de la p\u00e1gina que quieras y a\u00f1adir nuevos widgets y l\u00edneas por encima y por debajo de \u00e9l.<\/p>\n<p>Debes hacer clic en el bot\u00f3n de <strong>Vista previa <\/strong>o de <strong>Actualizaci\u00f3n <\/strong>y luego navegar por el frontend de la p\u00e1gina para ver los resultados.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-or-prev.png\" alt=\"Vaya a la secci\u00f3n \"Productos\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Dir\u00edgete a la secci\u00f3n \u00abProductos\u00bb<\/figcaption><\/figure>\n<p>El fondo actual que he a\u00f1adido aparece dentro de las restricciones del widget <strong>Productos <\/strong>de antes. Este fondo obviamente necesita algo de edici\u00f3n para que se vea m\u00e1s bonito, pero es un comienzo de calidad para archivar en el espacio con una imagen de fondo de aspecto mucho m\u00e1s creativo.<\/p>\n<figure style=\"width: 1390px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/not-the-pret.png\" alt=\"El fondo de la secci\u00f3n\" width=\"1390\" height=\"711\"><figcaption class=\"wp-caption-text\">La secci\u00f3n de fondo<\/figcaption><\/figure>\n<h4>A\u00f1adir Im\u00e1genes de Fondo \u00danicas con Brizy<\/h4>\n<p>El \u00faltimo constructor de p\u00e1ginas para esta demostraci\u00f3n, Brizy, ofrece plantillas elegantes y una interfaz frontend superior para a\u00f1adir dise\u00f1os inusuales y personalizaciones r\u00e1pidas.<\/p>\n<p>El Brizy Page Builder incluye un amplio conjunto de m\u00f3dulos de <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/\">arrastrar y soltar<\/a> para incorporar a tu sitio web actual. Tambi\u00e9n te permite comenzar desde una plantilla en blanco y construir tu sitio web completo con Brizy.<\/p>\n<p>Por ello, te alegrar\u00e1 saber que Brizy tambi\u00e9n tiene una herramienta de fondo para casi todos los elementos que incluyas a trav\u00e9s del constructor de p\u00e1ginas. Por no hablar de que Brizy cuenta con varios estilos de fondo \u00fanicos, como a\u00f1adir un v\u00eddeo en bucle al fondo o un mapa completo.<\/p>\n<p>Para aprovechar estos ajustes de fondo, <a href=\"https:\/\/wordpress.org\/plugins\/brizy\/\">instala y activa el plugin Brizy<\/a> para empezar.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brizy.png\" alt=\"El plugin Brizy page builder\" width=\"1324\" height=\"434\"><figcaption class=\"wp-caption-text\">El plugin constructor de p\u00e1ginas Brizy<\/figcaption><\/figure>\n<p>Gran parte del proceso de dise\u00f1o de Brizy requiere que comiences con una <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-jerarquia-plantillas\/\">plantilla<\/a> en blanco. Brizy intentar\u00e1 convertir tus dise\u00f1os m\u00e1s antiguos en m\u00f3dulos de Brizy, pero creemos que es mejor empezar de nuevo.<\/p>\n<p>Dir\u00edgete a una <strong>P\u00e1gina <\/strong>o <strong>Publicaci\u00f3n <\/strong>en tu panel de control de WordPress y comienza a construir la p\u00e1gina con un t\u00edtulo y tal vez algo de contenido.<\/p>\n<p>Deber\u00edas ver un bot\u00f3n para <strong>Editar con Brizy<\/strong>. Haz clic en \u00e9l para acceder al constructor de p\u00e1ginas completo de Brizy.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brixy-ed.png\" alt=\"Haz clic en el bot\u00f3n \"Seguir editando con Brizy\"\" width=\"1865\" height=\"815\"><figcaption class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abSeguir editando con Brizy\u00bb<\/figcaption><\/figure>\n<p>El constructor de p\u00e1ginas de Brizy muestra una vista previa completa de tu sitio web con botones, texto e im\u00e1genes. Si la p\u00e1gina est\u00e1 en blanco, haz clic en el bot\u00f3n <strong>Empieza a construir tu p\u00e1gina<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/start-building.png\" alt=\"Haz clic en el icono del signo m\u00e1s para empezar a crear tu p\u00e1gina\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Haz clic en el icono del signo m\u00e1s para empezar a crear tu p\u00e1gina<\/figcaption><\/figure>\n<p>Busca las pesta\u00f1as <strong>Plantillas y Bloques <\/strong>en la barra de men\u00fa superior.<\/p>\n<p>Las plantillas proporcionan p\u00e1ginas web pre construidas, llenas de contenido de demostraci\u00f3n y listas para funcionar siempre que personalices el contenido de tu empresa. Los bloques son trozos m\u00e1s peque\u00f1os de p\u00e1ginas web, pero siguen siendo pre-construidos y a menudo son m\u00e1s f\u00e1ciles de usar y manipular que si tuvieras que hacer un bloque por tu cuenta.<\/p>\n<p>No importa la direcci\u00f3n que tomes. Navega por las plantillas y bloques y a\u00f1ade todos los que quieras a la p\u00e1gina. Estos son simplemente los elementos que utilizar\u00e1s para formar una p\u00e1gina web completa.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/blocks-and-layouts.png\" alt=\"Secciones de dise\u00f1os y bloques\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Secciones de plantillas y bloques<\/figcaption><\/figure>\n<p>Despu\u00e9s de tener unos cuantos bloques o plantillas en la p\u00e1gina web, vuelve a la pantalla del editor para ver tu trabajo.<\/p>\n<p>Ver\u00e1s que cada secci\u00f3n de bloques tiene un icono de Configuraci\u00f3n en la parte superior derecha del bloque, que suele aparecer cuando te desplazas por la secci\u00f3n.<\/p>\n<p>Haz clic en esto para el bloque de su elecci\u00f3n. A\u00f1adiremos un fondo a ese bloque.<\/p>\n<figure style=\"width: 1583px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/every-one.png\" alt=\"Haga clic en el icono \"Configuraci\u00f3n\"\" width=\"1583\" height=\"815\"><figcaption class=\"wp-caption-text\">Haz clic en el icono \u00abConfiguraci\u00f3n\u00bb<\/figcaption><\/figure>\n<p>El panel de <strong>configuraci\u00f3n de los bloques <\/strong>permanece en la esquina superior derecha. Despl\u00e1zate por los <a href=\"https:\/\/kinsta.com\/es\/blog\/icon-fonts-de-wordpress\/\">iconos<\/a> del men\u00fa para ver qu\u00e9 hacen todos ellos.<\/p>\n<p>Uno de ellos es para <strong>Colores<\/strong>, y con ello se refieren a un fondo de color. Puedes cambiar eso y a\u00f1adir un degradado si te apetece seguir con una vista de fondo de color s\u00f3lido o degradado.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/colors-is-possible.png\" alt=\"El bot\u00f3n \"Color\" para el fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">El bot\u00f3n \u00abColor\u00bb para el fondo<\/figcaption><\/figure>\n<p>El bot\u00f3n del icono de la izquierda contiene la configuraci\u00f3n del<strong> Fondo<\/strong>.<\/p>\n<p>Haz clic en ese bot\u00f3n para abrir las herramientas r\u00e1pidas para cargar una imagen de fondo en este bloque.<\/p>\n<figure style=\"width: 1551px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/abck-gro.png\" alt=\"Bot\u00f3n de imagen de fondo de WordPress\" width=\"1551\" height=\"692\"><figcaption class=\"wp-caption-text\">Bot\u00f3n de imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>Brizy ofrece tres elementos de fondo multimedia:<\/p>\n<ul>\n<li>Im\u00e1genes<\/li>\n<li>V\u00eddeos<\/li>\n<li>Mapas<\/li>\n<\/ul>\n<p>Primero, prueba el tipo de imagen para entender c\u00f3mo funciona con tu dise\u00f1o actual.<\/p>\n<p>Haz clic en el \u00e1rea de <strong>carga de im\u00e1genes <\/strong>para buscar una foto en la biblioteca multimedia y a\u00f1adirla al fondo.<\/p>\n<figure style=\"width: 1572px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-add.png\" alt=\"Tipo de imagen de fondo de WordPress\" width=\"1572\" height=\"725\"><figcaption class=\"wp-caption-text\">Tipo de imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>Encontramos una foto de un panel de madera para este tutorial y te indicamos que nos gustar\u00eda no tener <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-twenty\/#customizing-the-twenty-twenty-theme\">efecto de paralaje<\/a>.<\/p>\n<p>Esto a\u00f1ade un efecto agradable, ya que el fondo de color sirve como una superposici\u00f3n, pero seguimos viendo la textura de la madera detr\u00e1s de ella.<\/p>\n<p>Recuerda que siempre puedes ajustar el campo Parallax para que la imagen de fondo sea fija, animada o con desplazamiento.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/in-place.png\" alt=\"Imagen de fondo sin paralaje\" width=\"1865\" height=\"940\"><figcaption class=\"wp-caption-text\">Imagen de fondo sin paralaje<\/figcaption><\/figure>\n<p>\u00a1Y as\u00ed es como se inserta una imagen de fondo con Brizy!<\/p>\n<p>Lo mejor de Brizy es que puedes seguir movi\u00e9ndote por el dise\u00f1o y hacer clic en el bot\u00f3n de <strong>configuraci\u00f3n <\/strong>de cada secci\u00f3n.<\/p>\n<p>Una secci\u00f3n m\u00e1s abajo, podemos insertar otra imagen de fondo sin dedicarle mucho tiempo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/another-section.png\" alt=\"A\u00f1adir otra imagen de fondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">A\u00f1adir otra imagen de fondo<\/figcaption><\/figure>\n<p>Y para demostrar la potencia de los otros tipos de fondo, podemos hacer clic en el tipo de fondo <strong>Mapa<\/strong>, introducir una direcci\u00f3n y ver c\u00f3mo aparece un mapa de esa ubicaci\u00f3n justo detr\u00e1s del contenido en primer plano.<\/p>\n<p>El <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-mapas-wordpress\/\">mapa<\/a> se sit\u00faa como fondo completo y tiene una funci\u00f3n de zoom si no sale del todo bien con la configuraci\u00f3n por defecto.<\/p>\n<figure style=\"width: 1800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-map.png\" alt=\"A\u00f1adir un mapa como imagen de fondo de WordPress\" width=\"1800\" height=\"797\"><figcaption class=\"wp-caption-text\">A\u00f1adir un mapa como imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>Por \u00faltimo, te recomendamos que eches un vistazo a la herramienta de v\u00eddeo de fondo Brizy, situada en la misma secci\u00f3n que la herramienta de fondo de imagen. Funciona insertando una URL de v\u00eddeo (<a href=\"https:\/\/kinsta.com\/es\/blog\/estadisticas-youtube\/\">YouTube<\/a> o Vimeo), y mostrando un v\u00eddeo completo justo detr\u00e1s del contenido de primer plano. Incluso ofrece una configuraci\u00f3n para reproducir el v\u00eddeo en bucle y elegir cu\u00e1ndo debe comenzar cuando el usuario se desplaza por la secci\u00f3n.<\/p>\n<figure style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/video-now.png\" alt=\"URL para la imagen de fondo de WordPress\" width=\"1548\" height=\"820\"><figcaption class=\"wp-caption-text\">URL para la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>El gif animado que se muestra a continuaci\u00f3n es un breve ejemplo del v\u00eddeo en acci\u00f3n, aunque probablemente se podr\u00eda editar un poco.<\/p>\n<figure style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-video.gif\" alt=\"Fondo con v\u00eddeo\" width=\"1280\" height=\"720\"><figcaption class=\"wp-caption-text\">Fondo con v\u00eddeo<\/figcaption><\/figure>\n<h2>El Tama\u00f1o de la Imagen de Fondo, Obtenci\u00f3n y Edici\u00f3n B\u00e1sica<\/h2>\n<p>Hemos mencionado anteriormente en el art\u00edculo que, aunque no hay un tama\u00f1o perfecto para una imagen de fondo, recomendamos empezar con no menos de <strong>1024 x 768 <\/strong>p\u00edxeles y ce\u00f1irse a una relaci\u00f3n de aspecto com\u00fan como <strong>16:9<\/strong>. La relaci\u00f3n de aspecto no importa tanto como el tama\u00f1o y la resoluci\u00f3n reales de la imagen, ya que puedes recortarla o dejar que WordPress lo haga por ti.<\/p>\n<p>Tambi\u00e9n es esencial encontrar los lugares adecuados para comprar o tomar prestadas las im\u00e1genes de fondo de WordPress si no piensas hacer tus propias fotos.<\/p>\n<h3>D\u00f3nde Encontrar Im\u00e1genes de Fondo Adecuadas<\/h3>\n<p>Para la b\u00fasqueda de im\u00e1genes de fondo, consulta nuestra gu\u00eda para encontrar y a\u00f1adir <a href=\"https:\/\/kinsta.com\/es\/blog\/fotos-de-archivo-wordpress\/\">fotos de stock sin salir de WordPress<\/a>. Tambi\u00e9n tenemos una <a href=\"https:\/\/kinsta.com\/es\/blog\/imagenes-gratis-para-wordpress\/\">lista de fuentes de mercado \u00fatiles<\/a> para buscar fotos de stock de alta resoluci\u00f3n, muchas de las cuales son gratuitas.<\/p>\n<p>En general, te recomendamos que intentes hacer t\u00fa mismo las im\u00e1genes de fondo. Si no es posible o no tienes experiencia con la fotograf\u00eda o el dise\u00f1o gr\u00e1fico, piensa en utilizar recursos gratuitos de fotograf\u00eda de archivo. Tambi\u00e9n puedes optar por pagar por una imagen de fondo de uno de los muchos sitios web de im\u00e1genes de stock premium, algunos de los cuales cobran una cuota mensual para descargar un mont\u00f3n de fotos.<\/p>\n<p>Algunos de los aspectos m\u00e1s destacados de esos enlaces son:<\/p>\n<ul>\n<li><a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> &#8211; Gratis y sin necesidad de atribuci\u00f3n.<\/li>\n<li><a href=\"https:\/\/visualhunt.com\/\">Visual Hunt<\/a> &#8211; Fotos gratuitas. La mayor\u00eda de las im\u00e1genes no requieren atribuci\u00f3n.<\/li>\n<li><a href=\"https:\/\/www.pexels.com\/\">Pexels<\/a> &#8211; Gratis sin necesidad de atribuci\u00f3n.<\/li>\n<li><a href=\"https:\/\/pixabay.com\/\">Pixabay<\/a> &#8211; Gratis con la mayor\u00eda de las im\u00e1genes que no requieren atribuci\u00f3n.<\/li>\n<li><a href=\"https:\/\/www.istockphoto.com\/\">iStockphoto<\/a> &#8211; Una suscripci\u00f3n premium bastante econ\u00f3mica para im\u00e1genes libres de derechos.<\/li>\n<li><a href=\"https:\/\/www.shutterstock.com\/\">Shutterstock<\/a> &#8211; Im\u00e1genes libres de derechos por una cuota de suscripci\u00f3n razonable.<\/li>\n<\/ul>\n<h3>C\u00f3mo Cambiar la Imagen de Fondo de WordPress con CSS personalizado<\/h3>\n<p>Como hemos aprendido, puedes a\u00f1adir una imagen de fondo de WordPress con las herramientas est\u00e1ndar incorporadas a WordPress o con un plugin. No importa la ruta que elijas, siempre y cuando obtengas el resultado deseado. Tambi\u00e9n existe la opci\u00f3n de utilizar CSS personalizado para estilizar la imagen de fondo o a\u00f1adirla a tu sitio.<\/p>\n<p>No cubriremos las complejidades del CSS personalizado, ya que cada imagen de fondo y tema tendr\u00e1 un proceso diferente. Sin embargo, recomendamos la lectura de <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">nuestra gu\u00eda sobre la edici\u00f3n, adici\u00f3n y personalizaci\u00f3n de CSS en WordPress<\/a>. El art\u00edculo tiene consejos \u00fatiles para a\u00f1adir im\u00e1genes de fondo a casi cualquier secci\u00f3n del sitio web, desde elementos de men\u00fa hasta bloques de p\u00e1gina espec\u00edficos.<\/p>\n<h2>Soluci\u00f3n de Problemas Comunes con una Imagen de Fondo de WordPress<\/h2>\n<p>Todos los sitios de WordPress vienen con la posibilidad de a\u00f1adir un fondo. Sin embargo, eso no significa que la caracter\u00edstica principal funcione para todos los sitios web. Por ejemplo, puedes encontrarte con que el tema que utilizas no admite fondos personalizados. O tal vez subas un fondo, pero no se ve del todo bien (demasiado grande o demasiado borroso).<\/p>\n<p>Encontrarse con un problema de fondo en WordPress es frustrante y, por desgracia, algo com\u00fan. A continuaci\u00f3n, hemos recopilado algunos de los problemas m\u00e1s comunes con las im\u00e1genes de fondo y hemos trazado cada curso de acci\u00f3n.<\/p>\n<p><strong>C\u00f3mo Solucionar los 5 Problemas M\u00e1s Comunes con las Im\u00e1genes de Fondo en WordPress<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=kVmAoW9kBZg\"><\/kinsta-video>\n<h3>Mi Tema no Admite una Imagen de Fondo de WordPress<\/h3>\n<p>Los desarrolladores de temas controlan la funci\u00f3n de fondos personalizados en WordPress. Pueden activarla o desactivarla, dependiendo de si quieren activar el soporte de fondos personalizados. El fondo se desactiva cuando no es necesario o cuando entra en conflicto con el dise\u00f1o general del tema.<\/p>\n<p>Si encuentras que tu tema no admite un fondo personalizado o limita tus posibilidades a la hora de a\u00f1adir un fondo, considera estas soluciones:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">Cambia el tema<\/a> por uno que admita fondos personalizados. Busca los fondos personalizados en las listas de caracter\u00edsticas cuando compres o descargues los temas.<\/li>\n<li>Utilizar un plugin de fondo para anular la funci\u00f3n de fondo personalizado por defecto que se est\u00e1 bloqueando.<\/li>\n<\/ul>\n<p>Aunque es posible incluir tu propia codificaci\u00f3n personalizada o entrar en los archivos del tema para reaccionar los fondos personalizados, normalmente recomendamos no usar ambas opciones. Lo mejor que puedes hacer es buscar un tema que soporte fondos o a\u00f1adir un plugin que permita los fondos, pero que no interfiera con la funcionalidad del tema.<\/p>\n<h3>Mi Imagen de Fondo de WordPress es Demasiado Oscura o Tiene el Color Equivocado<\/h3>\n<p>Una imagen de fondo oscurecida puede provenir de muchos ajustes que se ejecutan junto a la propia imagen de fondo. La mayor\u00eda de las veces, tiene que ver con un filtro superpuesto o un fondo mal coloreado.<\/p>\n<p>En la mayor\u00eda de los casos en los que el fondo est\u00e1 descolorido, debes comprobar el tema o el plugin que controla el fondo en s\u00ed.<\/p>\n<p>Busca un ajuste cerca del campo de fondo que pida un filtro o una superposici\u00f3n. Tambi\u00e9n puedes encontrar una caracter\u00edstica de opacidad que debe ser despejada para que su fondo se muestre correctamente.<\/p>\n<p>Si todo lo dem\u00e1s falla, el tema puede tener un filtro de fondo codificado en los <a href=\"https:\/\/kinsta.com\/es\/blog\/archivos-wordpress\/\">archivos del tema<\/a>. En ese caso, ponte en contacto con el desarrollador del tema para que te d\u00e9 una idea de las posibilidades de corregir el color de fondo.<\/p>\n<h3>Mi Imagen de Fondo de WordPress No Est\u00e1 en la Posici\u00f3n Correcta<\/h3>\n<p>La imagen de fondo que aparece en una posici\u00f3n incorrecta tiende a estropear el dise\u00f1o general de tu sitio web. Es posible que el fondo est\u00e9 demasiado a la izquierda o a la derecha, o que lo que se supone que es el foco central del fondo no aparezca en la pantalla.<\/p>\n<p>Por suerte, moverse por el fondo solo requiere unos pocos clics del bot\u00f3n.<\/p>\n<p>Dir\u00edgete a <strong>Apariencia &gt; Fondo <\/strong>en el panel de control de WordPress. Busca la imagen que has subido actualmente como fondo y busca el campo <strong>Posici\u00f3n<\/strong>. Este campo te permite mover el posicionamiento del fondo, con opciones para moverlo a la izquierda, derecha, arriba, abajo o en las esquinas.<\/p>\n<p>Te recomendamos que hagas clic en todos los botones de posicionamiento para ver los resultados que producen. Despu\u00e9s de encontrar la posici\u00f3n correcta, guarda la p\u00e1gina.<\/p>\n<h3>La Imagen de Fondo de mi WordPress se Repite Una y Otra Vez<\/h3>\n<p>Las texturas y los fondos s\u00f3lidos suelen tener mejor aspecto cuando se repiten, ya que pasar\u00edan por alto las interrupciones de la imagen. Sin embargo, muchas im\u00e1genes tienen un aspecto horrible cuando se repiten como fondo, sobre todo las que tienen muchos detalles y distintos grados de color.<\/p>\n<p>Un dise\u00f1o de imagen de fondo repetido es \u00fatil si tu imagen de origen no es lo suficientemente grande como para cubrir todo el fondo sin parecer estirada. Por lo tanto, WordPress a veces utiliza por defecto un dise\u00f1o repetido para mantener la resoluci\u00f3n de la imagen.<\/p>\n<p>La principal soluci\u00f3n a este problema se encuentra en la secci\u00f3n de Fondo en <strong>Apariencia &gt; Fondo <\/strong>en WordPress. Con una foto subida como fondo, prueba con preajustes como <strong>Rellenar pantalla<\/strong>, <strong>Ajustar a pantalla <\/strong>o <strong>Personalizado<\/strong>, en lugar de la opci\u00f3n de preajuste <strong>Repetir<\/strong>.<\/p>\n<p>Sin embargo, es posible que al intentar que una imagen m\u00e1s peque\u00f1a cubra la totalidad de la pantalla de fondo se <a href=\"https:\/\/kinsta.com\/es\/blog\/hotlinking\/\">obtengan resultados desagradables<\/a>. En ese caso, la mejor soluci\u00f3n es reemplazar completamente la imagen de origen del fondo y buscar una que sea grande, de alta resoluci\u00f3n y que est\u00e9 lista para ser publicada en la web.<\/p>\n<h3>La Imagen de Fondo de Mi WordPress Est\u00e1 Estirada<\/h3>\n<p>Una imagen de fondo estirada significa que tu configuraci\u00f3n de fondo personalizada intenta tomar una imagen m\u00e1s peque\u00f1a y cubrir toda la pantalla con la imagen.<\/p>\n<p>Esto tambi\u00e9n puede ocurrir con <a href=\"https:\/\/kinsta.com\/es\/blog\/facebook-marketing\/#add-highquality-images\">im\u00e1genes m\u00e1s grandes y de alta resoluci\u00f3n<\/a> si no se ajustan a la relaci\u00f3n de aspecto requerida. En el caso de las im\u00e1genes de fondo estiradas, piensa en el archivo de origen. Elige una imagen diferente que sea adecuada es la mejor opci\u00f3n.<\/p>\n<p>Otro problema es que puedes tener la configuraci\u00f3n del fondo mal configurada. Comprueba cosas como la posici\u00f3n de la imagen de fondo y que se extienda sobre el lienzo en el modo <strong>Rellenar pantalla<\/strong>. Puede que solo tengas que mantener las dimensiones originales o a\u00f1adir una funci\u00f3n de <strong>repetici\u00f3n <\/strong>para que todo funcione.<\/p>\n<h3>Otros Consejos para Solucionar Problemas con las Im\u00e1genes de Fondo<\/h3>\n<ul>\n<li>Los desarrolladores de temas tienen pleno poder sobre la funci\u00f3n de fondo personalizado en WordPress. Si has instalado un tema y no consigues que el fondo funcione, lo mejor es que te pongas en contacto con el desarrollador del tema o que instales un tema nuevo para ver si se soluciona el problema.<\/li>\n<li>Los colores e im\u00e1genes de fondo personalizados suelen anular cualquier c\u00f3digo CSS personalizado que implementes para controlar el tama\u00f1o, la ubicaci\u00f3n o la fuente de tu imagen de fondo. Es posible que tengas que seguir la configuraci\u00f3n de fondo del tema en lugar de utilizar CSS personalizado.<\/li>\n<li>Un tema puede venderse con un fondo personalizado ya activado. Normalmente, todo lo que tienes que hacer es sustituir la imagen de fondo por una nueva. A veces, es necesario <a href=\"https:\/\/kinsta.com\/es\/blog\/archivos-wordpress\/\">intervenir en los archivos del tema<\/a> o utilizar <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">CSS personalizado<\/a> para anular la configuraci\u00f3n del tema.<\/li>\n<\/ul>\n<h2>Los Mejores Plugins de Im\u00e1genes de Fondo para WordPress<\/h2>\n<p>Si quieres tener m\u00e1s posibilidades de edici\u00f3n para una imagen de fondo, est\u00e1s interesado en fondos de v\u00eddeo o en herramientas que permitan crear fondos espec\u00edficos para cada p\u00e1gina, puedes considerar los siguientes plugins de im\u00e1genes de fondo para WordPress:<\/p>\n<h3 class=\"has-anchor-hash\">Simple Full Screen Background Image<\/h3>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Simple-Full-Screen-Background-Image.png\" alt=\"Plugin simple de imagen de fondo a pantalla completa\" width=\"1324\" height=\"433\"><figcaption class=\"wp-caption-text\">El Plugin Simple Full Screen Background Image<\/figcaption><\/figure>\n<p>El plugin <a href=\"https:\/\/wordpress.org\/plugins\/simple-full-screen-background-image\/\">Simple Full Screen Background Image<\/a> no es muy diferente de la herramienta de imagen de fondo por defecto en WordPress, excepto que a\u00f1ade funciones automatizadas para cosas como el cambio de tama\u00f1o y la escala para los navegadores.<\/p>\n<p>En general, este plugin funciona mejor para aquellos que encuentran que su tema bloquea la capacidad de a\u00f1adir un fondo, o tal vez est\u00e1n teniendo problemas con la herramienta de fondo de WordPress incorporado. Anula lo que tienes en WordPress y a\u00f1ade un bot\u00f3n especial de Fondo en tu <a href=\"https:\/\/kinsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">panel de control de WordPress<\/a> para subir al instante una imagen desde tu ordenador.<\/p>\n<p>Eso es todo.<\/p>\n<p>El plugin tambi\u00e9n tiene una versi\u00f3n Premium que ofrece un escalado mejorado, soporte para un n\u00famero ilimitado de fondos y efectos \u00fanicos, y mucho m\u00e1s.<\/p>\n<h3>Advanced WordPress Backgrounds<\/h3>\n<figure style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Advanced-WordPress-Backgrounds.png\" alt=\"AWB - Advanced WordPress Backgrounds plugin\" width=\"1328\" height=\"430\"><figcaption class=\"wp-caption-text\">AWB &#8211; Advanced WordPress Backgrounds plugin<\/figcaption><\/figure>\n<p>El plugin <a href=\"https:\/\/wordpress.org\/plugins\/advanced-backgrounds\/\">Advanced WordPress Backgrounds adopta<\/a> un enfoque diferente para los fondos de WordPress, permiti\u00e9ndote aprovechar los efectos \u00fanicos que dan vida a tu fondo. Un ejemplo de esto es el fondo de paralaje, que puede moverse lentamente junto con el usuario a medida que se desplaza por tu sitio web.<\/p>\n<p>El plugin tambi\u00e9n ofrece soporte para v\u00eddeos. Los fondos de v\u00eddeo se extraen de lugares como YouTube y Vimeo, o incluso puedes <a href=\"https:\/\/kinsta.com\/es\/blog\/hosting-video\/\">autoalojarlos<\/a>.<\/p>\n<p>Tambi\u00e9n es posible tener un fondo de color s\u00f3lido o con textura. Todos estos tipos de fondos incluyen caracter\u00edsticas avanzadas que no puedes encontrar con la herramienta b\u00e1sica de fondos de WordPress. Algunas de ellas incluyen efectos de desplazamiento y escalado, efectos de opacidad y opciones de velocidad personalizadas.<\/p>\n<p>Es compatible con Gutenberg y puede ir junto con el editor est\u00e1ndar de WordPress y muchos otros constructores de p\u00e1ginas visuales. Por \u00faltimo, puedes utilizar sus opciones CSS personalizadas para a\u00f1adir a\u00fan m\u00e1s estilo a tus fondos.<\/p>\n<h3>Perfect Images + Retina<\/h3>\n<figure style=\"width: 1323px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Perfect-Images-Retina.png\" alt=\"Im\u00e1genes perfectas + plugin Retina\" width=\"1323\" height=\"431\"><figcaption class=\"wp-caption-text\">El plugin Perfect Images + Retina<\/figcaption><\/figure>\n<p>El plugin <a href=\"https:\/\/wordpress.org\/plugins\/wp-retina-2x\/\">Perfect Images + Retina<\/a> es una soluci\u00f3n dos en uno. Permite gestionar el tama\u00f1o y la apariencia de la imagen de fondo de WordPress, al tiempo que <a href=\"https:\/\/kinsta.com\/es\/blog\/regenerar-las-miniaturas\/\">regen\u00e9ralas miniaturas<\/a> y sustituye las im\u00e1genes. La gesti\u00f3n de la imagen es bastante impresionante, y es particularmente crucial para los fondos de alta resoluci\u00f3n.<\/p>\n<p>El plugin tambi\u00e9n ofrece una funci\u00f3n de fondo si se opta por su versi\u00f3n premium. Genera un equivalente retina para esa imagen de fondo para que las im\u00e1genes se vean como se supone que deben ser, incluso en pantallas de alta resoluci\u00f3n.<\/p>\n<h3>Maintenance<\/h3>\n<figure style=\"width: 1325px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance-s-s.png\" alt=\"Plugin de mantenimiento con la imagen de fondo de WordPress\" width=\"1325\" height=\"434\"><figcaption class=\"wp-caption-text\">El Plugin de Maintenance con la imagen de fondo de WordPress<\/figcaption><\/figure>\n<p>Maintenance es un plugin sencillo y f\u00e1cil de usar para dise\u00f1ar p\u00e1ginas de mantenimiento y de pr\u00f3xima aparici\u00f3n. El plugin <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">Maintenance<\/a> tiene versiones gratuitas y premium, pero la gratuita es suficiente para activar una p\u00e1gina de mantenimiento y a\u00f1adir una imagen de fondo con texto y campos superpuestos.<\/p>\n<p>Incluso puedes subir tu propio logotipo, personalizar cosas como las <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-wordpress\/\">fuentes<\/a> y los iconos, y elegir varias plantillas con sus propias y hermosas im\u00e1genes de fondo. Tambi\u00e9n puedes instalar sus numerosas plantillas preconstruidas, pero la mayor\u00eda de ellas requieren la licencia premium del plugin.<\/p>\n\n<h2>Resumen<\/h2>\n<p>Una imagen de fondo b\u00e1sica de WordPress no requiere ning\u00fan esfuerzo para a\u00f1adirla y mostrarla en todo el sitio web. Es una funcionalidad incorporada en el <a href=\"https:\/\/kinsta.com\/es\/docs\/soporte\/alcance-del-soporte\/alcance-del-soporte-para-wordpress-administrado\/#what-is-wordpress-core\">n\u00facleo de WordPress<\/a>, por lo que es f\u00e1cil cambiar los fondos para ciertos eventos o vacaciones. Tambi\u00e9n puedes quedarte con un fondo para toda la vida.<\/p>\n<p>Adem\u00e1s del fondo est\u00e1ndar de WordPress, puedes utilizar c\u00f3digo CSS personalizado, plugins y constructores de p\u00e1ginas para implementar todo tipo de fondos en tu sitio de WordPress. Desde fondos de imagen en p\u00e1ginas espec\u00edficas hasta fondos para el bot\u00f3n del men\u00fa, las posibilidades son infinitas.<\/p>\n<p>Ahora es el momento de a\u00f1adir ese fondo que siempre has querido a tu sitio de WordPress.<\/p>\n<p><em>\u00bfNos hemos dejado algo? Deja un comentario si tienes problemas para a\u00f1adir o gestionar las im\u00e1genes de fondo de WordPress.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las im\u00e1genes de fondo de WordPress vienen en todas las formas. Puedes subir una imagen de fondo para todo tu sitio web, colocarla detr\u00e1s de los &#8230;<\/p>\n","protected":false},"author":117,"featured_media":40203,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[414,611],"topic":[1358,1334,1292],"class_list":["post-40198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdev","tag-wptips","topic-diseno-sitios-web-wordpress","topic-diseno-web","topic-optimizacion-de-imagenes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema<\/title>\n<meta name=\"description\" content=\"A\u00f1adir una imagen de fondo en WordPress no tiene por qu\u00e9 ser un reto. Aprende a activarlas, editarlas y personalizarlas con esta gu\u00eda en profundidad.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema\" \/>\n<meta property=\"og:description\" content=\"A\u00f1adir una imagen de fondo en WordPress no tiene por qu\u00e9 ser un reto. Aprende a activarlas, editarlas y personalizarlas con esta gu\u00eda en profundidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-25T11:43:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-14T11:46:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"A\u00f1adir una imagen de fondo en WordPress no tiene por qu\u00e9 ser un reto. Aprende a activarlas, editarlas y personalizarlas con esta gu\u00eda en profundidad.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"122 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema\",\"datePublished\":\"2021-03-25T11:43:13+00:00\",\"dateModified\":\"2025-02-14T11:46:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/\"},\"wordCount\":21250,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png\",\"keywords\":[\"webdev\",\"wptips\"],\"articleSection\":[\"Los mejores tutoriales de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/\",\"name\":\"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png\",\"datePublished\":\"2021-03-25T11:43:13+00:00\",\"dateModified\":\"2025-02-14T11:46:23+00:00\",\"description\":\"A\u00f1adir una imagen de fondo en WordPress no tiene por qu\u00e9 ser un reto. Aprende a activarlas, editarlas y personalizarlas con esta gu\u00eda en profundidad.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png\",\"width\":1460,\"height\":730,\"caption\":\"Im\u00e1genes de fondo de WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o de Sitios Web en WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/diseno-sitios-web-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema","description":"A\u00f1adir una imagen de fondo en WordPress no tiene por qu\u00e9 ser un reto. Aprende a activarlas, editarlas y personalizarlas con esta gu\u00eda en profundidad.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema","og_description":"A\u00f1adir una imagen de fondo en WordPress no tiene por qu\u00e9 ser un reto. Aprende a activarlas, editarlas y personalizarlas con esta gu\u00eda en profundidad.","og_url":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2021-03-25T11:43:13+00:00","article_modified_time":"2025-02-14T11:46:23+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"A\u00f1adir una imagen de fondo en WordPress no tiene por qu\u00e9 ser un reto. Aprende a activarlas, editarlas y personalizarlas con esta gu\u00eda en profundidad.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Salman Ravoof","Tiempo de lectura":"122 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema","datePublished":"2021-03-25T11:43:13+00:00","dateModified":"2025-02-14T11:46:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/"},"wordCount":21250,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png","keywords":["webdev","wptips"],"articleSection":["Los mejores tutoriales de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/","name":"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png","datePublished":"2021-03-25T11:43:13+00:00","dateModified":"2025-02-14T11:46:23+00:00","description":"A\u00f1adir una imagen de fondo en WordPress no tiene por qu\u00e9 ser un reto. Aprende a activarlas, editarlas y personalizarlas con esta gu\u00eda en profundidad.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/03\/imagenes-fondo-wordpress.png","width":1460,"height":730,"caption":"Im\u00e1genes de fondo de WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/imagenes-fondo-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o de Sitios Web en WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/diseno-sitios-web-wordpress\/"},{"@type":"ListItem","position":3,"name":"Im\u00e1genes de Fondo de WordPress: C\u00f3mo A\u00f1adir, Editar y Personalizar el Tema"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/40198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=40198"}],"version-history":[{"count":17,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/40198\/revisions"}],"predecessor-version":[{"id":78117,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/40198\/revisions\/78117"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/translations\/jp"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/40198\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/40203"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=40198"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=40198"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=40198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}