¿Su sitio web parece lo suficientemente atractivo para los visitantes? ¡O es sólo un sitio web normal entre millones de otros! ¿Desea que su sitio web destaque entre los demás? ¿Quiere que cada página de su sitio se vea distinta con una sensación diferente? ¿Y si le digo que la clave para la solución de todos estos problemas está en sus propias manos? Y esa clave es: ¡cabecera personalizada! Sí, has leído bien. Veamos cómo…

Un encabezado es el elemento visual más importante de su sitio que ocupa la posición más alta. Es lo primero que ve un visitante cada vez que aterriza en tu web. El encabezado de su sitio es la identidad de su sitio web que permanece igual en todas las páginas del sitio. Puede utilizarlo para causar un buen impacto duradero en la mente del visitante. Usted puede destacarse y ganar la confianza del usuario mediante la creación de notables encabezados personalizados. Una cabecera personalizada en WordPress es una característica que le permite personalizar la imagen de la cabecera junto con la adición de texto, widget, etc. a la misma. También puede ajustar estos elementos según su necesidad para presentar la mejor imagen de su sitio web. Aquí en Templatetoaster software constructor de sitios web, comprobar cómo crear cabecera personalizada con WordPress tema builder.

WordPress Custom Header: ¿Por qué necesita realmente uno?

La cabecera es uno de los elementos más importantes de su sitio web. Es un gesto que transmite mucho sobre su sitio. Por lo general, contiene una imagen o un vídeo para captar la atención del visitante. Según el grupo Nielsen Norman, un visitante sólo permanece entre 10 y 20 segundos en su sitio web. Por lo tanto, la cabecera debe ser atractiva para interesarlos.

Una cabecera personalizada en WordPress te da más control y flexibilidad. Puedes rotar, redimensionar o recortar una imagen de cabecera además de reposicionar el logo, el texto o los widgets. Puedes diseñarlo para contrastar el aspecto de tu sitio web. Tienes que utilizarlo como una propuesta al público objetivo. Intenta citar tu eslogan en la cabecera personalizada en WordPress. Ya que no puedes tener una segunda oportunidad para causar una buena primera impresión. Un encabezado bien estructurado debe responder por qué eres único, qué es todo lo que tu sitio presenta, etc.

Así que, un encabezado personalizado es importante ya que funciona como una cara de tu sitio web. Debe ser capaz de comunicar el quid y el estado de ánimo de su sitio a la audiencia. Usted puede tener una cabecera personalizada de WordPress diferente por página. Por ejemplo, puede añadir las características de su producto en la cabecera de la página Acerca de nosotros y el resto de las páginas sin características. Puede funcionar de maravilla!

¿Cómo añadir una cabecera personalizada a WordPress?

Los temas por defecto de WordPress le permiten utilizar cabeceras personalizadas. Usted puede poner sus propias imágenes de cabecera personalizada según sus preferencias. La configuración de una imagen de cabecera personalizada de WordPress requiere algunos esfuerzos. Básicamente implica dos pasos para añadir un encabezado personalizado a los temas predeterminados de WordPress como sigue

1. Fuente y editar su imagen

En primer lugar, seleccione una imagen atractiva. Debe ser simple y única. Puedes conseguir muchas imágenes gratuitas en Internet. Para más detalles, puedes leer sobre 16 sitios web para conseguir imágenes gratuitas. Una vez que haya obtenido su imagen de cabecera, sólo le queda editarla.

Puede utilizar algunas de las útiles herramientas de edición de escritorio o de edición gratuita basadas en la web. Puede rejuvenecer la imagen elegida con GIMP, paint.net, etc. GIMP es un software de edición de imágenes gratuito y de código abierto. Te proporciona muchas herramientas sofisticadas para dar un toque especial a tu imagen. Mientras que paint.net facilita herramientas de edición de imágenes en Windows. Consigue tu imagen de cabecera personalizada de WordPress.

2. Sube la cabecera personalizada

Para subir la imagen de cabecera, entra en tu panel de control de WordPress. Desde el panel izquierdo, navega a Apariencia → Encabezado.

Se abrirá un panel de Medios de Encabezado a la izquierda de la pantalla. Vaya a Imagen de cabecera y haga clic en el botón Añadir nueva imagen.

