Resumen de IA
Recientemente, uno de nuestros lectores nos pidió instrucciones paso a paso sobre cómo editar la cabecera en WordPress, ya que no encontraba nada que le guiara desde cero.
Aunque esto es algo muy básico, pensamos que era una excelente oportunidad para ayudar a quienes se inician en su andadura con WordPress.
Qué editor uses depende del tema que ejecute tu sitio, así que esta guía cubre ambas rutas. Empezaré ayudándote a averiguar cuál tienes, y luego te guiaré a través de los cambios en sí.
- Cómo editar la cabecera en WordPress
- Paso 1: Accede al Editor del Sitio
- Paso 2: Añade el Logo de tu Sitio
- Paso 3: Añade el Título del Sitio
- Paso 4: Añade las Navegaciones de Página
- Paso 5: Cambia el Color de Fondo
- Paso 6: Añade Iconos Sociales y Botón de Llamada a la Acción (CTA)
- Cómo editar la cabecera en un tema clásico de WordPress
- Añade tu logo a las notificaciones por correo electrónico de WPForms
Cómo editar la cabecera en WordPress
Con la última versión de WordPress, puedes usar el Editor del Sitio interactivo y fácil de usar para personalizar y dar marca a tu sitio web y crear un encabezado personalizado fácilmente.
Dado que la mayoría de las nuevas instalaciones de WP vienen con el Tema Twenty Twenty-Four, el editor del sitio es bastante útil para varias personalizaciones del encabezado:
- Fuentes
- Colores
- Estilo del Botón
- Y más
Los temas creados antes de la era de los bloques te ofrecen el antiguo Personalizador de temas en lugar del Editor del sitio, y los controles de la cabecera se encuentran en un lugar completamente diferente.
¿Qué es una cabecera de WordPress?
Tu cabecera es la banda que recorre la parte superior de cada página de tu sitio, y normalmente contiene tu logotipo, el título de tu sitio y tu menú de navegación principal.
Como vive en una plantilla en lugar de en una página individual, editarla una vez la cambia en todas partes.
La sección de la cabeza es HTML invisible cerca de la parte superior de tu página que contiene etiquetas meta y scripts, mientras que un encabezado es un fragmento de texto dentro de tu contenido como un H1 o un H2.
Ambos se confunden constantemente con la cabecera, pero ninguno de los dos es lo que cambias cuando quieres un nuevo logotipo o un menú diferente.
¿Qué editor de cabecera utiliza tu tema?
Pasa el ratón por encima de Apariencia en tu panel de WordPress para averiguar cuál tienes. Una opción de Editor significa que tu tema es un tema de bloques, y todo a partir del Paso 1 te aplica.
Si la única opción que hay es Personalizar, estás en un tema clásico y la sección Personalizador más abajo es la que quieres.
Twenty Twenty-Five se envía con WordPress, y la mayoría de los temas de bloques gratuitos lanzados en los últimos años funcionan de la misma manera.
Sin embargo, los temas clásicos todavía están por todas partes, y los populares como Astra, GeneratePress, OceanWP y Kadence ejecutan sus cabeceras a través del Personalizador o de su propio panel de configuración.
Paso 1: Accede al Editor del Sitio
Desde tu Panel de WordPress, simplemente navega a Apariencia y luego haz clic en la opción Editor del menú.
Esto te redirigirá al Editor del Sitio, donde puedes personalizar la apariencia de tu sitio web usando el editor de bloques. Abre las opciones en Patrones.
Ahora, todo lo que tienes que hacer es desplazarte hacia abajo hasta que veas la sección Partes de Plantilla y luego hacer clic en Encabezado para abrir sus opciones.
En el lado derecho de la pantalla, haz clic en la imagen del Encabezado para abrir las opciones de personalización disponibles en el Editor del Sitio y haz clic en el icono de Editar.
Ahora serás redirigido al Editor de Bloques de WordPress, donde puedes empezar añadiendo tu logo, navegación, iconos sociales e incluso un botón de llamada a la acción (si es necesario).
Paso 2: Añade el Logo de tu Sitio
Una vez que estés en el Editor de Bloques para el Encabezado de tu sitio web, haz clic en el icono de Vista de Lista para que sea fácil saber qué elementos están incluidos en el encabezado de WordPress.
Expande todos los Bloques incluidos en la Vista de Lista, haz clic en el primer elemento de Fila y establece la Alineación a Ancho Completo para empezar a personalizar la plantilla del encabezado.
Ahora, todo lo que tienes que hacer es hacer clic en la opción Logo del Sitio en la Vista de Lista y hacer clic en el icono de Subir en la sección de vista previa del encabezado.
Puedes elegir subir tu logo a través de la pestaña Subir Archivos, o simplemente seleccionar el archivo de tu Biblioteca de Medios existente.
Si es necesario, puedes usar los Puntos de Redimensionamiento para cambiar las dimensiones y el tamaño del logo del sitio, según tus necesidades o requisitos específicos.
¡Buen trabajo! Eso es todo lo que necesitas hacer para subir el Logo de tu Sitio al encabezado. ¡Ahora, pasemos al siguiente paso de añadir el Título de tu Sitio!
Paso 3: Añade el Título del Sitio
Añadir el Título del Sitio en el encabezado de tu sitio web es igual de simple que subir el Logo de tu Sitio en el tema de WordPress. Simplemente haz clic en Título del Sitio desde la Vista de Lista.
Luego, de forma similar a como cambiamos el logo del sitio anteriormente, haz clic en el bloque que dice "Escribe el título del sitio..." y añade tu Título del Sitio dentro de él.
Como puedes ver, el encabezado de tu tema está empezando a tomar forma lentamente. Para el siguiente paso, vamos a añadir algunos elementos de navegación a tu encabezado.
Paso 4: Añade las Navegaciones de Página
Para añadir tus páginas al encabezado, simplemente haz clic en Navegación desde la Vista de lista, y luego haz clic en la opción Editar de su bloque.
Esto te llevará a la página dedicada del editor de bloques para el elemento Navegación, donde puedes añadir nuevas páginas y sus enlaces a través del icono Más.
Esto completará el aspecto de tu encabezado, pero como puedes ver, ¡parece demasiado simple y hay mucho margen de mejora!
Añadamos ahora un poco de estilo a tu encabezado para que tenga un aspecto más atractivo y coincida con los tonos de color de tu sitio web.
Paso 5: Cambia el Color de Fondo
Una de las modificaciones más básicas que puedes hacer en el encabezado es cambiar su color de fondo. Para ello, haz clic en la primera Fila y abre su Configuración.
Ahora podrás ver las opciones de Bloque para la Fila seleccionada. Todo lo que tienes que hacer ahora es hacer clic en el icono Estilos junto al icono del engranaje (configuración).
Esto abrirá numerosas opciones para la Fila seleccionada, donde puedes modificar el Color, la Imagen de fondo, la Tipografía y las Dimensiones.
Puedes explorar estas opciones para que tu encabezado tenga un aspecto más atractivo. Como solo necesitábamos cambiar el color, seleccionamos blanco para el Texto y negro para el Fondo.
Como puedes ver, el encabezado en el front-end se ve mucho mejor ahora y le da al sitio web un aspecto más completo.
¿Quieres hacer más modificaciones en el encabezado, como insertar algunos iconos de redes sociales y un botón de llamada a la acción? ¡Bueno, el proceso es simple!
Paso 6: Añade Iconos Sociales y Botón de Llamada a la Acción (CTA)
Para añadir iconos de redes sociales y un botón de llamada a la acción, necesitarás añadir una nueva Fila. Haz clic en el icono Más (+) y selecciona el bloque Fila.
A continuación, arrastra el bloque Fila recién añadido por encima de la fila existente para que puedas personalizarlo libremente sin afectar al encabezado existente.
Después de eso, haz clic en el botón (+) dentro de la nueva Fila y busca y selecciona el bloque Iconos de redes sociales.
De forma similar a como añadimos páginas en la Navegación, haz clic en el botón (+) para insertar Widgets de redes sociales para las plataformas que prefieras.
Una vez hecho esto, selecciona de nuevo la Fila desde la Vista de lista y haz clic de nuevo en el botón (+) para añadir un bloque Botón a tu encabezado.
Todo lo que tienes que hacer ahora es ponerle a tu botón un texto como "¡Reserva ahora!" y actualizar su Enlace para configurar una redirección para los visitantes del sitio web.
Para que todo encaje, selecciona de nuevo la Fila y establece la Alineación en Ancho completo como hicimos con la primera fila.
Luego, para darle a esta sección un aspecto más atractivo, utiliza el menú Cambiar justificación de elementos y selecciona la opción Justificar elementos a la derecha.
¡Y ahí lo tienes! Tu encabezado ahora está completo y se ve perfecto. Simplemente haz clic en el botón Guardar en la parte superior para evitar perder cualquier cambio.
Cómo editar la cabecera en un tema clásico de WordPress
Los temas clásicos enrutan los cambios de cabecera a través del Personalizador de temas, que es un panel de vista previa en vivo en lugar de un lienzo de bloques.
Ve a Apariencia » Personalizar y obtendrás tu sitio a la derecha con una barra lateral de configuración a la izquierda. La mayoría de lo que necesitas se encuentra en tres o cuatro paneles de esa barra lateral:
- Identidad del sitio: Tu logotipo, título del sitio y eslogan, normalmente lo primero que se configura
- Menús: Qué páginas aparecen en tu navegación y en qué orden
- Colores: Los colores de fondo y de texto de la cabecera
- Imagen de cabecera: Un banner detrás de toda la banda, ofrecido por muchos temas pero no por todos
Astra pone casi todo bajo Constructor de cabecera, GeneratePress usa Diseño » Cabecera, y OceanWP divide sus opciones entre Cabecera y Tipografía, por lo que los nombres exactos de los paneles cambian de un tema a otro.
Si no encuentras un control, haz clic directamente en la cabecera en la vista previa en vivo, ya que la mayoría de los temas te saltarán al panel correspondiente.
Los temas premium a veces mantienen sus mejores opciones de cabecera fuera del Personalizador por completo y las ponen en un menú dedicado de nivel superior en su lugar. Busca un elemento de menú con el nombre de tu tema antes de asumir que falta una función.
El personalizador gestiona tu pie de página desde el mismo panel, por lo que es un buen momento para añadir un formulario de contacto a tu pie de página mientras estás en ello. Nada sale en vivo hasta que pulses Publicar en la parte superior de la barra lateral.
Añade tu logo al encabezado de correo electrónico en WordPress
Considera añadir tu logo a un encabezado de correo electrónico para añadir una marca coherente que también se traslade a los correos electrónicos que se envían desde tu sitio web de WordPress.
Es fácil cambiar cómo funcionan las Notificaciones por Correo Electrónico en WPForms. Primero, ve a WPForms » Ajustes y haz clic en la pestaña Correo Electrónico.
Elige cualquier estilo que mejor se adapte a tu marca en la sección Plantilla y pulsa el botón Elegir para aplicarlo.
Después de eso, para agregar el logo de tu sitio a los correos electrónicos, navega a la sección Imagen del Encabezado y haz clic en el botón Subir Imagen.
Una vez que hayas subido tu imagen, selecciona el tamaño deseado para la imagen que se utilizará en tus notificaciones por correo electrónico desde un menú desplegable.
A continuación, simplemente haz clic en el enlace Vista previa de la plantilla de correo electrónico ubicado debajo del menú desplegable de Tipografía.
¡Se abrirá una nueva pestaña en tu navegador donde podrás ver una vista previa de tu plantilla de correo electrónico de notificación con el logo de tu sitio!
Preguntas frecuentes sobre la edición del encabezado en WordPress
Aprender a editar el encabezado en WordPress es un tema popular entre nuestros lectores. Aquí tienes respuestas a algunas preguntas comunes al respecto.
¿Cómo personalizo mi encabezado en WordPress?
Para personalizar tu encabezado en WordPress, navega a tu panel de control y ve a Apariencia » Personalizar. Aquí encontrarás la sección Encabezado. Haz clic en ella para explorar varias opciones, como cambiar el logo, ajustar el diseño del encabezado, colores y otros elementos. Algunos temas ofrecen opciones de encabezado adicionales para ajustar y que coincidan con tu estilo.
¿Cómo edito los botones del encabezado en WordPress?
La edición de los botones del encabezado en WordPress generalmente implica acceder al Personalizador a través de Apariencia » Personalizar. Una vez allí, busca la configuración de Encabezado o Menú. Puedes editar botones cambiando su texto, enlaces y estilos o añadiendo nuevos elementos si tu tema lo soporta. Si es necesario, también puedes añadir código personalizado para editar los botones del encabezado.
¿Cómo edito el logo de la cabecera en WordPress?
En un tema de bloques, abre Apariencia » Editor, edita la parte de la plantilla Encabezado, luego selecciona el bloque Logo del sitio y sube tu imagen. En un tema clásico, ve a Apariencia » Personalizar » Identidad del sitio y usa el botón Seleccionar logo. Ambas rutas establecen el logo en todo el sitio, por lo que solo tienes que hacerlo una vez.
¿Puedo hacer que mi cabecera de WordPress sea fija?
Selecciona el bloque Grupo más externo que envuelve tu parte de plantilla Encabezado y establece su Posición a Fijo en la barra lateral de configuración de bloques, lo que funciona en cualquier tema de bloques sin necesidad de un plugin. Los temas clásicos suelen incluir un interruptor de encabezado fijo en su propio panel de opciones y, si el tuyo no lo tiene, un plugin de encabezado fijo hará el trabajo.
¿Puedo editar la cabecera de WordPress sin programar?
Todo en esta guía se realiza a través del administrador de WordPress sin ningún código, ya sea que estés usando el Editor del Sitio o el Personalizador. Editar directamente el archivo header.php es una opción para desarrolladores que necesitan cambios a nivel de marcado. Esa ruta implica trabajar en un tema hijo para que una actualización del tema no borre tus cambios, y casi nada de lo que un propietario de sitio típico quiere de un encabezado lo requiere.
¿Cuál es la diferencia entre una cabecera de WordPress y un encabezado?
Una cabecera es el área de plantilla en la parte superior de tu sitio que contiene tu logo y navegación en cada página. Un encabezado es una sola línea de texto dentro de tu contenido, marcada como H1 a H6, que divide un artículo en secciones. Cambiar tu cabecera afecta a todo el sitio, mientras que cambiar un encabezado solo afecta a la página en la que se encuentra.
A continuación, aprende cómo crear un formulario de varios pasos en Elementor
¿Alguna vez te has preguntado cómo aumentar la participación de los usuarios y la generación de leads en tu sitio web con un formulario de varios pasos de Elementor? Estos formularios guían a los usuarios a través del proceso paso a paso, haciéndolo menos abrumador y más fácil de usar.
Crea tu formulario de WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y X (Twitter) para más tutoriales y guías gratuitas de WordPress.
