MundoCMS

Menu
  • Plantillas
  • Reviews
  • Tutoriales Avanzados
    • Tutoriales para principiantes
  • Solución de Errores
  • Plugins
  • Plantillas
  • Reviews
  • Tutoriales Avanzados
    • Tutoriales para principiantes
  • Solución de Errores
  • Plugins

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

How To Create A Full Width Page In Wordpress

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

¿Desea 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, 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 totalmente personalizados sin ningún código.

Método 1. Utilice la plantilla de ancho completo de su tema

Contents

  • 1 Método 1. Utilice la plantilla de ancho completo de su tema
  • 2 Método 2. Cree una plantilla de página de ancho completo con un complemento
  • 3 Método 3: diseñe una página de ancho completo en WordPress usando un complemento Page Builder
  • 4 Método 4. Cree páginas de destino de ancho completo totalmente personalizadas con SeedProd
  • 5 Método 5: crear manualmente una plantilla de página de WordPress de ancho completo
    • 5.1 Comparte esto:
    • 5.2 Relacionado

Si su tema ya viene con una plantilla de página de ancho completo, es mejor 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 derecho «Documento» del editor de contenido, debe expandir la sección «Atributos de página» haciendo clic en la flecha hacia abajo junto a ella. A continuación, debería ver una lista desplegable «Modelo».

Visualización De La Sección 'Atributos De La Página' En El Panel 'Documento' De Wordpress
Si tiene una plantilla de ancho completo para su tema, aparecerá aquí. Debería llamarse algo así como «Modelo de ancho completo»:
Seleccione El Modelo De Ancho Completo De La Lista Desplegable
Las opciones que ve aquí variará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 usando los métodos a continuación.

Método 2. Cree una plantilla de página de ancho completo con un complemento

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. En primer lugar, debe instalar y activar el complemento Plantillas de ancho completo. Si no sabe cómo hacer esto, 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:
Las Diferentes Opciones Disponibles Para La Plantilla De Su Página Usando El Complemento De Ancho Completo
Estas opciones son:

  • FW Sin barra lateral: elimine la barra lateral de su página, pero deje todo lo demás intacto
  • FW Ancho completo: elimine la barra lateral, el título y los comentarios y extienda el diseño al ancho completo
  • FW Fullwidth Sin encabezado Pie de página: elimina todo lo que hace FW Fullwidth, además del encabezado y pie de página

Si solo va a utilizar el editor de WordPress integrado, probablemente la mejor opción sea «FW No Sidebar». Si bien este complemento le permite crear una plantilla de página de ancho completo, sus opciones de personalización son limitadas. Si desea personalizar su plantilla de ancho completo sin código, debe utilizar un generador de páginas.

Método 3: diseñe una página de ancho completo en WordPress usando un complemento 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 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. Este es uno de los mejores complementos de creación de páginas de arrastrar y soltar, y le permite crear diseños fácilmente 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 habilitado, edite una página existente o cree una nueva. En el panel «Documento» en el lado derecho de la pantalla, navegue hasta «Atributos de página» y seleccione una plantilla de ancho completo de la lista desplegable. Luego haga clic en el botón «Iniciar Beaver Builder» en el centro de su pantalla.
Usando El Complemento Beaver Builder Para Crear Su Página De Ancho Completo
Ahora use la interfaz de arrastrar y soltar de Beaver Builder para crear su página.
Interfaz De Arrastrar Y Soltar De Beaver Builder
Una buena forma de comenzar es hacer clic en la pestaña Plantillas en la parte superior. Seleccione una de las plantillas predefinidas para usar como base para su página de ancho completo.
Seleccione Uno De Los Modelos De Beaver Builder
Haga clic en una plantilla para seleccionarla y el creador de páginas la cargará. A continuación, puede editar cualquier elemento, como imágenes, que desee editar. Los diseños de Beaver Builder se construyen con líneas 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 línea o un módulo en el diseño, solo tiene que hacer clic en él. En este caso, editamos el módulo de Encabezado:
Editar Un Título Con Beaver Builder
Beaver Builder abrirá los detalles del elemento en una ventana emergente donde puede cambiar su configuración. Puede editar texto, cambiar fuentes y colores, agregar o cambiar imágenes de fondo y más.
Editar Los Detalles Del Artículo En Beaver Builder
Puede agregar módulos y widgets a su diseño en cualquier momento. Beaver Builder viene con muchos módulos de contenido básico y avanzado que puedes arrastrar y soltar en tu página.
Agregar Un Módulo En Beaver Builder
Una vez que se completen los cambios, haga clic en «Listo» en la parte superior de la página. Luego puede guardar su borrador o publicarlo.
Guarde O Publique Su Página De Ancho Completo En Beaver Builder
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 totalmente personalizadas con SeedProd

Aunque Beaver Builder es una gran solución, tiene el potencial de ralentizar su sitio web. Si desea crear una página de destino totalmente 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. Este 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.
Creador De Páginas Seedprod
En primer lugar, 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 elegir entre 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 increíblemente 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 manualmente una plantilla de página de WordPress de ancho completo

Este método es un último recurso si ninguno de los métodos anteriores funciona para usted. Esto requiere que edite sus archivos de tema de WordPress. Necesitará conocimientos básicos 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 le ayudará a restaurar fácilmente su sitio si algo sale mal. Luego abra un editor de texto sin formato como el Bloc de notas y pegue el siguiente código en un archivo vacío:

