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

¿Quieres crear una página de ancho completo en WordPress, para poder extender tu contenido por toda la pantalla?

La mayoría de los temas de WordPress ya vienen con una plantilla de página de ancho completo integrada que puedes usar. Sin embargo, si tu tema no tiene una, es fácil añadirla.

En este artículo, te mostraremos cómo crear fácilmente una página de ancho completo en WordPress e incluso crear diseños de página completamente personalizados sin necesidad de código.

Aquí tienes un resumen rápido de los métodos de esta guía:

• Método 1. Usa la plantilla de ancho completo de tu tema
• Método 2. Crea una plantilla de página de ancho completo usando un plugin
• Método 3: Diseña una página de ancho completo en WordPress usando un plugin constructor de páginas
• Método 4. Crea páginas de ancho completo completamente personalizadas con SeedProd
• Método 5: Crea una plantilla de página de ancho completo en WordPress manualmente

Método 1. Usa la plantilla de ancho completo de tu tema

Si tu tema ya viene con una plantilla de página de ancho completo, lo mejor es 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 tengas una.

Primero, necesitas editar una página o crear una nueva yendo a Páginas » Añadir nueva en tu panel de WordPress.

En el panel derecho ‘Documento’ del editor de contenido, necesitas expandir la sección ‘Atributos de página’ haciendo clic en la flecha hacia abajo junto a ella. Deberías ver entonces un menú desplegable ‘Plantilla’.

Si tienes una plantilla de ancho completo para tu tema, se listará aquí. Debería llamarse algo como ‘Plantilla de ancho completo’:

Las opciones que veas aquí diferirán dependiendo de tu tema. No te preocupes si tu tema no tiene una plantilla de página de ancho completo.

Puedes agregar una fácilmente usando los métodos a continuación.

Método 2. Crea una plantilla de página de ancho completo usando un plugin

Este método es el más fácil y funciona con todos los temas de WordPress y plugins de constructor de páginas.

Primero, necesitas instalar y activar el plugin Fullwidth Templates. Si no estás seguro de cómo hacerlo, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

El plugin Fullwidth Templates agregará tres nuevas opciones a tus plantillas de página:

Estas opciones son:

• FW No Sidebar: Elimina la barra lateral de tu página, pero deja todo lo demás intacto.
• FW Fullwidth: Elimina la barra lateral, el título y los comentarios, y estira el diseño a ancho completo.
• FW Fullwidth No Header Footer: Elimina todo lo que hace FW Fullwidth, además del encabezado y pie de página.

Si vas a usar simplemente el editor integrado de WordPress, “FW No Sidebar” probablemente será la mejor opción.

Si bien este plugin te permite crear una plantilla de página de ancho completo, tienes opciones de personalización limitadas.

Si quieres personalizar tu plantilla de ancho completo sin código, entonces necesitas usar un constructor de páginas.

Método 3: Diseña una página de ancho completo en WordPress usando un plugin constructor de páginas

Si tu tema no tiene una plantilla de ancho completo, entonces esta es la forma más fácil de crear y personalizar una plantilla de ancho completo.

Te permite editar fácilmente tu página de ancho completo y crear diferentes diseños de página para tu sitio web con una interfaz de arrastrar y soltar.

Para este método, necesitarás un constructor de páginas de WordPress. En este tutorial, usaremos Thrive Architect.

Es uno de los mejores plugins constructores de páginas de arrastrar y soltar, y te permite crear diseños de página fácilmente sin escribir código.

Primero, instala y activa el plugin Thrive Architect. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que hayas activado el plugin, edita una página existente o crea una nueva en WordPress.

Luego, haz clic en el botón ‘Launch Thrive Architect’ en la parte superior de tu pantalla.

A continuación, se te pedirá que elijas qué tipo de página deseas crear. Puedes elegir crear una página normal o una página de destino preconstruida.

Selecciona la opción ‘Pre-built Landing Page’ haciendo clic en ella.

