¿Quiere crear una página de ancho completo en WordPress, para que pueda estirar su contenido en 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. Sin embargo, si su tema no tiene uno, entonces es fácil agregarlo.
En este artículo, le mostraremos cómo crear fácilmente una página de ancho completo en WordPress e incluso crear diseños de página totalmente personalizados sin ningún código.
Método 1. Utilice la plantilla de ancho completo de su tema
Si su tema ya viene con una plantilla de página de ancho completo, entonces es mejor simplemente 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 tenga una.
Primero, necesita editar una página o crear una nueva yendo a Páginas »Agregar nuevo en su panel de WordPress.
En el panel ‘Documento’ de la derecha del editor de contenido , debe expandir la sección ‘Atributos 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 tiene una plantilla de ancho completo para su tema, aparecerá aquí. Debería llamarse algo así como ‘Plantilla de ancho completo’:
Las opciones que ve aquí diferirán según su tema. No se preocupe si su tema no tiene una plantilla de página de ancho completo.
Puede agregar uno fácilmente utilizando los métodos siguientes.
Método 2. Crear una plantilla de página de ancho completo con un complemento
Este método es 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 para instalar un complemento de WordPress .
El complemento Fullwidth Templates agregará tres nuevas opciones a las plantillas de su página:
Estas opciones son:
- FW Sin barra lateral: elimina la barra lateral de su página, pero deja todo lo demás intacto
- FW Fullwidth: elimina la barra lateral, el título y los comentarios, y extiende el diseño a su ancho completo
- FW Fullwidth Sin encabezado Pie de página: elimina todo lo que hace FW Fullwidth, más el encabezado y el pie de página
Si simplemente va a utilizar el editor de WordPress integrado, probablemente la mejor opción sea «FW sin barra lateral».
Si bien este complemento le permite crear una plantilla de página de ancho completo, tiene opciones de personalización limitadas.
Si desea personalizar su plantilla de ancho completo sin ningún código, debe usar un generador de páginas.
Método 3: Diseñe una página de ancho completo en WordPress usando un complemento de Page Builder
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 su página de ancho completo y crear diferentes diseños de página para su sitio web con 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, y 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 un complemento de WordPress .
Una vez que lo haya activado, edite una página existente o cree una nueva.
En el panel ‘Documento’ en el lado derecho de la pantalla, vaya a ‘Atributos de página’ y seleccione una plantilla de ancho completo en el menú desplegable.
A continuación, haga clic en el botón ‘Iniciar Beaver Builder ‘ en el centro de su pantalla.
Ahora, use la interfaz de arrastrar y soltar de Beaver Builder para crear su página.
Una buena forma de comenzar es haciendo clic en la pestaña Plantillas en la parte superior. Seleccione una de las plantillas prefabricadas para usar como base para su página de ancho completo.
Haga clic en una plantilla para seleccionarla y el creador de páginas la cargará. Luego, puede editar cualquiera de los elementos, como imágenes, que desee cambiar.
Los diseños de Beaver Builder se crean 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 un módulo en el diseño, solo necesita hacer clic en él. En este caso, estamos editando el módulo Encabezado:
Beaver Builder abrirá los detalles del artículo en una ventana emergente donde puede editar su configuración. Puede cambiar el texto, cambiar fuentes y colores, agregar o cambiar imágenes de fondo y más.
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.
Una vez que haya terminado de editar, haga clic en «Listo» en la parte superior de la página. Luego puede guardar su borrador o publicarlo.
Ahora puede visitar su página para ver su página completa de ancho completo.
Método 4. Cree páginas de destino de ancho completo completamente personalizadas con SeedProd
Aunque Beaver Builder es una buena solución, tiene el potencial de ralentizar su sitio web.
Si está buscando crear una página de destino 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áginas para agregar una nueva página de destino. Simplemente puede seleccionar una de sus muchas plantillas prediseñadas o crear una página de destino personalizada 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 del servicio de marketing por correo electrónico y más.
Método 5: crear una plantilla de página de WordPress de ancho completo manualmente
Este método es un último recurso si ninguno de los métodos anteriores funciona para usted. Requiere que edites tus archivos de tema de WordPress. Necesitará 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, le recomendamos que cree una copia de seguridad de WordPress o al menos una copia de seguridad de su tema actual. Esto le ayudará a restaurar fácilmente su sitio 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(); ?>Guarde este archivo como full-width.phpen su computadora. Es posible que deba cambiar ‘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 busque 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 su administrador de archivos de alojamiento de WordPress en cPanel) y luego vaya a / wp-content / themes / your-theme-folder /.
Ahora necesitas localizar el archivo page.php. Este es el archivo de plantilla de página predeterminado de su tema.
Abra ese archivo y copie todo después de la get_header()línea y péguelo en el archivo de ancho completo.php en su computadora.
En el full-width.phparchivo, busque y elimine esta línea de código:
<?php get_sidebar(); ?> |
Esta línea busca 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.
Puede ver esta línea 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 denominan barras laterales), verá cada barra lateral referenciada una vez en el código. Decide qué barras laterales quieres conservar.
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 todo nuestro código de ancho completo.php después de realizar los cambios. Su código puede verse ligeramente diferente según su 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(); ?>Luego, cargue el full-width.phparchivo en su carpeta de temas usando su cliente FTP.
Ahora ha creado y subido correctamente una plantilla de página personalizada de ancho completo a su tema. El siguiente paso es utilizar 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, busque ‘Atributos de página’ y haga clic en la flecha hacia abajo para expandir esa sección si es necesario. Debería ver un menú desplegable ‘Plantilla’ donde puede seleccionar su nueva plantilla ‘Ancho completo’:
Después de seleccionar esa plantilla, publique o actualice la página.
Cuando vea la página, verá que las barras laterales han desaparecido y su página aparece como una sola columna. Puede que todavía no sea de ancho completo, pero ahora está listo para diseñarlo de manera diferente.
Deberá utilizar la herramienta Inspeccionar para averiguar las clases CSS que utiliza su tema para definir el área de contenido.
Después de eso, puede ajustar su ancho al 100% usando CSS. Puede agregar código CSS yendo a Apariencia »Personalizar y haciendo 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ía en nuestro sitio de demostración usando el tema Twenty Sixteen.
Si desea utilizar el método manual y desea realizar una mayor personalización, también puede usar el complemento CSS Hero, que le permite modificar los estilos CSS con un editor de apuntar y hacer clic.
Para la mayoría de los usuarios, sin embargo, recomendamos usar la plantilla de ancho completo de su propio tema o usar un complemento para crear una.
Esperamos que este artículo le haya ayudado a aprender cómo crear fácilmente una página de ancho completo en WordPress. Es posible que también desee ver nuestra guía sobre los mejores complementos de WordPress para hacer crecer su sitio web, y nuestra comparación de los mejores complementos de WordPress LMS para crear y vender cursos.
¿Te ha resultado útil??
0 / 0