martes, mayo 11, 2021

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.