Esto te llevará a la Biblioteca de Páginas de Destino de Thrive Architect. Desde aquí, puedes seleccionar una de las plantillas prefabricadas para usarla como base para tu página de ancho completo.

Simplemente haz clic en una plantilla que te guste para seleccionarla.

Si elegiste una plantilla de la sección ‘Smart Landing Page Sets’, ahora puedes elegir entre varias páginas prediseñadas en ese estilo.

Para este tutorial, elegiremos la plantilla ‘Sales Page’ haciendo clic en ella. Luego, presiona el botón ‘Apply Template’ y el constructor de páginas la cargará.

Una vez que estés en el Editor de Thrive Architect, puedes editar cualquiera de los elementos, como imágenes, fondo, texto, etc., que desees cambiar.

Para editar un elemento en la página, solo necesitas hacer clic en él. En este caso, hicimos clic en el fondo de este bloque de página. Esto muestra todas las opciones de personalización en el menú de la izquierda:

Aquí, puedes activar el interruptor para asegurarte de que tu contenido cubra todo el ancho de la pantalla.

Desde el menú de la izquierda, también puedes personalizar la tipografía, el tamaño de fuente, el diseño, el estilo del fondo, los bordes, las sombras y mucho más.

También puedes agregar nuevos elementos en cualquier momento a tu diseño. Thrive Architect viene con muchos bloques básicos y avanzados que puedes arrastrar y soltar en tu página.

Una vez que hayas terminado de editar, haz clic en el botón de flecha (^) junto al botón 'Guardar trabajo' en la parte inferior de la pantalla. Luego, haz clic en la opción 'Guardar y volver al editor de publicaciones'.

Luego puedes guardar tu borrador o publicarlo.

Una vez publicado, puedes visitar tu blog de WordPress para ver tu página de ancho completo terminada.

Método 4. Crea páginas de ancho completo completamente personalizadas con SeedProd

Si bien Thrive Architect es una solución genial, es posible que estés buscando un plugin que te ofrezca opciones de personalización aún más potentes para las páginas de tu sitio web.

Si buscas crear una página de destino completamente personalizada donde quieras personalizar el encabezado, el pie de página y todas las áreas de la página, te recomendamos usar SeedProd.

Es el mejor plugin de página de destino para WordPress, y viene con una interfaz de constructor de páginas de arrastrar y soltar muy fácil de usar.

Primero, necesitas instalar y activar el plugin SeedProd. Después de la activación, simplemente ve a SeedProd » Páginas para agregar una nueva página de destino.

Puedes seleccionar entre más de 300 plantillas pre-diseñadas, que incluyen muchas opciones de ancho completo. O puedes crear una página de destino personalizada de ancho completo desde cero.

La mejor parte de SeedProd es que es extremadamente rápido y viene con funciones de conversión integradas para la gestión de suscriptores, integración con servicios de marketing por correo electrónico, bloques avanzados de WooCommerce y más.

Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo crear una página de destino en WordPress.

Además del constructor de páginas de destino, SeedProd también ofrece un completo Constructor de Temas de arrastrar y soltar. Esto significa que puedes crear fácilmente un tema personalizado de ancho completo para WordPress sin editar ningún código.

Simplemente ve a SeedProd » Constructor de Temas para crear un nuevo tema de WordPress. De nuevo, puedes elegir entre plantillas de temas personalizables o puedes diseñar cada parte de tu tema desde cero.

Simplemente señalando y haciendo clic, puedes editar cada parte de tu tema. Por ejemplo, puedes agregar una nueva imagen de fondo y establecer la posición y el ancho de la sección a pantalla completa.

Con el Constructor de Temas de SeedProd, puedes personalizar cada parte de tu sitio web de WordPress, incluyendo páginas, publicaciones, archivos, encabezado, pie de página, barras laterales, páginas de WooCommerce y más.

Para obtener instrucciones paso a paso, puedes seguir nuestro tutorial sobre cómo crear fácilmente un tema personalizado de WordPress.

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

Este método es un último recurso si ninguno de los métodos anteriores te funciona. Requiere que edites los archivos de tu tema de WordPress. Necesitarás un conocimiento básico de PHP, CSS y HTML.

