Cómo crear una página de ancho completo en WordPress

¿Quieres crear una página de WordPress de ancho completo? Muchos temas de WordPress ya vienen con una plantilla de página de ancho completo que puede usar. Sin embargo, algunos temas no tienen esta característica. En este artículo, le mostraremos cómo crear fácilmente una página de ancho completo en WordPress.

Crea una página de WordPress de ancho completo

Método 1: use una plantilla de ancho completo integrada en su tema de WordPress

Se recomienda este método si su tema ya viene con una plantilla de página de ancho completo.

Primero, debe editar una página o crear una nueva visitando Páginas »Agregar nuevo página.

En la pantalla de edición de página, seleccione el ancho completo como plantilla en el cuadro meta Atributos de página.

Seleccionar modelo de ancho completo

Después de seleccionar la plantilla de ancho completo, debe guardar su página. Puede continuar editando la página para agregar más contenido o hacer clic en el botón Vista previa para verla en acción.

Página de ancho completo utilizando la plantilla de ancho completo del tema

Si no tiene la opción de plantilla de ancho completo en la pantalla de edición de su página, significa que su tema no tiene una plantilla de página de ancho completo.

No se preocupe, le mostraremos cómo crear fácilmente una página de ancho completo sin cambiar su tema de WordPress.

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

Este método requiere que edite los archivos de tema de WordPress y tenga una comprensión básica de PHP, CSS y HTML. Si no ha hecho esto antes, consulte nuestra guía sobre cómo copiar / pegar código en WordPress.

Antes de continuar, debe crear una copia de seguridad de WordPress o al menos una copia de seguridad de su tema actual. Esto lo ayudará a restaurar fácilmente el sitio si algo sale mal.

Primero, debe abrir un editor de texto simple como el Bloc de notas y pegar el siguiente código en un archivo en blanco:

Ahora necesita guardar este archivo como width.php en su computadora.

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

A continuación, necesitará la parte del contenido del código. Conéctese a su sitio web utilizando un cliente FTP (o administrador de archivos en cPanel) y luego vaya a / wp-content / themes / your-theme-folder /.

Ahora necesita encontrar el archivo llamado page.php. Este es el archivo de plantilla de página predeterminado para su tema.

Copie todo después de la línea get_header () y péguelo en el archivo width.php de su computadora.

Ahora debe mirar el archivo full-width.php y eliminar esta línea de código:

Esta línea simplemente busca en la barra lateral y la muestra en su tema. Cuando se elimina, el tema no se mostrará en la barra lateral cuando se use la plantilla de ancho completo.

Puede ver esta línea aparecer más de una vez en su tema. Si su tema tiene varias barras laterales (las áreas del widget de pie de página también se llaman barras), verá cada barra lateral mencionada una vez en el código. Debes decidir qué barras laterales quieres mantener.

Si su tema no aparece con barras en las páginas, es posible que no encuentre este código en su archivo.

Así es como se ve nuestro código full-width.php después de hacer cambios. Su código puede verse un poco diferente, dependiendo de su tema.

A continuación, debe cargar el archivo full-width.php a su carpeta de temas utilizando el cliente FTP.

Ha creado y cargado correctamente una plantilla de página de ancho completo personalizada para su tema. El siguiente paso es usar esta plantilla para crear una página de ancho completo.

Vaya al área de administración de WordPress y edite o cree una nueva página.

En la pantalla de edición de página, busque el meta-cuadro de atributos de la página y haga clic en la opción “Plantilla” en el menú desplegable.

Seleccione su modelo de ancho completo

Puedes ver tu modelo de ancho completo allí. Adelante, selecciónelo y guarde / actualice la página.

Ahora puede visitar su sitio web y verá que las barras Las paredes laterales han desaparecido y su página aparece como una sola columna. Es posible que todavía no tenga todo el ancho, pero ahora está listo para modelarlo de manera diferente.

Deberá usar la herramienta Inspeccionar para descubrir las clases CSS utilizadas por su tema para definir el área de contenido.

Después de eso, puede ajustar su ancho al 100% con CSS. Usamos el siguiente código CSS en nuestro sitio de prueba:

.page-template-width-wide .content-area {
ancho: 100%;
margen: 0px;
borde: 0px;
relleno: 0px;
}

.page-template-wide-width .site {
margen: 0px;
}

Así es como se veía en nuestro sitio de demostración, usando el tema Twenty Sixteen.

Vista de página de ancho completo

Método 3: crear una página de ancho completo con el complemento Page Builder

Este método es más fácil y se recomienda para todos los usuarios. Le permite editar fácilmente su página de ancho completo y crear diferentes diseños de página para su sitio web.

Para este método, necesitará un complemento de generador de páginas de WordPress. A los fines de este tutorial, utilizaremos Beaver Builder. Es uno de los mejores complementos de creación de páginas de arrastrar y soltar, y le permite crear fácilmente diseños de página sin escribir ningún código.

Lo primero que debe hacer es instalar y activar el complemento Beaver Builder. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Después de la activación, debe editar una página existente o crear una nueva.

En la pantalla de edición de página, en la sección de atributos de la página, debe seleccionar la plantilla de ancho completo proporcionada por su tema de WordPress.

Seleccionar modelo de ancho completo

Si su tema no tiene una plantilla de ancho completo, puede crear una siguiendo las instrucciones mencionadas en el segundo método.

Después de seleccionar la plantilla de página, debe hacer clic en el botón Guardar borrador para almacenar su página.

Ahora está listo para usar el complemento del generador de páginas para crear su diseño. Comenzará haciendo clic en la pestaña del generador de páginas en el editor de páginas.

Inicie el generador de páginas.

Esto abrirá la interfaz del creador de páginas, donde puede ver una vista previa en vivo de su página con las opciones del creador de páginas.

Interfaz Beaver Builder

Puede comenzar haciendo clic en el botón Plantillas en la parte superior. Beaver Builder viene con varias plantillas listas para usar y diseñadas profesionalmente que puede usar como punto de partida.

Selecciona un modelo

Simplemente puede hacer clic en una plantilla para seleccionarla y el creador de la página la cargará, incluido el diseño, las imágenes y el contenido. También puede hacer clic en la plantilla en blanco para comenzar sin una plantilla preparada y crear su propio diseño.

Los diseños de Beaver Builder se crean con líneas y módulos. Cada fila puede tener múltiples columnas, y en cada fila, puede agregar módulos y widgets de contenido.

Para editar una línea o módulo en el diseño, solo apunte y haga clic en él.

Señale y haga clic para editar un elemento

Beaver Builder abrirá los detalles del elemento en una ventana emergente donde puede editar su configuración. Puede cambiar colores, fuentes, agregar fotos de fondo, cambiar texto, etc.

Edición de un elemento en Beaver Builder

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

Agregue módulos a su diseño de página

Después de que termine de editar, puede hacer clic en el botón “Listo” en la parte superior. Esto abrirá una ventana emergente donde debe hacer clic en el botón guardar o publicar.

Guarda o publica tu página

Ahora puede visitar su página para verla en acción.

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 puede consultar nuestra guía sobre cómo agregar una imagen de fondo de pantalla completa en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

Publicaciones relacionadas

Botón volver arriba