¿Ves al tipo sonriente, «WP Buffs» (nuestro logo en otras palabras) y las opciones de navegación sobre esta publicación de blog? Este es el encabezado de nuestro sitio de WordPress. Es un elemento universal que estará en cada página y publicación de su sitio y, a menudo, sirve como la primera impresión de su visitante. No importa si su sitio es un blog, una tienda en línea, una cartera digital o algo completamente diferente: el encabezado de WordPress es extremadamente importante.
Si bien mantener su sitio web 99.9% seguro y lograr tiempos de carga de menos de 1 segundo es vital, su encabezado es lo primero que la gente ve cuando aterriza en su sitio. Asegurarse de que da a sus visitantes una buena primera impresión es la clave para ganar confianza y tener éxito.
Los nuevos temas predeterminados de WordPress pueden ofrecer hermosas imágenes de encabezado para elegir. El tema Twenty Seventeen incluso tiene un video destacado en su página de inicio. Pero si desea que su sitio web se destaque, debe poder crear su propio encabezado personalizado de WordPress. Si bien hay muchos excelentes tutoriales de WordPress, algunos se centran solo en el encabezado. Para ayudarlo, hemos reunido una lista de formas de personalizar los encabezados de WordPress.
1. Imagen personalizada de encabezado de WordPress
Muchos temas predeterminados en WordPress le permiten cargar su propia imagen de encabezado de WordPress personalizada. Sin embargo, deben ser de una dimensión o tamaño particular para que funcionen bien. Los temas más nuevos le permiten cambiar el tamaño, rotar y recortar su imagen de encabezado y logotipo, pero aún puede haber limitaciones.
Esto es lo que recomendamos. Usando nuestro propio sitio como ejemplo, supongamos que desea utilizar este gráfico de fondo para su encabezado. Puede descargar casi cualquier imagen en un sitio haciendo clic derecho sobre él. Recibirá un mensaje pidiéndole que «Guardar imagen como». Una vez que haya descargado la imagen del encabezado en su propio sitio, puede obtener sus dimensiones. De esta manera, puede cambiar el tamaño de su propia imagen preferida para que se ajuste a las especificaciones de una imagen de encabezado de WordPress personalizada.
¿Qué sucede si la imagen de encabezado de WordPress personalizada no se descarga?
Algunas imágenes y logotipos están ocultos en el código del sitio web y no ofrecen la opción de guardar mediante el método anterior. ¡Nuestra imagen de cabecera en realidad cae en esta categoría! Sin embargo, hay una manera de obtenerlos. Usando la misma imagen de nuestro sitio y Safari, haga clic derecho en la imagen nuevamente. Obtendrá una opción para «Inspeccionar». Una vez que haga clic en él, su navegador abrirá un panel y resaltará el elemento seleccionado para su inspección. Básicamente, puedes ver cómo se agregó la imagen. Lo que realmente desea es encontrar una URL o hipervínculo que termine en un formato de imagen. Los más comunes son .jpg y .png, pero hay otros. Simplemente copie este enlace y péguelo en una nueva ventana. Ahora podrá guardar la imagen como se describió anteriormente.
¿Todavía no está seguro de qué tamaño es mejor para una imagen de encabezado de WordPress personalizada? Si está optimizando su imagen para mostrarla en computadoras de escritorio o portátiles, debe usar una imagen que tenga 1920 píxeles de ancho. Si su sitio solo debe ser visto por un dispositivo móvil, debe usar una imagen de 480 píxeles de ancho. Obtener estas dimensiones correctas asegurará que sus imágenes de encabezado se carguen rápidamente para sus visitantes.
Imagen de encabezado de WordPress personalizada para cada página
¿Qué sucede si desea una imagen de encabezado o color de logotipo diferente para cada página en su sitio de WordPress? Puede usar un complemento de encabezado personalizado gratuito de WordPress como WP Header Images. Le permite agregar sus propias imágenes de encabezado personalizadas de WordPress a cada página web. También puede agregar imágenes de encabezado personalizadas para publicaciones de blog, publicaciones personalizadas e incluso productos de WooCommerce.
Simplemente instale el complemento y vaya a Configuración> Imágenes de encabezado WP. Luego, extraerá las opciones de navegación del menú. Simplemente elija la imagen que le gustaría ir con cada página. También puede ver un video tutorial del creador en YouTube.
Actualización de contenido
Lista de verificación de seguridad gratuita de WordPress
(4 páginas) La lista de verificación de 21 pasos para
Asegure un sitio web seguro de WordPress al 99.9%
Descargar
2. Usando un encabezado personalizado WordPress Plugin
Para obtener aún más control de su encabezado de WordPress, considere usar un complemento de WordPress de encabezado personalizado premium como Popping Sidebars & Widgets. Te da la opción de crear widgets o una pequeña caja que contiene una sección específica. Pueden incluir texto, un formulario, opciones de redes sociales y más. Sin embargo, este complemento le permite agregar estos widgets al encabezado.
Puedes elegir pasar tu encabezado original o incluso publicar tus widgets sobre él. El complemento también funciona para dispositivos móviles. Los widgets pueden verse en su elección de una página, plantilla, publicación, categoría, etiqueta, WooCommerce, BuddyPress e incluso idiomas WPML. Este complemento también le permite publicar widgets en su barra lateral o pie de página.
3. Cómo Editar Encabezado en Temas de WordPress Usando Código
Todos los encabezados de WordPress en los temas tienen configuraciones predeterminadas hechas a través del código que viene con ellos. Sin embargo, pueden editarse si no tiene miedo de copiar y pegar un poco mientras codifica. Para encontrar el archivo que contiene su encabezado, vaya a su panel de WordPress. Luego ve a Apariencia> Editor. Ahora verá los archivos que componen su sitio. El encabezado está contenido dentro del archivo nombrado como subrayado en la captura de pantalla siguiente. Este archivo contiene principalmente las funciones del encabezado de WordPress, que no veremos aquí.
El archivo marcado es el que desea. Puede buscar la palabra «encabezado» en el archivo para ver cuáles son las configuraciones actualmente. NOTA IMPORTANTE: COPIE Y PEGUE SU ARCHIVO ORIGINAL EN UN PROGRAMA COMO UN NOTEPAD ANTES DE SEGUIR SI ELIGE EDITAR LOS ARCHIVOS ENCONTRADOS APARIENCIA> EDITOR.
Pero lo que realmente queremos es editar el encabezado en su tema de WordPress. Una de las mejores cosas de WordPress es que cada vez más temas tienen una especie de personalizador en vivo. Estos le permiten editar su sitio en un panel izquierdo mientras visualiza sus cambios antes de guardar. Muchos de estos ofrecen una opción de CSS personalizada. Puede copiar y pegar muchas ediciones aquí usando algo como:
. encabezado {
fondo: blanco;}
Esto cambiaría el color de fondo del encabezado a blanco. También se puede usar un color hexadecimal.
Más comandos para personalizar el encabezado de WordPress
También puede agregar una tonelada de otros comandos reemplazando «background: white;» o agregando una línea debajo de ella. Estos incluyen, pero no se limitan a:
- fuente: cursiva; – Cambia el estilo de fuente a cursiva.
- opacidad de fondo: .5; Cambia la opacidad del fondo. 0 es para un fondo completamente transparente. 1 es para uno que no es transparente en absoluto.
- tamaño de fuente: 20px; Cambia el tamaño de fuente en el encabezado a 20 píxeles. Puede cambiar 20 a cualquier número que elija.
- acolchado: 20px; – Cambia el relleno, o espacio alrededor del encabezado, a 20 píxeles. Como arriba, puedes cambiar 20 a lo que quieras. También puede especificar a qué lado debe ir el relleno solo agregando «-left» a «padding». También funciona para arriba, abajo y derecha.
- borde: 20px – Esto crea un borde alrededor del encabezado que tiene 20 píxeles de ancho. Como en lo anterior, también puede agregar un guión y un lado para crear un borde solo para la parte superior, inferior, izquierda o derecha.
- color del borde: blanco; – Esto cambiará el color de su borde a blanco. También puedes usar un color hexadecimal.
- altura de línea: 20 px; – Esto establece el espacio para que coincida con el tamaño de su fuente. Puede ser útil si está utilizando una fuente más grande y se superpone en los saltos de línea.
Si su nuevo código no funciona, intente agregar «! Important» al final del comando, como en «padding-left: 0! Important;». Si esto todavía no funciona, es posible que su encabezado no se denomine «encabezado». Algunos temas de WordPress usan otros nombres para sus encabezados. Estos incluyen masthead, encabezado en línea y otros.
4. Cambiar el encabezado de WordPress usando las mejores prácticas
Ahora que sabe cómo personalizar los encabezados de WordPress, necesitará un gran diseño para hacerlo. Las fotos blandas no siempre lo hacen. Un gran consejo es usar una ilustración. Estos son excelentes para llamar la atención y atraer a su visitante. El siguiente sitio es un gran ejemplo de esto. Incluso eliminaron todos los demás elementos del encabezado de WordPress y movieron el menú a la barra lateral. También es genial porque incorporan un fondo coincidente para que parezca que el sitio es una gran ilustración.
Al elegir imágenes y logotipos, use los que se relacionen con usted o su negocio. Sí, las flores son bonitas, pero si no eres florista pueden ser engañosas. Si es posible, use una imagen / logotipo de su propio trabajo, que puede ser excelente para fotógrafos e ilustradores. Incluso los constructores, las empresas industriales y otras corporaciones pueden usar una imagen de uno de sus propios productos.
Incluso puede usar una imagen de stock e incorporar sus propios elementos como en el sitio a continuación. Inteligentemente ponen su nombre en una etiqueta sobre las cortinas que se abren. Esta sería una gran idea para un teatro, actor o cualquier tipo de músico.
5. BONIFICACIÓN: ejemplos de encabezados personalizados de WordPress
Echa un vistazo a las opciones de este blogger para 14 diseños artísticos de encabezado de WordPress. Hay algunos ejemplos sorprendentes aquí. Si bien algunos de ellos pueden no ser ideales para alguien que acaba de comenzar con WordPress, son excelentes para mostrarle a un diseñador lo que le gustaría.
Este encabezado es un gran ejemplo de un artista que utiliza su propio trabajo, complementado con un banner con un CTA claro.
A pesar de que este encabezado personalizado de WordPress está más pasado de moda, la combinación de flores tradicionales y elementos espaciales modernos lo hace destacar.
Observe cómo parece que el robot está hablando en el menú en este encabezado,
Envolviendolo
Si bien no hay dos encabezados de WordPress que sean iguales, todos deben tener un propósito similar. Deben mostrar a los visitantes de qué trata su sitio. Los encabezados deben tener un punto claro. Deben mezclarse con el resto del sitio. Los encabezados no deben estar llenos de demasiadas indicaciones, ventanas emergentes, etc.
Si necesita ayuda para personalizar su encabezado o desea aprovechar al máximo su sitio de WordPress, contáctenos para ver cómo podemos ayudarlo. También puede suscribirse a nuestro boletín para obtener nuestros increíbles consejos.
SaveSave
SaveSaveSaveSave
SaveSave
SaveSave
Tabla de contenidos
