{"id":30714,"date":"2025-01-14T05:48:24","date_gmt":"2025-01-14T05:48:24","guid":{"rendered":"https:\/\/doc.probance.com\/?post_type=tutoriels&#038;p=30714"},"modified":"2026-03-03T11:28:35","modified_gmt":"2026-03-03T11:28:35","slug":"anadir-una-imagen-de-fondo-en-una-plantilla","status":"publish","type":"tutoriels","link":"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-una-plantilla\/","title":{"rendered":"A\u00f1adir una imagen de fondo en una plantilla"},"content":{"rendered":"\n<p><em>Para agregar una dimensi\u00f3n visual adicional a tus campa\u00f1as y aumentar su impacto, puedes mostrar im\u00e1genes de fondo en tus plantillas o en los bloques que las componen.<\/em><\/p>\n\n\n\n<p><em>Este tutorial explica c\u00f3mo agregar una imagen de fondo a una plantilla en el editor Fastbuilder.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">1. Seleccionar una imagen<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>En la edici\u00f3n de su plantilla, accede a la pesta\u00f1a <strong>Contenido<\/strong>.<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>En la secci\u00f3n <strong>Propiedades generales<\/strong>, activa la opci\u00f3n <strong>Imagen de fondo<\/strong>.<\/li>\n<\/ol>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Haz clic en el \u00edcono de imagen para abrir la galer\u00eda.<\/li>\n<\/ol>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Importa o selecciona tu imagen, luego haz clic en <strong>Usar esta imagen<\/strong> para confirmar.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-style-note is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota:<\/strong> Para evitar ralentizar la carga del correo electr\u00f3nico, da prioridad a archivos de menos de 1 MB en formato JPEG o PNG comprimido.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2. Dar formato al fondo<\/h2>\n\n\n\n<p>Una vez seleccionada tu imagen, puedes ajustar su visualizaci\u00f3n, siempre en la pesta\u00f1a Contenido, para dar formato a tu fondo.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>El campo<strong> Posici\u00f3n<\/strong> te permite definir d\u00f3nde debe colocarse la imagen dentro de la plantilla. Puedes alinearla en la parte superior o inferior de la plantilla, izquierda o derecha, o centrarla.<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>El campo<strong>\u00a0Repetir\u00a0<\/strong>permite definir si la imagen debe repetirse y de qu\u00e9 manera. Por defecto, la imagen no se repite y solo se muestra una vez. Los modos de repetici\u00f3n disponibles son los siguientes.\n<ul class=\"wp-block-list\">\n<li>Horizontal: la imagen se repite a lo largo de todo el ancho del bloque.<\/li>\n\n\n\n<li>Vertical: la imagen se repite a lo largo de toda la altura del bloque.<\/li>\n\n\n\n<li>Horizontal y vertical: la imagen se repite tanto en ancho como en alto dentro del bloque.<\/li>\n\n\n\n<li>Con espacio: la imagen se muestra completa en ancho y alto para llenar todo el espacio disponible en el bloque, sin ser recortada ni redimensionada.<\/li>\n\n\n\n<li>Sin espacio: la imagen se muestra completa en ancho y alto para llenar todo el espacio disponible en el bloque y puede ser redimensionada.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>El campo\u00a0<strong>Tama\u00f1o\u00a0<\/strong>permite definir c\u00f3mo debe ajustarse el tama\u00f1o de la imagen al espacio a llenar. Por defecto, la imagen no se redimensiona y mantiene su tama\u00f1o original. Las opciones disponibles son las siguientes:\n<ul class=\"wp-block-list\">\n<li>Cubrir: La imagen se redimensiona (conservando las proporciones) para llenar todo el espacio disponible en el bloque.<\/li>\n\n\n\n<li>Contener: La imagen se redimensiona (conservando las proporciones) para llenar el ancho del bloque.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">3. Compatibilidad con los proveedores de correo electr\u00f3nico<\/h2>\n\n\n\n<p>Cuando dise\u00f1as una plantilla, es esencial tener en cuenta las posibles diferencias de visualizaci\u00f3n, no solo seg\u00fan los dispositivos, sino tambi\u00e9n en funci\u00f3n de las aplicaciones y los navegadores.<\/p>\n\n\n\n<p>Por ejemplo, algunos proveedores de correo electr\u00f3nico, como Outlook en Windows, no admiten im\u00e1genes de fondo en HTML y CSS. Por lo tanto, estas im\u00e1genes no se mostrar\u00e1n en tus plantillas.<\/p>\n\n\n\n<p>Para garantizar una legibilidad \u00f3ptima para todos tus destinatarios, configura un color de fondo alternativo para tu plantilla.<\/p>\n\n\n\n<p>Puedes ajustar el color de fondo en la pesta\u00f1a <strong>Estilo<\/strong>.<\/p>\n<div id=\"wpmem_restricted_msg\"><p>Este contenido est\u00e1 restringido a los miembros del sitio. Si eres un usuario existente, por favor, accede. Los nuevos usuarios pueden registrarse a continuaci\u00f3n.<\/p><\/div><div id=\"wpmem_login\"><a id=\"login\"><\/a><form action=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-una-plantilla\/\" method=\"POST\" id=\"wpmem_login_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_login_nonce\" name=\"_wpmem_login_nonce\" value=\"f834b2436e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/es\/wp-json\/wp\/v2\/tutoriels\/30714\" \/><fieldset><legend>Acceso de usuarios existentes<\/legend><label for=\"log\">Nombre de usuario o correo electr\u00f3nico<\/label><div class=\"div_text\"><input name=\"log\" type=\"text\" id=\"log\" value=\"\" class=\"username\" required  \/><\/div><label for=\"pwd\">Contrase\u00f1a<\/label><div class=\"div_text\"><input name=\"pwd\" type=\"password\" id=\"pwd\" class=\"password\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"login\" \/><input name=\"redirect_to\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-una-plantilla\/\" \/><div class=\"button_div\"><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/>&nbsp;<label for=\"rememberme\">Recu\u00e9rdame<\/label>&nbsp;&nbsp;<input type=\"submit\" name=\"Submit\" value=\"Acceder\" class=\"buttons\" \/><\/div><\/fieldset><\/form><\/div><div id=\"wpmem_reg\"><a id=\"register\"><\/a><form name=\"form\" method=\"post\" action=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-una-plantilla\/\" id=\"wpmem_register_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_register_nonce\" name=\"_wpmem_register_nonce\" value=\"6cc3867c56\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/es\/wp-json\/wp\/v2\/tutoriels\/30714\" \/><fieldset><legend>Registro de un nuevo usuario<\/legend><label for=\"username\" class=\"text\">Elige un nombre de usuario<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"username\" type=\"text\" id=\"username\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"first_name\" class=\"text\">Nombre<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"first_name\" type=\"text\" id=\"first_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"last_name\" class=\"text\">Apellidos<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"last_name\" type=\"text\" id=\"last_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"user_email\" class=\"text\">Correo electr\u00f3nico<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"user_email\" type=\"email\" id=\"user_email\" value=\"\" class=\"textbox\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"register\" \/><input name=\"wpmem_reg_page\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-una-plantilla\/\" \/><div class=\"button_div\"><input name=\"submit\" type=\"submit\" value=\"Registro\" class=\"buttons\" \/><\/div><div class=\"req-text\"><span class=\"req\">*<\/span>Campo necesario<\/div><\/fieldset><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>Para agregar una dimensi\u00f3n visual adicional a tus campa\u00f1as y aumentar su impacto, puedes mostrar im\u00e1genes de fondo en tus plantillas o en los bloques que las componen. Este tutorial explica c\u00f3mo agregar una imagen de fondo a una plantilla en el editor Fastbuilder. 1. Seleccionar una imagen Nota: Para evitar ralentizar la carga del [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","sujets":[729],"class_list":["post-30714","tutoriels","type-tutoriels","status-publish","hentry","sujets-plantillas"],"_links":{"self":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/tutoriels\/30714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/tutoriels"}],"about":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/types\/tutoriels"}],"author":[{"embeddable":true,"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/media?parent=30714"}],"wp:term":[{"taxonomy":"sujets","embeddable":true,"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/sujets?post=30714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}