Cómo crear páginas de ancho completo en WordPress (Guía para principiantes)
¿Quiere crear una página de ancho completo en WordPress que amplíe su contenido a lo largo de 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. Pero si su tema no lo tiene, es fácil agregarlo.
En este artículo, le mostraremos cómo crear fácilmente páginas de ancho completo en WordPress o incluso cómo crear diseños de página totalmente personalizados sin ningún código.
Método 1. Usa la plantilla de ancho completo del tema
Si su tema ya viene con una plantilla de página de ancho completo, es mejor simplemente usarla. Casi cualquier buen tema de WordPress funcionará.
Incluso los mejores temas gratuitos de WordPress a menudo vienen con plantillas de ancho completo, por lo que es muy probable que ya tenga una.
Primero, necesita editar la página o crear una nueva página página » agregar nuevo en tu panel de WordPress.
En el panel derecho Documento del editor de contenido, debe expandir la sección Propiedades de la página haciendo clic en la flecha hacia abajo junto a ella. A continuación, debería ver un menú desplegable “Plantilla”.
Si su tema tiene una plantilla de ancho completo, aparecerá aquí. Debería llamarse “plantilla de ancho completo”:
Las opciones que ve aquí variarán dependiendo de su tema. No se preocupe si su tema no tiene una plantilla de página de ancho completo.
Puede agregar uno fácilmente usando el siguiente método.
Método 2. Use un complemento para crear una plantilla de página de ancho completo
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.
Primero, debe instalar y activar el complemento Plantillas de ancho completo. Si no está seguro de cómo hacerlo, consulte nuestra guía para principiantes sobre la instalación del complemento de WordPress.
El complemento Plantillas de ancho completo agregará tres nuevas opciones a las plantillas de su página:
Estas opciones son:
- FW Sin barra lateral: elimine la barra lateral de la página, pero conserve todo lo demás
- FW Fullwidth: elimina las barras laterales, los encabezados y los comentarios y amplía el diseño a todo el ancho
- FW Fullwidth No Header Footer: elimina todo lo que hace FW Fullwidth, además de encabezados y pies de página
Si solo desea utilizar el editor de WordPress incorporado, “FW No Sidebar” es probablemente la mejor opción.
Si bien este complemento le permite crear plantillas de página de ancho completo, sus opciones de personalización son limitadas.
Si desea personalizar la plantilla de ancho completo sin ningún código, debe usar un creador de páginas.
Método 3: diseñe una página de ancho completo en WordPress usando un complemento de creación de páginas
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 páginas de ancho completo y crear diferentes diseños de página para su sitio web a través de 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. Es uno de los mejores complementos de creación de páginas de arrastrar y soltar que le permite crear fácilmente diseños de página 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 complementos de WordPress.
Una vez activado, edite las páginas existentes o cree otras nuevas.
En el panel Documento en el lado derecho de la pantalla, vaya a Propiedades de la página y seleccione una plantilla de ancho completo de la lista desplegable.
A continuación, haga clic en el botón “Iniciar Beaver Builder” en el centro de la pantalla.
Ahora, use la interfaz de arrastrar y soltar de Beaver Builder para crear sus páginas.
Una buena manera de comenzar es hacer clic en la pestaña Plantillas en la parte superior. Elija una plantilla prefabricada para usarla como base para una página de ancho completo.
Haga clic en la plantilla para seleccionarla y el creador de páginas la cargará. Luego puede editar cualquier elemento que desee cambiar, como imágenes.
Los diseños de Beaver Builder están construidos con filas 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 fila o módulo en el diseño, solo necesita hacer clic en él. En este caso, estamos editando el módulo Título:
Beaver Builder abrirá los detalles del proyecto en una ventana emergente donde puede editar su configuración. Puede cambiar 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ásicos y avanzados que puede arrastrar y soltar en sus páginas.
Cuando haya terminado de editar, haga clic en Listo en la parte superior de la página. A continuación, puede guardar el borrador o publicarlo.
Ahora puede visitar su página para ver la página terminada de ancho completo.
Método 4. Cree una página de inicio de sesión de ancho completo completamente personalizada con SeedProd
Si bien Beaver Builder es una gran solución, tiene el potencial de ralentizar su sitio web.
Si desea crear una página de inicio de sesión completamente 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.
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.
Primero, debe instalar y activar el complemento SeedProd.
Después de la activación, simplemente vaya a SeedProd » Página Agregar una nueva página de inicio de sesión. Simplemente puede elegir entre sus muchas plantillas preconstruidas o crear una página de destino personalizada desde cero.
La mejor parte de SeedProd es que es muy rápido y tiene funciones de conversión integradas para la gestión de suscriptores, la 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
Si ninguno de los métodos anteriores funciona para usted, este método es el último recurso. Requiere que edites los archivos del tema de WordPress. Necesita una comprensión básica 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 te ayudará a restaurar tu sitio fácilmente si algo sale mal.
A continuación, abra un editor de texto sin formato como el Bloc de notas y pegue el siguiente código en un archivo en blanco:
<?php /* * Template Name: Full-Width */ get_header(); ?>
Guardar este archivo como full-width.php en tu ordenador. Es posible que deba cambiar “Guardar como tipo” a “Todos los archivos” para evitar guardarlo como un archivo .txt:
Este código solo define el nombre del archivo de plantilla y le pide a WordPress que obtenga la plantilla de encabezado.
A continuación, necesitará la parte de contenido del código. Conéctese a su sitio web utilizando un cliente FTP (o el administrador de archivos alojado de WordPress en cPanel) y vaya a /wp-content/themes/your-theme-folder/.
Ahora necesitas encontrar el archivo. page.phpEste es el archivo de plantilla de página predeterminado de su tema.
Abra el archivo y copie todo después get_header() línea y péguelo en el archivo full-width.php en su computadora.
dentro full-width.php archivo, busque y elimine esta línea de código:
<?php get_sidebar(); ?>
Esta línea obtiene 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 varias veces en un hilo. Si su tema tiene varias barras laterales (el área del widget de pie de página también se conoce como barra lateral), verá cada barra lateral referenciada una vez en el código. Decide qué barras laterales conservar.
Si su tema no muestra una barra lateral en la página, es posible que no encuentre este código en el archivo.
Así es como se ve todo el código full-width.php después de hacer cambios. Dependiendo de su tema, su código puede verse ligeramente diferente.
<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>
<div >
<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, cargue full-width.php archivo a su carpeta de temas usando su cliente FTP.
Ahora ha creado y cargado con éxito una plantilla de página personalizada de ancho completo para su tema. El siguiente paso es crear una página de ancho completo usando esta plantilla.
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 Propiedades de la página y haga clic en la flecha hacia abajo para expandir la sección si es necesario. Debería ver un menú desplegable “Plantilla” donde puede seleccionar una nueva plantilla de “Ancho completo”:
Después de seleccionar la plantilla, publique o actualice la página.
Al ver una página, verá que la barra lateral desaparece y su página aparece como una sola columna. Es posible que aún no tenga el ancho completo, pero ahora puede diseñarlo de manera diferente.
Deberá usar la herramienta Inspeccionar para averiguar qué clases de CSS usa el tema para definir el área de contenido.
Después de eso, puede usar CSS para ajustar su ancho al 100%.Puede agregar código CSS de las siguientes maneras Apariencia » Personalizar y haga 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%;
margin: 0px;
border: 0px;
padding: 0px;
}
.page-template-full-width .site {
margin:0px;
}
Así es como se ve usando el tema de 26 años en nuestro sitio de demostración.
Si desea utilizar el método manual y desea una mayor personalización, también puede utilizar el complemento CSS Hero, que le permite modificar los estilos CSS mediante un editor de apuntar y hacer clic.
Sin embargo, para la mayoría de los usuarios, recomendamos usar la plantilla de ancho completo de su propio tema o crear una usando un complemento.
Esperamos que este artículo le haya ayudado a aprender cómo crear fácilmente páginas de ancho completo en WordPress. También puede consultar nuestra guía sobre los mejores complementos de WordPress para hacer crecer su sitio web y nuestra comparación de los mejores complementos de LMS de WordPress para crear y vender cursos.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