Se abrirá la galería de imágenes para elegir la imagen. También puede buscar su imagen personalizada aquí. Seleccione la imagen, recórtela si es necesario. Establecerlo como la imagen de cabecera personalizada. Ya está hecho.

¿Cómo personalizar la cabecera en WordPress?

Una vez que suba la imagen de cabecera personalizada del tema de WordPress, puede editarla para aplicar vídeo, texto, widgets, iconos sociales, etc. Usted puede utilizar cualquier tema de WordPress por defecto. Aquí, usted obtendrá el código de ejemplo para editar el encabezado personalizado en el tema Twenty Seventeen.

1. Añadir un área de texto a la cabecera

Con el tema por defecto, sólo puede cambiar el título del sitio web. Pero para añadir un área de texto, tienes que escribir algún código en el archivo header-image.php. Añadirás el siguiente código para obtener un área de texto en la cabecera

Después de añadir este código, verás un área de texto separada en la cabecera como se muestra a continuación

2. Añadir iconos sociales

Para añadir iconos sociales a la cabecera, añadirás el siguiente código a site-branding.php después de la clase wrap.

También tienes que dar CSS si quieres dar estilo a los iconos sociales en tu propio estilo único.

Te dará los resultados requeridos como se muestra

3. Añadir un Widget a la Cabecera

Si quieres algunos widgets para presentar tu sitio web, definirás una función en el archivo function.php. Puedes añadir este código al final del archivo.

Una vez que lo hayas hecho, añadirás este código HTML al archivo header-image.php para mostrar el widget específico en el frontend.

Ahora, te moverás a Apariencia → Widgets. Desde aquí, puedes añadir cualquier widget a tu posición de cabecera personalizada. Por ejemplo, el widget de Búsqueda se añade simplemente arrastrándolo a la posición de Encabezado Personalizado.

El encabezado resultante se verá algo así

4. Reposicionar el Logotipo

Puedes añadir un logotipo a las opciones predeterminadas de WordPress. Navega hasta Apariencia → Cabecera → Medios de cabecera → Sección de logotipos. Aquí, establece un logotipo haciendo clic en la opción Seleccionar logotipo.

Pero para reposicionarlo, necesitas escribir CSS adicional. En el tema Twenty Seventeen, obtendrás un logotipo en la posición inferior izquierda por defecto como se muestra a continuación

Aquí, verás un ejemplo de CSS para añadir el logotipo a la posición central. Del mismo modo, puede establecerlo en cualquier lugar de la cabecera.

.custom-logo-link {padding-right: 2em;position: absolute;left: 500px;top: 0px;}

5. Añadir vídeo a la cabecera

Por último, también puedes añadir un vídeo a tu cabecera de WordPress. Afortunadamente, no hay necesidad de añadir código para esto. WordPress le proporciona una opción por defecto para añadir vídeo o imagen de fondo.

Para añadir vídeo a la cabecera, navegue hasta Apariencia → Cabecera → Medios de cabecera → Vídeo de cabecera. Aquí, usted hará clic en el botón Seleccionar vídeo como se muestra a continuación. A continuación, puede buscar el vídeo que desee en la cabecera desde su ordenador. Alternativamente, también puede dar la URL del video si está en línea. Simplemente publíquelo.

Su video de cabecera se verá así

De manera similar, puede agregar una imagen de cabecera de fondo seleccionando cualquier imagen de cabecera de la sección de medios de cabecera.

Puede tener diferentes cabeceras personalizadas de WordPress por página, digamos algunas con una imagen de fondo, otras con video o widgets, etc. Todo depende de su elección y creatividad.

¿Cómo crear un encabezado personalizado en WordPress desde cero con TemplateToaster?

Debe tener un buen conocimiento de PHP, HTML, CSS para trabajar con archivos de plantilla. Si usted es un principiante y no sabe cómo escribir código, puede confiar en TemplateToaster WordPress Theme Builder. Usted no necesita ninguna codificación para crear una plantilla de cabecera personalizada de WordPress. Sólo unos pocos clics para arrastrar & interfaz de la gota y usted está listo con su cabecera personalizada. Veamos cómo añadir cabecera personalizada a WordPress con TemplateToaster

