Una página de ancho completo en WordPress extiende tu contenido a lo largo de toda la ventana del navegador, sin barras laterales ni recuadros que limiten el diseño. Es uno de los cambios de diseño más comunes que la gente quiere hacer, y normalmente es más rápido de configurar de lo que cabría esperar.
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 de forma predeterminada. Al final, te encuentras con una página que parece encajonada, incluso cuando no quieres ninguna barra lateral.
La buena noticia es que hay varias formas de solucionarlo. En esta guía, te explicaré cinco métodos para crear una página a ancho completo en WordPress, desde el más sencillo (sin plugins ni código) hasta el más avanzado. También te explicaré qué hacer cuando el diseño a ancho completo no funciona como debería.
- Utiliza la plantilla de ancho completo integrada en tu tema.
- Hacer bloques individuales a ancho completo en el editor de bloques
- Añade una plantilla de ancho completo con un plugin gratuito.
- Crea una página personalizada a ancho completo con SeedProd
- Crear manualmente una plantilla de página de ancho completo
- Cuándo utilizar un diseño a ancho completo (y cuándo no hacerlo)
- ¿La página a ancho completo no funciona? Aquí te explicamos cómo solucionarlo.
- Preguntas frecuentes sobre cómo crear una página a ancho completo en WordPress
Utiliza 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 necesidad de instalar un plugin ni escribir código.
A continuación te explicamos cómo comprobarlo.
Paso 1: Abre la página que deseas convertir a ancho completo en el editor de WordPress.
Paso 2: En la barra lateral derecha, busca la sección Plantilla. Dependiendo de tu tema, puede aparecer en Atributos de página o como un menú desplegable independiente llamado Plantilla.
Paso 3: Haz clic en el menú desplegable y busca una opción de ancho completo. El nombre varía según el tema. Es posible que veas «Ancho completo», «Sin barra lateral», «En blanco» o algo similar.
Paso 4: Selecciona la plantilla de ancho completo y, a continuación, haz clic en Actualizar o Publicar.
Paso 5: Previsualiza la página para confirmar que la barra lateral ha desaparecido y que el contenido se extiende 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 la opción de ancho completo en el menú desplegable, es posible que tu tema no la incluya. Pasa al siguiente método.
Hacer bloques individuales a ancho completo en el editor de bloques
El editor de bloques de WordPress te permite configurar bloques individuales con alineación a ancho completo, extendiéndolos por toda la pantalla sin cambiar la plantilla de tu página. Esta función está integrada en WordPress, por lo que no necesitas ningún complemento.
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 deseas convertir en ancho completo.
Paso 2: En la barra de herramientas del bloque, situada en la parte superior del bloque, haz clic en el botón Cambiar alineación (tiene el aspecto de 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 detrás de las cámaras para que esto sea posible.
Consejo: Si quieres que toda una sección de tu página ocupe todo el ancho, añade primero un bloque Grupo. Configura el bloque Grupo con la alineación Ancho completo y, a continuación, añade tus bloques de contenido dentro de él. El bloque Grupo actúa como un contenedor de ancho completo para todo lo que se anida en su interior.
Si la opción de alineación a ancho completo no aparece en la barra de herramientas, es posible que tu tema no la admita. Explicaré cómo solucionarlo en la sección de resolución de problemas más abajo.
Diseños de ancho completo en temas de bloques (edición completa del sitio)
Si utilizas 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 los diseños.
Para ajustar el ancho de la página en un tema de bloque, ve a Apariencia → Editor en tu panel de control de WordPress. Desde allí, puedes editar directamente las plantillas de tus páginas y establecer el área de contenido a ancho completo en el nivel de la plantilla.
El archivo theme.json controla dos valores clave: contentSize (el ancho predeterminado para tu contenido) y wideSize (el ancho para bloques alineados a lo ancho). Al ajustar estos valores, cambia el ancho con el que se extiende tu contenido por todo el sitio.
Este es el enfoque más flexible si utilizas un tema de bloque moderno, ya que puedes controlar los anchos de diseño de forma global 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 Fullwidth Templates añade una a cualquier tema de WordPress. No se necesita código.
Paso 1: En tu panel de control de WordPress, ve a Plugins → Añadir nuevo y busca «Fullwidth Templates». 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 se ajuste a tus necesidades. Para la mayoría de las páginas de destino, «FW Fullwidth» es la opción adecuada. Si deseas un lienzo completamente en blanco, utiliza «FW Fullwidth No Header Footer».
Paso 5: Haga clic en Actualizar o Publicar y obtenga una vista previa de su página.
El plugin funciona con cualquier tema, por lo que es una opción fiable cuando tu tema no te ofrece una plantilla de ancho completo por sí solo.
Crea una página personalizada a ancho completo con SeedProd
Cuando necesitas un control total sobre el diseño de una página de aterrizaje, una página de «próximamente», una página de ventas o cualquier diseño personalizado, un creador de páginas te ofrece más flexibilidad que el simple cambio de plantilla.
Yo utilizo SeedProd habitualmente para esto. Funciona junto con tu tema actual, por lo que no necesitas cambiar nada en tu configuración actual. Todas las páginas que creas en SeedProd tienen un ancho completo por defecto.
A continuación se explica cómo crear una página de ancho completo con esta herramienta.
Paso 1: Instala y activa SeedProd, luego ve a SeedProd → Páginas de aterrizaje en tu panel de control. Si necesitas ayuda, aquí tienes una guía sobre cómo instalar SeedProd.
Paso 2: Haga clic en Añadir nueva página de destino.
Elige una plantilla. SeedProd incluye plantillas para páginas de aterrizaje, páginas de registro a seminarios web, páginas de ventas y mucho más. También puedes empezar con una página en blanco.
Paso 3: Introduce el nombre y la URL de tu página y, a continuación, haz clic en Guardar e iniciar la edición de la página.
Paso 4: Se abre el editor de arrastrar y soltar con el diseño de tu página. Por defecto, cada sección ocupa todo el ancho.
Si necesitas ajustar el ancho de una sección, haz clic en la sección y cambia el ancho de la 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 realizar ese cambio:
También puede hacer que las filas individuales ocupen todo el ancho haciendo clic en una fila y ajustando su 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 al resto de tu sitio, como una página de aterrizaje específica o una página de «próximamente». También puedes usarlo para crear un tema de WordPress totalmente personalizado con diseños de ancho completo incorporados. Para las páginas en las que tu plantilla de tema habitual funciona bien, los métodos anteriores de esta guía son más rápidos.
Si quieres crear páginas a ancho completo sin escribir código, empieza hoy mismo con SeedProd.
Crear manualmente una plantilla de página de ancho completo
Si te sientes cómodo con PHP y CSS, puedes crear una plantilla de página personalizada a ancho completo editando directamente los archivos de tu tema. Este método no requiere ningún plugin.
Importante: Realice una copia de seguridad de su sitio web antes de editar los archivos del tema. Además, realice estos cambios en un tema secundario para que una actualización del tema no sobrescriba su trabajo.
Paso 1: Conéctate a tu sitio web utilizando un cliente FTP o tu servidor web administrador de archivos. Navega hasta /wp-content/themes/your-theme-folder/.
Paso 2: Cree un nuevo archivo llamado full-width.php. En la parte superior del archivo, añade este encabezado de plantilla para que WordPress lo reconozca:
<?php
/*
* Template Name: Full Width
*/
get_header();
?>
Paso 3: Abre el archivo de tu tema. page.php archivo y copie su contenido en su nuevo full-width.php archivo, debajo del código del encabezado. A continuación, busca y elimina la línea que llama a la barra lateral:
<?php get_sidebar(); ?>
Elimine esa línea. Esto elimina la barra lateral de su plantilla.
Paso 4: Guarda el archivo y súbelo a tu carpeta de temas.
Paso 5: Vuelve al panel de control de WordPress. Edita cualquier página, abre el menú desplegable Plantilla y verás la nueva opción «Ancho completo».
Paso 6: Selecciona la plantilla y, a continuación, añade CSS personalizado para ampliar 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. Utiliza la herramienta Inspeccionar de tu navegador para encontrar la clase contenedora correcta si .site-content No funciona.
Paso 7: Actualiza la página y obtén una vista previa.
Este método te da un control total, pero requiere mantener el archivo de plantilla en un tema secundario. Si no te sientes cómodo editando código, uno de los métodos anteriores es una opción más segura.
Cuándo utilizar un diseño a ancho completo (y cuándo no hacerlo)
Los diseños a ancho completo no son la opción adecuada para todas las páginas. A continuación, te indicamos cuándo funcionan bien y cuándo es mejor optar por un diseño más contenido.
| El ancho completo funciona mejor para | El diseño contenido funciona mejor para |
|---|---|
| Páginas de destino | Entradas de blog |
| Páginas de inicio | Documentación |
| Páginas de portafolio | Artículos largos |
| Vitrinas de productos | Páginas con mucho texto |
| Próximamente | Bases de conocimiento |
La razón es la legibilidad. Las líneas largas de texto que se extienden a lo largo de una pantalla ancha son más difíciles de leer que las líneas limitadas por márgenes más estrechos. Para el contenido que es principalmente texto, un diseño en recuadro mantiene una longitud de línea cómoda.
Puedes mezclar ambos en el mismo sitio. Yo utilizo diseños a ancho completo para páginas clave como la página de inicio y las páginas de aterrizaje, y una plantilla estándar con una barra lateral para las entradas del blog.
¿La página a ancho completo no funciona? Aquí te explicamos cómo solucionarlo.
Si configura una página para que ocupe todo el ancho, pero sigue apareciendo enmarcada o muestra una barra lateral, estas son las causas más comunes y cómo solucionarlas.
Tu tema no admite la alineación a ancho completo.
Si la opción de alineación «Ancho completo» no aparece en la barra de herramientas del editor de bloques, es porque tu tema no es compatible con ella.
El tema necesita una sola línea de código en su functions.php archivo:
add_theme_support( 'align-wide' );
Comprueba primero la documentación de tu tema para ver si hay alguna configuración para esto. Si no es así, y te sientes cómodo editando código, añade esa línea a tu temas secundarios functions.php archivo. Esto habilita las opciones de alineación Ancha y Ancho completo en el editor de bloques.
Un complemento está anulando tu diseño
Algunos complementos insertan barras laterales, widgets o restricciones de diseño que anulan tu plantilla de ancho completo. He visto que esto ocurre en muchos sitios web y no siempre es obvio qué complemento es el causante.
Para encontrar el conflicto, desactiva tus plugins uno por uno y comprueba tu página después de cada uno. Cuando vuelva a aparecer el diseño a ancho completo, habrás encontrado al culpable.
Si no quieres afectar a los visitantes en tiempo real mientras realizas pruebas, instala el plugin Health Check & Troubleshooting. Su modo de resolución de problemas te permite desactivar los plugins para ti mismo mientras el sitio sigue funcionando con normalidad para todos los demás.
Los complementos de la barra lateral y los complementos 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 máximo de contenido que impide que los bloques se extiendan a todo el ancho, incluso cuando se selecciona la alineación a todo el ancho.
En el editor de bloques, haz clic en el icono de configuración (icono de engranaje) en la parte superior derecha y busca la sección Diseño. Si hay un valor de ancho de contenido establecido, es posible que esté restringiendo tus bloques.
En los temas de bloques, esto se controla mediante el contentSize y wideSize valores en el archivo theme.json. Al aumentar estos valores o eliminarlos, los bloques de ancho completo se extienden hasta el borde del navegador.
CSS está limitando tu área de contenido
La hoja de estilos de tu tema puede establecer un max-width en el contenedor de contenido que evita que se estire, incluso con una plantilla de ancho completo aplicada.
Para comprobarlo, haz clic con el botón derecho del ratón en el contenido de tu página y selecciona Inspeccionar (o pulse F12). Observe el elemento contenedor de contenido, que suele ser un div con una clase como .site-content, .entry-contento .content-area.
Si ves un max-width o width propiedad que limita el contenedor, puede anularla con CSS personalizado en Apariencia → Personalizar → CSS adicional:
.your-content-class {
width: 100%;
max-width: none;
}
Reemplazar .your-content-class con el nombre real de la clase de tu tema.
Preguntas frecuentes sobre cómo crear una página a ancho completo en WordPress
¿Por qué no 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 la incluye, tienes dos opciones. Instala el plugin gratuito Fullwidth Templates para añadir opciones de plantillas de ancho completo a cualquier tema. O utiliza un creador de páginas como SeedProd para crear páginas personalizadas de ancho completo con control total del diseño.
¿Cuál es la diferencia entre «anchura amplia» y «anchura completa» en el editor de bloques?
El ancho amplio se extiende un bloque más allá del área de contenido normal, pero permanece dentro de los márgenes de la página. El ancho completo extiende el bloque hasta los bordes de la ventana del navegador, ignorando por completo los márgenes. Ambas opciones requieren que tu tema sea compatible con la alineación ancha. La mayoría de los temas modernos lo son.
¿Crear una página con ancho completo afecta a la velocidad de la página?
El diseño en sí mismo no ralentiza tu página. Sin embargo, las imágenes grandes que se extienden a todo lo ancho pueden aumentar los tiempos de carga si no están optimizadas. Comprime y cambia el tamaño de las imágenes antes de utilizarlas en secciones de ancho completo para mantener la velocidad de tu página.
¿Puedo hacer que una sección de una página ocupe todo el ancho sin cambiar toda la página?
Sí. En el editor de bloques, añade un bloque Grupo o un bloque Portada y configúralo con la alineación Ancho completo. Los bloques que contiene se extenderán hasta el borde del navegador, mientras que el resto de la página mantendrá su ancho normal. SeedProd también te permite controlar el ancho por secciones.
¿Mi página de ancho completo se verá bien en dispositivos móviles?
Sí, siempre y cuando tu tema sea responsivo. Los diseños de ancho completo se adaptan automáticamente a pantallas más pequeñas. Previsualiza tu página en el móvil antes de publicarla para asegurarte de que todo se ve bien. Tanto el editor de bloques de WordPress como SeedProd incluyen opciones de previsualización móvil. Aquí tienes más información sobre cómo hacer que un sitio web solo para ordenadores de sobremesa sea compatible con dispositivos móviles.
Comience a crear páginas de ancho completo
Crear una página a ancho completo en WordPress lleva menos de un minuto una vez que sabes dónde buscar. Empieza con la plantilla integrada en tu tema. Si necesitas más control sobre secciones individuales, la alineación a ancho completo del editor de bloques lo gestiona sin necesidad de plugins.
Si necesitas un control total sobre el diseño de una página de aterrizaje o un diseño personalizado, SeedProd te facilita la creación de páginas de ancho completo sin necesidad de código.
También te puede interesar consultar estas guías relacionadas:
- Cómo cambiar las fuentes de los temas de WordPress (5 soluciones)
- Cómo añadir fácilmente Font Awesome a su tema de WordPress
- Cómo cambiar el tema de WordPress sin perder el contenido
- Cómo personalizar las cabeceras en WordPress (4 formas sencillas)
- Cómo editar la página de inicio de WordPress (de forma sencilla)
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
