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

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

Crear una página de ancho completo en WordPress

Método 1: usar una plantilla de ancho completo incorporada en su tema de WordPress

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

Primero necesita 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 ancho completo como su plantilla en el cuadro meta de atributos de página.

Seleccionar plantilla 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 haga clic en el botón de vista previa para verla en acción.

Página de ancho completo usando 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, esto 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 archivos de tema de WordPress y que tenga conocimientos básicos de PHP, CSS y HTML. Si no ha hecho esto antes, eche un vistazo a 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 su sitio si algo sale mal.

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



Ahora necesita guardar este archivo como full-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 ubicar el archivo llamado page.php. Este es el archivo de plantilla de página predeterminado de su tema.

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

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

 

Esta línea simplemente busca la barra lateral y la muestra en su tema. Al eliminarlo, el tema no se mostrará en la barra lateral al usar 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 de widget de pie de página también se llaman barras laterales), verá cada barra lateral referenciada una vez en el código. Debes decidir qué barras laterales quieres mantener.

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 nuestro código full-width.php después de hacer los cambios. Su código puede verse ligeramente diferente según 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.

Dirígete al área de administración de WordPress y edita o crea una nueva página.

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

Seleccione su plantilla de ancho completo

Podrá ver su plantilla de ancho completo allí. Continúe y selecciónelo y guarde / actualice la página.

Ahora puede visitar su sitio web, y verá que las barras laterales han desaparecido, y su página aparece como una sola columna. Puede que aún no sea de ancho completo, pero ahora está listo para darle un estilo diferente.

Tendrá que 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. Utilizamos 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.

Vista previa de página de ancho completo

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

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. Por el bien de este tutorial, utilizaremos Beaver Builder. Es uno de los mejores complementos del generador 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.

Tras la activación, debe editar una página existente o crear una nueva.

En la pantalla de edición de la 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 plantilla 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 su 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 sobre el editor de páginas.

Iniciar el generador de páginas

Esto abrirá la interfaz del generador de páginas, donde podrá ver una vista previa en vivo de su página con las opciones del generador 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 una plantilla

Simplemente puede hacer clic en una plantilla para seleccionarla y el generador de páginas la cargará por usted, 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 filas y módulos. Cada fila puede tener múltiples columnas y dentro de cada fila puede agregar módulos de contenido y widgets.

Para editar una fila o un módulo en el diseño, solo necesita apuntar y hacer clic en él.

Apunte y haga clic para editar un elemento

Beaver Builder abrirá los detalles del elemento en una ventana emergente donde podrá 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ásicos y avanzados que puede arrastrar y soltar en su página.

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

Una vez que haya terminado de editar, puede hacer clic en el botón “Listo” en la parte superior. Esto le mostrará 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 puedes encontrarnos en Twitter y Facebook.

Botón volver arriba