Cómo personalizar el encabezado de su sitio de WordPress con Beaver Themer

Muchos elementos forman un sitio web bien diseñado. El encabezado de su sitio de WordPress es particularmente importante porque es lo primero que los visitantes ven cuando llego a su sitio creando un encabezado personalizado, puede atraer la atención de sus visitantes y puede construir el reconocimiento de la marca. En esta publicación, le mostraremos por qué algunos encabezados conocidos son efectivos y explicaremos cómo puede crear fácilmente su propio encabezado personalizado con Beaver Themer. Cuáles son los encabezados personalizados (y por qué son importantes) el encabezado de su sitio de WordPress está en la parte superior de la página. Por lo general, contiene el nombre del sitio, el logotipo y otra información de identificación. En esta captura de pantalla del sitio web de Beaver Builder, hay una pancarta en la barra superior, luego la parte principal del encabezado con un logotipo y un menú de navegación.

El encabezado se muestra en cada página para que los visitantes lo ven varias veces. De hecho, el encabezado es a menudo el único elemento que sigue siendo consistente en total. En los sitios de WordPress, el tema activo controla casi todo sobre su encabezado. Puede hacer algunos cambios en el personalizador de WordPress, como cargar su propia imagen de encabezado, ajustar el esquema de color y controlar un poco el aspecto. Algunos temas tienen áreas específicas donde puede agregar el logotipo y otras marcas.
Sin embargo, el personalizador casi nunca le da control completo sobre el encabezado. Si desea crear un encabezado verdaderamente personalizado para ayudar a los visitantes a recordar su marca, necesita más control sobre la personalización. Ejemplos de sede eficiente de sitios web para analizar algunos ejemplos de alta calidad de sitios web personalizados. Ejemplifican cómo este elemento de diseño clave juega un papel importante en la marca, navegando por su sitio y más. WPBanper, siendo un recurso popular para todo lo relacionado con WordPress, no es sorprendente que WPBeginner tenga un encabezado excelente y profesional. El color naranja es una característica común en el sitio, lo que lo convierte en un significado fuerte para la marca del sitio: este encabezado también incluye un menú de navegación para que los usuarios puedan moverse fácilmente entre páginas, sin importar dónde se encuentren en el sitio. La parte inferior es una acción de acción prominente (CTA) que indica a los usuarios en la dirección de los recursos para principiantes de WP más populares. El encabezado para principiantes de WP incorpora su marca, mejora la experiencia del usuario (UX) a través de una navegación clara y accesible y genera conversiones con un CTA muy visible. Este ejemplo muestra que puede empacar mucho en un espacio pequeño. WP Engine Esta empresa de alojamiento de WordPress ofrece UX y marca a través de su encabezado. Muestra el logotipo de la marca y el motor WP visiblemente en el lado izquierdo. Al igual que el encabezado WPBeginner, tiene un menú de navegación simple y discreto:

Este encabezado ofrece otras características muy importantes. En primer lugar, tiene un enlace de conexión, para que los usuarios que lleguen a acceder fácilmente a sus cuentas. Entonces son las características de asistencia. Puede abrir una ventana de chat instantánea y hablar con un representante de atención al cliente. También puede acceder a una variedad de recursos de autoevaluación. Al colocar en el encabezado, estas funciones se pueden acceder fácilmente desde cada página. Estas características fortalecen la imagen del motor WP como un proveedor de host confiable, por lo que ambas mejoran el UX y fortalecen la identidad de la marca. Blondish.net Los encabezados pueden ser muy efectivos en sitios más pequeños. Blondish.net es el sitio web del desarrollador, diseñador, blogger y podcasters WordPress Nile Flores:

