Cómo crear una página de ancho completo en WordPress (Guía para principiantes)

¿Desea crear una página de ancho completo en WordPress, para que pueda estirar su contenido en la pantalla? La mayoría de los temas de WordPress ya vienen con una plantilla de página de ancho completo incorporada que puede usar. Sin embargo, si su tema no tiene uno, es fácil agregarlo. En este artículo, le mostraremos cómo crear fácilmente una página de ancho completo en WordPress e incluso crear diseños totalmente personalizados sin ningún código.

Método 1. Utilice la plantilla de ancho completo de su tema

Si su tema ya viene con una plantilla de página de ancho completo, es mejor usarla. Casi todos los buenos temas de WordPress lo hacen. Incluso los mejores temas gratuitos de WordPress a menudo vienen con una plantilla de ancho completo, por lo que es muy probable que ya tenga una. Primero, necesita editar una página o crear una nueva yendo a Páginas »Agregar nuevo en su panel de WordPress. En el panel derecho «Documento» del editor de contenido, debe expandir la sección «Atributos de página» haciendo clic en la flecha hacia abajo junto a ella. A continuación, debería ver una lista desplegable «Modelo».

Si tiene una plantilla de ancho completo para su tema, aparecerá aquí. Debería llamarse algo así como «Modelo de ancho completo»:

Las opciones que ve aquí variarán según su tema. No se preocupe si su tema no tiene una plantilla de página de ancho completo. Puede agregar uno fácilmente usando los métodos a continuación.

Método 2. Cree una plantilla de página de ancho completo con un complemento

Este método es el más fácil y funciona con todos los temas de WordPress y complementos de creación de páginas. En primer lugar, debe instalar y activar el complemento Plantillas de ancho completo. Si no sabe cómo hacer esto, consulte nuestra guía para principiantes para instalar un complemento de WordPress. El complemento Fullwidth Templates agregará tres nuevas opciones a las plantillas de su página:

Estas opciones son:

• FW Sin barra lateral: elimine la barra lateral de su página, pero deje todo lo demás intacto
• FW Ancho completo: elimine la barra lateral, el título y los comentarios y extienda el diseño al ancho completo
• FW Fullwidth Sin encabezado Pie de página: elimina todo lo que hace FW Fullwidth, además del encabezado y pie de página

Si solo va a utilizar el editor de WordPress integrado, probablemente la mejor opción sea «FW No Sidebar». Si bien este complemento le permite crear una plantilla de página de ancho completo, sus opciones de personalización son limitadas. Si desea personalizar su plantilla de ancho completo sin código, debe utilizar un generador de páginas.

Método 3: diseñe una página de ancho completo en WordPress usando un complemento Page Builder

Si su tema no tiene una plantilla de ancho completo, esta es la forma más fácil de crear y personalizar una plantilla de ancho completo. Le permite editar fácilmente su página de ancho completo y crear diferentes diseños para su sitio web con una interfaz de arrastrar y soltar. Para este método, necesitará un complemento de creación de páginas de WordPress. En este tutorial, usaremos Beaver Builder. Este es uno de los mejores complementos de creación de páginas de arrastrar y soltar, y le permite crear diseños fácilmente sin escribir ningún código. Primero, instale y active el complemento Beaver Builder. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Una vez que lo haya habilitado, edite una página existente o cree una nueva. En el panel «Documento» en el lado derecho de la pantalla, navegue hasta «Atributos de página» y seleccione una plantilla de ancho completo de la lista desplegable. Luego haga clic en el botón «Iniciar Beaver Builder» en el centro de su pantalla.

Ahora use la interfaz de arrastrar y soltar de Beaver Builder para crear su página.

Una buena forma de comenzar es hacer clic en la pestaña Plantillas en la parte superior. Seleccione una de las plantillas predefinidas para usar como base para su página de ancho completo.

Haga clic en una plantilla para seleccionarla y el creador de páginas la cargará. A continuación, puede editar cualquier elemento, como imágenes, que desee editar. Los diseños de Beaver Builder se construyen con líneas y módulos. Cada fila puede tener varias columnas y dentro de cada fila puede agregar módulos de contenido y widgets. Para editar una línea o un módulo en el diseño, solo tiene que hacer clic en él. En este caso, editamos el módulo de Encabezado:

Beaver Builder abrirá los detalles del elemento en una ventana emergente donde puede cambiar su configuración. Puede editar texto, cambiar fuentes y colores, agregar o cambiar imágenes de fondo y más.

Puede agregar módulos y widgets a su diseño en cualquier momento. Beaver Builder viene con muchos módulos de contenido básico y avanzado que puedes arrastrar y soltar en tu página.

Una vez que se completen los cambios, haga clic en «Listo» en la parte superior de la página. Luego puede guardar su borrador o publicarlo.

