✅Cómo Crear una Cabecera Completamente Personalizada con Blocksy

Una de las cosas que más me gusta de Blocksy —y créeme que lo uso en casi todos mis proyectos— es su constructor de cabeceras. No estamos hablando de un simple menú editable, sino de una herramienta completa que te permite diseñar tu cabecera por bloques, como si fuera un layout visual, con una flexibilidad que muy pocos temas ofrecen.

Y si además usas la versión Pro, se abre un mundo de posibilidades extra como la duplicación de elementos o condiciones avanzadas para mostrar cabeceras distintas según la página o el usuario.

Un constructor visual, real y práctico

El editor de cabeceras de Blocksy funciona con un sistema de filas y columnas que puedes reorganizar libremente. Puedes crear hasta tres filas (top, main y bottom) y asignar elementos distintos en cada una. Esto te permite tener, por ejemplo:

• Una franja superior con redes sociales y datos de contacto
• Un menú principal con tu logo al centro y botones a los lados
• Una fila inferior con un buscador o categorías destacadas

Todo esto se gestiona desde el personalizador, sin necesidad de instalar plugins extra ni escribir una línea de código.

Elementos disponibles en la cabecera

Blocksy viene con una lista muy completa de elementos que puedes arrastrar y soltar en tu cabecera. Aquí te dejo algunos de los más útiles:

• Logo: por supuesto, puedes personalizar su tamaño, alineación y versión para móviles.
• Menú: puedes crear menús separados para escritorio y móvil, y decidir cómo se despliegan.
• Botón: ideal para llamadas a la acción como “Contactar” o “Empezar ahora”.
• Carrito: para tiendas con WooCommerce, puedes mostrar el icono del carrito directamente en la cabecera.
• Cuenta de usuario: muestra el login o perfil del usuario con diseño moderno.
• Buscador y caja de búsqueda: dos variantes para integrar la búsqueda fácilmente.
• Divisor: separadores visuales para mejorar la estructura y estética.
• Redes sociales: íconos con enlaces personalizables.
• Código HTML: para insertar lo que necesites (scripts, shortcodes, etc.).
• Selector de idioma: perfecto si usas un plugin multilingüe como TranslatePress o WPML.
• Comparador y wishlist: si usas funcionalidades avanzadas de tienda.
• Área de widgets: puedes colocar cualquier widget de WordPress directamente en la cabecera.
• Color Switch: un botón que permite cambiar el esquema de color de la web en tiempo real.
• Trigger de menú móvil: esencial para diseño responsive.

¿Qué puedes hacer con todos estos elementos?

Básicamente, crear una cabecera 100% adaptada a tu tipo de web. ¿Tienda online? Pon carrito, cuenta y wishlist bien visibles. ¿Blog personal? Usa una cabecera simple con buscador y redes. ¿Web de cursos? Añade llamadas a la acción y login de usuario en la parte superior.

Y lo mejor: puedes ver en tiempo real cómo queda, ajustar márgenes, colores, iconos y tipografías directamente desde el personalizador.

Duplicar elementos con Blocksy Pro

Aquí viene una de las funciones exclusivas de Blocksy Pro que marca la diferencia: puedes duplicar ciertos elementos del header para usarlos más de una vez, cada uno con su propia configuración.

Por ejemplo:

• Puedes tener dos botones distintos con estilos diferentes (uno en el top bar, otro en el menú principal).
• Puedes mostrar el icono del carrito tanto en escritorio como en móvil, con configuraciones específicas.
• Puedes tener dos menús diferentes activos al mismo tiempo, cada uno en una fila distinta.

Esto te da una libertad brutal para construir cabeceras dinámicas, adaptadas a dispositivos o a distintos contextos de navegación.

¿Y si quiero una cabecera distinta en cada página?

Otra función Pro: puedes crear cabeceras condicionales. Por ejemplo:

• Una cabecera minimalista para tus landing pages.
• Una cabecera con buscador solo en el blog.
• Una cabecera con botón de login solo para usuarios no registrados.

Esto se gestiona desde “Blocksy > Apariencia > Personalizar > Cabeceras” y funciona con el mismo sistema de condiciones que vimos en los Content Blocks: por tipo de contenido, URL específica, usuario logueado, idioma, etc.

Opciones avanzadas de cabecera: fija, transparente y condicional

Una de las grandes ventajas del constructor de cabeceras de Blocksy es que no solo puedes elegir los elementos que se muestran, sino también cómo y cuándo se comportan. En la parte izquierda del personalizador, encontrarás un panel con varias opciones avanzadas muy potentes:

Cabecera fija (Sticky Header)

Activando la “funcionalidad de efecto fijo”, puedes hacer que la cabecera permanezca visible mientras el usuario hace scroll. Esto es ideal para mejorar la navegación en webs con mucho contenido o si quieres mantener accesibles elementos clave como el menú o el carrito.

Blocksy incluso te permite elegir diferentes estilos de sticky según el dispositivo y mostrar/ocultar elementos según el scroll.

Puedes ajustar el desfase (offset) en píxeles, por si usas una barra superior flotante o quieres dejar espacio respecto al borde superior.

Cabecera transparente

Si quieres un diseño más visual (por ejemplo, con una imagen de fondo o un slider en la parte superior de la página), puedes activar la “funcionalidad de transparencia”.

Esto hace que la cabecera se muestre por encima del contenido, sin fondo sólido, permitiendo que se integre con la parte superior de la página. Muy útil en landing pages o páginas de inicio con banners visuales.

Y, por supuesto, puedes definir colores diferentes para cuando la cabecera está en modo transparente o cuando se vuelve fija.

En resumen

El constructor de cabeceras de Blocksy es, sin duda, uno de los más completos que puedes encontrar en un tema para WordPress. La versión gratuita ya te da mucha flexibilidad, pero con Blocksy Pro puedes llevarlo al siguiente nivel:

• Duplicación de elementos
• Cabeceras condicionales
• Más opciones de personalización

Y todo esto sin tocar código y sin recargar tu web con constructores lentos o plugins de terceros.