Guarde este archivo como full-width.php en su computadora. Es posible que deba cambiar el tipo «Guardar como» a «Todos los archivos» para evitar guardarlo como un archivo .txt:
Guarde La Plantilla De Ancho Completo Como Un Archivo .Php
Este código simplemente establece el nombre de un archivo de plantilla e indica a WordPress que busque la plantilla de encabezado. Entonces necesitará la parte de contenido del código. Inicie sesión en su sitio web utilizando un cliente FTP (o su administrador de archivos de alojamiento de WordPress en cPanel), luego navegue hasta / wp-content / themes / your-theme-folder /. Ahora necesitas ubicar el archivo page.php. Este es el archivo de plantilla de página predeterminado para su tema. Abra este archivo y copie todo después de la línea get_header () y péguelo en el archivo full-width.php en su computadora. En el archivo full-width.php, busque y elimine esta línea de código:

Esta línea toma 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 más de una vez en su gráfico. 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.php de ancho completo después de realizar los cambios. Su código puede ser ligeramente diferente según su tema.


Luego suba el archivo full-width.php a 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. 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 «Atributos de página» y haga clic en la flecha hacia abajo para expandir esta sección si es necesario. Debería ver una lista desplegable de « Plantilla » donde puede seleccionar su nueva plantilla de « Ancho completo »:
Seleccione La Plantilla De Ancho Completo Que Creó En La Lista Desplegable Plantilla
Después de seleccionar esta plantilla, publique o actualice la página. Cuando vea la página, verá que las barras laterales se han ido 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 descubrir 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.
Agregar Css En El Personalizador De Temas
Usamos el siguiente código CSS en nuestro sitio de prueba: .page-template-full-width .content-area {width: 100%; margen: 0px; borde: 0px; relleno: 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
Si desea utilizar el método manual …

Originally posted 2021-02-23 19:06:55.

Comparte esto:

  • Twitter
  • Facebook

Relacionado

Tweet Pin It

Related Posts

Wpbeginner Fund

Anuncio del fondo MundoCMS Growth Accelerator

¡Wpbundle Tiene Una Oferta En Curso Que No Debe Perderse!

¡WPBundle tiene una oferta en curso que no debe perderse!

Fdnits7Oz5W

Blossom feminine wordpress theme

Leave a Reply

Cancelar la respuesta

Formulario de suscripción:

Categorías

  • FLUYEZCAMBIOS
  • Noticias
  • Otros
  • Plantillas
  • Plugins
  • Reviews
  • Solución de Errores
  • Tutoriales
  • Tutoriales para principiantes
  • Wordpress

Artículos recientes

  • Capacitación
  • 9 mejores complementos de la base de conocimientos para WordPress (comparados)
  • Cómo eliminar la fecha y la hora de los comentarios de WordPress
  • Anuncio del fondo MundoCMS Growth Accelerator (segunda ronda)
  • Cómo importar y exportar fácilmente usuarios de WordPress
  • Cómo incrustar fácilmente código iFrame en WordPress (3 métodos)
  • Cómo incrustar fácilmente videos en publicaciones de blog de WordPress
  • Magento vs WooCommerce – ¿Cuál es mejor? (Comparación)
  • 7 mejor software de notificación web push en 2021 (comparado)
  • Lo que viene en WordPress 5.3 (características y capturas de pantalla)
  • Cómo incrustar tweets reales en publicaciones de blog de WordPress
  • Cómo crear una lista de correo en WordPress – Email Marketing 101
  • 9 mitos comunes de WordPress desacreditados (con explicación)
  • Las 6 mejores herramientas de seguimiento de ranking de SEO para el seguimiento de palabras clave (comparadas)
  • Cómo dar estilo a los menús de navegación de WordPress (actualizado)
  • Google Chrome bloqueará el contenido mixto
  • Cómo corregir el error «Lo sentimos, este tipo de archivo no está permitido por razones de seguridad» en WordPress
  • Cómo reorganizar la pantalla de edición de publicaciones en WordPress
  • Los diez mejores temas de VoIP para WP en dos mil veintitres (equiparados)
  • Ingresos de MundoCMS – ¿Cuánto dinero gana MundoCMS?

Idioma:

es Spanish
af Afrikaanssq Albanianam Amharicar Arabichy Armenianaz Azerbaijanieu Basquebe Belarusianbn Bengalibs Bosnianbg Bulgarianca Catalanceb Cebuanony Chichewazh-CN Chinese (Simplified)zh-TW Chinese (Traditional)co Corsicanhr Croatiancs Czechda Danishnl Dutchen Englisheo Esperantoet Estoniantl Filipinofi Finnishfr Frenchfy Frisiangl Galicianka Georgiande Germanel Greekgu Gujaratiht Haitian Creoleha Hausahaw Hawaiianiw Hebrewhi Hindihmn Hmonghu Hungarianis Icelandicig Igboid Indonesianga Irishit Italianja Japanesejw Javanesekn Kannadakk Kazakhkm Khmerko Koreanku Kurdish (Kurmanji)ky Kyrgyzlo Laola Latinlv Latvianlt Lithuanianlb Luxembourgishmk Macedonianmg Malagasyms Malayml Malayalammt Maltesemi Maorimr Marathimn Mongolianmy Myanmar (Burmese)ne Nepalino Norwegianps Pashtofa Persianpl Polishpt Portuguesepa Punjabiro Romanianru Russiansm Samoangd Scottish Gaelicsr Serbianst Sesothosn Shonasd Sindhisi Sinhalask Slovaksl Slovenianso Somalies Spanishsu Sudanesesw Swahilisv Swedishtg Tajikta Tamilte Teluguth Thaitr Turkishuk Ukrainianur Urduuz Uzbekvi Vietnamesecy Welshxh Xhosayi Yiddishyo Yorubazu Zulu
FluyezCambios
MundoCMS Copyright © 2023.