Con los colores brillantes, el logotipo de la estrella y las conexiones de navegación de llave, este es un encabezado memorable. El esquema de color prominente ofrece mucha personalidad al sitio. Si navegaba en la web para contratar a un desarrollador, este sitio definitivamente atraerá su atención. Un blog de la Copa de Jo de Lifestyle of Cup of Jo presenta un encabezado que se adapta perfectamente a su dueño, Joanna Goddard, quien aparece como una profesional relajada, accesible pero sofisticado. La tipografía clásica de su encabezado y el aspecto simplificado refleja un gran diseño e imaginación, como puede ver en esta captura de pantalla.
Lo que atrae su atención es la pequeña imagen de la primera “O” en el título del blog. Cambia a medida que avanza de una página a otra, reflejando el tema en cuestión. Por ejemplo, consulte cómo se presenta las rebanadas de citrusi cuando navegan en la página de alimentos:

Pequeños detalles como esta foto dinámica pueden crear una impresión instantánea del sitio y su creador incluso con un diseño minimalista. Amazon incluso los nombres de nombres más grandes usan encabezados para fortalecer su marca y alentar a los visitantes a convertir. Tome el encabezado de Amazon, por ejemplo: tiene el bien conocido logotipo de Amazon en la esquina superior izquierda y más menús de navegación. Hay un ícono de la canasta que cuenta la cantidad de artículos que agregó y no uno, sino dos CTA: pruebe Bolts y compre las ofertas del día.

Es mucho estar apretado en un espacio pequeño. Sin embargo, Amazon es conocido por proporcionar acceso a una amplia gama de productos, por lo que el diseño del encabezado se adapta a la imagen de la marca. Cómo personalizar el encabezado de su sitio de WordPress tradicionalmente para personalizar un tema, un desarrollador escribiría un código personalizado. Esto requiere habilidades de codificación avanzadas, especialmente con el requisito de que los sitios sean receptivos. Hoy en día, incluso si no tiene experiencia de codificación, puede continuar creando encabezados personalizados extremadamente efectivos usando Beaver Themer, nuestro complemento de Beaver Builder. Beaver Themer le brinda el poder de crear la sede personalizada utilizando el editor frontal de Beaver Builder, que normalmente se usa para contenido en el área de contenido.

Así es lo fácil que es. Esta es la plantilla para la apariencia del encabezado de Themer:

Puedes ver en la captura de pantalla cómo usa Themer Beaver Builder. La plantilla de encabezado tiene dos filas, con una barra superior, un módulo de título y un módulo de menú. Literalmente, puede hacer algunos clics y tiene las mismas dos líneas, pero qué diferencia:
Aquí está todo lo que hice para cambiar la plantilla: el fondo de la barra superior ha cambiado a un color oscuro e ha hecho el texto y los íconos blancos.
Se agregó una imagen de fondo y una segunda superpuesta de gradiente de color y se completó.

Moví el módulo de menú de la columna derecha debajo del título.