Si no has hecho esto antes, consulta nuestra guía sobre cómo copiar / pegar código en WordPress.

Antes de continuar, te recomendamos que crees una copia de seguridad de WordPress o al menos una copia de seguridad de tu tema actual. Esto te ayudará a restaurar tu sitio fácilmente si algo sale mal.

A continuación, abre un editor de texto plano como el Bloc de notas y pega el siguiente código en un archivo en blanco:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Guarda este archivo como full-width.php en tu computadora. Es posible que necesites cambiar el 'Guardar como tipo' a 'Todos los archivos' para evitar guardarlo como un archivo .txt:

Este código simplemente define el nombre de un archivo de plantilla y le pide a WordPress que obtenga la plantilla de encabezado.

A continuación, necesitarás la parte del contenido del código. Conéctate a tu sitio web usando un cliente FTP (o el administrador de archivos de tu hosting de WordPress en cPanel) y luego ve a /wp-content/themes/tu-carpeta-de-tema/.

Ahora necesitas localizar el archivo page.php. Este es el archivo de plantilla de página predeterminado de tu tema.

Abre ese archivo y copia todo lo que está después de la línea get_header() y pégalo en el archivo full-width.php en tu computadora.

En el archivo full-width.php, busca y elimina esta línea de código:

<?php get_sidebar(); ?>

Esta línea obtiene la barra lateral y la muestra en tu tema. Eliminarla evitará que tu tema muestre la barra lateral cuando uses la plantilla de ancho completo.

Es posible que veas esta línea más de una vez en tu tema. Si tu tema tiene varias barras laterales (las áreas de widgets del pie de página también se llaman barras laterales), verás cada barra lateral referenciada una vez en el código. Decide qué barras laterales quieres conservar.

Si tu tema no muestra barras laterales en las páginas, es posible que no encuentres este código en tu archivo.

Así es como se ve todo nuestro código de full-width.php después de hacer los cambios. Tu código puede verse ligeramente diferente dependiendo de tu tema.

<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>

	<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) :
			the_post();

			// Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_footer(); ?>

A continuación, sube el archivo full-width.php a la carpeta de tu tema usando tu cliente FTP.

Ahora has creado y subido con éxito una plantilla de página personalizada de ancho completo a tu tema. El siguiente paso es usar esta plantilla para crear una página de ancho completo.

Dirígete a tu área de administración de WordPress y edita o crea una nueva página en el editor de bloques de WordPress.

En el panel ‘Documento’ a la derecha, busca ‘Atributos de página’ y haz clic en la flecha hacia abajo para expandir esa sección si es necesario. Deberías ver un menú desplegable ‘Plantilla’ donde puedes seleccionar tu nueva plantilla ‘Ancho completo’:

Después de seleccionar esa plantilla, publica o actualiza la página.

Al ver la página, notarás que las barras laterales han desaparecido y tu página aparece en una sola columna. Es posible que aún no tenga el ancho completo, pero ahora estás listo para darle un estilo diferente.

Necesitarás usar la herramienta de Inspeccionar para averiguar las clases CSS que usa tu tema para definir el área de contenido.

Después de eso, puedes ajustar su ancho al 100% usando CSS. Puedes agregar código CSS yendo a Apariencia » Personalizar y haciendo clic en ‘CSS adicional’ al final de la pantalla.

Usamos el siguiente código CSS en nuestro sitio de prueba:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 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 deseas usar el método manual y quieres hacer más personalizaciones, también puedes usar el plugin CSS Hero, que te permite modificar estilos CSS con un editor de apuntar y hacer clic.

Sin embargo, para la mayoría de los usuarios, recomendamos usar la plantilla de ancho completo de tu propio tema o usar un plugin para crear una.

Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente una página de ancho completo en WordPress. También te puede interesar nuestra guía sobre los mejores plugins de WordPress para hacer crecer tu sitio web, y nuestra comparación de los mejores plugins de WordPress LMS para crear y vender cursos.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.