{"id":105247,"date":"2021-10-13T21:32:16","date_gmt":"2021-10-13T16:02:16","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=105247"},"modified":"2022-08-22T22:08:54","modified_gmt":"2022-08-22T16:38:54","slug":"astra-or-elementor-header-and-footer","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/astra-or-elementor-header-and-footer\/","title":{"rendered":"\u00bfCrear la cabecera y el pie de p\u00e1gina con Astra o Elementor?"},"content":{"rendered":"

Con el tema Astra, siempre puedes contar con flexibilidad. Desde la versi\u00f3n 3.0.0, el Tema Astra viene con el Constructor de Encabezado y Pie de P\u00e1gina de arrastrar y soltar incluido. Proporciona una gran variedad de caracter\u00edsticas para que pueda construir su encabezado y pie de p\u00e1gina m\u00e1s f\u00e1cil que nunca. <\/p>\n\n\n\n

Dado que la cabecera y el pie de p\u00e1gina son \u00e1reas del sitio web separadas del contenido, pueden editarse de forma independiente. Por lo tanto, puede crear su cabecera y pie de p\u00e1gina con Astra y seguir utilizando Elementor para su contenido. Por otro lado, puede dise\u00f1ar toda su p\u00e1gina web, incluyendo la cabecera y el pie de p\u00e1gina, s\u00f3lo con Elementor. <\/p>\n\n\n\n

Sea cual sea la forma que elijas, este documento te mostrar\u00e1 c\u00f3mo sacar el m\u00e1ximo partido al combo Astra y Elementor.<\/p>\n\n\n\n

\u00bfPor qu\u00e9 son importantes el encabezado y el pie de p\u00e1gina?<\/h2>\n\n\n\n

El encabezado y el pie de p\u00e1gina son la primera y la \u00faltima secci\u00f3n de su sitio web y, por tanto, muy importantes. La cabecera es lo primero que ven los visitantes de su sitio web, y el pie suele ser lo \u00faltimo.<\/p>\n\n\n\n

\"Astra<\/a><\/figure>\n\n\n\n

Se encuentran en todas (o en la mayor\u00eda) de las p\u00e1ginas y entradas del sitio web y contienen la marca, la navegaci\u00f3n y otra informaci\u00f3n importante.<\/p>\n\n\n\n

Por lo tanto, un encabezado y un pie de p\u00e1gina bien dise\u00f1ados son esenciales para una excelente experiencia de usuario, conocimiento de la marca y conversi\u00f3n. <\/p>\n\n\n\n

\u00bfC\u00f3mo funciona Astra Theme con Elementor?<\/h2>\n\n\n\n

El Tema Astra es totalmente compatible no s\u00f3lo con Elementor gratuito sino tambi\u00e9n con Elementor Pro y su Theme Builder. Adem\u00e1s, cuando empiece a crear una p\u00e1gina con Elementor, Astra configurar\u00e1 autom\u00e1ticamente todas las opciones perfectamente para Elementor.<\/p>\n\n\n\n

En primer lugar, es importante entender que utilizas el Elementor para a\u00f1adir y dise\u00f1ar el contenido de tu p\u00e1gina o post. En segundo lugar, un tema es el \"pegamento\" que mantiene unido tu sitio web. Los temas de WordPress son un lienzo para su sitio web - un marco que le da estructura y establece las bases.<\/p>\n\n\n\n

As\u00ed, el tema Astra le ayudar\u00e1 a configurar r\u00e1pidamente el dise\u00f1o de su sitio web, las fuentes, los colores, las barras laterales, las migas de pan, las im\u00e1genes destacadas, etc. Adem\u00e1s, Astra le proporcionar\u00e1 opciones para integrarse con algunos plugins de terceros que pueda necesitar, como WooCommerce. Adem\u00e1s, te dar\u00e1 opciones para personalizar las p\u00e1ginas de WordPress (por ejemplo, Archivo del Blog) o de plugins de terceros (por ejemplo, Tienda).<\/p>\n\n\n\n

Adem\u00e1s, como la versi\u00f3n gratuita de Elementor viene sin el Theme Builder, est\u00e1s limitado a editar s\u00f3lo el contenido. Al mismo tiempo, puedes construir tu cabecera y pie de p\u00e1gina con Astra Theme de forma gratuita y sin plugins adicionales.<\/p>\n\n\n\n

Constructor de encabezado y pie de p\u00e1gina y Elementor<\/h2>\n\n\n\n

En realidad, el dise\u00f1o de un gran encabezado y pie de p\u00e1gina puede hacer una diferencia real para su sitio web. Por lo tanto, Astra Theme viene con Header Footer Builder ya incluido y listo para usar.<\/p>\n\n\n\n

La cabecera y el pie de p\u00e1gina creados con Astra se integrar\u00e1n perfectamente con el contenido que a\u00f1adas con Elementor. Dado que la versi\u00f3n gratuita de Elementor no tiene opciones para la creaci\u00f3n de cabeceras y pies de p\u00e1gina, esta ser\u00e1 tu opci\u00f3n por defecto.<\/p>\n\n\n\n

Adem\u00e1s, todos nuestros Starter Plantillas para Elementor<\/a> se crean de esta manera. Al importar cualquier Plantilla de Inicio para Elementor, obtendr\u00e1 un sitio web donde s\u00f3lo el contenido se crea con Elementor. El encabezado y el pie de p\u00e1gina se crear\u00e1n con el Constructor de encabezado y pie de p\u00e1gina de Astra.  <\/p>\n\n\n\n

\"Astra<\/a><\/figure>\n\n\n\n

Constructor de cabeceras y pies de p\u00e1gina Astra<\/h3>\n\n\n\n

Primer paso<\/strong> - Para construye tu cabecera<\/a>Navegue hasta Panel > Apariencia > Personalizar > Creador de cabeceras<\/em>. Del mismo modo, para empezar creaci\u00f3n del pie de p\u00e1gina<\/a>Navegue hasta Creador de pies de p\u00e1gina <\/em>opci\u00f3n;<\/p>\n\n\n\n

\"Astra<\/a><\/figure>\n\n\n\n

Paso 2<\/strong> - Para construir tu cabecera o pie de p\u00e1gina s\u00f3lo tienes que a\u00f1adir, estilizar y arrastrar diferentes elementos a la posici\u00f3n deseada. Adem\u00e1s, puedes configurar individualmente cada elemento que hayas a\u00f1adido. Todos los dem\u00e1s ajustes del personalizador se aplicar\u00e1n autom\u00e1ticamente;<\/p>\n\n\n\n

Paso 3<\/strong> - A continuaci\u00f3n, dise\u00f1a tu cabecera y pie de p\u00e1gina de forma responsiva cambiando la ventana gr\u00e1fica (escritorio, tableta y m\u00f3vil) y realizando ajustes. Puedes utilizar distintos elementos, colocarlos de forma diferente y modificar los ajustes para cada ventana gr\u00e1fica;<\/p>\n\n\n\n

\"Responsive<\/a><\/figure>\n\n\n\n

Paso 4<\/strong> - Pulse el bot\u00f3n \"Publicar\" para guardar los cambios.<\/p>\n\n\n\n

Una vez que haya creado su encabezado y pie de p\u00e1gina, puede a\u00f1adir contenido a sus p\u00e1ginas y entradas utilizando Elementor. <\/p>\n\n\n\n

\u00bfC\u00f3mo crear encabezados y pies de p\u00e1gina con Elementor (gratis)?<\/h2>\n\n\n\n

Alternativamente, puede elegir construir su Encabezado y Pie de P\u00e1gina utilizando Elementor. <\/p>\n\n\n\n

Para ello, deber\u00e1 instalar adicionalmente el plugin \"Elementor Header & Footer Builder\". A continuaci\u00f3n, podr\u00e1 sustituir la cabecera y el pie de p\u00e1gina predeterminados de Astra por los creados con Elementor. Para ilustrarlo, le mostraremos c\u00f3mo a\u00f1adir la cabecera Elementor para todo su sitio web.<\/p>\n\n\n\n

Puede instalar el plugin accediendo a Panel de control > Plugins > A\u00f1adir nuevo<\/em>. En la barra de b\u00fasqueda de la parte superior derecha, escriba \"Elementor Creador de encabezados y pies de p\u00e1gina<\/a>\". Pulse el bot\u00f3n \"Instalar\". <\/p>\n\n\n\n

Crear plantilla (encabezado o pie de p\u00e1gina)<\/h3>\n\n\n\n

En primer lugar, debe crear una nueva plantilla (cabecera o pie de p\u00e1gina) y dise\u00f1arla con Elementor. Para ello, necesita tener activados los plugins Elementor y Elementor Header & Footer Builder.<\/p>\n\n\n\n

Primer paso<\/strong> - Vaya a Panel > Apariencia > Elementor Header & Footer Builder<\/em> y haga clic en el bot\u00f3n \"A\u00f1adir nuevo\";<\/p>\n\n\n\n

\"Elementor<\/a><\/figure>\n\n\n\n

Paso 2<\/strong> - Dale un nombre a la plantilla y haz clic en el bot\u00f3n \"Editar con Elementor\" para empezar a dise\u00f1ar tu plantilla. 

Paso 3<\/strong> - A\u00f1ade tu dise\u00f1o y haz clic en el bot\u00f3n \"Publicar\" para guardarlo. Haz clic en el men\u00fa Elementor y en \"Salir al panel de control\" para volver a la configuraci\u00f3n de tu plantilla.<\/p>\n\n\n\n

\"Design<\/figure>\n\n\n\n

A\u00f1ada una plantilla a su sitio web<\/h3>\n\n\n\n

Ahora que tu dise\u00f1o est\u00e1 listo, necesitas configurar tu plantilla para mostrarlo en el front-end:<\/p>\n\n\n\n

Primer paso<\/strong> - Seleccione el tipo de elemento que desea crear: Encabezado o Pie de p\u00e1gina. Para nuestro ejemplo, elegimos crear el encabezado;<\/p>\n\n\n\n

Paso 2<\/strong> - A\u00f1ada las reglas de visualizaci\u00f3n. Para \"Mostrar en\" elija \"Todo el sitio web\", y para los \"Roles de usuario\" seleccione \"Todos\". Al elegir estas opciones se a\u00f1adir\u00e1 este encabezado o pie de p\u00e1gina a todas las p\u00e1ginas y entradas de tu sitio web;<\/p>\n\n\n\n

\"Design<\/a><\/figure>\n\n\n\n

Paso 3<\/strong> - Haga clic en el bot\u00f3n \"Publicar\" \/ \"Actualizar\" para guardar los cambios.<\/p>\n\n\n\n

Ahora ha configurado su cabecera y pie de p\u00e1gina Elementor. Ten en cuenta que si a\u00f1ades la configuraci\u00f3n de un widget individual en el editor Elementor, se sobrescribir\u00e1 cualquier configuraci\u00f3n del Personalizador. Para cambiar esto, tendr\u00e1s que editar el elemento. <\/p>\n\n\n\n

Preguntas frecuentes<\/h2>\n\n\n
\t\t\t\n\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\u00bfC\u00f3mo cambiar entre la cabecera o el pie de p\u00e1gina de Astra y Elementor?<\/strong><\/span><\/div>

No existe una opci\u00f3n real para cambiar las cabeceras. Astra Theme lo hace autom\u00e1ticamente. Cuando a\u00f1adas una cabecera o un pie de p\u00e1gina en Elementor, los gestionar\u00e1s y dise\u00f1ar\u00e1s utilizando la configuraci\u00f3n de Elementor. Los ajustes del Astra Header Footer Builder no se reflejar\u00e1n en estos encabezados y pies de p\u00e1gina.

Por el contrario, si el encabezado o pie de p\u00e1gina Elementor no est\u00e1 presente, el tema cambiar\u00e1 al Constructor de encabezado y pie de p\u00e1gina de Astra. La cabecera y el pie de p\u00e1gina predeterminados reflejar\u00e1n entonces todos los ajustes del Header Footer Builder.\u00a0<\/p><\/div><\/div>

\t\t\t\n\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\u00bfC\u00f3mo desactivar el encabezado o pie de p\u00e1gina a\u00f1adido con el plugin \"Elementor Header & Footer Builder\"?<\/strong><\/span><\/div>

Si ha a\u00f1adido un encabezado o pie de p\u00e1gina utilizando el plugin \"Elementor Header & Footer Builder\" para desactivarlo, siga estos pasos:

Primer paso<\/strong> \u2013 Navigate to Dashboard > Appearance > Elementor Header & Footer Builder click \u201cEdit\u201d under the element name;

Paso 2<\/strong> - Elimine las condiciones de visualizaci\u00f3n: haga clic en el desplegable \"Mostrar en\" y elija la opci\u00f3n \"Seleccionar\". Haga lo mismo con los roles de usuario;
\u00a0
Paso 3<\/strong> - Haga clic en \"Actualizar\" para guardar.

Alternativamente, puede eliminar el elemento o desactivar todo el plugin para conseguir el mismo resultado.<\/p><\/div><\/div>

\t\t\t\n\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\u00bfC\u00f3mo desactivar el encabezado o pie de p\u00e1gina a\u00f1adido con Elementor Pro y Theme Builder?<\/strong><\/span><\/div>

Si ha a\u00f1adido un encabezado o un pie de p\u00e1gina utilizando el Elementor Pro y el Theme Builder, \u00e9stos pueden desactivarse de forma similar, eliminando las condiciones de visualizaci\u00f3n. Para ello, siga estos pasos:

Primer paso<\/strong> \u2013 Navigate to the Dashboard > Templates > Theme Builder and choose Header or Footer type depending on which element you want to edit. Click \u201cEdit\u201d under the element name;

Paso 2<\/strong> - Eliminar las condiciones de visualizaci\u00f3n: haga clic en el icono de la flecha peque\u00f1a situado junto al bot\u00f3n de actualizaci\u00f3n para abrir el men\u00fa. Haga clic en el bot\u00f3n \"Condiciones de visualizaci\u00f3n<\/a>\" y elimine las condiciones que encuentre.

Paso 3<\/strong> - Haga clic en \"Actualizar\" para guardar.

Alternativamente, puede eliminar el elemento o desactivar todo el plugin para conseguir el mismo resultado.<\/p><\/div><\/div>

\t\t\t\n\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\u00bfPor qu\u00e9 la configuraci\u00f3n del personalizador \"no funciona\" con el encabezado o pie de p\u00e1gina de mi Elementor?<\/strong><\/span><\/div>

Los ajustes del personalizador de Astra se aplicar\u00e1n a la cabecera y pie de p\u00e1gina predeterminados del tema y a aquellos elementos de Elementor configurados para seguir los ajustes predeterminados (fuentes, colores, etc.).

Cualquier ajuste que a\u00f1adas en el editor Elementor sobrescribir\u00e1 los ajustes del Astra Customizer.

For example, let\u2019s say you set \u201cHelvetica\u201d font in your Customizer global settings (Customize > Global > Typography > Base Typography). Next, navigate to Elementor settings and set \u201cArial\u201d as the Primary Menu font for your Elementor header. In this case, the fonts will be applied in the following manner:

- Helvetica se aplicar\u00e1 a todo el texto de su sitio que no se a\u00f1ada utilizando Elementor;
- Helvetica se aplicar\u00e1 a todo el texto que se a\u00f1ada utilizando Elementor y se configure como fuente \"Predeterminada\";
- Se aplicar\u00e1 la fuente Arial al Men\u00fa Principal<\/p><\/div><\/div><\/div>\n\n\n

Recursos relacionados:<\/strong><\/p>\n\n\n\n