Estilos modificados y rotación en filas y módulos.
Además de los encabezados, puede crear modelos para sótanos, páginas de archivo y publicaciones únicas, páginas de búsqueda, 404 páginas y “piezas”, como ventas y modelos similares para WooCommerce, calendario de eventos y descargas digitales fáciles, si tienen esos complementos instalado.
El precio de Beaver Themer se establece en $ 147 por año, con un descuento de renovación del 40%. Debido a que es un suplemento, también necesitará Beaver Builder para que funcione. Pasos para crear el encabezado personalizado con Beaver Themer Aquí es cómo crea un Themer Buscador para su encabezado personalizado. Comience instalando y activando una versión premium del complemento Beaver Builder y el complemento de complementos Beaver Themer. Luego vaya al tablero de su sitio y haga clic en Beaver Builder> Aspectos temáticos en la barra lateral. Haga clic en Addirection nuevo en la parte superior de la pantalla. Como se muestra en esta captura de pantalla, cree un título para la sede (no se muestra en su página web o en la URL) y establezca el tipo como la aparición del tema y la apariencia como encabezado:
Haga clic en el botón de apariencia temática. Luego haga clic en Beaver Builder Iniciar, el botón azul en esta captura de pantalla.
Esto abre el editor de Beaver Builder con el encabezado del encabezado ya importado. Cambie su plantilla para crear su encabezado personalizado, como se muestra en la siguiente captura de pantalla. O puede eliminar una o ambas filas en la plantilla y puede comenzar desde cero. Recuerde que puede usar el editor receptivo del editor de Beaver Builder para ver cómo se verá el encabezado en dispositivos medios y pequeños y para cambiar la configuración que se aplica solo para un solo tamaño del dispositivo. Use solo el pedido rápido del teclado rápido mientras está en el editor para cambiar entre vistas de pantalla grande, media y pequeña. Una cosa que notará cuando abra las filas y los módulos de plantilla es que algunos de los campos usan una conexión de campo en lugar de texto estático. En este ejemplo, el “sitio de demostración” de texto que aparece en la pantalla se crea dinámicamente a partir de la conexión del campo del sitio del título, como se muestra en esta captura de pantalla.
Puede crear conexiones de campo haciendo clic en el signo más que aparece a la derecha para los campos elegibles, luego eligiendo uno de los valores dinámicos en la lista. En este caso, la conexión del título de campo del sitio extrae su valor de la configuración de WordPress encontrada para configuración> General> Título del Sitio, y la conexión de la URL del sitio extrae su valor de Configuración> Dirección general> Sitio (URL ). Puede introducir texto estático en esos campos, si lo prefiere, pero la ventaja de las conexiones de campo es que si alguna vez cambia su configuración de WordPress, los nuevos valores se mostrarán automáticamente en el encabezado. En otras ubicaciones, las conexiones de campo permiten cambiar el valor de acuerdo con la página en la que aparece la apariencia. Por ejemplo, si crea una sola publicación de publicación y la conexión del campo del módulo de título se establece en el título de publicación, el título cambia de acuerdo con la publicación que se muestra. Además de las conexiones de campo que vienen con Beaver Themer, puede conectarse a campos personalizados de WordPress, campos personalizados o campos de vainas personalizadas, por lo que sus opciones de personalización son casi ilimitadas. Cuando haya terminado de crear el encabezado, guarde los cambios en el editor haciendo clic en> Publicar. Haga clic en Editar la apariencia del tema en la barra de administración de WordPress en la parte superior de la página para volver a la configuración de su encabezado, como se muestra en esta captura de pantalla. Puede hacerlo pegajoso, lo que significa que permanecerá visible cuando los usuarios corran en la página. O puede hacerlo una superposición con un fondo transparente:
Elija dónde mostrar el encabezado configurando la ubicación en la que aparecerá, como se muestra en esta captura de pantalla: si elige todo el sitio, su encabezado será visible en todas sus publicaciones y páginas si desea ser más limitado, puede Elija ciertos tipos de publicaciones o páginas y puede agregar más reglas de ubicación. Si hay áreas en las que desea que su encabezado no sea visible, use una regla de exclusión. Seleccione el botón Agregar exclusión y especifique las ubicaciones en su sitio donde desea el encabezado. Para estas páginas excluidas, puede usar otro aspecto para la sede de la cabeza o mostrará el encabezado de la cabeza. ¡Tu encabezado personalizado está listo! También puede crear encabezados transparentes personalizados con Beaver Themer. Aquí hay un video tutorial que le presenta cómo hacer esto. Vea a continuación … Conclusión La marca y el diseño eficiente son esenciales para cualquier sitio. Su encabezado puede ayudarlo a establecer la identidad de su sitio y capturar la atención de los visitantes. Con Beaver Themer, puede crear rápidamente la sede personalizada para sitios web de WordPress, sin habilidades de codificación avanzadas. Puede probarlo gratis con nuestro sitio de demostración en vivo. ¿Tiene alguna pregunta sobre el uso de encabezados personalizados con Beaver Themer? ¡Háganos saber en la sección de comentarios!