Cómo crear una página de ancho completo en WordPress (Guía para principiantes)

¿Le gustaría 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, 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 páginas completamente personalizadas sin ningún código.

Método 1. Use el ancho completo del tema si su tema ya viene con una página de ancho completo, entonces es mejor usarlo. Casi todos los buenos temas de WordPress son buenos.
Incluso los mejores temas gratuitos de WordPress a menudo vienen con una plantilla de ancho completo, por lo que hay altas posibilidades de tener uno. Primero, debe editar una página o crear una nueva accionando páginas »Agregar nuevo al tablero de WordPress. En el panel “Documento” en el lado derecho del editor de contenido, debe expandir la sección “Atributos de página” haciendo clic en la flecha al lado. Entonces debería ver una lista de Drop -down de “plantilla”.

Si tiene una plantilla de ancho completo para su tema, se enumerará aquí. Debe llamarse algo 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 fácilmente uno usando los métodos a continuación. Método 2. Cree la plantilla de página con ancho completo utilizando un complemento Este método es el más fácil y funciona con todos los temas y arados de WordPress para el generador de página. Primero, debe instalar y activar el complemento de plantillas de ancho completo. Si no está seguro de cómo hacer esto, consulte nuestra guía para principiantes para instalar un complemento de WordPress. Las plantillas de ancho completo agregarán tres nuevas plantillas de página:
Estas opciones son:

FW sin barra lateral: retire la barra lateral de su página pero deja cualquier otra cosa intacta
FW FullWidth: Elimine la barra lateral, el título y los comentarios y estire la apariencia a todo el ancho
FW FullWidth sin encabezado Subsol: Elimine todo lo que hace FW FullWidth, además de encabezado y sótano
Si simplemente usa el editor de WordPress Built -In, “FW No Barbar” probablemente será la mejor opción. 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 con un ancho completo sin ningún código, debe usar un generador de página. Método 3: Diseñe una página de ancho completo en WordPress usando un generador de páginas si su tema no tiene una plantilla de ancho completo, entonces esta es la forma más fácil de crear y personalizar una plantilla de ancho completo. Le permite editar fácilmente la página con ancho completo y crear diferentes páginas para su sitio web con una interfaz de arrastrar y soltar. Para este método, necesitará un complemento para el generador de página de WordPress. En este tutorial, usaremos Beaver Builder. Es uno de los mejores complementos para el generador de página de arrastrar y soltar y le permite crear fácilmente modelos 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 por paso sobre cómo instalar un complemento de WordPress. Después de haberlo activado, edite una página existente o cree una nueva. En el panel “Documento” en el lado derecho de la pantalla, vaya a “Página de atributos” y seleccione una plantilla de ancho completa en el menú Drop -down. Luego, haga clic en el botón “Iniciar Beaver Builder” en el centro de la pantalla.
Ahora use la interfaz de tracción y colocación de Beaver Builder para crear su página.
Una buena manera de comenzar es hacer clic en la pestaña Plantilla 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 constructor de páginas lo cargará. Luego puede editar cualquiera de los elementos, como las imágenes, que desea cambiar. Los aspectos 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 apariencia, simplemente haga clic en ella. En este caso, cambiamos el módulo de encabezado: Beaver Builder abrirá los detalles del artículo en una ventana emergente donde puede editar su configuración. Puede cambiar el texto, puede cambiar las fuentes y los colores, puede agregar o cambiar las imágenes de fondo y más.

Puede agregar módulos y widgets en cualquier momento a su aspecto Beaver Builder viene con muchos módulos básicos y avanzados que puede extraer y la red en su página.

Después de haber terminado de editar, haga clic en “Terminado” en la parte superior de la página. Luego puede guardar el boceto o publicarlo.

Ahora puede visitar su página para ver la página completa con ancho completo.

Método 4. Cree páginas de destino totalmente personalizadas con un ancho completo con SeedProd, mientras que Beaver Builder es una solución ordenada, tiene el potencial de ralentizar su sitio web.

