{"id":11431,"date":"2024-11-15T21:00:59","date_gmt":"2024-11-15T21:00:59","guid":{"rendered":"https:\/\/wcanvas.com\/?post_type=blogs&#038;p=11431"},"modified":"2024-12-23T18:47:37","modified_gmt":"2024-12-23T18:47:37","slug":"2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress","status":"publish","type":"blogs","link":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/","title":{"rendered":"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress"},"content":{"rendered":"\n<p>Las contrase\u00f1as pueden ser muy importantes para proteger tu contenido. Sin embargo, las p\u00e1ginas protegidas con contrase\u00f1a suelen verse bastante simples en comparaci\u00f3n con el resto del sitio. En este post, aprender\u00e1s c\u00f3mo dar estilo a las p\u00e1ginas protegidas con contrase\u00f1a en WordPress para que se integren mejor con tu marca.<\/p>\n\n\n\n<p>Ten en cuenta que necesitar\u00e1s un conocimiento muy b\u00e1sico de CSS, pero definitivamente es algo que pod\u00e9s hacer con solo habilidades b\u00e1sicas de computadora. Adem\u00e1s, te proporcionaremos algunos fragmentos de c\u00f3digo para que los utilices, as\u00ed no tendr\u00e1s que crear el c\u00f3digo por tu cuenta.<\/p>\n\n\n\n<p>Vamos a meternos en eso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Puntos Clave<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El estilo de las p\u00e1ginas protegidas con contrase\u00f1a normalmente no coincide con el resto de tu sitio.<\/li>\n\n\n\n<li>Pod\u00e9s dar estilo a las p\u00e1ginas protegidas con contrase\u00f1a usando CSS personalizado.<\/li>\n\n\n\n<li>Pod\u00e9s a\u00f1adir CSS personalizado con la funci\u00f3n de personalizaci\u00f3n de tu tema, con un tema hijo, o un plugin de fragmentos de c\u00f3digo de WordPress.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 Estilizar Tus P\u00e1ginas Protegidas con Contrase\u00f1a?<\/h2>\n\n\n\n<p>La principal raz\u00f3n para estilizar tus p\u00e1ginas protegidas con contrase\u00f1a es embellecerlas y darles un toque adicional.<\/p>\n\n\n\n<p>Puede ser desagradable para los usuarios encontrar una p\u00e1gina que se vea a medio terminar o diferente del resto de la identidad de la marca del sitio.<\/p>\n\n\n\n<p>Por ejemplo, as\u00ed es como se ven las p\u00e1ginas protegidas con contrase\u00f1a en el tema Twenty Twenty-Five:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-1-1024x451.jpg\" alt=\"Una p\u00e1gina de WordPress protegida con contrase\u00f1a\" class=\"wp-image-10661\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-1-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-1-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-1-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-1.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>El estilo cambia dependiendo del tema, pero las p\u00e1ginas protegidas con contrase\u00f1a generalmente se ven bastante simples de todas formas. As\u00ed es como se ven en Hello:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-2-1024x451.jpg\" alt=\"Una p\u00e1gina de WordPress protegida con contrase\u00f1a\" class=\"wp-image-10667\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-2-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-2-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-2-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-2.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Todas estas p\u00e1ginas son funcionales, pero quiz\u00e1s quer\u00e9s darles una renovaci\u00f3n para que se adapten mejor a tu marca o simplemente darles un poco m\u00e1s de vida.<\/p>\n\n\n\n<p>Si ese es el caso, segu\u00ed leyendo para descubrir c\u00f3mo hacer esto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2 M\u00e9todos para Estilizar Tus P\u00e1ginas Protegidas con Contrase\u00f1a<\/h2>\n\n\n\n<p>Estos 2 m\u00e9todos te permitir\u00e1n estilizar tus p\u00e1ginas protegidas con contrase\u00f1a usando CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo #1: Usar el Personalizador del Tema<\/h3>\n\n\n\n<p>Quiz\u00e1s la forma m\u00e1s f\u00e1cil y r\u00e1pida de estilizar tus p\u00e1ginas protegidas con contrase\u00f1a es agregar CSS personalizado usando la funci\u00f3n de Personalizador del Tema.<\/p>\n\n\n\n<p>Sin embargo, no todos los temas permiten usar el Personalizador. Notablemente, los temas por defecto de WordPress (como Twenty Twenty-Five, Twenty Twenty-Four, etc.) no permiten utilizar el Personalizador, por lo que si este m\u00e9todo no funciona, pas\u00e1 al siguiente.<\/p>\n\n\n\n<p>Empecemos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Paso #1: Identificar el HTML para Estilizar<\/h4>\n\n\n\n<p>Como probablemente sab\u00e9s, las p\u00e1ginas protegidas con contrase\u00f1a te piden ingresar una contrase\u00f1a antes de acceder a tu sitio. Esto se logra con un HTML simple, al que pod\u00e9s apuntar si conoc\u00e9s su clase.<\/p>\n\n\n\n<p>Conocer la clase del formulario te permitir\u00eda apuntar a \u00e9l con c\u00f3digo CSS, que pod\u00e9s introducir de varias formas, incluyendo la funci\u00f3n de Personalizador.<\/p>\n\n\n\n<p>Para identificar la clase del formulario, tendr\u00e1s que usar las herramientas de desarrollador de tu navegador. En Chrome, Firefox y Edge, pod\u00e9s presionar <code>CTRL + SHIFT + C<\/code> o <code>CMD + SHIFT + C<\/code> para abrir las herramientas de desarrollo.<\/p>\n\n\n\n<p>Pas\u00e1 el puntero sobre el formulario hasta que identifiques la pieza correcta de HTML a la que apuntar. Despu\u00e9s de inspeccionar algunos elementos, encontramos que la clase a la que hay que apuntar se llama <code>post-password-form<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-3-1024x451.jpg\" alt=\"Herramientas de desarrollador del navegador abiertas en una p\u00e1gina de WordPress protegida con contrase\u00f1a\" class=\"wp-image-10669\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-3-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-3-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-3-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-3.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Paso #2: Aplicar CSS al HTML del Formulario<\/h4>\n\n\n\n<p>Con la clase HTML del formulario en mente, and\u00e1 a <strong>Apariencia &gt; Personalizar<\/strong> en tu tablero de administrador. Naveg\u00e1 a <strong>CSS Adicional<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-4-1024x451.jpg\" alt=\"Funci\u00f3n de personalizaci\u00f3n del tema de WordPress, destacando la secci\u00f3n &quot;CSS Adicional&quot;\" class=\"wp-image-10671\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-4-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-4-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-4-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-4.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ahora pod\u00e9s comenzar a agregar CSS para editar el formulario.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-5-1024x451.jpg\" alt=\"Funci\u00f3n de personalizaci\u00f3n del tema de WordPress, destacando el cuadro de texto para a\u00f1adir CSS personalizado\" class=\"wp-image-10673\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-5-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-5-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-5-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-5.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Por ejemplo, podr\u00edas usar el siguiente fragmento para empezar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">\/* Estilo General del Formulario *\/\n.post-password-form {\n  max-width: 400px;\n  margin: 20px auto;\n  padding: 20px;\n  background-color: #F9F9F9;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  font-family: Arial, sans-serif;\n}\n\/* Estilo de P\u00e1rrafos *\/\n.post-password-form p {\n  margin: 0 0 15px;\n  font-size: 14px;\n  color: #333;\n}\n\/* Estilo de Fila del Formulario *\/\n.form-row {\n  display: flex;\n  align-items: center;\n  margin-bottom: 15px;\n}\n.form-row label {\n  font-weight: bold;\n  margin-right: 10px;\n  color: #555;\n  flex-shrink: 0;\n}\n.input-group {\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n}\n\/* Estilo del Campo de Entrada *\/\n.post-password-form input[type=\"password\"] {\n  width: 100%;\n  padding: 10px;\n  font-size: 14px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  outline: none;\n  transition: border-color 0.3s;\n  flex-grow: 1;\n}\n.post-password-form input[type=\"password\"]:focus {\n  border-color: #007ACC;\n  box-shadow: 0 0 3px rgba(0, 122, 204, 0.5);\n}\n\/* Estilo del Bot\u00f3n de Enviar *\/\n.post-password-form input[type=\"submit\"] {\n  display: inline-block;\n  padding: 10px 20px;\n  font-size: 14px;\n  color: #fff;\n  background-color: #007ACC;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s;\n  margin-left: 10px;\n  flex-shrink: 0;\n}\n.post-password-form input[type=\"submit\"]:hover {\n  background-color: #005F99;\n}<\/code><\/pre>\n\n\n\n<p>Ahora, se ve mucho mejor:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-6-1024x451.jpg\" alt=\"Una p\u00e1gina de WordPress protegida con contrase\u00f1a con un estilo mejorado para el formulario de contrase\u00f1a\" class=\"wp-image-10675\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-6-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-6-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-6-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-6.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Si quer\u00e9s hacer alg\u00fan ajuste adicional, pod\u00e9s aprender un poco de CSS y editar el formulario o el resto de la p\u00e1gina como prefieras.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo #2: Utilizar un Fragmento de PHP Personalizado<\/h3>\n\n\n\n<p>Otra opci\u00f3n para estilizar tus p\u00e1ginas protegidas con contrase\u00f1a es agregar un fragmento de CSS personalizado con un tema hijo o un plugin de fragmentos de c\u00f3digo.<\/p>\n\n\n\n<p>Este m\u00e9todo es muy similar al primero, ya que tambi\u00e9n se trata de CSS.<\/p>\n\n\n\n<p>La diferencia es que este m\u00e9todo funcionar\u00e1 con cualquier tema de WordPress, incluidos aquellos que no habilitan la funci\u00f3n de Personalizador del Tema, como los temas por defecto de WordPress (Twenty Twenty-Five, etc.).<\/p>\n\n\n\n<p>En este caso, utilizaremos el plugin <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPCode<\/a>, pero podr\u00edas usar tu tema hijo si ya lo ten\u00e9s.<\/p>\n\n\n\n<p>Una vez que hayas instalado y activado el plugin, and\u00e1 a <strong>Fragmentos de C\u00f3digo &gt; + Agregar Nuevo Fragmento<\/strong> desde tu tablero. Hac\u00e9 clic en el bot\u00f3n <strong>+ Agregar Fragmento Personalizado<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-7-1024x451.jpg\" alt=\"La interfaz del plugin de Fragmentos de C\u00f3digo de WordPress \" class=\"wp-image-10677\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-7-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-7-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-7-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-7.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>En la siguiente pantalla, seleccion\u00e1 <strong>Fragmento CSS<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-8-1024x451.jpg\" alt=\"La interfaz del plugin de Fragmentos de C\u00f3digo de WordPress. Una flecha resalta el bot\u00f3n &quot;Fragmento CSS&quot;\" class=\"wp-image-10679\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-8-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-8-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-8-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-8.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ahora, nombr\u00e1 tu fragmento, activalo, pegalo en el cuadro de texto y hac\u00e9 clic en el bot\u00f3n <strong>Guardar Fragmento<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-9-1-1024x451.jpg\" alt=\"La interfaz del plugin de Fragmentos de C\u00f3digo de WordPress. La interfaz contiene un cuadro de texto para el fragmento y varias otras opciones para habilitarlo y guardarlo\" class=\"wp-image-10685\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-9-1-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-9-1-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-9-1-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-9-1.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Utiliz\u00e1 el siguiente fragmento, que es una versi\u00f3n ligeramente modificada del que usamos en el m\u00e9todo anterior:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">\/* Estilo General del Formulario *\/\n.post-password-form {\n  max-width: 400px;\n  margin: 20px auto;\n  padding: 20px;\n  background-color: #F9F9F9;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  font-family: Arial, sans-serif;\n}\n\/* Estilo de P\u00e1rrafos *\/\n.post-password-form p {\n  margin: 0 0 15px;\n  font-size: 14px;\n  color: #333;\n}\n\/* Estilo de Fila del Formulario *\/\n.form-row {\n  display: flex;\n  align-items: center;\n  margin-bottom: 15px;\n}\n.form-row label {\n  font-weight: bold;\n  margin-right: 10px;\n  color: #555;\n  flex-shrink: 0;\n}\n.input-group {\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n}\n\/* Estilo del Campo de Entrada *\/\n.post-password-form input[type=\"password\"] {\n  width: 50%;\n  padding: 10px;\n  font-size: 14px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  outline: none;\n  transition: border-color 0.3s;\n  flex-grow: 1;\n}\n.post-password-form input[type=\"password\"]:focus {\n  border-color: #007ACC;\n  box-shadow: 0 0 3px rgba(0, 122, 204, 0.5);\n}\n\/* Estilo del Bot\u00f3n de Enviar *\/\n.post-password-form input[type=\"submit\"] {\n  display: inline-block;\n  padding: 10px 20px;\n  font-size: 14px;\n  color: #fff;\n  background-color: #007ACC;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s;\n  margin-left: 10px;\n  flex-shrink: 0;\n}\n.post-password-form input[type=\"submit\"]:hover {\n  background-color: #005F99;\n}<\/code><\/pre>\n\n\n\n<p>Ac\u00e1 ten\u00e9s el resultado final:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-10-1024x451.jpg\" alt=\"Una p\u00e1gina de WordPress protegida con contrase\u00f1a con un estilo mejorado para el formulario de contrase\u00f1a\" class=\"wp-image-10683\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-10-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-10-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-10-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-10.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Comenz\u00e1 a Estilizar Tus P\u00e1ginas Protegidas con Contrase\u00f1a en WordPress<\/h2>\n\n\n\n<p>Como ves, aprender a estilizar p\u00e1ginas protegidas con contrase\u00f1a en WordPress no es tan dif\u00edcil y se puede hacer bastante r\u00e1pido.<\/p>\n\n\n\n<p>Pod\u00e9s usar la funci\u00f3n de Personalizar de tu tema o a\u00f1adir CSS con un plugin de fragmentos de c\u00f3digo o un tema hijo.<\/p>\n\n\n\n<p>\u00a1Esperamos que este conocimiento te ayude a tener m\u00e1s control sobre el estilo de tu sitio!<\/p>\n\n\n\n<p>Si encontraste \u00fatil este post, <a href=\"https:\/\/wcanvas.com\/es\/blogs\/\" target=\"_blank\" rel=\"noreferrer noopener\">le\u00e9 nuestro blog<\/a> y <a href=\"https:\/\/wcanvas.com\/es\/resources\/\" target=\"_blank\" rel=\"noreferrer noopener\">recursos para desarrolladores<\/a> para m\u00e1s ideas y gu\u00edas!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las contrase\u00f1as pueden ser muy importantes para proteger tu contenido. Sin embargo, las p\u00e1ginas protegidas con contrase\u00f1a suelen verse bastante simples en comparaci\u00f3n con el resto del sitio. En este post, aprender\u00e1s c\u00f3mo dar estilo a las p\u00e1ginas protegidas con contrase\u00f1a en WordPress para que se integren mejor con tu marca. Ten en cuenta que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10663,"template":"","blog-categories":[80,77],"class_list":["post-11431","blogs","type-blogs","status-publish","has-post-thumbnail","hentry","blog-categories-diseno-web","blog-categories-paso-a-paso"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress - White Canvas<\/title>\n<meta name=\"description\" content=\"Estilizar las p\u00e1ginas de WordPress protegidas con contrase\u00f1a mejora el dise\u00f1o de tu sitio al mismo tiempo que proteg\u00e9s tu contenido.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress - White Canvas\" \/>\n<meta property=\"og:description\" content=\"Estilizar las p\u00e1ginas de WordPress protegidas con contrase\u00f1a mejora el dise\u00f1o de tu sitio al mismo tiempo que proteg\u00e9s tu contenido.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"White Canvas\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-23T18:47:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"528\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": [\n\t                \"Article\",\n\t                \"BlogPosting\"\n\t            ],\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/\"\n\t            },\n\t            \"author\": {\n\t                \"@type\": \"Organization\",\n\t                \"name\": \"Wcanvas\",\n\t                \"url\": \"https:\/\/wcanvas.com\/\"\n\t            },\n\t            \"headline\": \"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress\",\n\t            \"datePublished\": \"2024-11-15T21:00:59+00:00\",\n\t            \"dateModified\": \"2024-12-23T18:47:37+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@type\": \"WebPage\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/\"\n\t            },\n\t            \"wordCount\": 969,\n\t            \"publisher\": {\n\t                \"@type\": \"Organization\",\n\t                \"name\": \"Wcanvas\",\n\t                \"logo\": {\n\t                    \"@type\": \"ImageObject\",\n\t                    \"url\": \"https:\/\/wcanvas.com\/wp-content\/themes\/wcanvas\/assets\/img\/elements\/logo-white-white.png\"\n\t                }\n\t            },\n\t            \"image\": [],\n\t            \"thumbnailUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg\",\n\t            \"inLanguage\": \"es\",\n\t            \"description\": null\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/\",\n\t            \"name\": \"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress - White Canvas\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg\",\n\t            \"datePublished\": \"2024-11-15T21:00:59+00:00\",\n\t            \"dateModified\": \"2024-12-23T18:47:37+00:00\",\n\t            \"description\": \"Estilizar las p\u00e1ginas de WordPress protegidas con contrase\u00f1a mejora el dise\u00f1o de tu sitio al mismo tiempo que proteg\u00e9s tu contenido.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"es\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"es\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#primaryimage\",\n\t            \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg\",\n\t            \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg\",\n\t            \"width\": 1200,\n\t            \"height\": 528,\n\t            \"caption\": \"close up of CSS code on a white computer screen\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/wcanvas.com\/es\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Blogs\",\n\t                    \"item\": \"https:\/\/wcanvas.com\/es\/blogs\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#website\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/\",\n\t            \"name\": \"White Canvas\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/wcanvas.com\/es\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"es\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#organization\",\n\t            \"name\": \"White Canvas\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"es\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg\",\n\t                \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg\",\n\t                \"width\": 115,\n\t                \"height\": 32,\n\t                \"caption\": \"White Canvas\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/\"\n\t            },\n\t            \"alternateName\": \"Wcanvas\",\n\t            \"contactPoint\": [\n\t                {\n\t                    \"@type\": \"ContactPoint\",\n\t                    \"telephone\": \"+1 (347) 688 2902\",\n\t                    \"contactType\": \"sales\",\n\t                    \"contactOption\": \"TollFree\",\n\t                    \"areaServed\": \"US\",\n\t                    \"availableLanguage\": \"en\"\n\t                },\n\t                {\n\t                    \"@type\": \"ContactPoint\",\n\t                    \"telephone\": \"+54 (11) 5236 4717\",\n\t                    \"contactType\": \"sales\",\n\t                    \"contactOption\": \"TollFree\",\n\t                    \"areaServed\": \"AR\",\n\t                    \"availableLanguage\": \"es\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/person\/ea362f7fa9eb0239142e5e982bd8c198\",\n\t            \"name\": \"Nicolas Pisani\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"es\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png\",\n\t                \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png\",\n\t                \"caption\": \"Nicolas Pisani\"\n\t            },\n\t            \"sameAs\": [\n\t                \"https:\/\/wcanvas.com\",\n\t                \"#\",\n\t                \"https:\/\/www.instagram.com\/whitecanvasteam\/\",\n\t                \"https:\/\/x.com\/wcanvas\"\n\t            ]\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress - White Canvas","description":"Estilizar las p\u00e1ginas de WordPress protegidas con contrase\u00f1a mejora el dise\u00f1o de tu sitio al mismo tiempo que proteg\u00e9s tu contenido.","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:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress - White Canvas","og_description":"Estilizar las p\u00e1ginas de WordPress protegidas con contrase\u00f1a mejora el dise\u00f1o de tu sitio al mismo tiempo que proteg\u00e9s tu contenido.","og_url":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/","og_site_name":"White Canvas","article_modified_time":"2024-12-23T18:47:37+00:00","og_image":[{"width":1200,"height":528,"url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#article","isPartOf":{"@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/"},"author":{"@type":"Organization","name":"Wcanvas","url":"https:\/\/wcanvas.com\/"},"headline":"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress","datePublished":"2024-11-15T21:00:59+00:00","dateModified":"2024-12-23T18:47:37+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/"},"wordCount":969,"publisher":{"@type":"Organization","name":"Wcanvas","logo":{"@type":"ImageObject","url":"https:\/\/wcanvas.com\/wp-content\/themes\/wcanvas\/assets\/img\/elements\/logo-white-white.png"}},"image":[],"thumbnailUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg","inLanguage":"es","description":null},{"@type":"WebPage","@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/","url":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/","name":"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress - White Canvas","isPartOf":{"@id":"https:\/\/wcanvas.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg","datePublished":"2024-11-15T21:00:59+00:00","dateModified":"2024-12-23T18:47:37+00:00","description":"Estilizar las p\u00e1ginas de WordPress protegidas con contrase\u00f1a mejora el dise\u00f1o de tu sitio al mismo tiempo que proteg\u00e9s tu contenido.","breadcrumb":{"@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#primaryimage","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/11\/style-password-protected-pages-HERO.jpg","width":1200,"height":528,"caption":"close up of CSS code on a white computer screen"},{"@type":"BreadcrumbList","@id":"https:\/\/wcanvas.com\/es\/blog\/2-formas-de-estilizar-paginas-protegidas-por-contrasena-en-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wcanvas.com\/es\/"},{"@type":"ListItem","position":2,"name":"Blogs","item":"https:\/\/wcanvas.com\/es\/blogs\/"},{"@type":"ListItem","position":3,"name":"2 formas de estilizar p\u00e1ginas protegidas por contrase\u00f1a en WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wcanvas.com\/es\/#website","url":"https:\/\/wcanvas.com\/es\/","name":"White Canvas","description":"","publisher":{"@id":"https:\/\/wcanvas.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wcanvas.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/wcanvas.com\/es\/#organization","name":"White Canvas","url":"https:\/\/wcanvas.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg","width":115,"height":32,"caption":"White Canvas"},"image":{"@id":"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/"},"alternateName":"Wcanvas","contactPoint":[{"@type":"ContactPoint","telephone":"+1 (347) 688 2902","contactType":"sales","contactOption":"TollFree","areaServed":"US","availableLanguage":"en"},{"@type":"ContactPoint","telephone":"+54 (11) 5236 4717","contactType":"sales","contactOption":"TollFree","areaServed":"AR","availableLanguage":"es"}]},{"@type":"Person","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/person\/ea362f7fa9eb0239142e5e982bd8c198","name":"Nicolas Pisani","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png","caption":"Nicolas Pisani"},"sameAs":["https:\/\/wcanvas.com","#","https:\/\/www.instagram.com\/whitecanvasteam\/","https:\/\/x.com\/wcanvas"]}]}},"_links":{"self":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blogs\/11431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blogs"}],"about":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/types\/blogs"}],"author":[{"embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/media\/10663"}],"wp:attachment":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/media?parent=11431"}],"wp:term":[{"taxonomy":"blog-categories","embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blog-categories?post=11431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}