¿Cómo crear un impresionante encabezado de tema de Astra?

Los encabezados son vitales para cualquier contenido de su página web, ya que sirven no sólo a los lectores sino también a los motores de búsqueda. Los encabezados impresionantes y bien escritos tienen el potencial de atraer lectores a su publicación y aumentar los clics. Los encabezados pueden variar de H1 a H6, según la jerarquía de su contenido. El título principal de su página o artículo es H1, mientras que H2 son los subtítulos que forman secciones en sus documentos. Los encabezados H3 a H6 proporcionan más subtítulos en su documento en H2. Antes de continuar con cómo el tema Astra puede ayudarlo a crear encabezados impresionantes en su contenido, consideremos la importancia de los encabezados.

Tabla de contenido:

¿Por qué son importantes los encabezados para sus páginas web?

He aquí por qué debes asegurarte de incluir encabezados en tu texto.

1. Identificación del tema

Los encabezados desempeñan un papel esencial para que los motores de búsqueda y los lectores elijan las palabras clave que buscan en el artículo. El encabezado principal del texto ayuda a identificar el tema del material y los subtítulos llevan al lector a su área de interés.

2.Accesibilidad

Hoy en día, la gente utiliza principalmente lectores de pantalla para revisar cualquier contenido. Los lectores de pantalla captan fácilmente los encabezados de cualquier contenido y son esenciales para utilizarlos de forma eficaz. También permiten a los lectores saltar de un título a otro para llegar al tema requerido.

3.Optimización de motores de búsqueda

Cuando los encabezados hacen que su tema sea identificable, los motores de búsqueda clasifican su página para las consultas de búsqueda. Cuanto más estén bien redactados sus encabezados y llenos de palabras clave adecuadas, más aumentarán su clasificación los motores de búsqueda.

Aquí hay una guía sobre el uso de las funciones gratuitas del tema Astra para crear encabezados impresionantes para sus páginas. Siga el procedimiento para crear el encabezado de su elección.

4. Hace que las páginas se puedan escanear

Al utilizar encabezados, hace que las páginas sean lo más escaneables posible. Es bien sabido que nadie lee el artículo completo, especialmente línea por línea. Por eso es importante que las páginas tengan encabezados. De todos los encabezados, el encabezado más importante es el primero, ya que establece el tono para toda la publicación o página.

Luego viene el subtítulo, ya que divide el contenido en partes que son mejores para el consumo. No solo eso, la estructura del artículo se muestra en los encabezados y subtítulos. En resumen, el conjunto correcto de encabezados significa que puedes atraer a la audiencia con tu contenido atractivo.

5. Usabilidad de dispositivos móviles

Con el tiempo, los dispositivos móviles se están volviendo más dominantes que nunca. No hay duda de que los sitios obtendrán más tráfico desde dispositivos móviles que nunca. Por lo tanto, si actualiza su contenido correctamente, seguramente obtendrá espectadores tanto desde dispositivos móviles como desde computadoras de escritorio.

En resumen, los encabezados optimizan la página web no sólo para los lectores sino también para los motores de búsqueda.

¿Cómo crear un encabezado impresionante con el tema Astra?

Lo primero es lo primero, para acceder a Astra Header Builder, inicie sesión en su panel de WordPress y, desde la barra lateral izquierda, vaya a Apariencia > Opciones de Astra > Header Builder como se muestra en la siguiente imagen:

Haga clic en él y lo llevará a la sección Generador de encabezados en el personalizador de WordPress. La interfaz debería ser similar a la que tenemos aquí:

Como puede ver, el generador de encabezados está dividido en tres secciones verticales, una apilada encima de otra. Tiene el "encabezado principal" en el medio con un "encabezado encima" en la parte superior y "debajo del encabezado" en la parte inferior.  

Cada encabezado tiene su propio conjunto de "configuraciones de encabezado", a las que puede acceder haciendo clic en el ícono de ajustes a la izquierda del encabezado.

Desde aquí, puede personalizar la altura del encabezado, el tamaño del borde, el fondo, el relleno y el margen.

Además, observe cómo cada encabezado se divide en tres secciones. Puede agregar y eliminar elementos de encabezado de estas secciones para hacerlas más funcionales. Al momento de escribir este tutorial, tiene acceso a 12 elementos de encabezado:

  • Título y logotipo del sitio
  • Menú Primaria
  • Botón 1
  • Botón 2 (pro)
  • Buscar
  • Cuenta
  • HTML1
  • HTML2
  • Menú secundario
  • Social
  • Dispositivo 1
  • Dispositivo 2
  • Widget 3 (pro)
  • Widget 4 (pro)
  • Carro

Ahora, para agregar un nuevo elemento de encabezado, coloque el mouse sobre esa sección y haga clic en el botón "+". Esto mostrará una lista de elementos disponibles. Elija el que desee utilizar y se agregará a la sección del encabezado.

Del mismo modo, simplemente haga clic en el botón "x" al lado del elemento del encabezado para eliminar un elemento del encabezado.