Si desea crear una página de destino completamente personalizada en la que desea personalizar el encabezado, el sótano y todas las áreas de la página, recomendamos usar SeedProd. Es el mejor complemento de página de destino para WordPress y viene con una generació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 las páginas de SeedProd para agregar una nueva página de destino. Simplemente puede seleccionar una de sus muchas plantillas preconstruidas o puede 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 incorporadas, servicios de marketing de correo electrónico de integración y más. Método 5: Crear WordPress -WordPress -WordPress -WordPress Manual Este método es una última solución si ninguno de los métodos anteriores funciona para usted. Requiere que edite sus temas de WordPress. Necesitará una comprensión básica de PHP, CSS y HTML. Si no ha hecho esto antes, eche un vistazo a nuestra guía sobre cómo copiar / pegar el código en WordPress.

Antes de continuar, le recomendamos crear una copia de seguridad de WordPress o al menos una copia de seguridad de su base actual. Esto lo ayudará a restaurar fácilmente el sitio si algo no va bien. Luego abra un editor de texto simple como el bloc de notas y pegue el siguiente código en un archivo vacío: <? Php
/*

*
Nombre de la plantilla: ancho completo
*/
get_HeaAder (); ?>
Guarde este archivo como width.php en su computadora. Es posible que deba cambiar “rescate como un 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 se haga cargo del encabezado. Luego necesitará la parte de contenido del código. Inicie sesión en su sitio web utilizando un cliente FTP (o el Administrador de archivos de alojamiento de WordPress de Cpanel) y luego Go / WP-Content / Themes / Your-Theme-Folder /. Ahora tiene que localizar el archivo page.php. Este es el archivo de plantilla de página predeterminado. Abra ese archivo y copie todo por get_header () y péguelo en el archivo completo de width.php en su computadora. En el archivo completo de width.php, busque y elimine esta línea de código: <? Php get_sidebar (); ? Puede ver esta línea varias veces en el tema. Si su tema tiene varias barras laterales (las áreas del widget del sótano también se llaman barras laterales), verá cada barra lateral una vez en el código. Decide 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. Esto es lo que todo el código de ancho completo. Su código puede verse ligeramente diferente según el tema. <? Php
/*
*
Nombre de la plantilla: ancho completo

*/
get_HeaAder (); ?>

<!-.

Luego, cargue el archivo de width.php completo en la carpeta temática utilizando el cliente FTP. Ha creado y cargado con éxito una plantilla de página personalizada personalizada en 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 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ú de caída de “plantilla” en el que puede seleccionar la nueva plantilla de “ancho completo”:
Después de seleccionar la plantilla respectiva, publique o actualice la página. Al ver la página, verá que las barras laterales han desaparecido y su página aparece como una sola columna. Puede que aún no tenga un ancho completo, pero ahora está listo para estilizarlo de manera diferente. Deberá usar la herramienta de inspección 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% usando CSS. Puede agregar código CSS accediendo a la apariencia »Personalización y haciendo clic en el” CSS adicional “en la parte inferior de la pantalla.
Utilicé el siguiente código CSS en nuestro sitio de prueba: .page-teplate-flex-width.
Ancho: 100%;
margen: 0px;
Borde: 0px;
Relleno: 0px;

}

.Page-Template-Flex-Width .Site {margen: 0px;
}
Así es como se mostró en nuestro sitio demostrativo utilizando el tema de veinte dieciséis.
Si desea utilizar el método manual y desea personalizar más, también puede usar el complemento CSS Hero, que le permite cambiar los estilos CSS con un editor de puntuación y hacer clic. Sin embargo, para la mayoría de los usuarios, recomendamos usar el ancho completo de su base o usar un complemento para crear uno. Esperamos que este artículo lo ayude a aprender cómo crear fácilmente una página de ancho completo. Es posible que desee ver nuestra guía sobre los mejores complementos de WordPress para desarrollar su sitio web y nuestra comparación de los mejores complementos de WordPress LMS para crear y vender cursos. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.