En primer lugar, descargue e instale el constructor de sitios web TemplateToaster. Después de instalarlo con éxito, obtendrá la pantalla de selección de CMS como se muestra a continuación. Seleccione el WordPress aquí

Entonces, obtendrá la siguiente pantalla para crear una plantilla desde cero o utilizar una plantilla de ejemplo. Usted seleccionará Start from Scratch y haga clic en Modify.

Entonces, usted será redirigido a la interfaz principal del software desde donde se puede empezar a diseñar su cabecera personalizada.

1. Encabezado personalizado de ancho completo

Obtendrá la pantalla de la interfaz principal del software como se muestra a continuación. Desde aquí, puede establecer un encabezado de ancho completo. Vaya a Encabezado → Ancho → Ancho completo.

2. Reposicionar el logotipo

Desde la pestaña Encabezado, haga clic en la opción Logo. Se abrirá una galería de iconos de logotipos. Puede seleccionar una imagen de logotipo de la biblioteca de muestras o puede buscar su propia imagen personalizada. Se establecerá el logotipo.

Cuando haga doble clic en la imagen del logotipo, se abrirá una pestaña de Formato como se muestra a continuación. Desde aquí, puede dar un enlace a la imagen del logotipo o establecer su posición. Puede reposicionarla dando posiciones personalizadas a la izquierda y arriba o seleccionar un atajo de posición. Por ejemplo, aquí se ha seleccionado una posición vertical-central para el logotipo.

3. Añadir imagen de fondo

Seleccionará la opción Fondo de la pestaña Encabezado para establecer una imagen de fondo del encabezado. Se abrirá una galería de imágenes. También puede buscar su propia imagen de cabecera personalizada desde la opción Más imágenes.

De forma similar, puede añadir una imagen de cabecera de primer plano haciendo clic en la opción Imagen de la pestaña Cabecera.

4. Añadir área de texto a la cabecera

Si desea mostrar el eslogan e información relevante en la cabecera, puede utilizar un área de texto. En el área de texto, puede añadir texto plano, botón, lista, etc. Haga clic en la opción Áreas de texto.

Añada contenido y estilo haciendo doble clic. Como un doble clic se abrirá una pestaña Editor para editar el contenido.

5. Añadir widget a la cabecera

Puede añadir un área de widget a la cabecera con un solo clic. Vaya a la pestaña Áreas de widgets y haga clic en la opción Áreas de widgets → Cabecera. También puede establecer la tipografía para este widget y puede reposicionarlo en cualquier lugar de la cabecera con solo arrastrarlo. Puedes añadirle contenido después de exportarlo.

6. Añadir iconos sociales a la cabecera

Añadir iconos de redes sociales a la cabecera es realmente sencillo. Desde la pestaña Encabezado, haz clic en la opción Iconos Sociales. Se abrirá una galería de iconos sociales para seleccionar una imagen según su necesidad. También puede buscar su icono personalizado aquí.

Todos los iconos de medios sociales están disponibles aquí. Usted puede mantener los iconos de acuerdo a su requisito. Usted pone los iconos de medios sociales en Facebook, Twitter y Google + aquí.

7. Añadir vídeo a la cabecera

Para añadir un vídeo, haga clic en la opción Añadir vídeo. Desde aquí, puedes subir fácilmente un video de fondo de cabecera.

Palabras finales

Ahora, has aprendido sobre cómo crear un encabezado personalizado en WordPress. Definitivamente va a cambiar la perspectiva de su sitio web. La solución que se opta es totalmente su elección. Esperemos que te haya gustado el post. Si tienes dudas, puedes publicarlas en la sección de comentarios más abajo.

Lectura relacionada: Tutorial de WordPress 101

Mejores proveedores de hosting para WordPress

Cómo comprobar la versión de WordPress

Cómo encontrar la url de inicio de sesión de WordPress

Cómo instalar WordPress

Qué tema de WordPress es que

Cómo cambiar el idioma de WordPress

Cómo crear la página de inicio de sesión personalizada de WordPress

Cómo crear el tema de WordPress desde cero

Cómo arreglar la actualización de la página de WordPress no funciona

.