También puede moverse por los elementos del encabezado entre las secciones del encabezado simplemente arrastrando y soltando.

Todos los elementos de encabezado que ha utilizado aparecerán en el menú del lado izquierdo, justo debajo de la pestaña General. Aquí también encontrará la opción para cambiar el tipo de encabezado. Los usuarios gratuitos sólo tienen la opción de "Encabezados transparentes". Sin embargo, si está utilizando Astra Pro, puede habilitar los "Encabezados adhesivos".

Desde aquí, puede acceder a la configuración específica del elemento de encabezado.

Justo al lado de la pestaña General, tenemos la pestaña Diseño. Desde aquí, obtienes algunas opciones de diseño básicas para cambiar el Ancho y el Margen del encabezado. Hay configuraciones más avanzadas disponibles para los usuarios de Astra Pro.

Astra Header Builder también le permite ajustar cómo se verá el encabezado del sitio en diferentes tamaños de pantalla, como computadora de escritorio, móvil o tableta. Para elegir un tamaño de pantalla diferente y personalizarlo, use el selector de dispositivo en la esquina inferior izquierda de la pantalla.

Como puede ver, en una pantalla más pequeña, obtiene un área adicional llamada "Fuera del lienzo". Esto le permite ahorrar espacio en el encabezado y mover algunas cosas fuera de la pantalla que los visitantes pueden alternar cuando sea necesario.

Y esto concluye nuestra guía rápida sobre cómo crear un encabezado usando el tema Astra. Una vez que haya terminado de agregar todos los elementos del encabezado y realizar los cambios de diseño necesarios, haga clic en el botón publicar y listo.  

Su encabezado Astra recién creado ya está funcionando en su sitio web de WordPress.

Astra Header Builder: una descripción general rápida de las opciones disponibles

En el tutorial anterior, creamos un encabezado muy básico utilizando Astra Header Builder para darle una idea de cómo funciona la función. Sin embargo, hay toneladas de herramientas y opciones dentro de Astra Header Builder para ayudarlo a crear encabezados más complejos e impresionantes.

A continuación le presentamos un vistazo rápido a las diversas opciones que tiene a su disposición:

Encabezado primario

El encabezado predeterminado en Astra es el encabezado principal. Mostrará un logotipo y también un menú de navegación que se puede personalizar con varias configuraciones de encabezado principal en Astra.

Simplemente instale Astra y vaya a la sección Encabezado para elegir la opción de encabezado principal y acceder a la personalización. Encabezado > Encabezado principal

Puede hacer uso de las siguientes configuraciones de personalización

Disposición

La configuración de diseño gestionará la posición del logotipo de su página. Hay tres posiciones diferentes disponibles en Astra para el logo

Logotipo izquierdo

El logotipo en esta configuración se mueve al lado izquierdo del menú de navegación. Es un estilo típico de posicionar un logo.

Logotipo derecho

El logotipo en esta configuración se mueve al lado derecho del menú de navegación.

Logotipo del centro

El logotipo en esta configuración se mueve en el centro sobre el menú de navegación. Es una buena opción en el caso de un menú largo.

Ancho

La configuración de ancho administra el ancho del encabezado del texto. Puede personalizar el ancho de su encabezado como

Ancho completo

En la configuración de ancho completo, su encabezado se estirará desde ambos extremos y se ajustará al tamaño de la página de su navegador.

Ancho del contenido

En la configuración del ancho del contenido, el encabezado se ajusta según el ancho del contenedor establecido, y puede configurarlo seleccionando lo siguiente

Global > Contenedor > Ancho

Borde

Al seleccionar el borde, puede agregar un borde debajo de su encabezado y personalizar su color y ancho.

Encabezado móvil

El menú de navegación, en dispositivos responsivos, se transforma en una hamburguesa. Por lo tanto, el encabezado principal de estos dispositivos solo mostrará el menú de hamburguesas y el logotipo. Puede personalizar el diseño del logotipo relacionado con el menú en los widgets responsivos.

Pila

En la opción de pila, el logotipo se moverá encima del menú de hamburguesas. Optar por la pila puede resultar útil si tienes un logotipo grande.

En línea

En la opción en línea, el logo y el menú estarán alineados entre sí y puede ser una buena opción en el caso de un logo pequeño.

Temas de color

Los encabezados principales se pueden presentar en varios colores usando el tema Astra. Los colores globales estarán disponibles de forma gratuita, pero deberá utilizar el plugin de Astra Pro para funciones más avanzadas. Para usar colores globales en Astra, debe ir a la pestaña Apariencia, seleccionar personalizar, luego global y finalmente elegir la opción de colores. Apariencia > Personalizar > Global > Colores

Tipografía

La configuración de tipografía para la página o sitio se aplica automáticamente al encabezado principal con Astra Theme. Puede seleccionar y personalizar la configuración de tipografía yendo a la pestaña Apariencia, en global.  

Apariencia > Personalizar > Global > Tipografía

Encabezado transparente