Ahora puede visitar su página para ver su página completa de ancho completo.

Método 4. Cree páginas de destino de ancho completo totalmente personalizadas con SeedProd

Aunque Beaver Builder es una gran solución, tiene el potencial de ralentizar su sitio web. Si desea crear una página de destino totalmente personalizada en la que desee personalizar el encabezado, el pie de página y todas las áreas de la página, le recomendamos que utilice SeedProd. Este es el mejor complemento de página de destino para WordPress, y viene con una interfaz de creación de páginas de arrastrar y soltar muy fácil de usar.

En primer lugar, debe instalar y activar el complemento SeedProd. Después de la activación, simplemente vaya a SeedProd »Páginas para agregar una nueva página de destino. Simplemente puede elegir entre una de sus muchas plantillas prediseñadas o crear una página de destino personalizada desde cero. La mejor parte de SeedProd es que es increíblemente rápido y viene con funciones de conversión integradas para la gestión de suscriptores, integración del servicio de marketing por correo electrónico y más.

Método 5: crear manualmente una plantilla de página de WordPress de ancho completo

Este método es un último recurso si ninguno de los métodos anteriores funciona para usted. Esto requiere que edite sus archivos de tema de WordPress. Necesitará conocimientos básicos de PHP, CSS y HTML. Si no lo ha hecho antes, consulte nuestra guía sobre cómo copiar / pegar código en WordPress. Antes de continuar, le recomendamos que cree una copia de seguridad de WordPress o al menos una copia de seguridad de su tema actual. Esto le ayudará a restaurar fácilmente su sitio si algo sale mal. Luego abra un editor de texto sin formato como el Bloc de notas y pegue el siguiente código en un archivo vacío:

Guarde este archivo como full-width.php en su computadora. Es posible que deba cambiar el tipo «Guardar como» a «Todos los archivos» para evitar guardarlo como un archivo .txt:

Este código simplemente establece el nombre de un archivo de plantilla e indica a WordPress que busque la plantilla de encabezado. Entonces necesitará la parte de contenido del código. Inicie sesión en su sitio web utilizando un cliente FTP (o su administrador de archivos de alojamiento de WordPress en cPanel), luego navegue hasta / wp-content / themes / your-theme-folder /. Ahora necesitas ubicar el archivo page.php. Este es el archivo de plantilla de página predeterminado para su tema. Abra este archivo y copie todo después de la línea get_header () y péguelo en el archivo full-width.php en su computadora. En el archivo full-width.php, busque y elimine esta línea de código:

Esta línea toma la barra lateral y la muestra en su tema. Eliminarlo evitará que su tema muestre la barra lateral cuando use la plantilla de ancho completo. Es posible que vea esta línea más de una vez en su gráfico. Si su tema tiene varias barras laterales (las áreas de widget de pie de página también se denominan barras laterales), verá cada barra lateral referenciada una vez en el código. Decide qué barras laterales quieres conservar. Si su tema no muestra barras laterales en las páginas, es posible que no encuentre este código en su archivo. Así es como se ve todo nuestro código.php de ancho completo después de realizar los cambios. Su código puede ser ligeramente diferente según su tema.

Luego suba el archivo full-width.php a su carpeta de temas usando su cliente FTP. Ahora ha creado y subido correctamente una plantilla de página personalizada de ancho completo a su tema. El siguiente paso es utilizar esta plantilla para crear una página de ancho completo. Vaya a su área de administración de WordPress y edite o cree una nueva página en el editor de bloques de WordPress. En el panel «Documento» de la derecha, busque «Atributos de página» y haga clic en la flecha hacia abajo para expandir esta sección si es necesario. Debería ver una lista desplegable de « Plantilla » donde puede seleccionar su nueva plantilla de « Ancho completo »:

Después de seleccionar esta plantilla, publique o actualice la página. Cuando vea la página, verá que las barras laterales se han ido y su página aparece como una sola columna. Puede que todavía no sea de ancho completo, pero ahora está listo para diseñarlo de manera diferente. Deberá utilizar la herramienta Inspeccionar para descubrir las clases CSS que utiliza su tema para definir el área de contenido. Después de eso, puede ajustar su ancho al 100% usando CSS. Puede agregar código CSS yendo a Apariencia »Personalizar y haciendo clic en «CSS adicional» en la parte inferior de la pantalla.

Usamos el siguiente código CSS en nuestro sitio de prueba: .page-template-full-width .content-area {width: 100%; margen: 0px; borde: 0px; relleno: 0px; } .page-template-full-width .site {margin: 0px; } Así es como se veía en nuestro sitio de demostración usando el tema Twenty Sixteen.

Si desea utilizar el método manual …