Una página de ancho completo en WordPress expande tu contenido a lo largo de toda la ventana del navegador, sin una barra lateral o un contenedor limitado que restrinja el diseño. Es uno de los cambios de diseño más comunes que la gente quiere hacer, y suele ser más rápido de configurar de lo que esperas.
He visto a muchos principiantes tener problemas con esto porque la mayoría de los temas de WordPress añaden una barra lateral y restringen el ancho del contenido por defecto. Terminas con una página que se siente encajonada, incluso cuando no quieres una barra lateral en absoluto.
La buena noticia es que tienes varias formas de solucionarlo. En esta guía, te mostraré cinco métodos para hacer una página de ancho completo en WordPress, desde el más fácil (sin plugins, sin código) hasta el más avanzado. También cubriré qué hacer cuando tu diseño de ancho completo no funciona como debería.
- Usa la plantilla de ancho completo integrada en tu tema
- Make Individual Blocks Full Width in the Block Editor
- Añade una plantilla de ancho completo con un plugin gratuito
- Crea una página de ancho completo personalizada con SeedProd
- Crea una plantilla de página de ancho completo manualmente
- Cuándo usar un diseño de ancho completo (y cuándo no)
- Full-Width Page Not Working? Here's How to Fix It
- Preguntas frecuentes sobre cómo hacer una página de ancho completo en WordPress
Usa la plantilla de ancho completo integrada en tu tema
La mayoría de los temas de WordPress ya incluyen una plantilla de página de ancho completo. Puedes cambiar a ella en el editor de páginas sin instalar un plugin ni escribir ningún código.
Así es como puedes comprobarlo.
Paso 1: Abre la página que quieres hacer de ancho completo en el editor de WordPress.
Paso 2: En la barra lateral derecha, busca la sección Plantilla. Dependiendo de tu tema, esto puede aparecer bajo Atributos de página o como un desplegable Plantilla independiente.
Paso 3: Haz clic en el desplegable y busca una opción de ancho completo. El nombre varía según el tema. Podrías ver "Ancho completo", "Sin barra lateral", "En blanco" o algo similar.
Paso 4: Selecciona la plantilla de ancho completo y luego haz clic en Actualizar o Publicar.
Paso 5: Previsualiza la página para confirmar que la barra lateral ha desaparecido y el contenido se expande por toda la página.
Eso es todo. Si tu tema tiene una plantilla de ancho completo, esta es la forma más rápida de usarla.
Si no ves una opción de ancho completo en el desplegable, es posible que tu tema no incluya una. Pasa al siguiente método.
Haz que bloques individuales sean de ancho completo en el editor de bloques
El editor de bloques de WordPress te permite establecer bloques individuales en alineación de ancho completo, expandiéndolos por toda la pantalla sin cambiar la plantilla de tu página. Esto está integrado en WordPress, por lo que no necesitas un plugin.
Esto funciona con bloques de Grupo, bloques de Portada, bloques de Imagen y la mayoría de los bloques de diseño.
Paso 1: Abre tu página en el editor de WordPress y selecciona el bloque que quieres hacer de ancho completo.
Paso 2: En la barra de herramientas del bloque en la parte superior, haz clic en el botón Cambiar alineación (parece un conjunto de líneas horizontales).
Paso 3: Selecciona Ancho completo en el menú desplegable.
El bloque se extenderá hasta los bordes de la ventana del navegador. WordPress añade una clase CSS llamada .alignfull entre bastidores para que esto suceda.
Consejo: Si deseas que toda una sección de tu página tenga ancho completo, primero añade un bloque de Grupo. Establece el bloque de Grupo en la alineación de Ancho completo y luego añade tus bloques de contenido dentro de él. El bloque de Grupo actúa como un contenedor de ancho completo para todo lo que está anidado en su interior.
Si la opción de alineación de Ancho completo no aparece en la barra de herramientas, es posible que tu tema no la admita. Cubriré cómo solucionar esto en la sección de solución de problemas a continuación.
Diseños de Ancho Completo en Temas de Bloques (Edición Completa del Sitio)
Si estás utilizando un tema de bloques más reciente como Twenty Twenty-Five, los diseños de ancho completo funcionan de manera diferente. Los temas de bloques utilizan el Editor del Sitio y un archivo de configuración llamado theme.json para controlar los anchos de diseño.
Para ajustar el ancho de la página en un tema de bloques, ve a Apariencia → Editor en tu panel de WordPress. Desde allí, puedes editar tus plantillas de página directamente y establecer el área de contenido a ancho completo a nivel de plantilla.
El archivo theme.json controla dos valores clave: contentSize (el ancho predeterminado para tu contenido) y wideSize (el ancho para los bloques alineados en ancho). Ajustar estos valores cambia la amplitud con la que tu contenido se extiende por todo el sitio.
Este es el enfoque más flexible si estás en un tema de bloques moderno, ya que puedes controlar los anchos de diseño globalmente en lugar de página por página.
Añade una plantilla de ancho completo con un plugin gratuito
Si tu tema no incluye una plantilla de ancho completo, el plugin gratuito Plantillas de Ancho Completo añade una a cualquier tema de WordPress. No se requiere código.
Paso 1: En tu panel de WordPress, ve a Plugins → Añadir nuevo y busca "Plantillas de Ancho Completo". Si necesitas ayuda con este paso, aquí tienes una guía sobre cómo instalar un plugin de WordPress.
Paso 2: Instala y activa el plugin.
Paso 3: Edita cualquier página y abre el menú desplegable Plantilla en la barra lateral derecha.
Verás tres nuevas opciones de plantilla:
| Plantilla | Lo que elimina |
|---|---|
| FW Sin Barra Lateral | Solo barra lateral |
| FW Ancho Completo | Barra lateral, título de la página y comentarios |
| FW Ancho Completo Sin Encabezado ni Pie de Página | Barra lateral, título, comentarios, encabezado y pie de página |
Paso 4: Elige la plantilla que mejor se adapte a tus necesidades. Para la mayoría de las páginas de destino, "FW Ancho Completo" es la opción correcta. Para un lienzo completamente en blanco, utiliza "FW Ancho Completo Sin Encabezado ni Pie de Página".
Paso 5: Haz clic en Actualizar o Publicar y previsualiza tu página.
El plugin funciona con cualquier tema, por lo que es una opción fiable cuando tu tema no te proporciona una plantilla de ancho completo por sí solo.
Crea una página de ancho completo personalizada con SeedProd
Cuando necesites control total del diseño sobre una página de destino, página de "próximamente", página de ventas o cualquier diseño personalizado, un constructor de páginas te ofrece más flexibilidad que solo cambiar de plantilla.
Uso SeedProd habitualmente para esto. Funciona junto con tu tema existente, por lo que no necesitas cambiar nada de tu configuración actual. Cada página que creas en SeedProd tiene el ancho completo por defecto.
Así es como puedes crear una página de ancho completo con él.
Paso 1: Instala y activa SeedProd, luego ve a SeedProd → Landing Pages en tu panel de control. Si necesitas ayuda, aquí tienes una guía sobre cómo instalar SeedProd.
Paso 2: Haz clic en Añadir nueva página de destino.
Elige una plantilla. SeedProd incluye plantillas para páginas de destino, páginas de registro de webinars, páginas de ventas y más. También puedes empezar con una página en blanco.
Paso 3: Introduce el nombre y la URL de tu página, luego haz clic en Guardar y empezar a editar la página.
Paso 4: El editor de arrastrar y soltar se abre con el diseño de tu página. Cada sección abarca el ancho completo por defecto.
Si necesitas ajustar el ancho de una sección, haz clic en la sección y cambia Ancho de sección a "Pantalla completa" en el panel de configuración.
Así es como se ve una página de ancho completo después de hacer ese cambio:
También puedes hacer que filas individuales tengan el ancho completo haciendo clic en una fila y ajustando su configuración de ancho de la misma manera.
Paso 5: Añade tu contenido arrastrando bloques: titulares, imágenes, formularios, botones, tablas de precios o cualquier otro elemento que necesites.
Paso 6: Cuando estés satisfecho con el diseño, haz clic en Guardar y luego en Publicar.
SeedProd es una buena opción cuando necesitas una página que se vea diferente del resto de tu sitio, como una página de destino enfocada o una página de "próximamente". También puedes usarlo para crear un tema de WordPress completamente personalizado con diseños de ancho completo integrados. Para las páginas en las que tu plantilla de tema habitual funciona bien, los métodos anteriores en esta guía son más rápidos.
Si quieres crear páginas de ancho completo sin escribir código, empieza hoy mismo con SeedProd.
Crea una plantilla de página de ancho completo manualmente
Si te sientes cómodo con PHP y CSS, puedes crear una plantilla de página personalizada de ancho completo editando directamente los archivos de tu tema. Este método no requiere ningún plugin.
Importante: Haz una copia de seguridad de tu sitio antes de editar los archivos del tema. Además, haz estos cambios en un tema hijo para que una actualización del tema no sobrescriba tu trabajo.
Paso 1: Conéctate a tu sitio usando un cliente FTP o el gestor de archivos de tu proveedor de hosting. Navega a /wp-content/themes/tu-carpeta-del-tema/.
Paso 2: Crea un nuevo archivo llamado full-width.php. En la parte superior del archivo, añade esta cabecera de plantilla para que WordPress la reconozca:
<?php
/*
* Template Name: Full Width
*/
get_header();
?>
Paso 3: Abre el archivo page.php de tu tema y copia su contenido en tu nuevo archivo full-width.php, debajo del código de la cabecera. Luego, busca y elimina la línea que llama a la barra lateral:
<?php get_sidebar(); ?>
Elimina esa línea. Esto elimina la barra lateral de tu plantilla.
Paso 4: Guarda el archivo y súbelo a tu carpeta de temas.
Paso 5: Vuelve a tu panel de WordPress. Edita cualquier página, abre el menú desplegable Plantilla y verás tu nueva opción “Ancho Completo”.
Paso 6: Selecciona la plantilla y luego añade CSS personalizado para expandir el área de contenido a todo el ancho. Ve a Apariencia → Personalizar → CSS adicional y añade:
.page-template-full-width .site-content {
width: 100%;
max-width: none;
}
Los nombres exactos de las clases CSS dependen de tu tema. Usa la herramienta Inspeccionar de tu navegador para encontrar la clase de contenedor correcta si .site-content no funciona.
Paso 7: Actualiza la página y previsualízala.
Este enfoque te da control total, pero requiere mantener el archivo de plantilla en un tema hijo. Si no te sientes cómodo editando código, uno de los métodos anteriores es una opción más segura.
Cuándo usar un diseño de ancho completo (y cuándo no)
Los diseños de ancho completo no son la opción adecuada para todas las páginas. Aquí te explicamos cuándo funcionan bien y cuándo es mejor optar por un diseño contenido.
| El ancho completo funciona mejor para | El diseño contenido funciona mejor para |
|---|---|
| Páginas de destino | Entradas del blog |
| Páginas de inicio | Documentación |
| Páginas de portafolio | Artículos largos |
| Expositores de productos | Páginas con mucho texto |
| Páginas de "próximamente" | Bases de conocimiento |
La razón es la legibilidad. Las líneas de texto largas que se extienden por una pantalla ancha son más difíciles de leer que las líneas limitadas por márgenes más estrechos. Para contenido que es principalmente texto, un diseño en caja mantiene las longitudes de línea cómodas.
Puedes mezclar ambos en el mismo sitio. Yo uso diseños de ancho completo para páginas clave como la página de inicio y las páginas de destino, y una plantilla estándar con una barra lateral para las entradas del blog.
¿La página de ancho completo no funciona? Aquí te explicamos cómo solucionarlo
Si configuras una página en ancho completo pero todavía se ve en caja o muestra una barra lateral, estas son las causas más comunes y cómo solucionar cada una.
Tu tema no admite la alineación de ancho completo
Si la opción de alineación “Ancho Completo” no aparece en la barra de herramientas del editor de bloques, tu tema no ha declarado soporte para ella.
El tema necesita una sola línea de código en su archivo functions.php:
add_theme_support( 'align-wide' );
Consulta primero la documentación de tu tema para ver si hay una configuración para esto. Si no la hay, y te sientes cómodo editando código, añade esa línea al archivo functions.php de tu tema hijo. Esto habilita tanto las opciones de alineación Ancho y Ancho Completo en el editor de bloques.
Un plugin está sobrescribiendo tu diseño
Algunos plugins inyectan barras laterales, widgets o restricciones de diseño que sobrescriben tu plantilla de ancho completo. He visto que esto sucede en muchos sitios y no siempre es obvio qué plugin es la causa.
Para encontrar el conflicto, desactiva tus plugins uno por uno y revisa tu página después de cada uno. Cuando la disposición de ancho completo reaparezca, habrás encontrado al culpable.
Si no quieres afectar a los visitantes en vivo mientras pruebas, instala el plugin Health Check & Troubleshooting. Su Modo de Solución de Problemas te permite desactivar plugins para ti mismo mientras mantienes el sitio normal para todos los demás.
Los plugins de barra lateral y los plugins de widgets son los culpables más comunes.
La configuración del ancho del contenido está restringiendo tu diseño
WordPress y algunos temas establecen un ancho de contenido m ilde{a}ximo que impide que los bloques se expandan a ancho completo, incluso cuando seleccionas la alineaci ilde{o}n de ancho completo.
En el editor de bloques, haz clic en el icono de Configuraci ilde{o}n (icono de engranaje) en la esquina superior derecha, luego busca una secci ilde{o}n de Dise ilde{n}o. Si hay un valor de ancho de contenido establecido, puede que est ilde{e} restringiendo tus bloques.
En los temas de bloques, esto se controla mediante los valores contentSize y wideSize en el archivo theme.json. Aumentar estos valores, o eliminarlos, permite que los bloques de ancho completo se expandan hasta el borde del navegador.
El CSS est ilde{a} restringiendo tu ilde{a}rea de contenido
La hoja de estilos de tu tema puede establecer un max-width en el contenedor de contenido que le impide expandirse, incluso con una plantilla de ancho completo aplicada.
Para comprobarlo, haz clic derecho en el contenido de tu p ilde{a}gina y selecciona Inspeccionar (o presiona F12). Busca el elemento contenedor del contenido, que a menudo es un div con una clase como .site-content, .entry-content o .content-area.
Si ves una propiedad max-width o width que limita el contenedor, puedes anularla con CSS personalizado en Apariencia → Personalizar → CSS adicional:
.your-content-class {
width: 100%;
max-width: none;
}
Reemplaza .tu-clase-de-contenido con el nombre de clase real de tu tema.
Preguntas frecuentes sobre cómo hacer una página de ancho completo en WordPress
ilde{A}iquest ilde{e} puedo encontrar una plantilla de ancho completo en mi tema de WordPress?
No todos los temas incluyen una plantilla de ancho completo. Si el tuyo no lo hace, tienes dos opciones. Instala el plugin gratuito Plantillas de Ancho Completo para a ilde{n}adir opciones de plantilla de ancho completo a cualquier tema. O usa un constructor de p ilde{a}ginas como SeedProd para crear p ilde{a}ginas personalizadas de ancho completo con control total del dise ilde{n}o.
ilde{A}iQu ilde{e} diferencia hay entre "ancho amplio" y "ancho completo" en el editor de bloques?
El ancho amplio expande un bloque m ilde{a}s all ilde{a} del ilde{a}rea de contenido normal pero se mantiene dentro de los m ilde{a}rgenes de la p ilde{a}gina. El ancho completo expande el bloque hasta los bordes de la ventana del navegador, ignorando completamente los m ilde{a}rgenes. Ambas opciones requieren que tu tema soporte la alineaci ilde{o}n amplia. La mayor ilde{i}a de los temas modernos lo hacen.
ilde{A}iAfecta hacer una p ilde{a}gina de ancho completo a la velocidad de carga?
El dise ilde{n}o en s ilde{i} mismo no ralentiza tu p ilde{a}gina. Sin embargo, las im ilde{a}genes grandes expandidas a ancho completo pueden aumentar los tiempos de carga si no est ilde{a}n optimizadas. Comprime y redimensiona las im ilde{a}genes antes de usarlas en secciones de ancho completo para mantener tu p ilde{a}gina r ilde{a}pida.
ilde{A}iPuedo hacer que una secci ilde{o}n de una p ilde{a}gina sea de ancho completo sin cambiar toda la p ilde{a}gina?
S ilde{i}. En el editor de bloques, a ilde{n}ade un bloque de Grupo o un bloque de Portada y config ilde{u}ralo en alineaci ilde{o}n de Ancho Completo. Los bloques dentro de ilde{e}l se expandir ilde{a}n hasta el borde del navegador, mientras que el resto de tu p ilde{a}gina permanece a ancho normal. SeedProd tambi ilde{e}n te permite controlar el ancho por secci ilde{o}n.
ilde{A}iMi p ilde{a}gina de ancho completo se ver ilde{a} bien en m ilde{o}viles?
S ilde{i}, siempre que tu tema sea adaptable. Los dise ilde{n}os de ancho completo se adaptan a pantallas m ilde{a}s peque ilde{n}as autom ilde{a}ticamente. Previsualiza tu p ilde{a}gina en m ilde{o}viles antes de publicarla para asegurarte de que todo se ve bien. Tanto el editor de bloques de WordPress como SeedProd incluyen opciones de previsualizaci ilde{o}n m ilde{o}vil. Aqu ilde{i} tienes m ilde{a}s informaci ilde{o}n sobre c ilde{o}mo hacer que un sitio web s ilde{o}lo para escritorio sea compatible con m ilde{o}viles.
Empieza a crear p ilde{a}ginas de ancho completo
Hacer que una página ocupe todo el ancho en WordPress lleva menos de un minuto una vez que sabes dónde buscar. Empieza con la plantilla integrada de tu tema. Si necesitas más control sobre secciones individuales, la alineación de ancho completo del editor de bloques lo maneja sin necesidad de plugins.
Si necesitas control total del diseño de una página de destino o un diseño personalizado, SeedProd facilita la creación de páginas de ancho completo sin código.
También te pueden interesar estas guías relacionadas:
- Cómo cambiar las fuentes en los temas de WordPress (5 soluciones)
- Cómo añadir fácilmente Font Awesome a tu tema de WordPress
- Cómo cambiar el tema de WordPress sin perder contenido
- Cómo personalizar encabezados en WordPress (4 formas sencillas)
- Cómo editar tu página de inicio de WordPress (Manera fácil)
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