Los encabezados transparentes son una manera fácil de crear encabezados hermosos y atractivos para su página. El fondo del encabezado principal se configurará como transparente y llevará el contenido de la página a la parte superior. El contenido de la página y el encabezado principal se fusionarán, lo que significa que la parte superior del contenido se convertirá en el fondo del encabezado transparente. Por ejemplo, si la imagen está en la sección superior de la página, subirá y se convertirá en un fondo para el encabezado transparente.

¿Cómo agregar un encabezado transparente?

El encabezado transparente se formula en dos rápidos pasos para hacer que su página sea atractiva. 

Paso 1

Puede encontrar la opción de encabezado transparente en el personalizador y luego editarlo.

Apariencia > Personalizar > Encabezado > Encabezado transparente

Paso 2

En las opciones de encabezado transparente, puede habilitarlo para todo el sitio web, elegir el borde en la parte inferior, las combinaciones de colores y el diseño del logotipo.

Habilitación en sitio web completo

Si desea la configuración del encabezado transparente para todo el sitio web, puede habilitar esta opción marcando la casilla de verificación. Si marca la casilla de verificación, todavía hay algunas reglas de exclusión que puede habilitar para publicaciones o páginas específicas. Puede desactivar la opción de encabezado transparente para las siguientes páginas

Deshabilitar en Archivos, Búsqueda y 404

La configuración del encabezado transparente se puede desactivar en estas páginas especiales marcando la casilla de verificación.

Deshabilitar en la página de índice del blog

La página principal de su blog se convierte en la página de índice del blog si cambia la configuración desde su página de inicio. Para crear una página de índice de blog, puede ir a la configuración de la página de inicio y en la pestaña "Visualización de su página de inicio", elegir "Sus últimas publicaciones".

Visualización de su página de inicio > Sus últimas publicaciones

Si desea desactivar la configuración del encabezado transparente en la página de índice de este blog, puede marcar la casilla de verificación correspondiente.

Deshabilitar en páginas

Si desea desactivar la opción del encabezado transparente en todas las páginas, marque la casilla.

Deshabilitar en publicaciones

Si desea desactivar la opción del encabezado transparente en todas las publicaciones, marque la casilla de verificación.

Colores y fondo

Puede personalizar la configuración de fondo y color de su encabezado transparente con las siguientes opciones disponibles

  • Fondo
  • Título del sitio
  • Menú
  • Submenú
  • Contenido

Pros y contras de usar el tema Astra para encabezados

Ventajas

  • La oportunidad para el encabezado transparente está disponible
  • Los encabezados tanto de ancho completo como de contenido están disponibles
  • La personalización del color y la tipografía está disponible.

Contras

  • La opción de encabezado fijo no está disponible
  • Las funciones de color avanzadas no están disponibles

Ultimas palabras

Astra es uno de los mejores temas que existen. Y, si lo está utilizando, entonces está en el camino correcto para mantener su sitio.

El tema gratuito de Astra te permite diseñar encabezados hermosos y atractivos para tu página web. También están disponibles la opción y personalización de un encabezado transparente, que puede mejorar la experiencia del espectador. En general, muchas opciones de personalización del encabezado en el tema Astra le permiten crear un encabezado impresionante.

Ahmad

Ver comentarios

  • Bonjour, por favor comente con equidad y transparencia, pero solo comente sobre la base del plan azul hasta la fecha, justo en la parte superior de la página del menú... ¿Comentar los hechos?

  • Buen día,

    Muchas gracias por toda la información. Pourriez-vous por favor m'aider ?

    J'aimerai cééer ​​​​l'entête Astra Uniquement sur ma page d'accueil. Aquí está el post sobre los toutes en las páginas sobre el aucune... Comentar je peux faire?

    Mi sitio está actualizado y en mantenimiento de moda.

    Y vous remerciant par avance

    • Hola, la asignación del encabezado de Astra debe realizarse por página, en cada configuración de página. En el entorno de Astra es simplemente una asignación global.

Mensajes recientes

Cómo usar encabezados y pies de página con Elementor

Los encabezados y pies de página de un sitio web son elementos esenciales. En la mayoría de los casos, el encabezado proporciona navegación...

6 de enero de 2022

Comparación de temas de WordPress: Astra vs OceanWP

Dos de los temas de WordPress más populares del mercado son Astra y OceanWP. Profesional…

2 de enero de 2022

Comparación de temas de noticias de WordPress: periódico vs. Astra

Crear un excelente sitio web de noticias no requiere que te conviertas en diseñador web. Nosotros…

25 de octubre de 2021

Cree un sitio web relacionado con noticias con Newspaper Theme

El tema Periódico es uno de los temas de WordPress más importantes diseñados por tagDiv, un…

18 de octubre de 2021

Cómo construir un comercio electrónico con el constructor Avada WooCommerce

Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin ideal. Él…

4 de octubre de 2021

Cómo usar encabezados fijos y efectos de desplazamiento con Elementor

Un encabezado es generalmente lo primero que ve una persona cuando visita su sitio web,…

21 de septiembre de 2021